ComponentSpecProvider Computes Digest

Author: camielvs

src/components/Editor/PipelineDetails.tsx

@@ -25,7 +25,8 @@ import { getOutputConnectedDetails } from "./utils/getOutputConnectedDetails";
 
 const PipelineDetails = () => {
   const { setContent } = useContextPanel();
-  const { componentSpec, graphSpec, isValid, errors } = useComponentSpec();
+  const { componentSpec, graphSpec, digest, isValid, errors } =
+    useComponentSpec();
 
   const notify = useToastNotification();
 
@@ -172,21 +173,21 @@ 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);
+              if (digest) {
+                navigator.clipboard.writeText(digest);
                 notify("Digest copied to clipboard", "success");
               }
             }}
             variant="ghost"
           >
             <span className="font-mono break-all w-full text-wrap">
-              {fileMeta.digest}
+              {digest}
             </span>
           </Button>
         </div>

src/providers/ComponentSpecProvider.tsx

@@ -1,7 +1,15 @@
 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 { generateDigest } from "@/services/componentService";
 import { loadPipelineByName } from "@/services/pipelineService";
 import { USER_PIPELINES_LIST_NAME } from "@/utils/constants";
 import { prepareComponentRefForEditor } from "@/utils/prepareComponentRefForEditor";
@@ -42,6 +50,7 @@ interface ComponentSpecContextType {
   graphSpec: GraphSpec;
   currentGraphSpec: GraphSpec;
   currentSubgraphSpec: ComponentSpec;
+  digest: string;
   isLoading: boolean;
   isValid: boolean;
   errors: string[];
@@ -73,6 +82,7 @@ export const ComponentSpecProvider = ({
   const [componentSpec, setComponentSpec] = useState<ComponentSpec>(
     spec ?? EMPTY_GRAPH_COMPONENT_SPEC,
   );
+  const [digest, setDigest] = useState<string>("");
 
   const [isLoading, setIsLoading] = useState(!!spec);
 
@@ -105,6 +115,16 @@ export const ComponentSpecProvider = ({
     [currentSubgraphSpec, isRootSubgraph],
   );
 
+  useEffect(() => {
+    const computeDigest = async () => {
+      const text = componentSpecToYaml(componentSpec);
+      const newDigest = await generateDigest(text);
+      setDigest(newDigest);
+    };
+
+    computeDigest();
+  }, [componentSpec]);
+
   const clearComponentSpec = useCallback(() => {
     setComponentSpec(EMPTY_GRAPH_COMPONENT_SPEC);
     setIsLoading(false);
@@ -226,6 +246,7 @@ export const ComponentSpecProvider = ({
       graphSpec,
       currentGraphSpec,
       currentSubgraphSpec,
+      digest,
       isLoading,
       isValid,
       errors,
@@ -247,6 +268,7 @@ export const ComponentSpecProvider = ({
       graphSpec,
       currentGraphSpec,
       currentSubgraphSpec,
+      digest,
       isLoading,
       isValid,
       errors,