3601: test connection results toast (#3700)

CHANGELOG.md

@@ -36,6 +36,7 @@ The types of changes are:
 
 ### Changed
 - Moved GPC preferences slightly earlier in Fides.js lifecycle [#3561](https://github.com/ethyca/fides/pull/3561)
+- Changed results from clicking "Test connection" to be a toast instead of statically displayed on the page [#3700](https://github.com/ethyca/fides/pull/3700)
 - Moved "management" tab from nav into settings icon in top right [#3701](https://github.com/ethyca/fides/pull/3701)
 - Remove name and description fields from integration form [#3684](https://github.com/ethyca/fides/pull/3684)
 - Update EU PrivacyNoticeRegion codes and allow experience filtering to drop back to country filtering if region not found [#3630](https://github.com/ethyca/fides/pull/3630)

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

@@ -5,7 +5,7 @@ import { formatDate } from "../common/utils";
 
 type TestDataProps = {
   succeeded?: boolean;
-  timestamp: string;
+  timestamp: string | number;
 };
 
 const TestData: React.FC<TestDataProps> = ({ succeeded, timestamp }) => {

clients/admin-ui/src/features/datastore-connections/system_portal_config/TestConnectionMessage.tsx

@@ -0,0 +1,19 @@
+import { Text } from "@fidesui/react";
+import React from "react";
+
+type TestConnectionMessageProps = {
+  status: "success" | "error";
+};
+
+const TestConnectionMessage: React.FC<TestConnectionMessageProps> = ({
+  status,
+}) => (
+  <>
+    {status === "success" && <Text>Connection test was successful</Text>}
+    {status === "error" && (
+      <Text>Test failed: please check your connection info</Text>
+    )}
+  </>
+);
+
+export default TestConnectionMessage;

clients/admin-ui/src/features/datastore-connections/system_portal_config/forms/ConnectorParameters.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, SlideFade, Spacer } from "@fidesui/react";
+import { Box, Flex, Spacer, useToast, UseToastOptions } from "@fidesui/react";
 import { useAPIHelper } from "common/hooks";
 import { useAlert } from "common/hooks/useAlert";
 import { ConnectionTypeSecretSchemaReponse } from "connection-type/types";
@@ -19,9 +19,10 @@ import {
 import { useState } from "react";
 
 import { useAppDispatch, useAppSelector } from "~/app/hooks";
+import { DEFAULT_TOAST_PARAMS } from "~/features/common/toast";
 import { useGetConnectionTypeSecretSchemaQuery } from "~/features/connection-type";
 import { formatKey } from "~/features/datastore-connections/system_portal_config/helpers";
-import TestConnection from "~/features/datastore-connections/system_portal_config/TestConnection";
+import TestConnectionMessage from "~/features/datastore-connections/system_portal_config/TestConnectionMessage";
 import TestData from "~/features/datastore-connections/TestData";
 import {
   selectActiveSystem,
@@ -39,7 +40,9 @@ import {
 } from "~/types/api";
 
 import { ConnectionConfigFormValues } from "../types";
-import ConnectorParametersForm from "./ConnectorParametersForm";
+import ConnectorParametersForm, {
+  TestConnectionResponse,
+} from "./ConnectorParametersForm";
 
 /**
  * Only handles creating saas connectors. The BE handler automatically
@@ -296,11 +299,22 @@ export const ConnectorParameters: React.FC<ConnectorParametersProps> = ({
   connectionConfig,
   setSelectedConnectionOption,
 }) => {
-  const [response, setResponse] = useState<any>();
+  const [response, setResponse] = useState<TestConnectionResponse>();
 
-  const handleTestConnectionClick = (value: any) => {
+  const toast = useToast();
+
+  const handleTestConnectionClick = (value: TestConnectionResponse) => {
     setResponse(value);
+    const status: UseToastOptions["status"] =
+      value.data?.test_status === "succeeded" ? "success" : "error";
+    const toastParams = {
+      ...DEFAULT_TOAST_PARAMS,
+      status,
+      description: <TestConnectionMessage status={status} />,
+    };
+    toast(toastParams);
   };
+
   const skip = connectionOption.type === SystemType.MANUAL;
   const { data: secretsSchema } = useGetConnectionTypeSecretSchemaQuery(
     connectionOption!.identifier,
@@ -360,7 +374,9 @@ export const ConnectorParameters: React.FC<ConnectorParametersProps> = ({
 
       {connectionConfig ? (
         <Flex mt="4" justifyContent="between" alignItems="center">
-          {response ? (
+          {response &&
+          response.data &&
+          response.fulfilledTimeStamp !== undefined ? (
             <TestData
               succeeded={response.data.test_status === "succeeded"}
               timestamp={response.fulfilledTimeStamp}
@@ -374,17 +390,6 @@ export const ConnectorParameters: React.FC<ConnectorParametersProps> = ({
           <Spacer />
         </Flex>
       ) : null}
-
-      {response && (
-        <SlideFade in>
-          <Box mt="16px" maxW="528px" w="fit-content">
-            <TestConnection
-              response={response}
-              connectionOption={connectionOption}
-            />
-          </Box>
-        </SlideFade>
-      )}
     </>
   );
 };

clients/admin-ui/src/features/datastore-connections/system_portal_config/forms/ConnectorParametersForm.tsx

@@ -17,15 +17,15 @@ import {
   VStack,
 } from "@fidesui/react";
 import { Option } from "common/form/inputs";
-import { useAPIHelper } from "common/hooks";
 import {
   ConnectionTypeSecretSchemaProperty,
   ConnectionTypeSecretSchemaReponse,
 } from "connection-type/types";
 import { useLazyGetDatastoreConnectionStatusQuery } from "datastore-connections/datastore-connection.slice";
 import DSRCustomizationModal from "datastore-connections/system_portal_config/forms/DSRCustomizationForm/DSRCustomizationModal";
 import { Field, FieldInputProps, Form, Formik, FormikProps } from "formik";
-import React, { useEffect, useRef } from "react";
+import React from "react";
+import { DatastoreConnectionStatus } from "src/features/datastore-connections/types";
 
 import DatasetConfigField from "~/features/datastore-connections/system_portal_config/forms/fields/DatasetConfigField/DatasetConfigField";
 import {
@@ -41,6 +41,11 @@ import { fillInDefaults } from "./helpers";
 
 const FIDES_DATASET_REFERENCE = "#/definitions/FidesDatasetReference";
 
+export interface TestConnectionResponse {
+  data?: DatastoreConnectionStatus;
+  fulfilledTimeStamp?: number;
+}
+
 type ConnectorParametersFormProps = {
   secretsSchema?: ConnectionTypeSecretSchemaReponse;
   defaultValues: ConnectionConfigFormValues;
@@ -52,7 +57,7 @@ type ConnectorParametersFormProps = {
   /**
    * Parent callback when Test Connection is clicked
    */
-  onTestConnectionClick: (value: any) => void;
+  onTestConnectionClick: (value: TestConnectionResponse) => void;
   /**
    * Text for the test button. Defaults to "Test connection"
    */
@@ -79,10 +84,8 @@ const ConnectorParametersForm: React.FC<ConnectorParametersFormProps> = ({
   onDelete,
   deleteResult,
 }) => {
-  const mounted = useRef(false);
-  const { handleError } = useAPIHelper();
-
-  const [trigger, result] = useLazyGetDatastoreConnectionStatusQuery();
+  const [trigger, { isLoading, isFetching }] =
+    useLazyGetDatastoreConnectionStatusQuery();
 
   const validateConnectionIdentifier = (value: string) => {
     let error;
@@ -242,23 +245,10 @@ const ConnectorParametersForm: React.FC<ConnectorParametersFormProps> = ({
   };
 
   const handleTestConnectionClick = async () => {
-    try {
-      await trigger(connectionConfig!.key).unwrap();
-    } catch (error) {
-      handleError(error);
-    }
+    const result = await trigger(connectionConfig!.key);
+    onTestConnectionClick(result);
   };
 
-  useEffect(() => {
-    mounted.current = true;
-    if (result.isSuccess) {
-      onTestConnectionClick(result);
-    }
-    return () => {
-      mounted.current = false;
-    };
-  }, [onTestConnectionClick, result]);
-
   return (
     <Formik
       enableReinitialize
@@ -346,7 +336,7 @@ const ConnectorParametersForm: React.FC<ConnectorParametersFormProps> = ({
                   isSubmitting ||
                   deleteResult.isLoading
                 }
-                isLoading={result.isLoading || result.isFetching}
+                isLoading={isLoading || isFetching}
                 loadingText="Testing"
                 onClick={handleTestConnectionClick}
                 variant="outline"