ethyca · jpople · Nov 18, 2025 · Nov 6, 2025 · Nov 6, 2025 · Nov 13, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -56,6 +56,7 @@ Changes can also be flagged with a GitHub label for tracking purposes. The URL o
 - Added rules and commands for the AI assistant. [#6944](https://github.com/ethyca/fides/pull/6944)
 - Updated SearchInput component to rely more on Ant Design defaults [#6968](https://github.com/ethyca/fides/pull/6968)
 - Replaced restore hotkey with refresh hotkey in Action Center fields [#6978](https://github.com/ethyca/fides/pull/6978)
+- Refactored AntMessage hooks to apply theming globally [#6934](https://github.com/ethyca/fides/pull/6934)
 
 ### Fixed
 - Fixed async polling initial requests not respecting ignore_errors configuration [#6924](https://github.com/ethyca/fides/pull/6924)

@@ -1,9 +1,9 @@
 import {
-  AntMessage as message,
   AntSwitch as Switch,
   AntSwitchProps as SwitchProps,
   AntTypography as Typography,
   useDisclosure,
+  useMessage,
 } from "fidesui";
 
 import { isErrorResult, RTKResult } from "~/types/errors";
@@ -30,7 +30,7 @@ export const EnableCell = ({
   ...props
 }: EnableCellProps) => {
   const modal = useDisclosure();
-  const [messageApi, messageContext] = message.useMessage();
+  const messageApi = useMessage();
   const handlePatch = async ({ enable }: { enable: boolean }) => {
     const result = await onToggle(enable);
     if (isErrorResult(result)) {
@@ -48,7 +48,6 @@ export const EnableCell = ({
 
   return (
     <>
-      {messageContext}
       <Switch
         checked={enabled}
         onChange={handleToggle}

@@ -4,12 +4,12 @@ import {
   AntFlex as Flex,
   AntForm as Form,
   AntInput as Input,
-  AntMessage as message,
   AntSelect as Select,
   AntSkeleton as Skeleton,
   AntTypography as Typography,
   ConfirmationModal,
   Icons,
+  useMessage,
 } from "fidesui";
 import { useRouter } from "next/router";
 import { useState } from "react";
@@ -58,7 +58,7 @@ const CustomFieldForm = ({
   const [form] = Form.useForm<CustomFieldsFormValues>();
   const router = useRouter();
 
-  const [messageApi, messageContext] = message.useMessage();
+  const messageApi = useMessage();
 
   const { createOrUpdate } = useCreateOrUpdateCustomField();
 
@@ -130,7 +130,6 @@ const CustomFieldForm = ({
       validateTrigger={["onBlur", "onChange"]}
       onFinish={onSubmit}
     >
-      {messageContext}
       <Form.Item
         label="Name"
         name="name"

@@ -5,7 +5,6 @@ import {
   AntEmpty as Empty,
   AntFlex as Flex,
   AntList as List,
-  AntMessage as message,
   AntModal as modal,
   AntPagination as Pagination,
   AntSplitter as Splitter,
@@ -80,7 +79,6 @@ const ActionCenterFields: NextPage = () => {
   const router = useRouter();
   const monitorId = decodeURIComponent(router.query.monitorId as string);
   const monitorTreeRef = useRef<MonitorTreeRef>(null);
-  const [messageApi, messageContext] = message.useMessage();
   const [modalApi, modalContext] = modal.useModal();
   const [hotkeysHelperModalOpen, setHotkeysHelperModalOpen] = useState(false);
   const { paginationProps, pageIndex, pageSize, resetPagination } =
@@ -143,15 +141,13 @@ const ActionCenterFields: NextPage = () => {
   const bulkActions = useBulkActions(
     monitorId,
     modalApi,
-    messageApi,
     async (urns: string[]) => {
       await monitorTreeRef.current?.refreshResourcesAndAncestors(urns);
     },
   );
   const fieldActions = useFieldActions(
     monitorId,
     modalApi,
-    messageApi,
     async (urns: string[]) => {
       await monitorTreeRef.current?.refreshResourcesAndAncestors(urns);
     },
@@ -265,7 +261,6 @@ const ActionCenterFields: NextPage = () => {
     fieldActions,
     updateSelectedListItem,
     handleNavigate,
-    messageApi,
     !!detailsUrn,
     () => refetch(),
   );
@@ -591,7 +586,6 @@ const ActionCenterFields: NextPage = () => {
         onCancel={() => setHotkeysHelperModalOpen(false)}
       />
       {modalContext}
-      {messageContext}
     </FixedLayout>
   );
 };

@@ -1,4 +1,4 @@
-import { AntMessage as Message, AntModal as Modal } from "fidesui";
+import { AntModal as Modal, useMessage } from "fidesui";
 
 import { pluralize } from "~/features/common/utils";
 import { FieldActionType } from "~/types/api/models/FieldActionType";
@@ -20,11 +20,12 @@ import {
 export const useBulkActions = (
   monitorId: string,
   modalApi: ReturnType<typeof Modal.useModal>[0],
-  messageApi: ReturnType<typeof Message.useMessage>[0],
   onRefreshTree?: (urns: string[]) => Promise<void>,
 ) => {
   const [bulkAction] = useFieldActionsMutation();
 
+  const messageApi = useMessage();
+
   const handleBulkAction =
     (actionType: FieldActionType) =>
     async (

@@ -1,4 +1,4 @@
-import { AntMessage as Message } from "fidesui";
+import { useMessage } from "fidesui";
 import { useHotkeys } from "react-hotkeys-hook";
 
 import { DatastoreStagedResourceAPIResponse } from "~/types/api/models/DatastoreStagedResourceAPIResponse";
@@ -35,7 +35,6 @@ type ActiveListItem =
  * @param fieldActions - The field actions object from useFieldActions
  * @param updateSelectedListItem - Function to update the selected list item
  * @param onNavigate - Function to handle navigation to field details
- * @param messageApi - Ant Design message API instance (needs to be passed in to avoid re-rendering the hook)
  * @param isDrawerOpen - Whether the details drawer is currently open
  * @param onRefresh - Function to handle refreshing the list
  */
@@ -44,10 +43,10 @@ export const useFieldActionHotkeys = (
   fieldActions: ReturnType<typeof useFieldActions>,
   updateSelectedListItem: (itemKey: React.Key, selected: boolean) => void,
   onNavigate: (urn: string | undefined) => void,
-  messageApi: ReturnType<typeof Message.useMessage>[0],
   isDrawerOpen: boolean,
   onRefresh: () => void,
 ) => {
+  const messageApi = useMessage();
   // Helper to open a category select dropdown programmatically
   const openCategorySelect = (selectElement: Element): boolean => {
     const selectorElement = selectElement.querySelector(

@@ -1,4 +1,4 @@
-import { AntMessage as Message, AntModal as Modal } from "fidesui";
+import { AntModal as Modal, useMessage } from "fidesui";
 import _ from "lodash";
 
 import { pluralize } from "~/features/common/utils";
@@ -47,7 +47,6 @@ export const getAvailableActions = (statusList: DiffStatus[]) => {
 export const useFieldActions = (
   monitorId: string,
   modalApi: ReturnType<typeof Modal.useModal>[0],
-  messageApi: ReturnType<typeof Message.useMessage>[0],
   onRefreshTree?: (urns: string[]) => Promise<void>,
 ) => {
   const [approveStagedResourcesMutation] = useApproveStagedResourcesMutation();
@@ -59,6 +58,8 @@ export const useFieldActions = (
   const [updateResourcesCategoryMutation] = useUpdateResourceCategoryMutation();
   const [promoteRemovalMutation] = usePromoteRemovalStagedResourcesMutation();
 
+  const messageApi = useMessage();
+
   const handleAction =
     (
       actionType: FieldActionType,

@@ -2,9 +2,9 @@ import {
   AntButton as Button,
   AntForm as Form,
   AntInput as Input,
-  AntMessage as message,
   AntSelect as Select,
   AntSpace as Space,
+  useMessage,
   WarningIcon,
 } from "fidesui";
 import { useRouter } from "next/router";
@@ -37,7 +37,7 @@ const DigestConfigForm = ({
 }: DigestConfigFormProps) => {
   const [form] = Form.useForm<DigestConfigFormValues>();
   const router = useRouter();
-  const [messageApi, messageContext] = message.useMessage();
+  const messageApi = useMessage();
   const [testEmailModalOpen, setTestEmailModalOpen] = useState(false);
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
   const [timezone, setTimezone] = useState<string>(
@@ -159,7 +159,6 @@ const DigestConfigForm = ({
 
   return (
     <>
-      {messageContext}
       <Form
         form={form}
         layout="vertical"

@@ -2,12 +2,12 @@ import {
   AntButton as Button,
   AntFlex as Flex,
   AntList as List,
-  AntMessage as message,
   AntPagination as Pagination,
   AntSpace as Space,
   AntSwitch as Switch,
   AntTag as Tag,
   AntTypography as Typography,
+  useMessage,
 } from "fidesui";
 import { useRouter } from "next/router";
 
@@ -24,7 +24,7 @@ import { useDigestConfigList } from "../hooks/useDigestConfigList";
 
 const DigestConfigList = () => {
   const router = useRouter();
-  const [messageApi, messageContext] = message.useMessage();
+  const messageApi = useMessage();
   const {
     data,
     total,
@@ -75,7 +75,6 @@ const DigestConfigList = () => {
 
   return (
     <div>
-      {messageContext}
       {/* Header with search and add button */}
       <Flex justify="space-between" align="center" className="mb-4">
         <div className="w-1/3">

@@ -2,9 +2,9 @@ import {
   AntButton as Button,
   AntForm as Form,
   AntInput as Input,
-  AntMessage as message,
   AntModal as Modal,
   AntSpace as Space,
+  useMessage,
 } from "fidesui";
 
 import { getErrorMessage, isErrorResult } from "~/features/common/helpers";
@@ -26,7 +26,7 @@ const TestEmailModal = ({
   digestType,
 }: TestEmailModalProps) => {
   const [form] = Form.useForm<{ email: string }>();
-  const [messageApi, messageContext] = message.useMessage();
+  const messageApi = useMessage();
   const [testDigestConfig, { isLoading }] = useTestDigestConfigMutation();
 
   const handleSubmit = async (values: { email: string }) => {
@@ -59,7 +59,6 @@ const TestEmailModal = ({
       footer={null}
       destroyOnClose
     >
-      {messageContext}
       <Form
         form={form}
         layout="vertical"

@@ -2,11 +2,11 @@ import {
   AntButton as Button,
   AntFlex as Flex,
   AntList as List,
-  AntMessage as message,
   AntTag as Tag,
   AntTooltip as Tooltip,
   AntTypography as Typography,
   useDisclosure,
+  useMessage,
   WarningIcon,
 } from "fidesui";
 import { useCallback, useEffect, useState } from "react";
@@ -39,6 +39,8 @@ const TaskConditionsTab = ({ connectionKey }: TaskConditionsTabProps) => {
     condition: ConditionLeaf;
   } | null>(null);
 
+  const message = useMessage();
+
   const {
     isOpen: isDeleteOpen,
     onOpen: onDeleteOpen,
@@ -137,7 +139,7 @@ const TaskConditionsTab = ({ connectionKey }: TaskConditionsTabProps) => {
         throw err;
       }
     },
-    [editingIndex, conditions, saveConditions],
+    [conditions, editingIndex, saveConditions, message],
   );
 
   const handleDeleteCondition = useCallback(
@@ -171,7 +173,7 @@ const TaskConditionsTab = ({ connectionKey }: TaskConditionsTabProps) => {
       setConditionToDelete(null);
     }
     onDeleteClose();
-  }, [conditionToDelete, conditions, saveConditions, onDeleteClose]);
+  }, [conditionToDelete, onDeleteClose, conditions, saveConditions, message]);
 
   if (isLoading) {
     return (

@@ -1,4 +1,4 @@
-import { AntMessage as message } from "fidesui";
+import { useMessage } from "fidesui";
 import { useCallback, useEffect, useState } from "react";
 
 import {
@@ -21,6 +21,8 @@ export const useManualTaskManagement = ({
 }: UseManualTaskManagementProps) => {
   const [manualTasks, setManualTasks] = useState<Task[]>([]);
 
+  const message = useMessage();
+
   const { data, refetch } = useGetManualFieldsQuery(
     { connectionKey: integration ? integration.key : "" },
     {
@@ -58,7 +60,7 @@ export const useManualTaskManagement = ({
         message.error("Failed to delete manual task. Please try again.");
       }
     },
-    [deleteManualField, integration.key, refetch],
+    [deleteManualField, integration.key, message, refetch],
   );
 
   const refreshManualTasks = useCallback(() => {

@@ -1,4 +1,4 @@
-import { AntMessage as message, useDisclosure } from "fidesui";
+import { useDisclosure, useMessage } from "fidesui";
 import { useCallback, useEffect, useState } from "react";
 
 import {
@@ -16,6 +16,8 @@ export const useUserAssignment = ({ integration }: UseUserAssignmentProps) => {
   const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
   const [isSavingUsers, setIsSavingUsers] = useState(false);
 
+  const message = useMessage();
+
   // User creation modal state
   const {
     isOpen: isCreateUserOpen,
@@ -86,7 +88,7 @@ export const useUserAssignment = ({ integration }: UseUserAssignmentProps) => {
         setIsSavingUsers(false);
       }
     },
-    [assignUsersToManualTask, integration.key, selectedUsers],
+    [assignUsersToManualTask, integration.key, message, selectedUsers],
   );
 
   const handleUserAssignmentChange = useCallback(

@@ -1,5 +1,5 @@
 import { useAPIHelper } from "common/hooks";
-import { AntMessage as message } from "fidesui";
+import { useMessage } from "fidesui";
 
 import { useLazyGetAuthorizationUrlQuery } from "~/features/datastore-connections/datastore-connection.slice";
 import {
@@ -28,6 +28,8 @@ export const useIntegrationAuthorization = ({
   const [getAuthorizationUrl] = useLazyGetAuthorizationUrlQuery();
   const { handleError } = useAPIHelper();
 
+  const message = useMessage();
+
   const handleAuthorize = async () => {
     if (!connection?.key) {
       message.error("Authorization failed: connection key not found");

@@ -3,7 +3,6 @@ import {
   AntCheckbox as Checkbox,
   AntDivider as Divider,
   AntInput as Input,
-  AntMessage as message,
   AntSpace as Space,
   AntTypography as Typography,
   AntUpload as Upload,
@@ -13,6 +12,7 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  useMessage,
 } from "fidesui";
 import { useState } from "react";
 
@@ -38,6 +38,8 @@ export const CompleteTaskModal = ({
   const [comment, setComment] = useState("");
   const [fileList, setFileList] = useState<any[]>([]);
 
+  const message = useMessage();
+
   const handleSave = async () => {
     try {
       const getFieldValue = () => {