ComponentSpecProvider Computes Digest

Author: camielvs

src/components/Editor/PipelineDetails.tsx

@@ -28,6 +28,7 @@ const PipelineDetails = () => {
   const {
     componentSpec,
     graphSpec,
+    digest,
     isComponentTreeValid,
     globalValidationIssues,
   } = useComponentSpec();
@@ -54,7 +55,6 @@ const PipelineDetails = () => {
     creationTime?: Date;
     modificationTime?: Date;
     createdBy?: string;
-    digest?: string;
   }>({});
 
   // Fetch file metadata on mount or when componentSpec.name changes
@@ -72,7 +72,6 @@ const PipelineDetails = () => {
           createdBy: file.componentRef.spec.metadata?.annotations?.author as
             | string
             | undefined,
-          digest: file.componentRef.digest,
         });
       }
     };
@@ -109,6 +108,11 @@ const PipelineDetails = () => {
     notify("Input value copied to clipboard", "success");
   };
 
+  const handleDigestCopy = () => {
+    navigator.clipboard.writeText(digest);
+    notify("Digest copied to clipboard", "success");
+  };
+
   if (!componentSpec) {
     return (
       <div className="flex flex-col gap-8 items-center justify-center h-full">
@@ -181,21 +185,16 @@ const PipelineDetails = () => {
       )}
 
       {/* Component Digest */}
-      {fileMeta.digest && (
+      {digest && (
         <div className="mb-2">
           <h3 className="text-md font-medium mb-1">Digest</h3>
           <Button
             className="bg-gray-100 border border-gray-300 rounded p-2 h-fit text-xs w-full text-left hover:bg-gray-200 active:bg-gray-300 transition cursor-pointer"
-            onClick={() => {
-              if (fileMeta.digest) {
-                navigator.clipboard.writeText(fileMeta.digest);
-                notify("Digest copied to clipboard", "success");
-              }
-            }}
+            onClick={handleDigestCopy}
             variant="ghost"
           >
             <span className="font-mono break-all w-full text-wrap">
-              {fileMeta.digest}
+              {digest}
             </span>
           </Button>
         </div>

src/providers/ComponentSpecProvider.tsx

@@ -1,5 +1,12 @@
 import equal from "fast-deep-equal";
-import { type ReactNode, useCallback, useMemo, useRef, useState } from "react";
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 import { type UndoRedo, useUndoRedo } from "@/hooks/useUndoRedo";
 import { loadPipelineByName } from "@/services/pipelineService";
@@ -28,6 +35,7 @@ import {
 import {
   type ComponentReferenceWithSpec,
   componentSpecToYaml,
+  generateDigest,
   writeComponentToFileListFromText,
 } from "../utils/componentStore";
 
@@ -47,6 +55,7 @@ interface ComponentSpecContextType {
   graphSpec: GraphSpec;
   currentGraphSpec: GraphSpec;
   currentSubgraphSpec: ComponentSpec;
+  digest: string;
   isLoading: boolean;
   isValid: boolean;
   errors: ValidationError[];
@@ -80,6 +89,7 @@ export const ComponentSpecProvider = ({
   const [componentSpec, setComponentSpec] = useState<ComponentSpec>(
     spec ?? EMPTY_GRAPH_COMPONENT_SPEC,
   );
+  const [digest, setDigest] = useState<string>("");
 
   const [isLoading, setIsLoading] = useState(!!spec);
 
@@ -118,6 +128,24 @@ export const ComponentSpecProvider = ({
   );
   const isComponentTreeValid = globalValidationIssues.length === 0;
 
+  useEffect(() => {
+    let isCancelled = false;
+
+    const computeDigest = async () => {
+      const text = componentSpecToYaml(componentSpec);
+      const newDigest = await generateDigest(text);
+      if (!isCancelled) {
+        setDigest(newDigest);
+      }
+    };
+
+    computeDigest();
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [componentSpec]);
+
   const clearComponentSpec = useCallback(() => {
     setComponentSpec(EMPTY_GRAPH_COMPONENT_SPEC);
     setIsLoading(false);
@@ -239,6 +267,7 @@ export const ComponentSpecProvider = ({
       graphSpec,
       currentGraphSpec,
       currentSubgraphSpec,
+      digest,
       isLoading,
       isValid,
       errors,
@@ -262,6 +291,7 @@ export const ComponentSpecProvider = ({
       graphSpec,
       currentGraphSpec,
       currentSubgraphSpec,
+      digest,
       isLoading,
       isValid,
       errors,