split form when edit data connector in two options, one to edit mount properties and the other to edit the connection info

Author: andre-code

client/src/features/dataConnectorsV2/components/DataConnectorActions.tsx

@@ -367,6 +367,7 @@ function DataConnectorActionsInner({
   toggleView,
 }: DataConnectorActionsProps) {
   const { id: dataConnectorId } = dataConnector;
+  const [initialStep, setInitialStep] = useState(2);
   const { permissions } = useDataConnectorPermissions({ dataConnectorId });
 
   const { project_id: projectId } = dataConnectorLink ?? {};
@@ -409,6 +410,11 @@ function DataConnectorActionsInner({
     setIsDeleteOpen((open) => !open);
   }, []);
   const toggleEdit = useCallback(() => {
+    setInitialStep(3);
+    setIsEditOpen((open) => !open);
+  }, []);
+  const toggleEditConnection = useCallback(() => {
+    setInitialStep(2);
     setIsEditOpen((open) => !open);
   }, []);
   const toggleUnlink = useCallback(() => {
@@ -424,7 +430,17 @@ function DataConnectorActionsInner({
             content: (
               <>
                 <Pencil className={cx("bi", "me-1")} />
-                Edit
+                Edit properties
+              </>
+            ),
+          },
+          {
+            key: "data-connector-edit-connection",
+            onClick: toggleEditConnection,
+            content: (
+              <>
+                <Pencil className={cx("bi", "me-1")} />
+                Edit Connection Information
               </>
             ),
           },
@@ -519,6 +535,7 @@ function DataConnectorActionsInner({
         isOpen={isEditOpen}
         namespace={dataConnector.namespace}
         toggle={toggleEdit}
+        initialStep={initialStep}
       />
       <DataConnectorCredentialsModal
         dataConnector={dataConnector}

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

@@ -75,12 +75,6 @@ export default function DataConnectorModalBody({
   if (schemata.length < 1) return <Loader />;
   return (
     <>
-      {!flatDataConnector.dataConnectorId && (
-        <p className="text-body-secondary">
-          Add published datasets from data repositories for use in your project.
-          Or, connect to cloud storage to read and write custom data.
-        </p>
-      )}
       <AddOrEditDataConnector
         storageSecrets={storageSecrets}
         project={project}
@@ -127,6 +121,12 @@ function AddOrEditDataConnector({
   if (CloudStorageContentByStep)
     return (
       <>
+        {!flatDataConnector.dataConnectorId && cloudStorageState.step <= 1 && (
+          <p className="text-body-secondary">
+            Add published datasets from data repositories for use in your
+            project. Or, connect to cloud storage to read and write custom data.
+          </p>
+        )}
         <div className={cx("d-flex", "justify-content-end")}>
           <AddStorageAdvancedToggle
             state={cloudStorageState}
@@ -290,7 +290,7 @@ export function DataConnectorMount() {
 
   return (
     <form className="form-rk-green" data-cy="data-connector-edit-mount">
-      <h5>Final details</h5>
+      <h5>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/index.tsx

@@ -53,6 +53,7 @@ export function DataConnectorModalBodyAndFooter({
   namespace,
   project,
   toggle,
+  initialStep,
 }: DataConnectorModalProps) {
   const dataConnectorId = dataConnector?.id ?? null;
   // Fetch available schema when users open the modal
@@ -80,7 +81,7 @@ export function DataConnectorModalBodyAndFooter({
       dataConnector != null
         ? {
             ...EMPTY_CLOUD_STORAGE_STATE,
-            step: 2,
+            step: initialStep ?? 2,
             completedSteps: CLOUD_STORAGE_TOTAL_STEPS,
           }
         : EMPTY_CLOUD_STORAGE_STATE;
@@ -91,7 +92,7 @@ export function DataConnectorModalBodyAndFooter({
         schemata: schemata ?? [],
       })
     );
-  }, [dataConnector, dispatch, namespace, project, schemata]);
+  }, [dataConnector, dispatch, namespace, project, schemata, initialStep]);
 
   // Visual elements
   return (
@@ -145,13 +146,15 @@ interface DataConnectorModalProps {
   namespace?: string;
   project?: Project;
   toggle: () => void;
+  initialStep?: number;
 }
 export default function DataConnectorModal({
   dataConnector = null,
   isOpen,
   namespace,
   project,
   toggle: originalToggle,
+  initialStep,
 }: DataConnectorModalProps) {
   const dataConnectorId = dataConnector?.id ?? null;
   const { permissions, isLoading: isLoadingPermissions } =
@@ -191,6 +194,7 @@ export default function DataConnectorModal({
                 namespace,
                 project,
                 toggle,
+                initialStep,
               }}
             />
           }

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>Options</h5>
+      <h5>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.

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

@@ -48,7 +48,9 @@ export default function AddStorageBreadcrumbNavbar({
       return (
         <BreadcrumbItem active={active} key={stepNumber}>
           {active ? (
-            <>{mapStepToName[stepNumber]}</>
+            <span className={active && "fw-bold"}>
+              {mapStepToName[stepNumber]}
+            </span>
           ) : (
             <>
               <Button
@@ -80,6 +82,6 @@ export default function AddStorageBreadcrumbNavbar({
 const mapStepToName: { [key: number]: string } = {
   0: "Advanced configuration",
   1: "Storage",
-  2: "Options",
+  2: "Connection",
   3: "Mount",
 };

tests/cypress/e2e/projectV2setup.spec.ts

@@ -360,7 +360,6 @@ describe("Set up data connectors", () => {
     cy.getDataCy("project-data-controller-mode-link").click();
     cy.get("#data-connector-identifier").type("user1-uuid/example-storage");
     cy.getDataCy("link-data-connector-button").click();
-    cy.wait("@getDataConnectorByNamespaceAndSlugNotFound");
     cy.contains(
       "Data connector with identifier 'user1-uuid/example-storage' does not exist or you do not have access to it."
     ).should("be.visible");