feat(canvas): integrate job spec update api

Author: leoank

canvas/app/dashboard/project/id/[id]/view/hooks/useParsePathRecordToArray.ts

@@ -11,6 +11,7 @@ export type TPathRecord = {
   name: string;
   type: string;
   value: string;
+  raw: TSpecPathRecord;
 };
 
 export type TUseParsePathRecordToArrayReturn = TPathRecord[];
@@ -36,6 +37,7 @@ export function useParsePathRecordToArray(
         name,
         type,
         value: path || projectWorkspaceURI,
+        raw: record,
       });
     }
 

canvas/app/dashboard/project/id/[id]/view/jobs/job-input-edit.tsx

@@ -1,49 +1,94 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { ActionButton } from "@/components/custom/action-button";
-import { Check, XIcon } from "lucide-react";
-import { JobInputUploadFile } from "./job-input-upload-file";
+import { Check, Upload, XIcon } from "lucide-react";
+// import { JobInputUploadFile } from "./job-input-upload-file";
 import { ProjectJobInputEditWarningModal } from "./job-input-edit-warning-modal";
 import { PathFieldWithAction } from "@/components/custom/path-filed-with-actions";
+import { useToast } from "@/components/ui/use-toast";
+import { TJob, useUpdateJob } from "@/services/job";
+import { FeatureNotImplementedModal } from "@/components/custom/feature-not-implemented-modal";
 
 export type TProjectJobInputProps = {
+  job: TJob;
   inputPath: string;
   inputName: string;
   onInputPathChange: (value: string) => void;
   onRequestView: () => void;
 };
 
 export function ProjectJobInputEdit(props: TProjectJobInputProps) {
-  const { onRequestView, inputName, inputPath, onInputPathChange } = props;
+  const { onRequestView, inputName, inputPath, job, onInputPathChange } = props;
   const [isWarningModalOpen, setIsWarningModalOpen] = React.useState(false);
   const oldValue = React.useRef(inputPath);
+  const { toast } = useToast();
 
   // To upload new file.
   const [inputFile, setInputFile] = React.useState<File | null>(null);
 
-  const handleOnCloseEditingModeClick = React.useCallback(() => {
+  const handleOnErrorSavingChanges = React.useCallback(() => {
+    toast({
+      title: "Unable to save changes. Please try again later.",
+      variant: "destructive",
+    });
+  }, [toast]);
+
+  const { isPending, mutate: updateJob } = useUpdateJob({
+    onError: handleOnErrorSavingChanges,
+    onSuccess: onRequestView,
+  });
+
+  const hasAnyFieldUpdated = useMemo(() => {
     if (inputFile) {
-      // If input file is not null, we have some files to upload.
-      // Before closing edit mode, we need to show the warning.
-      setIsWarningModalOpen(true);
-      return;
+      // If input file is not null, meaning we have updated input file.
+      return true;
     }
 
     if (oldValue.current !== inputPath) {
-      // Input has been changed, so we need to show the warning,
-      // before closing the edit mode.
+      // Input has been changed.
+      return true;
+    }
+  }, [inputFile, inputPath]);
+
+  const handleOnCloseEditingModeClick = React.useCallback(() => {
+    if (hasAnyFieldUpdated) {
       setIsWarningModalOpen(true);
       return;
     }
 
     onRequestView();
-  }, [inputFile, onRequestView, inputPath]);
+  }, [hasAnyFieldUpdated, onRequestView]);
 
   const handleOnWarningModalPrimaryActionClick = React.useCallback(() => {
     setInputFile(null);
     onInputPathChange(oldValue.current);
     onRequestView();
   }, [onInputPathChange, onRequestView]);
 
+  const handleOnSaveChanges = React.useCallback(() => {
+    if (!hasAnyFieldUpdated) {
+      // if no filed has been updated, then we don't have any thing to
+      // updated, hence closing the edit view.
+      onRequestView();
+    }
+
+    const specInputs = [...job.spec.inputs].map((input) => {
+      if (input.name === inputName) {
+        return { ...input, path: inputPath };
+      }
+      return input;
+    });
+
+    updateJob({
+      job: {
+        ...job,
+        spec: {
+          ...job.spec,
+          inputs: [...specInputs],
+        },
+      },
+    });
+  }, [hasAnyFieldUpdated, job, updateJob, onRequestView, inputName, inputPath]);
+
   return (
     <>
       <PathFieldWithAction
@@ -61,10 +106,18 @@ export function ProjectJobInputEdit(props: TProjectJobInputProps) {
           {
             id: "upload-file",
             children: (
-              <JobInputUploadFile
-                inputFile={inputFile}
-                updateInputFile={setInputFile}
-              />
+              <FeatureNotImplementedModal featureName="Upload File">
+                <ActionButton
+                  message="Upload File"
+                  icon={<Upload />}
+                ></ActionButton>
+                {/* TODO: Implement Upload input file feature.
+                <JobInputUploadFile
+                  inputFile={inputFile}
+                  updateInputFile={setInputFile}
+                /> 
+                */}
+              </FeatureNotImplementedModal>
             ),
           },
           {
@@ -82,7 +135,9 @@ export function ProjectJobInputEdit(props: TProjectJobInputProps) {
             id: "save-changes",
             children: (
               <ActionButton
-                onClick={onRequestView}
+                onClick={handleOnSaveChanges}
+                isLoading={isPending}
+                disabled={!hasAnyFieldUpdated}
                 icon={<Check />}
                 message="Save changes"
                 key="save-changes"

canvas/app/dashboard/project/id/[id]/view/jobs/job-input.tsx

@@ -2,13 +2,15 @@ import React from "react";
 import { ProjectJobInputView } from "./job-input-view";
 import { ProjectJobInputEdit } from "./job-input-edit";
 import { TPathRecord } from "../hooks/useParsePathRecordToArray";
+import { TJob } from "@/services/job";
 
 export type TProjectJobInputProps = {
   input: TPathRecord;
+  job: TJob;
 };
 
 export function ProjectJobInput(props: TProjectJobInputProps) {
-  const { input } = props;
+  const { input, job } = props;
   const [isEditing, setIsEditing] = React.useState(false);
   const [inputPath, setInputPath] = React.useState(input.value);
 
@@ -24,6 +26,7 @@ export function ProjectJobInput(props: TProjectJobInputProps) {
     <>
       {isEditing ? (
         <ProjectJobInputEdit
+          job={job}
           inputName={input.name}
           inputPath={inputPath}
           onInputPathChange={setInputPath}

canvas/app/dashboard/project/id/[id]/view/jobs/job-inputs.tsx

@@ -19,7 +19,7 @@ export function ProjectJobInputs(props: TProjectJobInputsProps) {
       )}
       <div className="space-y-2 my-2">
         {inputs.map((input) => (
-          <ProjectJobInput input={input} key={input.id} />
+          <ProjectJobInput job={job} input={input} key={input.id} />
         ))}
       </div>
     </div>

canvas/components/custom/action-button.tsx

@@ -38,12 +38,14 @@ export const ActionButton = React.forwardRef<
       {...rest}
     >
       <span className={clsx(isLoading && "animate-spin")}>{_icon}</span>
-      <span
-        {...childSpan}
-        className={clsx("md:hidden lg:inline", childSpan?.className)}
-      >
-        {children}
-      </span>
+      {children && (
+        <span
+          {...childSpan}
+          className={clsx("md:hidden lg:inline", childSpan?.className)}
+        >
+          {children}
+        </span>
+      )}
     </ButtonWithTooltip>
   );
 });

canvas/components/custom/path-filed-with-actions.tsx

@@ -5,7 +5,7 @@ import clsx from "clsx";
 import { WithTooltip } from "./with-tooltip";
 
 export type TPathFiledWithActionsProps = {
-  pathRecord: TPathRecord;
+  pathRecord: Omit<TPathRecord, "raw">;
   /**
    * If true then use span to show the path value,
    * else use input component.

canvas/services/job.ts

@@ -93,8 +93,23 @@ export type TUpdateJobOptions = {
   job: TJob;
 };
 
-export function updateJob(options: TUpdateJobOptions) {
+export function updateJob(options: TUpdateJobOptions): Promise<TJob> {
   const { job } = options;
 
   return api.put({ ...job }, "/job").json();
 }
+
+export type TUseUpdateJobOptions = {
+  onError: (error?: unknown) => void;
+  onSuccess: (data: TJob) => void;
+};
+
+export function useUpdateJob(options: TUseUpdateJobOptions) {
+  const { onError, onSuccess } = options;
+
+  return useMutation({
+    mutationFn: updateJob,
+    onError,
+    onSuccess,
+  });
+}