PROD-2349 Fix messaging ui unresponsive. Fix warnings.

CHANGELOG.md

@@ -29,6 +29,8 @@ The types of changes are:
 
 ### Fixed
 - Fixed bug with unescaped table names in mysql queries [#5072](https://github.com/ethyca/fides/pull/5072/)
+- Fixed bug with unresponsive messaging ui [#5081](https://github.com/ethyca/fides/pull/5081/)
+
 
 ## [2.40.0](https://github.com/ethyca/fides/compare/2.39.2...2.40.0)
 

clients/admin-ui/src/features/messaging-templates/useMessagingTemplateToggle.tsx

@@ -1,5 +1,6 @@
 import { getErrorMessage } from "common/helpers";
 import { useToast } from "fidesui";
+import { useCallback } from "react";
 
 import { errorToastParams, successToastParams } from "~/features/common/toast";
 import { usePatchMessagingTemplateByIdMutation } from "~/features/messaging-templates/messaging-templates.slice";
@@ -9,29 +10,32 @@ const useMessagingTemplateToggle = () => {
   const toast = useToast();
   const [patchMessagingTemplateById] = usePatchMessagingTemplateByIdMutation();
 
-  const toggleIsTemplateEnabled = async ({
-    isEnabled,
-    templateId,
-  }: {
-    isEnabled: boolean;
-    templateId: string;
-  }) => {
-    const result = await patchMessagingTemplateById({
+  const toggleIsTemplateEnabled = useCallback(
+    async ({
+      isEnabled,
       templateId,
-      template: { is_enabled: isEnabled },
-    });
+    }: {
+      isEnabled: boolean;
+      templateId: string;
+    }) => {
+      const result = await patchMessagingTemplateById({
+        templateId,
+        template: { is_enabled: isEnabled },
+      });
 
-    if (isErrorResult(result)) {
-      toast(errorToastParams(getErrorMessage(result.error)));
-      return;
-    }
+      if (isErrorResult(result)) {
+        toast(errorToastParams(getErrorMessage(result.error)));
+        return;
+      }
 
-    toast(
-      successToastParams(
-        `Messaging template ${isEnabled ? "enabled" : "disabled"}`
-      )
-    );
-  };
+      toast(
+        successToastParams(
+          `Messaging template ${isEnabled ? "enabled" : "disabled"}`
+        )
+      );
+    },
+    [patchMessagingTemplateById, toast]
+  );
 
   return { toggleIsTemplateEnabled };
 };

clients/admin-ui/src/pages/messaging/index.tsx

@@ -133,9 +133,10 @@ const MessagingPage: NextPage = () => {
         cell: (props) => (
           <Flex align="center" justifyContent="flex-start" w="full" h="full">
             <Switch
+              name={`is_enabled_${props.row.original.id}`}
               isChecked={props.getValue()}
               colorScheme="complimentary"
-              onChange={async (e) => {
+              onChange={async (e: any) => {
                 toggleIsTemplateEnabled({
                   isEnabled: e.target.checked,
                   templateId: props.row.original.id,
@@ -154,7 +155,7 @@ const MessagingPage: NextPage = () => {
     [toggleIsTemplateEnabled]
   );
 
-  const sortedData = sortBy(data, "id");
+  const sortedData = useMemo(() => sortBy(data, "id"), [data]);
   const tableInstance = useReactTable<MessagingTemplateWithPropertiesSummary>({
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
@@ -301,7 +302,7 @@ const MissingMessagesInfoBox = () => {
       <InfoBox
         title="Not all properties have messages configured."
         text={
-          <Text>
+          <Text as="span">
             You have properties that do not have messages configured. Users who
             submit privacy requests for these properties may not receive the
             necessary emails regarding their requests.{" "}