Enable/Disable Datastores [Frontend]

CHANGELOG.md

@@ -39,6 +39,7 @@ The types of changes are:
 * Include number of records to be masked in masking endpoint's log message [#692](https://github.com/ethyca/fidesops/pull/692)
 * Datastore Connection Landing Page [#674](https://github.com/ethyca/fidesops/pull/674)
 * Added the ability to delete a datastore from the frontend [#683] https://github.com/ethyca/fidesops/pull/683
+* Added the ability to disable/enable a datastore from the frontend [#693] https://github.com/ethyca/fidesops/pull/693
 
 ### Changed
 

clients/admin-ui/src/features/datastore-connections/ConnectionGridItem.tsx

@@ -113,7 +113,13 @@ const ConnectionGridItem: React.FC<ConnectionGridItemProps> = ({
         </Text>
         <Spacer />
         <ConnectionStatusBadge disabled={connectionData.disabled} />
-        <ConnectionMenu connection_key={connectionData.key} />
+        <ConnectionMenu
+          connection_key={connectionData.key}
+          disabled={connectionData.disabled}
+          name={connectionData.name}
+          connection_type={connectionData.connection_type}
+          access_type={connectionData.access}
+        />
       </Flex>
       <Text color="gray.600" fontSize="sm" fontWeight="sm" lineHeight="20px">
         {getConnectorDisplayName(connectionData.connection_type)}

clients/admin-ui/src/features/datastore-connections/ConnectionMenu.tsx

@@ -11,13 +11,24 @@ import React from "react";
 
 import { MoreIcon } from "../common/Icon";
 import DeleteConnectionModal from "./DeleteConnectionModal";
+import DisableConnectionModal from "./DisableConnectionModal";
+import { AccessLevel, ConnectionType } from "./types";
 
 interface ConnectionMenuProps {
   connection_key: string;
-  // disabled: boolean;
+  disabled: boolean;
+  name: string;
+  connection_type: ConnectionType;
+  access_type: AccessLevel;
 }
 
-const ConnectionMenu: React.FC<ConnectionMenuProps> = ({ connection_key }) => (
+const ConnectionMenu: React.FC<ConnectionMenuProps> = ({
+  connection_key,
+  disabled,
+  connection_type,
+  access_type,
+  name,
+}) => (
   <Menu>
     <MenuButton
       as={Button}
@@ -35,12 +46,13 @@ const ConnectionMenu: React.FC<ConnectionMenuProps> = ({ connection_key }) => (
         >
           <Text fontSize="sm">Edit</Text>
         </MenuItem>
-        <MenuItem
-          _focus={{ color: "complimentary.500", bg: "gray.100" }}
-          // onClick={handleViewDetails}
-        >
-          <Text fontSize="sm">Disable</Text>
-        </MenuItem>
+        <DisableConnectionModal
+          connection_key={connection_key}
+          disabled={disabled}
+          connection_type={connection_type}
+          access_type={access_type}
+          name={name}
+        />
         <DeleteConnectionModal connection_key={connection_key} />
       </MenuList>
     </Portal>

clients/admin-ui/src/features/datastore-connections/DisableConnectionModal.tsx

@@ -0,0 +1,118 @@
+import {
+  Button,
+  MenuItem,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Stack,
+  Text,
+  useDisclosure,
+} from "@fidesui/react";
+import React from "react";
+
+import { usePatchDatastoreConnectionsMutation } from "./datastore-connection.slice";
+import { AccessLevel, ConnectionType } from "./types";
+
+type DataConnectionProps = {
+  connection_key: string;
+  disabled: boolean;
+  name: string;
+  access_type: AccessLevel;
+  connection_type: ConnectionType;
+};
+
+const DisableConnectionModal: React.FC<DataConnectionProps> = ({
+  connection_key,
+  disabled,
+  name,
+  access_type,
+  connection_type,
+}) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [patchConnection, patchConnectionResult] =
+    usePatchDatastoreConnectionsMutation();
+
+  const handleDisableConnection = async () => {
+    const shouldDisable = !disabled;
+    return patchConnection({
+      key: connection_key,
+      name,
+      disabled: shouldDisable,
+      access: access_type,
+      connection_type,
+    })
+      .unwrap()
+      .then(() => onClose());
+  };
+
+  const closeIfComplete = () => {
+    if (!patchConnectionResult.isLoading) {
+      onClose();
+    }
+  };
+
+  return (
+    <>
+      <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>
+          <ModalHeader>
+            {disabled ? "Enable" : "Disable"} Connection
+          </ModalHeader>
+          <ModalCloseButton />
+          <ModalBody pb={6}>
+            <Stack direction="column" spacing="15px">
+              <Text
+                color="gray.600"
+                fontSize="sm"
+                fontWeight="sm"
+                lineHeight="20px"
+              >
+                {disabled ? "Enabling" : "Disabling"} a datastore connection may
+                impact any subject request that is currently in progress. Do you
+                wish to proceed?
+              </Text>
+            </Stack>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button
+              onClick={closeIfComplete}
+              marginRight="10px"
+              size="sm"
+              variant="solid"
+              bg="white"
+              width="50%"
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleDisableConnection}
+              isLoading={patchConnectionResult.isLoading}
+              mr={3}
+              size="sm"
+              variant="solid"
+              bg="primary.800"
+              color="white"
+              width="50%"
+            >
+              {disabled ? "Enable" : "Disable"} Connection
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default DisableConnectionModal;

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

@@ -139,10 +139,10 @@ export const datastoreConnectionApi = createApi({
       },
     }),
     patchDatastoreConnections: build.mutation({
-      query: () => ({
+      query: ({ key, name, disabled, connection_type, access }) => ({
         url: CONNECTION_ROUTE,
         method: "PATCH",
-        body: {},
+        body: [{ key, name, disabled, connection_type, access }],
       }),
       invalidatesTags: () => ["DatastoreConnection"],
     }),
@@ -167,5 +167,6 @@ export const datastoreConnectionApi = createApi({
 export const {
   useGetAllDatastoreConnectionsQuery,
   useLazyGetDatastoreConnectionStatusQuery,
+  usePatchDatastoreConnectionsMutation,
   useDeleteDatastoreConnectionMutation,
 } = datastoreConnectionApi;

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

@@ -66,3 +66,11 @@ export type DatastoreConnectionStatus = {
   test_status?: ConnectionTestStatus;
   failure_reason?: string;
 };
+
+export interface DatastoreConnectionUpdate {
+  name: string;
+  key: string;
+  disabled: boolean;
+  connection_type: ConnectionType;
+  access: AccessLevel;
+}