From 8312146964ecb9d25fe8bdb1e94cdc1c9a559145 Mon Sep 17 00:00:00 2001
From: jpople <jeremy@ethyca.com>
Date: Mon, 22 Jul 2024 13:37:56 -0500
Subject: [PATCH] Add notice to old system integrations page (#5097)

---
 CHANGELOG.md                                  |  1 +
 .../system/hooks/useSystemFormTabs.tsx        | 24 +++++++++++++++----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 30b1211de5..48741486dd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,7 @@ The types of changes are:
 ### Changed
 - Moving Privacy Center endpoint logging behind debug flag [#5103](https://github.com/ethyca/fides/pull/5103)
 - Serve GVL languages as they are requested [#5112](https://github.com/ethyca/fides/pull/5112)
+- Changed text on system integrations tab to direct to new integration management [#5097](https://github.com/ethyca/fides/pull/5097)
 
 ### Developer Experience
 - Add `.syncignore` to reduce file sync size with new volumes [#5104](https://github.com/ethyca/fides/pull/5104)
diff --git a/clients/admin-ui/src/features/system/hooks/useSystemFormTabs.tsx b/clients/admin-ui/src/features/system/hooks/useSystemFormTabs.tsx
index 7a09fd1265..94fb00e8f0 100644
--- a/clients/admin-ui/src/features/system/hooks/useSystemFormTabs.tsx
+++ b/clients/admin-ui/src/features/system/hooks/useSystemFormTabs.tsx
@@ -1,17 +1,18 @@
 import { DataFlowAccordion } from "common/system-data-flow/DataFlowAccordion";
-import { Box, Text, useToast } from "fidesui";
+import { Box, Link, Text, useToast } from "fidesui";
 import NextLink from "next/link";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 
 import { useAppDispatch, useAppSelector } from "~/app/hooks";
 import { type TabData } from "~/features/common/DataTabs";
-import { useFeatures } from "~/features/common/features";
+import { useFeatures, useFlags } from "~/features/common/features";
 import {
   DirtyFormConfirmationModal,
   useIsAnyFormDirty,
 } from "~/features/common/hooks/useIsAnyFormDirty";
 import { useSystemOrDatamapRoute } from "~/features/common/hooks/useSystemOrDatamapRoute";
+import { INTEGRATION_MANAGEMENT_ROUTE } from "~/features/common/nav/v2/routes";
 import { DEFAULT_TOAST_PARAMS } from "~/features/common/toast";
 import ToastLink from "~/features/common/ToastLink";
 import ConnectionForm from "~/features/datastore-connections/system_portal_config/ConnectionForm";
@@ -70,6 +71,9 @@ const useSystemFormTabs = ({
   const [systemProcessesPersonalData, setSystemProcessesPersonalData] =
     useState<boolean | undefined>(undefined);
   const { plus: isPlusEnabled } = useFeatures();
+  const {
+    flags: { dataDiscoveryAndDetection },
+  } = useFlags();
 
   // Once we have saved the system basics, subscribe to the query so that activeSystem
   // stays up to date when redux invalidates the cache (for example, when we patch a connection config)
@@ -219,9 +223,19 @@ const useSystemFormTabs = ({
       content: activeSystem ? (
         <Box width={{ base: "100%", lg: "70%" }}>
           <Box px={6} paddingBottom={2}>
-            <Text fontSize="sm" lineHeight={5} fontWeight="medium">
-              Integrations are used to process privacy requests for access,
-              erasure, portability, rectification, and consent.
+            <Text fontSize="sm" lineHeight={5}>
+              {dataDiscoveryAndDetection ? (
+                <>
+                  Add an integration to start managing privacy requests and
+                  consent. Visit{" "}
+                  <Link href={INTEGRATION_MANAGEMENT_ROUTE} color="purple.500">
+                    Integration Management
+                  </Link>{" "}
+                  to set up monitoring on databases.
+                </>
+              ) : (
+                "Integrations are used to process privacy requests for access erasure, portability, rectification, and consent."
+              )}
             </Text>
           </Box>
           <ConnectionForm