PROD-2336 Add notice when messaging is in global or basic mode

CHANGELOG.md

@@ -30,6 +30,7 @@ The types of changes are:
 - Messaging page now shows a notice if you have properties without any templates [#5077](https://github.com/ethyca/fides/pull/5077)
 - Endpoints for listing systems (GET /system) and datasets (GET /dataset) now support optional pagination [#5071](https://github.com/ethyca/fides/pull/5071)
 - Moves some endpoints for property-specific messaging from OSS -> plus [#5069](https://github.com/ethyca/fides/pull/5069)
+- Messaging page will now show a notice about using global mode [#5090](https://github.com/ethyca/fides/pull/5090)
 
 ### Developer Experience
 - Upgrade to React 18 and Chakra 2, including other dependencies [#5036](https://github.com/ethyca/fides/pull/5036)

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

@@ -7,7 +7,7 @@ import {
   getSortedRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import { Box, Button, Flex, HStack, Switch, Text, VStack } from "fidesui";
+import { Box, Button, Flex, HStack, Link, Switch, Text, VStack } from "fidesui";
 import { sortBy } from "lodash";
 import { NextPage } from "next";
 import { useRouter } from "next/router";
@@ -37,6 +37,7 @@ import { CustomizableMessagingTemplatesEnum } from "~/features/messaging-templat
 import CustomizableMessagingTemplatesLabelEnum from "~/features/messaging-templates/CustomizableMessagingTemplatesLabelEnum";
 import { useGetSummaryMessagingTemplatesQuery } from "~/features/messaging-templates/messaging-templates.slice.plus";
 import useMessagingTemplateToggle from "~/features/messaging-templates/useMessagingTemplateToggle";
+import { useGetConfigurationSettingsQuery } from "~/features/privacy-requests";
 import { useGetAllPropertiesQuery } from "~/features/properties";
 import { MessagingTemplateWithPropertiesSummary } from "~/types/api";
 
@@ -177,6 +178,7 @@ const MessagingPage: NextPage = () => {
         </Text>
       </PageHeader>
 
+      <FeatureNotEnabledInfoBox />
       <MissingMessagesInfoBox />
 
       <TableActionBar>
@@ -321,4 +323,43 @@ const MissingMessagesInfoBox = () => {
   );
 };
 
+const FeatureNotEnabledInfoBox = () => {
+  const { data: appConfig } = useGetConfigurationSettingsQuery({
+    api_set: false,
+  });
+
+  if (appConfig?.notifications.enable_property_specific_messaging) {
+    return null;
+  }
+
+  return (
+    <Box mb={6} data-testid="notice-properties-without-messaging-templates">
+      <InfoBox
+        title="Basic messaging enabled"
+        text={
+          <Text as="span">
+            In basic messaging mode, you can edit the content of your messages
+            from this screen. Please note that in basic messaging, the “Enable”
+            toggle does not apply. Fides also supports property specific
+            messaging mode. Read our{" "}
+            <Link
+              href="https://fid.es/property-specific-messaging"
+              target="_blank"
+              rel="nofollow"
+              textDecoration="underline"
+            >
+              docs
+            </Link>{" "}
+            for more information about property specific mode or contact{" "}
+            <Link href="mailto:support@ethyca.com" textDecoration="underline">
+              Ethyca support
+            </Link>{" "}
+            to enable this mode on your Fides instance.
+          </Text>
+        }
+      />
+    </Box>
+  );
+};
+
 export default MessagingPage;