Split edit data connector form

Author: andre-code

client/src/features/dataConnectorsV2/components/DataConnectorModal/DataConnectorModalBody.tsx

@@ -153,12 +153,14 @@ function AddOrEditDataConnector({
   if (DataConnectorContentByStep)
     return (
       <>
-        <div className={cx("d-flex", "justify-content-end")}>
-          <AddStorageAdvancedToggle
-            state={cloudStorageState}
-            setState={setState}
-          />
-        </div>
+        {!flatDataConnector.dataConnectorId && (
+          <div className={cx("d-flex", "justify-content-end")}>
+            <AddStorageAdvancedToggle
+              state={cloudStorageState}
+              setState={setState}
+            />
+          </div>
+        )}
         <DataConnectorContentByStep
           storageSecrets={storageSecrets}
           project={project}
@@ -290,7 +292,7 @@ export function DataConnectorMount() {
 
   return (
     <form className="form-rk-green" data-cy="data-connector-edit-mount">
-      <h5>Mount Properties</h5>
+      <h5 className="fw-bold">Mount properties</h5>
       <p>We need a few more details to mount your data properly.</p>
 
       <div className="mb-3">

client/src/features/dataConnectorsV2/components/DataConnectorModal/DataConnectorModalFooter.tsx

@@ -394,7 +394,6 @@ interface DataConnectorEditFooterProps
 function DataConnectorEditFooter({
   dataConnector,
   isOpen,
-  toggle,
 }: DataConnectorEditFooterProps) {
   const dataConnectorId = dataConnector.id;
   const dispatch = useAppDispatch();
@@ -410,18 +409,6 @@ function DataConnectorEditFooter({
     success,
   } = useAppSelector((state) => state.dataConnectorFormSlice);
 
-  // Enhanced setters
-  const setStateSafe = useCallback(
-    (newState: Partial<AddCloudStorageState>) => {
-      dispatch(
-        dataConnectorFormSlice.actions.setCloudStorageState({
-          cloudStorageState: newState,
-        })
-      );
-    },
-    [dispatch]
-  );
-
   // Mutations
   const [updateDataConnector, updateResult] =
     usePatchDataConnectorsByDataConnectorIdMutation();
@@ -541,12 +528,6 @@ function DataConnectorEditFooter({
           <RtkOrNotebooksError error={actionError} />
         </div>
       )}
-      <div className={cx("d-flex", "flex-grow-1")}>
-        <AddStorageBreadcrumbNavbar
-          state={cloudStorageState}
-          setState={setStateSafe}
-        />
-      </div>
       {!isResultLoading && !success && (
         <Button
           color="outline-danger"
@@ -560,9 +541,6 @@ function DataConnectorEditFooter({
           Reset
         </Button>
       )}
-      {!isResultLoading && (
-        <DataConnectorModalBackButton success={success} toggle={toggle} />
-      )}
       {!success && (
         <DataConnectorModalContinueButton
           addButtonDisableReason={addButtonDisableReason}

client/src/features/dataConnectorsV2/components/DataConnectorModal/dataConnectorModalButtons.tsx

@@ -172,6 +172,7 @@ export function DataConnectorModalContinueButton({
           continueId="add-data-connector-continue"
           step={cloudStorageState.step}
           testId="test-data-connector"
+          editDataConnector={addOrEditStorage}
         />
         {disableContinueButton && (
           <UncontrolledTooltip
@@ -262,11 +263,13 @@ interface TestConnectionAndContinueButtonsProps
   continueId: string;
   step: number;
   testId: string;
+  editDataConnector?: () => void;
 }
 function TestConnectionAndContinueButtons({
   continueId,
   step,
   testId,
+  editDataConnector,
 }: TestConnectionAndContinueButtonsProps) {
   const dispatch = useAppDispatch();
   const { flatDataConnector, isActionOngoing, validationResultIsCurrent } =
@@ -367,59 +370,96 @@ function TestConnectionAndContinueButtons({
 
   const buttonContinueId = `${continueId}-button`;
   const divContinueId = `${continueId}-div`;
-  const continueContent = validationResult.isSuccess ? (
-    <>
-      Continue <ChevronRight className="bi" />
-    </>
-  ) : validationResult.isError ? (
-    <>
-      Skip Test <ChevronRight className="bi" />
-    </>
+  const dataConnectorId = flatDataConnector.dataConnectorId;
+  const continueContent =
+    dataConnectorId ? null : validationResult.isSuccess ? (
+      <>
+        Continue <ChevronRight className="bi" />
+      </>
+    ) : validationResult.isError ? (
+      <>
+        Skip Test <ChevronRight className="bi" />
+      </>
+    ) : null;
+
+  const updateContent = dataConnectorId ? (
+    validationResult.isSuccess ? (
+      <>
+        <PencilSquare className={cx("bi", "me-1")} /> Update connector
+      </>
+    ) : (
+      <>
+        <PencilSquare className={cx("bi", "me-1")} /> Skip Test and Save
+      </>
+    )
   ) : null;
   const continueColorClass = validationResult.isSuccess
     ? "btn-primary"
     : validationResult.isError
     ? "btn-outline-danger"
     : "btn-primary";
-  const continueSection =
-    !validationResult.isError && !validationResult.isSuccess ? null : (
+  const continueSection = dataConnectorId ? null : !validationResult.isError &&
+    !validationResult.isSuccess ? null : (
+    <div id={divContinueId} className={cx("d-inline-block", "ms-2")}>
+      <Button
+        color=""
+        id={buttonContinueId}
+        data-cy={buttonContinueId}
+        className={cx(continueColorClass)}
+        disabled={validationResult.isLoading}
+        onClick={() => {
+          dispatch(
+            dataConnectorFormSlice.actions.setValidationResult({
+              validationResult: {
+                isSuccess: validationResult.isSuccess,
+                isError: validationResult.isError,
+                error: validationResult.error,
+              },
+            })
+          );
+          if (validationResult.isError || validationResult.isSuccess) {
+            validationResult.reset();
+          }
+          dispatch(
+            dataConnectorFormSlice.actions.setCloudStorageState({
+              cloudStorageState: {
+                step: step === 0 ? CLOUD_STORAGE_TOTAL_STEPS : step + 1,
+                completedSteps:
+                  step === 0 ? CLOUD_STORAGE_TOTAL_STEPS - 1 : step,
+              },
+            })
+          );
+        }}
+      >
+        {continueContent}
+      </Button>
+      {validationResult.isError && (
+        <UncontrolledTooltip placement="top" target={divContinueId}>
+          The connection is not working as configured. You can make changes and
+          try again, or skip and continue.
+        </UncontrolledTooltip>
+      )}
+    </div>
+  );
+
+  const saveSection =
+    !dataConnectorId || !editDataConnector ? null : !validationResult.isError &&
+      !validationResult.isSuccess ? null : (
       <div id={divContinueId} className={cx("d-inline-block", "ms-2")}>
         <Button
           color=""
           id={buttonContinueId}
           data-cy={buttonContinueId}
           className={cx(continueColorClass)}
           disabled={validationResult.isLoading}
-          onClick={() => {
-            dispatch(
-              dataConnectorFormSlice.actions.setValidationResult({
-                validationResult: {
-                  isSuccess: validationResult.isSuccess,
-                  isError: validationResult.isError,
-                  error: validationResult.error,
-                },
-              })
-            );
-            if (validationResult.isError || validationResult.isSuccess) {
-              validationResult.reset();
-            }
-            dispatch(
-              dataConnectorFormSlice.actions.setCloudStorageState({
-                cloudStorageState: {
-                  step: step === 0 ? CLOUD_STORAGE_TOTAL_STEPS : step + 1,
-                  completedSteps:
-                    step === 0 ? CLOUD_STORAGE_TOTAL_STEPS - 1 : step,
-                },
-              })
-            );
-          }}
+          onClick={() => editDataConnector()}
         >
-          {continueContent}
+          {updateContent}
         </Button>
         {validationResult.isError && (
           <UncontrolledTooltip placement="top" target={divContinueId}>
             The connection is not working as configured. You can make changes
-            and try again, or skip and continue.
+            and try again, or skip and save.
           </UncontrolledTooltip>
         )}
       </div>
@@ -429,6 +469,7 @@ function TestConnectionAndContinueButtons({
     <div className="d-inline-block">
       {testConnectionSection}
       {continueSection}
+      {saveSection}
     </div>
   );
 }

client/src/features/project/components/cloudStorage/AddOrEditCloudStorage.tsx

@@ -1008,7 +1008,7 @@ export function AddStorageOptions({
 
   return (
     <form className="form-rk-green" data-cy="cloud-storage-edit-options">
-      <h5>Connection information</h5>
+      <h5 className="fw-bold">Connection information</h5>
       <p>
         Please fill in all the options required to connect to your storage. Mind
         that the specific fields required depend on your storage configuration.