2213 custom connector front end

clients/admin-ui/package.json

@@ -53,6 +53,7 @@
     "react-dnd": "^15.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^17.0.2",
+    "react-dropzone": "^14.2.3",
     "react-redux": "^8.0.5",
     "react-table": "^7.8.0",
     "redux-persist": "^6.0.0",

clients/admin-ui/src/constants.ts

@@ -136,3 +136,4 @@ export const INDEX_ROUTE = "/";
 export const LOGIN_ROUTE = "/login";
 export const CONNECTION_ROUTE = "/connection";
 export const CONNECTION_TYPE_ROUTE = "/connection_type";
+export const CONNECTOR_TEMPLATE = "/connector_template";

clients/admin-ui/src/features/connector-templates/ConnectorTemplateUploadModal.tsx

@@ -0,0 +1,140 @@
+import {
+  Box,
+  Button,
+  ButtonGroup,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  useToast,
+} from "@fidesui/react";
+import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query/fetchBaseQuery";
+import React, { useState } from "react";
+import { useDropzone } from "react-dropzone";
+
+import { getErrorMessage } from "../common/helpers";
+import { errorToastParams, successToastParams } from "../common/toast";
+import { useRegisterConnectorTemplateMutation } from "./connector-template.slice";
+
+type RequestModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  testId?: String;
+};
+
+const ConnectorTemplateUploadModal: React.FC<RequestModalProps> = ({
+  isOpen,
+  onClose,
+  testId = "connector-template-modal",
+}) => {
+  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
+  const toast = useToast();
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop: (acceptedFiles: File[]) => {
+      const file = acceptedFiles[0];
+      const fileExtension = file.name.split(".").pop()?.toLowerCase();
+
+      if (fileExtension !== "zip") {
+        toast(errorToastParams("Only zip files are allowed."));
+        return;
+      }
+
+      setUploadedFile(acceptedFiles[0]);
+    },
+  });
+
+  const [registerConnectorTemplate, { isLoading }] =
+    useRegisterConnectorTemplateMutation();
+
+  const handleSubmit = async () => {
+    if (uploadedFile) {
+      try {
+        await registerConnectorTemplate(uploadedFile).unwrap();
+        toast(successToastParams("Connector template uploaded successfully."));
+        onClose();
+      } catch (error) {
+        toast(errorToastParams(getErrorMessage(error as FetchBaseQueryError)));
+      } finally {
+        setUploadedFile(null);
+      }
+    }
+  };
+
+  const renderFileText = () => {
+    if (uploadedFile) {
+      return <Text>{uploadedFile.name}</Text>;
+    }
+    if (isDragActive) {
+      return <Text>Drop the file here...</Text>;
+    }
+    return <Text>Click or drag and drop your file here.</Text>;
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="2xl">
+      <ModalOverlay />
+      <ModalContent textAlign="left" p={2} data-testid={testId}>
+        <ModalHeader>Upload connector template</ModalHeader>
+        <ModalBody>
+          <Text fontSize="sm" mb={4}>
+            Drag and drop your connector template zip file here, or click to
+            browse your files.
+          </Text>
+          <Box
+            {...getRootProps()}
+            bg={isDragActive ? "gray.100" : "gray.50"}
+            border="2px dashed"
+            borderColor={isDragActive ? "gray.300" : "gray.200"}
+            borderRadius="md"
+            cursor="pointer"
+            minHeight="150px"
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            textAlign="center"
+          >
+            <input {...getInputProps()} />
+            {renderFileText()}
+          </Box>
+          <Text fontSize="sm" mt={4}>
+            A connector template zip file must include a SaaS config and
+            dataset, but may also contain an icon (.svg) and custom functions
+            (.py) as optional files.
+          </Text>
+        </ModalBody>
+        <ModalFooter>
+          <ButtonGroup
+            size="sm"
+            spacing="2"
+            width="100%"
+            display="flex"
+            justifyContent="right"
+          >
+            <Button
+              variant="outline"
+              onClick={onClose}
+              data-testid="cancel-btn"
+              isDisabled={isLoading}
+            >
+              Cancel
+            </Button>
+            <Button
+              colorScheme="primary"
+              type="submit"
+              isDisabled={!uploadedFile || isLoading}
+              onClick={handleSubmit}
+              data-testid="submit-btn"
+            >
+              Submit
+            </Button>
+          </ButtonGroup>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default ConnectorTemplateUploadModal;

clients/admin-ui/src/features/connector-templates/connector-template.slice.ts

@@ -0,0 +1,46 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+import { CONNECTOR_TEMPLATE } from "~/constants";
+import { baseApi } from "~/features/common/api.slice";
+
+import { ConnectorTemplateState } from "./types";
+
+const initialState: ConnectorTemplateState = {
+  loading: false,
+  error: null,
+};
+
+export const connectorTemplateSlice = createSlice({
+  name: "connectorTemplate",
+  initialState,
+  reducers: {
+    setLoading: (draftState, action: PayloadAction<boolean>) => {
+      draftState.loading = action.payload;
+    },
+    setError: (draftState, action: PayloadAction<string | null>) => {
+      draftState.error = action.payload;
+    },
+  },
+});
+
+export const { setLoading, setError } = connectorTemplateSlice.actions;
+export const { reducer } = connectorTemplateSlice;
+
+export const connectorTemplateApi = baseApi.injectEndpoints({
+  endpoints: (build) => ({
+    registerConnectorTemplate: build.mutation<void, File>({
+      query: (file) => {
+        const formData = new FormData();
+        formData.append("file", file);
+
+        return {
+          url: `${CONNECTOR_TEMPLATE}/register`,
+          method: "POST",
+          body: formData,
+        };
+      },
+    }),
+  }),
+});
+
+export const { useRegisterConnectorTemplateMutation } = connectorTemplateApi;

clients/admin-ui/src/features/connector-templates/types.ts

@@ -0,0 +1,4 @@
+export interface ConnectorTemplateState {
+  loading: boolean;
+  error: string | null;
+}

clients/admin-ui/src/features/datastore-connections/add-connection/ChooseConnection.tsx

@@ -1,5 +1,6 @@
 import {
   Box,
+  Button,
   Center,
   Flex,
   Input,
@@ -15,11 +16,20 @@ import {
   setSearch,
   useGetAllConnectionTypesQuery,
 } from "connection-type/connection-type.slice";
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useDispatch } from "react-redux";
 
 import { useAppSelector } from "~/app/hooks";
+import Restrict from "~/features/common/Restrict";
+import { ScopeRegistryEnum } from "~/types/api";
 
+import ConnectorTemplateUploadModal from "../../connector-templates/ConnectorTemplateUploadModal";
 import Breadcrumb from "./Breadcrumb";
 import ConnectionTypeFilter from "./ConnectionTypeFilter";
 import ConnectionTypeList from "./ConnectionTypeList";
@@ -32,6 +42,7 @@ const ChooseConnection: React.FC = () => {
   const filters = useAppSelector(selectConnectionTypeFilters);
   const { data, isFetching, isLoading, isSuccess } =
     useGetAllConnectionTypesQuery(filters);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleSearchChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -56,6 +67,10 @@ const ChooseConnection: React.FC = () => {
     [data]
   );
 
+  const handleUploadButtonClick = () => {
+    setIsModalOpen(true);
+  };
+
   useEffect(() => {
     mounted.current = true;
     return () => {
@@ -95,7 +110,23 @@ const ChooseConnection: React.FC = () => {
             type="search"
           />
         </InputGroup>
+        <Restrict scopes={[ScopeRegistryEnum.CONNECTOR_TEMPLATE_REGISTER]}>
+          <Button
+            colorScheme="primary"
+            type="submit"
+            width="20%"
+            data-testid="upload-btn"
+            size="sm"
+            onClick={handleUploadButtonClick}
+          >
+            Upload connector
+          </Button>
+        </Restrict>
       </Flex>
+      <ConnectorTemplateUploadModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+      />
       {(isFetching || isLoading) && (
         <Center>
           <Spinner />

clients/admin-ui/src/features/datastore-connections/add-connection/sass/ConnectorParameters.tsx

@@ -3,19 +3,19 @@ import { useAPIHelper } from "common/hooks";
 import { useAlert } from "common/hooks/useAlert";
 import {
   selectConnectionTypeState,
-  setConnection,
+  setConnection
 } from "connection-type/connection-type.slice";
 import { ConnectionTypeSecretSchemaReponse } from "connection-type/types";
 import { SaasType } from "datastore-connections/constants";
 import {
   useCreateSassConnectionConfigMutation,
   usePatchDatastoreConnectionMutation,
-  useUpdateDatastoreConnectionSecretsMutation,
+  useUpdateDatastoreConnectionSecretsMutation
 } from "datastore-connections/datastore-connection.slice";
 import {
-  CreateSassConnectionConfigRequest,
+  CreateSaasConnectionConfigRequest,
   DatastoreConnectionRequest,
-  DatastoreConnectionSecretsRequest,
+  DatastoreConnectionSecretsRequest
 } from "datastore-connections/types";
 import React, { useState } from "react";
 import { useDispatch } from "react-redux";
@@ -105,7 +105,7 @@ export const ConnectorParameters: React.FC<ConnectorParametersProps> = ({
         }
       } else {
         // Create new Sass connector
-        const params: CreateSassConnectionConfigRequest = {
+        const params: CreateSaasConnectionConfigRequest = {
           description: values.description,
           name: values.name,
           instance_key: formatKey(values.instance_key as string),

clients/admin-ui/src/features/datastore-connections/datastore-connection.slice.ts

@@ -13,8 +13,8 @@ import { DisabledStatus, TestingStatus } from "./constants";
 import {
   CreateAccessManualWebhookRequest,
   CreateAccessManualWebhookResponse,
-  CreateSassConnectionConfigRequest,
-  CreateSassConnectionConfigResponse,
+  CreateSaasConnectionConfigRequest,
+  CreateSaasConnectionConfigResponse,
   DatastoreConnection,
   DatastoreConnectionParams,
   DatastoreConnectionRequest,
@@ -164,8 +164,8 @@ export const datastoreConnectionApi = baseApi.injectEndpoints({
       invalidatesTags: () => ["DatastoreConnection"],
     }),
     createSassConnectionConfig: build.mutation<
-      CreateSassConnectionConfigResponse,
-      CreateSassConnectionConfigRequest
+      CreateSaasConnectionConfigResponse,
+      CreateSaasConnectionConfigRequest
     >({
       query: (params) => ({
         url: `${CONNECTION_ROUTE}/instantiate/${params.saas_connector_type}`,

clients/admin-ui/src/features/datastore-connections/types.ts

@@ -208,7 +208,7 @@ export type SaasConfig = {
   type: SaasType;
 };
 
-export type CreateSassConnectionConfigRequest = {
+export type CreateSaasConnectionConfigRequest = {
   name: string;
   description: string;
   instance_key: string;
@@ -218,7 +218,7 @@ export type CreateSassConnectionConfigRequest = {
   };
 };
 
-export type CreateSassConnectionConfigResponse = {
+export type CreateSaasConnectionConfigResponse = {
   connection: DatastoreConnection;
   dataset: {
     fides_key: string;

clients/admin-ui/src/types/api/models/ScopeRegistryEnum.ts

@@ -21,6 +21,7 @@ export enum ScopeRegistryEnum {
   CONNECTION_READ = "connection:read",
   CONNECTION_AUTHORIZE = "connection:authorize",
   CONNECTION_TYPE_READ = "connection_type:read",
+  CONNECTOR_TEMPLATE_REGISTER = "connector_template:register",
   CONSENT_READ = "consent:read",
   CTL_DATASET_CREATE = "ctl_dataset:create",
   CTL_DATASET_READ = "ctl_dataset:read",