handle update

Author: ciyer

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

@@ -31,9 +31,7 @@ import type {
   AddCloudStorageState,
   CloudStorageDetails,
   CloudStorageSchema,
-  CredentialSaveStatus,
 } from "../../../project/components/cloudStorage/projectCloudStorage.types";
-import { AddCloudStorageSuccessAlert } from "../../../project/components/cloudStorage/cloudStorageModalComponents";
 import { getSchemaOptions } from "../../../project/utils/projectCloudStorage.utils";
 import {
   AddStorageAdvanced,
@@ -46,6 +44,9 @@ import { slugFromTitle } from "../../../../utils/helpers/HelperFunctions";
 import type { CloudStorageSecretGet } from "../../../projectsV2/api/storagesV2.api";
 
 import { type DataConnectorFlat } from "../dataConnector.utils";
+import DataConnectorModalResult, {
+  type CredentialSaveStatus,
+} from "./DataConnectorModalResult";
 import DataConnectorSaveCredentialsInfo from "./DataConnectorSaveCredentialsInfo";
 
 interface AddOrEditDataConnectorProps {
@@ -59,7 +60,7 @@ interface AddOrEditDataConnectorProps {
 }
 
 interface DataConnectorModalBodyProps {
-  addResultStorageName: string | undefined;
+  dataConnectorName: string | undefined;
   flatDataConnector: DataConnectorFlat;
   credentialSaveStatus: CredentialSaveStatus;
   redraw: boolean;
@@ -77,7 +78,7 @@ interface DataConnectorModalBodyProps {
 type SchemaQueryResult = ReturnType<typeof useGetCloudStorageSchemaQuery>;
 
 export default function DataConnectorModalBody({
-  addResultStorageName,
+  dataConnectorName,
   flatDataConnector,
   credentialSaveStatus,
   redraw,
@@ -97,12 +98,10 @@ export default function DataConnectorModalBody({
   if (redraw) return <Loader />;
   if (success) {
     return (
-      <AddCloudStorageSuccessAlert
-        {...{
-          addResultStorageName,
-          storageId: flatDataConnector.dataConnectorId ?? null,
-          credentialSaveStatus,
-        }}
+      <DataConnectorModalResult
+        alreadyExisted={!!flatDataConnector.dataConnectorId}
+        credentialSaveStatus={credentialSaveStatus}
+        dataConnectorName={dataConnectorName}
       />
     );
   }
@@ -222,6 +221,8 @@ export function DataConnectorMount({
     mode: "onChange",
     defaultValues: {
       name: flatDataConnector.name || "",
+      namespace: flatDataConnector.namespace || "",
+      slug: flatDataConnector.slug || "",
       mountPoint:
         flatDataConnector.mountPoint ||
         `${flatDataConnector.schema?.toLowerCase()}`,

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

@@ -0,0 +1,72 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { SuccessAlert } from "../../../../components/Alert";
+export type CredentialSaveStatus = "failure" | "none" | "success" | "trying";
+
+interface DataConnectorModalResultProps {
+  alreadyExisted: boolean;
+  credentialSaveStatus: CredentialSaveStatus;
+  dataConnectorName: string | undefined;
+}
+
+export default function DataConnectorModalResult({
+  dataConnectorName,
+  credentialSaveStatus,
+  alreadyExisted,
+}: DataConnectorModalResultProps) {
+  if (credentialSaveStatus == "trying")
+    return (
+      <SuccessAlert dismissible={false} timeout={0}>
+        <p className="mb-0">
+          The data connector {dataConnectorName} has been successfully{" "}
+          {alreadyExisted ? "updated" : "added"}; saving the credentials...
+        </p>
+      </SuccessAlert>
+    );
+
+  if (credentialSaveStatus == "success")
+    return (
+      <SuccessAlert dismissible={false} timeout={0}>
+        <p className="mb-0">
+          The data connector {dataConnectorName} has been successfully{" "}
+          {alreadyExisted ? "updated" : "added"}, along with its credentials.
+        </p>
+      </SuccessAlert>
+    );
+  if (credentialSaveStatus == "failure")
+    return (
+      <SuccessAlert dismissible={false} timeout={0}>
+        <p className="mb-0">
+          The data connector {dataConnectorName} has been successfully{" "}
+          {alreadyExisted ? "updated" : "added"},{" "}
+          <b>but the credentials were not saved</b>. You can re-enter them and
+          save by editing the storage.
+        </p>
+      </SuccessAlert>
+    );
+
+  return (
+    <SuccessAlert dismissible={false} timeout={0}>
+      <p className="mb-0">
+        The data connector {dataConnectorName} has been successfully{" "}
+        {alreadyExisted ? "updated" : "added"}.
+      </p>
+    </SuccessAlert>
+  );
+}

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

@@ -37,7 +37,6 @@ import {
 import {
   AddCloudStorageState,
   CloudStorageDetailsOptions,
-  CredentialSaveStatus,
   TestCloudStorageConnectionParams,
 } from "../../../project/components/cloudStorage/projectCloudStorage.types";
 
@@ -62,6 +61,7 @@ import {
   DataConnectorConnectionTestResult,
 } from "./dataConnectorModalButtons";
 import DataConnectorModalBody from "./DataConnectorModalBody";
+import type { CredentialSaveStatus } from "./DataConnectorModalResult";
 import {
   dataConnectorPostFromFlattened,
   dataConnectorToFlattened,
@@ -368,7 +368,8 @@ export default function DataConnectorModal({
   const isModifyResultLoading = updateResult.isLoading;
   const addResultError = createResult.error;
   const modifyResultError = updateResult.error;
-  const addResultStorageName = createResult?.data?.name;
+  const dataConnectorName =
+    createResult?.data?.name || updateResult?.data?.name;
 
   const disableAddButton =
     isAddResultLoading ||
@@ -417,7 +418,7 @@ export default function DataConnectorModal({
 
       <ModalBody data-cy="cloud-storage-edit-body">
         <DataConnectorModalBody
-          addResultStorageName={addResultStorageName}
+          dataConnectorName={dataConnectorName}
           flatDataConnector={flatDataConnector}
           credentialSaveStatus={credentialSaveStatus}
           redraw={redraw}

tests/cypress/e2e/groupV2.spec.ts

@@ -273,7 +273,8 @@ describe("Work with group data connectors", () => {
       .listGroupV2Members()
       .listProjectV2ByNamespace()
       .listDataConnectors({ namespace: "test-2-group-v2" })
-      .postDataConnector();
+      .testCloudStorage({ success: false })
+      .postDataConnector({ namespace: "test-2-group-v2" });
     cy.contains("test 2 group-v2").should("be.visible").click();
     cy.wait("@readGroupV2");
     cy.contains("public-storage").should("be.visible");
@@ -297,7 +298,36 @@ describe("Work with group data connectors", () => {
     cy.wait("@postDataConnector");
     cy.getDataCy("cloud-storage-edit-body").should(
       "contain.text",
-      "The storage example-storage has been successfully added."
+      "The data connector example-storage has been successfully added."
+    );
+    cy.getDataCy("data-connector-edit-close-button").click();
+    cy.wait("@getDataConnectors");
+  });
+
+  it("edit a group data connector", () => {
+    fixtures
+      .getStorageSchema({ fixture: "cloudStorage/storage-schema-s3.json" })
+      .readGroupV2()
+      .readGroupV2Namespace()
+      .listGroupV2Members()
+      .listProjectV2ByNamespace()
+      .listDataConnectors({ namespace: "test-2-group-v2" })
+      .testCloudStorage({ success: true })
+      .patchDataConnector({ namespace: "test-2-group-v2" });
+    cy.contains("test 2 group-v2").should("be.visible").click();
+    cy.wait("@readGroupV2");
+    cy.contains("public-storage").should("be.visible").click();
+    cy.getDataCy("data-connector-edit").should("be.visible").click();
+    // Fill out the details
+    cy.getDataCy("test-data-connector-button").click();
+    cy.getDataCy("add-data-connector-continue-button")
+      .contains("Continue")
+      .click();
+    cy.getDataCy("data-connector-edit-update-button").click();
+    cy.wait("@patchDataConnector");
+    cy.getDataCy("cloud-storage-edit-body").should(
+      "contain.text",
+      "The data connector example-storage has been successfully updated."
     );
     cy.getDataCy("data-connector-edit-close-button").click();
     cy.wait("@getDataConnectors");

tests/cypress/support/renkulab-fixtures/dataConnectors.ts

@@ -144,19 +144,31 @@ export function DataConnector<T extends FixturesConstructor>(Parent: T) {
       return this;
     }
 
-    //   patchDataConnector(args?: DataConnectorArgs) {
-    //     const { name = "patchDataConnector" } = args ?? {};
-    //     const response = {
-    //       statusCode: 201,
-    //       fixture: "dataConnector/new-data-connector.json",
-    //     };
-    //     cy.intercept(
-    //       "PATCH",
-    //       "/ui-server/api/data/data_connectors/*",
-    //       response
-    //     ).as(name);
-    //     return this;
-    //   }
+    patchDataConnector(args?: DataConnectorArgs) {
+      const {
+        fixture = "dataConnector/new-data-connector.json",
+        name = "patchDataConnector",
+        namespace,
+      } = args ?? {};
+      cy.fixture(fixture).then((dataConnector) => {
+        // eslint-disable-next-line max-nested-callbacks
+        cy.intercept(
+          "PATCH",
+          "/ui-server/api/data/data_connectors/*",
+          (req) => {
+            const newDataConnector = req.body;
+            expect(newDataConnector.namespace).to.not.be.undefined;
+            expect(newDataConnector.slug).to.not.be.undefined;
+            expect(newDataConnector.visibility).to.not.be.undefined;
+            if (namespace) {
+              expect(newDataConnector.namespace).equal(namespace);
+            }
+            req.reply({ body: dataConnector, statusCode: 201, delay: 1000 });
+          }
+        ).as(name);
+      });
+      return this;
+    }
 
     //   deleteDataConnector(args?: DataConnectorArgs) {
     //     const { name = "deleteDataConnector" } = args ?? {};