-
Notifications
You must be signed in to change notification settings - Fork 72
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
2213 custom connector front end (#2997)
- Loading branch information
Showing
10 changed files
with
219 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
141 changes: 141 additions & 0 deletions
141
clients/admin-ui/src/features/connector-templates/ConnectorTemplateUploadModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,141 @@ | ||
| 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 "~/features/common/helpers"; | ||
| import { errorToastParams, successToastParams } from "~/features/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; |
34 changes: 34 additions & 0 deletions
34
clients/admin-ui/src/features/connector-templates/connector-template.slice.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import { createSlice } from "@reduxjs/toolkit"; | ||
|
|
||
| import { CONNECTOR_TEMPLATE } from "~/constants"; | ||
| import { baseApi } from "~/features/common/api.slice"; | ||
|
|
||
| export interface State {} | ||
| const initialState: State = {}; | ||
|
|
||
| export const connectorTemplateSlice = createSlice({ | ||
| name: "connectorTemplate", | ||
| initialState, | ||
| reducers: {}, | ||
| }); | ||
|
|
||
| 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters