feat: new data connector linking modal and tests update (#4431)

Author: lorenzo-cavazzi

cypress-tests/cypress/e2e/v2/dataConnectors.cy.ts

@@ -10,16 +10,19 @@ import {
   deleteDataConnector,
 } from "../../support/utils/dataConnectors";
 import { login } from "../../support/utils/general";
+import { verifySearchIndexing } from "../../support/utils/search";
 
 const sessionId = ["dataConnectors", getRandomString()];
+const searchDataConnectorType = "type:DataConnector";
+const searchDataConnectorSlug = "slug:";
 
 describe("Data Connectors", () => {
   const randomString = getRandomString();
   const projectName = `Project for data connector tests ${randomString}`;
   const projectSlug = `project-for-data-connector-tests-${randomString}`;
   let userNamespace: string;
   let dataConnectorName: string;
-  let projectId: string;
+  let projectId: string | undefined;
   let groupName: string;
   let groupSlug: string;
 
@@ -43,7 +46,7 @@ describe("Data Connectors", () => {
   });
 
   after(() => {
-    deleteProject(projectId);
+    if (projectId) deleteProject(projectId);
   });
 
   beforeEach(() => {
@@ -121,8 +124,6 @@ describe("Data Connectors", () => {
       cy.getDataCy("data-connector-menu-dropdown").click();
       cy.getDataCy("data-connector-delete").click();
     });
-
-    // Confirm deletion by typing the slug
     cy.getDataCy("delete-confirmation-input").type(dataConnectorName);
     cy.getDataCy("delete-data-connector-modal-button").click();
 
@@ -248,7 +249,6 @@ describe("Data Connectors", () => {
       projectId,
     );
 
-    // ? Currently, data connectors newly linked might not appear immediately
     visitCurrentProject();
     cy.getDataCy("data-connector-box")
       .find(`[data-cy=data-connector-name]`)
@@ -279,70 +279,54 @@ describe("Data Connectors", () => {
     cy.getDataCy("data-connector-edit-close-button").click();
 
     // Verify the data connector is present with the edited name
-    visitCurrentProject();
     cy.getDataCy("data-connector-box")
       .find(`[data-cy=data-connector-name]`)
       .contains(newName);
   });
 
-  it("Link an existing data connector to a project", () => {
-    // Create a data connector not linked to a project
+  it("Link and unlink an existing data connector to a project", () => {
+    // Create a data connector not linked to a project and check it has been indexed
     const dataConnectorIdentifier = `${userNamespace}/${dataConnectorName}`;
     createDataConnector(dataConnectorIdentifier);
+    verifySearchIndexing(
+      `${searchDataConnectorType} ${searchDataConnectorSlug}${dataConnectorName}`,
+      1,
+    );
 
-    // Now link the data connector to the project
+    // Link the data connector to the project
     visitCurrentProject();
     cy.getDataCy("add-data-connector").click();
-    cy.getDataCy("project-data-controller-mode-link").click();
-
-    // Enter the data connector identifier
-    cy.get("#data-connector-identifier")
+    cy.getDataCy("data-connector-search-input")
       .should("be.empty")
       .type(dataConnectorIdentifier);
-    cy.getDataCy("link-data-connector-button").click();
+    cy.getDataCy("data-connector-search-body")
+      .contains("[data-cy=link-data-connector-list-item]", dataConnectorName)
+      .find(`[data-cy=data-connector-link-button]`)
+      .click();
 
     // Verify the data connector is linked to the project
-    visitCurrentProject();
+    cy.getDataCy("project-data-connector-connect-header")
+      .find('button[data-bs-dismiss="modal"]')
+      .click();
     cy.getDataCy("data-connector-box")
       .find(`[data-cy=data-connector-name]`)
       .contains(dataConnectorName);
-  });
 
-  it("Unlink a data connector from a project", () => {
-    // Create a data connector not linked to a project
-    const dataConnectorIdentifier = `${userNamespace}/${dataConnectorName}`;
-    createDataConnector(dataConnectorIdentifier);
-
-    // Now link the data connector to the project
-    visitCurrentProject();
-    cy.getDataCy("add-data-connector").click();
-    cy.getDataCy("project-data-controller-mode-link").click();
-
-    // Enter the data connector identifier
-    cy.get("#data-connector-identifier")
-      .should("be.empty")
-      .type(dataConnectorIdentifier);
-    cy.getDataCy("link-data-connector-button").click();
-
-    // ? Currently, data connectors newly linked might not appear immediately
-    visitCurrentProject();
+    // Unlink the data connector from the project
     cy.getDataCy("data-connector-box")
       .find(`[data-cy=data-connector-name]`)
       .contains(dataConnectorName)
       .click();
-
     cy.getDataCy("data-connector-view").within(() => {
       cy.getDataCy("data-connector-title")
         .should("be.visible")
         .contains(dataConnectorName);
       cy.getDataCy("data-connector-menu-dropdown").click();
-      cy.getDataCy("data-connector-unlink").should("be.visible").click();
+      cy.getDataCy("data-connector-unlink").click();
     });
-
     cy.getDataCy("delete-data-connector-modal-button").click();
 
     // Verify the data connector is no longer linked to the project
-    visitCurrentProject();
     cy.getDataCy("data-connector-box")
       .contains(`[data-cy=data-connector-name]`, dataConnectorName)
       .should("not.exist");
@@ -359,31 +343,38 @@ describe("Data Connectors", () => {
       slug: otherProjectName,
       visibility: "private",
     }).then((response) => {
-      const otherProjectId = response.body.id;
+      const otherProjectId = response.body.id ?? "";
 
       // Defer-delete the other project (which will also delete the data connector)
       cy.defer(() => {
-        deleteProject(otherProjectId);
+        if (otherProjectId) deleteProject(otherProjectId);
       });
 
-      // Create a data connector in the other project
+      // Create a data connector in the other project and check it has been indexed
       const dataConnectorIdentifier = `${userNamespace}/${otherProjectName}/${dataConnectorName}`;
       createDataConnector(dataConnectorIdentifier, otherProjectId);
+      verifySearchIndexing(
+        `${searchDataConnectorType} ${searchDataConnectorSlug}${dataConnectorName}`,
+        1,
+      );
 
       // Navigate to the main project
       visitCurrentProject();
 
       // Link the data connector from the other project to the main project
       cy.getDataCy("add-data-connector").click();
-      cy.getDataCy("project-data-controller-mode-link").click();
-
-      cy.get("#data-connector-identifier")
+      cy.getDataCy("data-connector-search-input")
         .should("be.empty")
         .type(dataConnectorIdentifier);
-      cy.getDataCy("link-data-connector-button").click();
+      cy.getDataCy("data-connector-search-body")
+        .contains("[data-cy=link-data-connector-list-item]", dataConnectorName)
+        .find(`[data-cy=data-connector-link-button]`)
+        .click();
 
       // Verify the data connector is linked to the main project
-      visitCurrentProject();
+      cy.getDataCy("project-data-connector-connect-header")
+        .find('button[data-bs-dismiss="modal"]')
+        .click();
       cy.getDataCy("data-connector-box")
         .find(`[data-cy=data-connector-name]`)
         .contains(dataConnectorName)
@@ -395,12 +386,11 @@ describe("Data Connectors", () => {
           .should("be.visible")
           .contains(dataConnectorName);
         cy.getDataCy("data-connector-menu-dropdown").click();
-        cy.getDataCy("data-connector-unlink").should("be.visible").click();
+        cy.getDataCy("data-connector-unlink").click();
       });
       cy.getDataCy("delete-data-connector-modal-button").click();
 
       // Verify the data connector is no longer linked to the main project
-      visitCurrentProject();
       cy.getDataCy("data-connector-box")
         .contains(`[data-cy=data-connector-name]`, dataConnectorName)
         .should("not.exist");
@@ -468,21 +458,28 @@ describe("Data Connectors", () => {
     // Create a data connector owned by the group
     const dataConnectorIdentifier = `${groupSlug}/${dataConnectorName}`;
     createDataConnector(dataConnectorIdentifier);
+    verifySearchIndexing(
+      `${searchDataConnectorType} ${searchDataConnectorSlug}${dataConnectorName}`,
+      1,
+    );
 
     // Navigate to the user's project
     visitCurrentProject();
 
     // Link the group data connector to the user's project
     cy.getDataCy("add-data-connector").click();
-    cy.getDataCy("project-data-controller-mode-link").click();
-
-    // Enter the data connector identifier
-    cy.get("#data-connector-identifier")
+    cy.getDataCy("data-connector-search-input")
       .should("be.empty")
       .type(dataConnectorIdentifier);
-    cy.getDataCy("link-data-connector-button").click();
+    cy.getDataCy("data-connector-search-body")
+      .contains("[data-cy=link-data-connector-list-item]", dataConnectorName)
+      .find(`[data-cy=data-connector-link-button]`)
+      .click();
 
     // Verify the data connector is linked to the project
+    cy.getDataCy("project-data-connector-connect-header")
+      .find('button[data-bs-dismiss="modal"]')
+      .click();
     cy.getDataCy("data-connector-box")
       .find(`[data-cy=data-connector-name]`)
       .contains(dataConnectorName)
@@ -493,8 +490,8 @@ describe("Data Connectors", () => {
       cy.getDataCy("data-connector-title")
         .should("be.visible")
         .contains(dataConnectorName);
-      cy.getDataCy("data-connector-menu-dropdown").should("be.visible").click();
-      cy.getDataCy("data-connector-unlink").should("be.visible").click();
+      cy.getDataCy("data-connector-menu-dropdown").click();
+      cy.getDataCy("data-connector-unlink").click();
     });
     cy.getDataCy("delete-data-connector-modal-button").click();
 

cypress-tests/cypress/support/utils/dataConnectors.ts

@@ -46,11 +46,9 @@ export function createDataConnector(
         visibility: body.visibility || "private",
         description: body.description || "Test data connector description",
         storage: {
-          storage_type: "s3",
           configuration: {
             type: "s3",
             provider: "AWS",
-            region: "us-east-1",
           },
           source_path: "giab",
           target_path: body.slug || "/",

helm-chart/renku/values.yaml

@@ -548,7 +548,7 @@ ui:
     replicaCount: 1
     image:
       repository: renku/renku-ui
-      tag: "4.21.0"
+      tag: "4.22.0"
       pullPolicy: IfNotPresent
       ## Optionally specify an array of imagePullSecrets.
       ## Secrets must be manually created in the namespace.
@@ -740,7 +740,7 @@ ui:
     keepCookies: []
     image:
       repository: renku/renku-ui-server
-      tag: "4.21.0"
+      tag: "4.22.0"
       pullPolicy: IfNotPresent
     imagePullSecrets: []
     nameOverride: ""
@@ -822,7 +822,8 @@ dlf-chart:
     enabled: false
   dataset-operator-chart:
     enabled: true
-csi-rclone: {}
+csi-rclone:
+  {}
   # This section is only relevant if you are installing csi-rclone as part of Renku
   ## Name of the csi storage class to use for RClone/Cloudstorage. Should be unique per cluster.
   # storageClassName: csi-rclone
@@ -1244,7 +1245,8 @@ dataService:
     ## The name of the BuildStrategy to use for image builds.
     strategyName: renku-buildpacks-v3
     ## Configuration overrides for specific target platforms
-    platformOverrides: {}
+    platformOverrides:
+      {}
       # linux/arm64:
       #   builderImage: "ghcr.io/swissdatasciencecenter/renku-frontend-buildpacks/cuda-selector:0.5.1"
       #   runImage: "ghcr.io/swissdatasciencecenter/renku-frontend-buildpacks/cuda-run-image:0.5.1"