feat: create data connector in project (#3525)

Co-authored-by: Lorenzo Cavazzi <[email protected]>
SwissDataScienceCenter · Feb 19, 2025 · f600423 · f600423
1 parent d82fdd4
commit f600423
Show file tree

Hide file tree

Showing 12 changed files with 88 additions and 19 deletions.
diff --git a/...nt/src/features/dataConnectorsV2/components/DataConnectorModal/DataConnectorModalBody.tsx b/...nt/src/features/dataConnectorsV2/components/DataConnectorModal/DataConnectorModalBody.tsx
@@ -47,15 +47,18 @@ import dataConnectorFormSlice from "../../state/dataConnectors.slice";
 
 import DataConnectorModalResult from "./DataConnectorModalResult";
 import DataConnectorSaveCredentialsInfo from "./DataConnectorSaveCredentialsInfo";
+import type { Project } from "../../../projectsV2/api/projectV2.api";
 
 interface AddOrEditDataConnectorProps {
   storageSecrets: DataConnectorSecret[];
+  project?: Project;
 }
 
 type DataConnectorModalBodyProps = AddOrEditDataConnectorProps;
 
 export default function DataConnectorModalBody({
   storageSecrets,
+  project,
 }: DataConnectorModalBodyProps) {
   const { flatDataConnector, schemata, success } = useAppSelector(
     (state) => state.dataConnectorFormSlice
@@ -76,13 +79,17 @@ export default function DataConnectorModalBody({
           Or, connect to cloud storage to read and write custom data.
         </p>
       )}
-      <AddOrEditDataConnector storageSecrets={storageSecrets} />
+      <AddOrEditDataConnector
+        storageSecrets={storageSecrets}
+        project={project}
+      />
     </>
   );
 }
 
 function AddOrEditDataConnector({
   storageSecrets,
+  project,
 }: AddOrEditDataConnectorProps) {
   const { cloudStorageState, flatDataConnector, schemata, validationResult } =
     useAppSelector((state) => state.dataConnectorFormSlice);
@@ -150,7 +157,10 @@ function AddOrEditDataConnector({
             setState={setState}
           />
         </div>
-        <DataConnectorContentByStep storageSecrets={storageSecrets} />
+        <DataConnectorContentByStep
+          storageSecrets={storageSecrets}
+          project={project}
+        />
       </>
     );
   return <p>Error - not implemented yet</p>;
@@ -173,7 +183,7 @@ type DataConnectorMountFormFields =
   | "mountPoint"
   | "readOnly"
   | "saveCredentials";
-export function DataConnectorMount() {
+export function DataConnectorMount({ project }: AddOrEditDataConnectorProps) {
   const dispatch = useAppDispatch();
   const { cloudStorageState, flatDataConnector, schemata } = useAppSelector(
     (state) => state.dataConnectorFormSlice
@@ -315,6 +325,7 @@ export function DataConnectorMount() {
                   field.onChange(e);
                   onFieldValueChange("namespace", e?.slug ?? "");
                 }}
+                project={project}
               />
             );
           }}

diff --git a/client/src/features/dataConnectorsV2/components/DataConnectorModal/index.tsx b/client/src/features/dataConnectorsV2/components/DataConnectorModal/index.tsx
@@ -72,7 +72,7 @@ export function DataConnectorModalBodyAndFooter({
     if (dataConnector == null) {
       flattened = {
         ...flattened,
-        namespace,
+        namespace: project ? `${project.namespace}/${project.slug}` : namespace,
         visibility: project?.visibility ?? "private",
       };
     }
@@ -91,7 +91,7 @@ export function DataConnectorModalBodyAndFooter({
         schemata: schemata ?? [],
       })
     );
-  }, [dataConnector, dispatch, namespace, project?.visibility, schemata]);
+  }, [dataConnector, dispatch, namespace, project, schemata]);
 
   // Visual elements
   return (
@@ -102,7 +102,10 @@ export function DataConnectorModalBodyAndFooter({
         ) : schemaQueryResult.error ? (
           <RtkOrNotebooksError error={schemaQueryResult.error} />
         ) : (
-          <DataConnectorModalBody storageSecrets={connectorSecrets ?? []} />
+          <DataConnectorModalBody
+            storageSecrets={connectorSecrets ?? []}
+            project={project}
+          />
         )}
       </ModalBody>
 

diff --git a/client/src/features/dataConnectorsV2/components/DataConnectorsBox.tsx b/client/src/features/dataConnectorsV2/components/DataConnectorsBox.tsx
@@ -34,7 +34,7 @@ import Pagination from "../../../components/Pagination";
 import { RtkOrNotebooksError } from "../../../components/errors/RtkErrorAlert";
 import useGroupPermissions from "../../groupsV2/utils/useGroupPermissions.hook";
 import PermissionsGuard from "../../permissionsV2/PermissionsGuard";
-import type { NamespaceKind } from "../../projectsV2/api/namespace.api";
+import type { NamespaceKind } from "../../projectsV2/api/namespace.enhanced-api";
 import { useGetUserQuery } from "../../usersV2/api/users.api";
 import {
   useGetDataConnectorsQuery,

diff --git a/client/src/features/project/components/cloudStorage/AddOrEditCloudStorage.tsx b/client/src/features/project/components/cloudStorage/AddOrEditCloudStorage.tsx
@@ -80,6 +80,7 @@ interface AddOrEditCloudStorageProps {
   state: AddCloudStorageState;
   storage: CloudStorageDetails;
   storageSecrets: CloudStorageSecretGet[];
+  projectId?: string;
 }
 
 export default function AddOrEditCloudStorage({
@@ -88,6 +89,7 @@ export default function AddOrEditCloudStorage({
   setState,
   state,
   storage,
+  projectId,
 }: AddOrEditCloudStorageProps) {
   const ContentByStep =
     state.step >= 0 && state.step <= CLOUD_STORAGE_TOTAL_STEPS
@@ -107,6 +109,7 @@ export default function AddOrEditCloudStorage({
           setStorage={setStorage}
           storageSecrets={[]}
           validationSucceeded={false}
+          projectId={projectId}
         />
       </>
     );
@@ -171,6 +174,7 @@ export interface AddStorageStepProps {
   storageSecrets: CloudStorageSecretGet[];
   isV2?: boolean;
   validationSucceeded: boolean;
+  projectId?: string;
 }
 
 const mapStepToElement: {

diff --git a/client/src/features/project/components/cloudStorage/CloudStorageModal.tsx b/client/src/features/project/components/cloudStorage/CloudStorageModal.tsx
@@ -403,6 +403,7 @@ export default function CloudStorageModal({
           storageId={storageId}
           success={success}
           validationSucceeded={validationSucceeded}
+          projectId={projectId}
         />
       </ModalBody>
 

diff --git a/client/src/features/project/components/cloudStorage/cloudStorageModalComponents.tsx b/client/src/features/project/components/cloudStorage/cloudStorageModalComponents.tsx
@@ -107,6 +107,7 @@ export interface AddCloudStorageBodyContentProps
   storageDetails: CloudStorageDetails;
   success: boolean;
   validationSucceeded: boolean;
+  projectId?: string;
 }
 export function AddCloudStorageBodyContent({
   addResultStorageName,
@@ -121,6 +122,7 @@ export function AddCloudStorageBodyContent({
   storageDetails,
   storageId,
   success,
+  projectId,
 }: AddCloudStorageBodyContentProps) {
   if (redraw) return <Loader />;
   if (success) {
@@ -140,6 +142,7 @@ export function AddCloudStorageBodyContent({
       state={state}
       storage={storageDetails}
       storageSecrets={[]}
+      projectId={projectId}
     />
   );
 }

diff --git a/client/src/features/projectsV2/api/namespace.enhanced-api.ts b/client/src/features/projectsV2/api/namespace.enhanced-api.ts
@@ -0,0 +1,12 @@
+import {
+  NamespaceKind as NamespaceKindOrig,
+  NamespaceResponse as NamespaceResponseOrig,
+} from "./namespace.api.ts";
+
+export type NamespaceKind = NamespaceKindOrig | "project";
+export interface NamespaceResponse
+  extends Omit<NamespaceResponseOrig, "namespace_kind"> {
+  namespace_kind: NamespaceKind;
+}
+export type NamespaceResponseList = NamespaceResponse[];
+export type GetNamespacesApiResponse = NamespaceResponseList;
diff --git a/client/src/features/projectsV2/api/projectV2.enhanced-api.ts b/client/src/features/projectsV2/api/projectV2.enhanced-api.ts
@@ -17,10 +17,12 @@ import type {
   GetGroupsApiArg,
   GetGroupsApiResponse as GetGroupsApiResponseOrig,
   GetNamespacesApiArg,
-  GetNamespacesApiResponse as GetNamespacesApiResponseOrig,
   GroupResponseList,
-  NamespaceResponseList,
 } from "./namespace.api";
+import type {
+  GetNamespacesApiResponse as GetNamespacesApiResponseOrig,
+  NamespaceResponseList,
+} from "./namespace.enhanced-api";
 
 export interface GetGroupsApiResponse extends AbstractKgPaginatedResponse {
   groups: GetGroupsApiResponseOrig;

diff --git a/client/src/features/projectsV2/fields/ProjectNamespaceFormField.tsx b/client/src/features/projectsV2/fields/ProjectNamespaceFormField.tsx
@@ -38,6 +38,8 @@ import { ErrorAlert } from "../../../components/Alert";
 import { Loader } from "../../../components/Loader";
 import type { PaginatedState } from "../../session/components/options/fetchMore.types";
 import type { GetNamespacesApiResponse } from "../api/projectV2.enhanced-api";
+import type { Project } from "../api/projectV2.api";
+import type { NamespaceResponse } from "../api/namespace.enhanced-api";
 import {
   useGetNamespacesByNamespaceSlugQuery,
   useGetNamespacesQuery,
@@ -273,6 +275,7 @@ interface ProjectNamespaceControlProps {
   inputId: string;
   onChange: (newValue: SingleValue<ResponseNamespace>) => void;
   value?: string;
+  project?: Project;
 }
 
 export function ProjectNamespaceControl({
@@ -283,6 +286,7 @@ export function ProjectNamespaceControl({
   onChange,
   value,
   "data-cy": dataCy,
+  project,
 }: ProjectNamespaceControlProps) {
   const {
     data: namespacesFirstPage,
@@ -392,6 +396,23 @@ export function ProjectNamespaceControl({
     });
   }, [allNamespaces, specificNamespace, specificNamespaceRequestId]);
 
+  const allNamespacesWithProject = useMemo(() => {
+    if (!project) {
+      return allNamespaces || [];
+    }
+    return [
+      {
+        id: project.id,
+        slug: `${project.namespace}/${project.slug}`,
+        creation_date: project.creation_date,
+        created_by: project.created_by,
+        namespace_kind: "project",
+        name: `${project.namespace}/${project.slug}`,
+      } as NamespaceResponse,
+      ...(allNamespaces || []),
+    ];
+  }, [allNamespaces, project]);
+
   if (isFetching) {
     return (
       <div className={cx(className, "form-control")} id={id}>
@@ -418,7 +439,7 @@ export function ProjectNamespaceControl({
         hasMore={hasMore}
         inputId={inputId}
         isFetchingMore={namespacesPageResult.isFetching}
-        namespaces={allNamespaces}
+        namespaces={allNamespacesWithProject}
         onChange={onChange}
         onFetchMore={onFetchMore}
       />

diff --git a/client/src/features/projectsV2/list/ProjectV2ListDisplay.tsx b/client/src/features/projectsV2/list/ProjectV2ListDisplay.tsx
@@ -28,7 +28,7 @@ import { RtkOrNotebooksError } from "../../../components/errors/RtkErrorAlert";
 import useGroupPermissions from "../../groupsV2/utils/useGroupPermissions.hook";
 import PermissionsGuard from "../../permissionsV2/PermissionsGuard";
 import { useGetUserQuery } from "../../usersV2/api/users.api";
-import { NamespaceKind } from "../api/namespace.api";
+import { NamespaceKind } from "../api/namespace.enhanced-api";
 import { useGetProjectsQuery } from "../api/projectV2.enhanced-api";
 import ProjectShortHandDisplay from "../show/ProjectShortHandDisplay";
 

diff --git a/tests/cypress/e2e/projectV2DataConnectorCredentials.spec.ts b/tests/cypress/e2e/projectV2DataConnectorCredentials.spec.ts
@@ -45,7 +45,10 @@ describe("Set up data connectors with credentials", () => {
   it("set up data connector with failed connection test", () => {
     fixtures
       .testCloudStorage({ success: false })
-      .postDataConnector({ namespace: "user1-uuid", visibility: "public" })
+      .postDataConnector({
+        namespace: "user1-uuid/test-2-v2-project",
+        visibility: "public",
+      })
       .postDataConnectorProjectLink({
         dataConnectorId: "ULID-5",
       })
@@ -85,7 +88,7 @@ describe("Set up data connectors with credentials", () => {
     cy.wait("@postDataConnector");
     cy.getDataCy("data-connector-edit-body").should(
       "contain.text",
-      "The data connector user1-uuid/example-storage-without-credentials has been successfully added"
+      "The data connector user1-uuid/test-2-v2-project/example-storage-without-credentials has been successfully added"
     );
     cy.getDataCy("data-connector-edit-body").should(
       "contain.text",
@@ -109,7 +112,10 @@ describe("Set up data connectors with credentials", () => {
   it("set up data connector with credentials", () => {
     fixtures
       .testCloudStorage({ success: true })
-      .postDataConnector({ namespace: "user1-uuid", visibility: "public" })
+      .postDataConnector({
+        namespace: "user1-uuid/test-2-v2-project",
+        visibility: "public",
+      })
       .postDataConnectorProjectLink({ dataConnectorId: "ULID-5" })
       .patchDataConnectorSecrets({
         dataConnectorId: "ULID-5",
@@ -161,7 +167,7 @@ describe("Set up data connectors with credentials", () => {
     cy.wait("@patchDataConnectorSecrets");
     cy.getDataCy("data-connector-edit-body").should(
       "contain.text",
-      "The data connector user1-uuid/example-storage-with-credentials has been successfully added"
+      "The data connector user1-uuid/test-2-v2-project/example-storage-with-credentials has been successfully added"
     );
     cy.getDataCy("data-connector-edit-body").should(
       "contain.text",

diff --git a/tests/cypress/e2e/projectV2setup.spec.ts b/tests/cypress/e2e/projectV2setup.spec.ts
@@ -191,7 +191,10 @@ describe("Set up data connectors", () => {
       .getDataConnector()
       .getStorageSchema({ fixture: "cloudStorage/storage-schema-s3.json" })
       .testCloudStorage({ success: false })
-      .postDataConnector({ namespace: "user1-uuid", visibility: "public" })
+      .postDataConnector({
+        namespace: "user1-uuid/test-2-v2-project",
+        visibility: "public",
+      })
       .postDataConnectorProjectLink({ dataConnectorId: "ULID-5" });
     cy.visit("/v2/projects/user1-uuid/test-2-v2-project");
     cy.wait("@readProjectV2");
@@ -239,7 +242,7 @@ describe("Set up data connectors", () => {
     cy.wait("@postDataConnector");
     cy.getDataCy("data-connector-edit-body").should(
       "contain.text",
-      "The data connector user1-uuid/example-storage-without-credentials has been successfully added"
+      "The data connector user1-uuid/test-2-v2-project/example-storage-without-credentials has been successfully added"
     );
     cy.getDataCy("data-connector-edit-body").should(
       "contain.text",
@@ -342,7 +345,10 @@ describe("Set up data connectors", () => {
       .getDataConnector()
       .getStorageSchema({ fixture: "cloudStorage/storage-schema-s3.json" })
       .testCloudStorage({ success: false })
-      .postDataConnector({ namespace: "user1-uuid", visibility: "public" })
+      .postDataConnector({
+        namespace: "user1-uuid/test-2-v2-project",
+        visibility: "public",
+      })
       .postDataConnectorProjectLink({ dataConnectorId: "ULID-5" });
     cy.visit("/v2/projects/user1-uuid/test-2-v2-project");
     cy.wait("@readProjectV2");
@@ -375,7 +381,7 @@ describe("Set up data connectors", () => {
     cy.wait("@postDataConnector");
     cy.getDataCy("data-connector-edit-body").should(
       "contain.text",
-      "The data connector user1-uuid/example-storage-without-credentials has been successfully added"
+      "The data connector user1-uuid/test-2-v2-project/example-storage-without-credentials has been successfully added"
     );
     cy.getDataCy("data-connector-edit-body").should(
       "contain.text",