Add enable/disable toggle to integration tab (#3593)

Co-authored-by: Allison King <allisonjuliaking@gmail.com>
ethyca · Jul 10, 2023 · 4f91375 · 4f91375
1 parent cadbea1
commit 4f91375
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -28,6 +28,7 @@ The types of changes are:
 - Empty state for when there are no relevant privacy notices in the privacy center [#3640](https://github.com/ethyca/fides/pull/3640)
 - GPC indicators in fides-js banner and modal [#3673](https://github.com/ethyca/fides/pull/3673)
 - Include `data_use` and `data_category` metadata in `upload` of access results [#3674](https://github.com/ethyca/fides/pull/3674)
+- Add enable/disable toggle to integration tab [#3593] (https://github.com/ethyca/fides/pull/3593)
 
 ### Fixed
 

diff --git a/clients/admin-ui/src/features/datastore-connections/ConnectionMenu.tsx b/clients/admin-ui/src/features/datastore-connections/ConnectionMenu.tsx
@@ -65,6 +65,7 @@ const ConnectionMenu: React.FC<ConnectionMenuProps> = ({
           connection_type={connection_type}
           access_type={access_type}
           name={name}
+          isSwitch={false}
         />
         <DeleteConnectionModal connection_key={connection_key} />
       </MenuList>

diff --git a/clients/admin-ui/src/features/datastore-connections/DisableConnectionModal.tsx b/clients/admin-ui/src/features/datastore-connections/DisableConnectionModal.tsx
@@ -8,7 +8,9 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  Spacer,
   Stack,
+  Switch,
   Text,
   useDisclosure,
 } from "@fidesui/react";
@@ -25,6 +27,7 @@ type DataConnectionProps = {
   name: string;
   access_type: AccessLevel;
   connection_type: ConnectionType;
+  isSwitch: boolean;
 };
 
 const DisableConnectionModal: React.FC<DataConnectionProps> = ({
@@ -33,20 +36,22 @@ const DisableConnectionModal: React.FC<DataConnectionProps> = ({
   name,
   access_type,
   connection_type,
+  isSwitch,
 }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [patchConnection, patchConnectionResult] =
     usePatchDatastoreConnectionsMutation();
 
   const handleDisableConnection = async () => {
     const shouldDisable = !disabled;
-    patchConnection({
+    await patchConnection({
       key: connection_key,
       name,
       disabled: shouldDisable,
       access: access_type,
       connection_type,
     });
+    onClose();
   };
 
   const closeIfComplete = () => {
@@ -57,12 +62,24 @@ const DisableConnectionModal: React.FC<DataConnectionProps> = ({
 
   return (
     <>
-      <MenuItem
-        _focus={{ color: "complimentary.500", bg: "gray.100" }}
-        onClick={onOpen}
-      >
-        <Text fontSize="sm">{disabled ? "Enable" : "Disable"}</Text>
-      </MenuItem>
+      {isSwitch ? (
+        <>
+          <Spacer />
+          <Text fontSize="md">{disabled ? "Enable" : "Disable"}</Text>
+          <Switch
+            colorScheme="complimentary"
+            isChecked={!disabled}
+            onChange={onOpen}
+          />
+        </>
+      ) : (
+        <MenuItem
+          _focus={{ color: "complimentary.500", bg: "gray.100" }}
+          onClick={onOpen}
+        >
+          <Text fontSize="sm">{disabled ? "Enable" : "Disable"}</Text>
+        </MenuItem>
+      )}
       <Modal isCentered isOpen={isOpen} onClose={closeIfComplete}>
         <ModalOverlay />
         <ModalContent>

diff --git a/clients/admin-ui/src/features/datastore-connections/datastore-connection.slice.ts b/clients/admin-ui/src/features/datastore-connections/datastore-connection.slice.ts
@@ -351,7 +351,7 @@ export const datastoreConnectionApi = baseApi.injectEndpoints({
         method: "PATCH",
         body: [{ key, name, disabled, connection_type, access }],
       }),
-      invalidatesTags: () => ["Datastore Connection", "Datasets"],
+      invalidatesTags: () => ["Datastore Connection", "Datasets", "System"],
     }),
     updateDatastoreConnectionSecrets: build.mutation<
       DatastoreConnectionSecretsResponse,

diff --git a/...src/features/datastore-connections/system_portal_config/forms/ConnectorParametersForm.tsx b/...src/features/datastore-connections/system_portal_config/forms/ConnectorParametersForm.tsx
@@ -27,6 +27,7 @@ import { Field, FieldInputProps, Form, Formik, FormikProps } from "formik";
 import React from "react";
 import { DatastoreConnectionStatus } from "src/features/datastore-connections/types";
 
+import DisableConnectionModal from "~/features/datastore-connections/DisableConnectionModal";
 import DatasetConfigField from "~/features/datastore-connections/system_portal_config/forms/fields/DatasetConfigField/DatasetConfigField";
 import {
   ConnectionConfigurationResponse,
@@ -249,6 +250,8 @@ const ConnectorParametersForm: React.FC<ConnectorParametersFormProps> = ({
     onTestConnectionClick(result);
   };
 
+  const isDisabledConnection = connectionConfig?.disabled || false;
+
   return (
     <Formik
       enableReinitialize
@@ -361,6 +364,16 @@ const ConnectorParametersForm: React.FC<ConnectorParametersFormProps> = ({
               >
                 Save
               </Button>
+              {connectionConfig ? (
+                <DisableConnectionModal
+                  connection_key={connectionConfig?.key}
+                  disabled={isDisabledConnection}
+                  connection_type={connectionConfig?.connection_type}
+                  access_type={connectionConfig?.access}
+                  name={connectionConfig?.name}
+                  isSwitch
+                />
+              ) : null}
               {connectionConfig ? (
                 <DeleteConnectionModal
                   connectionKey={connectionConfig.key}