PROD-2349 Fix messaging ui unresponsive. Fix warnings. (#5081)

Co-authored-by: Lucano Vera <lucanovera@ethyca.com>
ethyca · Jul 15, 2024 · e02e6e1 · e02e6e1
1 parent 1957636
commit e02e6e1
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 23 deletions.
diff --git a/CHANGELOG.md b/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)
 

diff --git a/clients/admin-ui/src/features/messaging-templates/useMessagingTemplateToggle.tsx b/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 };
 };

diff --git a/clients/admin-ui/src/pages/messaging/index.tsx b/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.{" "}