Fixing eslint issues and adding Restrict around upload connector button

ethyca · Apr 5, 2023 · 1619d95 · 1619d95
1 parent 9496277
commit 1619d95
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 231 deletions.
diff --git a/clients/admin-ui/src/features/connector-templates/ConnectorTemplateUploadModal.tsx b/clients/admin-ui/src/features/connector-templates/ConnectorTemplateUploadModal.tsx
@@ -1,27 +1,34 @@
 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();
@@ -58,57 +65,73 @@ const ConnectorTemplateUploadModal: React.FC<RequestModalProps> = ({
 
   const renderFileText = () => {
     if (uploadedFile) {
-      return <Text fontSize="sm">{uploadedFile.name}</Text>;
+      return <Text>{uploadedFile.name}</Text>;
     }
     if (isDragActive) {
-      return <Text fontSize="sm">Drop the file here...</Text>;
+      return <Text>Drop the file here...</Text>;
     }
-    return <Text fontSize="sm">Click or drag and drop your file here.</Text>;
+    return <Text>Click or drag and drop your file here.</Text>;
   };
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose}>
+    <Modal isOpen={isOpen} onClose={onClose} size="2xl">
       <ModalOverlay />
-      <ModalContent top={[0, "150px"]} maxWidth="600px" mx={5} my={3} p={4}>
-        <Text fontSize="lg" fontWeight="bold" mb={2}>
-          Upload Connector Template
-        </Text>
-        <Text color="gray.700" 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="100px"
-          display="flex"
-          alignItems="center"
-          justifyContent="center"
-          textAlign="center"
-        >
-          <input {...getInputProps()} />
-          {renderFileText()}
-        </Box>
-        <Text color="gray.700" fontSize="sm" mt={4} mb={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>
-        <Button
-          mt={4}
-          colorScheme="primary"
-          type="submit"
-          isDisabled={!uploadedFile || isLoading}
-          onClick={handleSubmit}
-          data-testid="submit-btn"
-          mx="auto"
-        >
-          Submit
-        </Button>
+      <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>
   );

diff --git a/clients/admin-ui/src/features/connector-templates/connector-template.slice.ts b/clients/admin-ui/src/features/connector-templates/connector-template.slice.ts
@@ -1,6 +1,8 @@
 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 = {

diff --git a/clients/admin-ui/src/features/datastore-connections/add-connection/ChooseConnection.tsx b/clients/admin-ui/src/features/datastore-connections/add-connection/ChooseConnection.tsx
@@ -24,9 +24,12 @@ import React, {
   useState,
 } from "react";
 import { useDispatch } from "react-redux";
+
 import { useAppSelector } from "~/app/hooks";
-import ConnectorTemplateUploadModal from "../../connector-templates/ConnectorTemplateUploadModal";
+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";
@@ -107,16 +110,18 @@ const ChooseConnection: React.FC = () => {
             type="search"
           />
         </InputGroup>
-        <Button
-          colorScheme="primary"
-          type="submit"
-          width="20%"
-          data-testid="upload-btn"
-          size="sm"
-          onClick={handleUploadButtonClick}
-        >
-          Upload Connector
-        </Button>
+        <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}

diff --git a/clients/admin-ui/src/types/api/models/ScopeRegistryEnum.ts b/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",