From 2f633820901418765bda451572c2f0a55ce0278c Mon Sep 17 00:00:00 2001 From: Dawn Pattison Date: Wed, 22 Jun 2022 14:24:47 -0500 Subject: [PATCH] Enable/Disable Datastores [Frontend] (#693) * Add the ability to enable/disable a connectionconfig. * Fix other location to prevent from closing modal while in progress. * Update changelog. --- CHANGELOG.md | 1 + .../ConnectionGridItem.tsx | 8 +- .../datastore-connections/ConnectionMenu.tsx | 28 +++-- .../DisableConnectionModal.tsx | 118 ++++++++++++++++++ .../datastore-connection.slice.ts | 5 +- .../features/datastore-connections/types.ts | 8 ++ 6 files changed, 157 insertions(+), 11 deletions(-) create mode 100644 clients/admin-ui/src/features/datastore-connections/DisableConnectionModal.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 9306f51b74..478fe495df 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/clients/admin-ui/src/features/datastore-connections/ConnectionGridItem.tsx b/clients/admin-ui/src/features/datastore-connections/ConnectionGridItem.tsx index bcb8173c11..6f9be3177d 100644 --- a/clients/admin-ui/src/features/datastore-connections/ConnectionGridItem.tsx +++ b/clients/admin-ui/src/features/datastore-connections/ConnectionGridItem.tsx @@ -113,7 +113,13 @@ const ConnectionGridItem: React.FC = ({ - + {getConnectorDisplayName(connectionData.connection_type)} diff --git a/clients/admin-ui/src/features/datastore-connections/ConnectionMenu.tsx b/clients/admin-ui/src/features/datastore-connections/ConnectionMenu.tsx index 79ce5055e5..5f777fc0c0 100644 --- a/clients/admin-ui/src/features/datastore-connections/ConnectionMenu.tsx +++ b/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 = ({ connection_key }) => ( +const ConnectionMenu: React.FC = ({ + connection_key, + disabled, + connection_type, + access_type, + name, +}) => ( = ({ connection_key }) => ( > Edit - - Disable - + diff --git a/clients/admin-ui/src/features/datastore-connections/DisableConnectionModal.tsx b/clients/admin-ui/src/features/datastore-connections/DisableConnectionModal.tsx new file mode 100644 index 0000000000..d0b6f9943b --- /dev/null +++ b/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 = ({ + 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 ( + <> + + {disabled ? "Enable" : "Disable"} + + + + + + {disabled ? "Enable" : "Disable"} Connection + + + + + + {disabled ? "Enabling" : "Disabling"} a datastore connection may + impact any subject request that is currently in progress. Do you + wish to proceed? + + + + + + + + + + + + ); +}; + +export default DisableConnectionModal; 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 index 88005ec9f4..47e16fd6d6 100644 --- a/clients/admin-ui/src/features/datastore-connections/datastore-connection.slice.ts +++ b/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; diff --git a/clients/admin-ui/src/features/datastore-connections/types.ts b/clients/admin-ui/src/features/datastore-connections/types.ts index a64d27e1d3..2e61851b2b 100644 --- a/clients/admin-ui/src/features/datastore-connections/types.ts +++ b/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; +}