diff --git a/CHANGELOG.md b/CHANGELOG.md index 0750b2f97e..9c68e39af9 100644 --- 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 index 930946600e..239da56ac9 100644 --- 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 = ({ connection_type={connection_type} access_type={access_type} name={name} + isSwitch={false} /> diff --git a/clients/admin-ui/src/features/datastore-connections/DisableConnectionModal.tsx b/clients/admin-ui/src/features/datastore-connections/DisableConnectionModal.tsx index 5648c03a4b..857a5b7d27 100644 --- 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 = ({ @@ -33,6 +36,7 @@ const DisableConnectionModal: React.FC = ({ name, access_type, connection_type, + isSwitch, }) => { const { isOpen, onOpen, onClose } = useDisclosure(); const [patchConnection, patchConnectionResult] = @@ -40,13 +44,14 @@ const DisableConnectionModal: React.FC = ({ 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 = ({ return ( <> - - {disabled ? "Enable" : "Disable"} - + {isSwitch ? ( + <> + + {disabled ? "Enable" : "Disable"} + + + ) : ( + + {disabled ? "Enable" : "Disable"} + + )} 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 6a936ae2bb..6402580630 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 @@ -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/clients/admin-ui/src/features/datastore-connections/system_portal_config/forms/ConnectorParametersForm.tsx b/clients/admin-ui/src/features/datastore-connections/system_portal_config/forms/ConnectorParametersForm.tsx index 33c58b5179..cc90154aa4 100644 --- a/clients/admin-ui/src/features/datastore-connections/system_portal_config/forms/ConnectorParametersForm.tsx +++ b/clients/admin-ui/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 = ({ onTestConnectionClick(result); }; + const isDisabledConnection = connectionConfig?.disabled || false; + return ( = ({ > Save + {connectionConfig ? ( + + ) : null} {connectionConfig ? (