Add "view" detail links to action center success toasts

CHANGELOG.md

@@ -24,6 +24,7 @@ Changes can also be flagged with a GitHub label for tracking purposes. The URL o
 ### Added
 - Added Recorded URL to Consent Report [#6077](https://github.com/ethyca/fides/pull/6077)
 - Added ConnectionType.okta, OktaSchema, OktaConnector as support for the Okta Monitor [#6078](https://github.com/ethyca/fides/pull/6078)
+- Added "View" detail links to success toasts in action center [#6113](https://github.com/ethyca/fides/pull/6113)
 
 ### Changed
 - Abstract OT consent migration logic, allow write to Fides preferences api [#6099](https://github.com/ethyca/fides/pull/6099)

clients/admin-ui/cypress/e2e/action-center.cy.ts

@@ -192,7 +192,7 @@ describe("Action center", () => {
       cy.wait("@ignoreMonitorResultSystem").then((interception) => {
         expect(interception.request.url).to.contain("[undefined]");
       });
-      cy.getByTestId("success-alert").should(
+      cy.getByTestId("toast-success-msg").should(
         "contain",
         "108 uncategorized assets have been ignored and will not appear in future scans.",
       );
@@ -202,7 +202,7 @@ describe("Action center", () => {
         cy.getByTestId("add-btn").click({ force: true });
       });
       cy.wait("@addMonitorResultSystem");
-      cy.getByTestId("success-alert").should(
+      cy.getByTestId("toast-success-msg").should(
         "contain",
         "10 assets from Google Tag Manager have been added to the system inventory.",
       );
@@ -212,7 +212,7 @@ describe("Action center", () => {
         cy.getByTestId("ignore-btn").click({ force: true });
       });
       cy.wait("@ignoreMonitorResultSystem");
-      cy.getByTestId("success-alert").should(
+      cy.getByTestId("toast-success-msg").should(
         "contain",
         "10 assets from Google Tag Manager have been ignored and will not appear in future scans.",
       );
@@ -232,7 +232,7 @@ describe("Action center", () => {
       cy.getByTestId("bulk-actions-menu").click();
       cy.getByTestId("bulk-add").click();
       cy.wait("@addMonitorResultSystem");
-      cy.getByTestId("success-alert").should(
+      cy.getByTestId("toast-success-msg").should(
         "contain",
         "16 assets have been added to the system inventory.",
       );
@@ -246,7 +246,7 @@ describe("Action center", () => {
       cy.getByTestId("bulk-actions-menu").click();
       cy.getByTestId("bulk-ignore").click();
       cy.wait("@ignoreMonitorResultSystem");
-      cy.getByTestId("success-alert").should(
+      cy.getByTestId("toast-success-msg").should(
         "contain",
         "124 assets have been ignored and will not appear in future scans.",
       );
@@ -430,7 +430,7 @@ describe("Action center", () => {
 
       // Now test with search
       cy.getByTestId("row-2-col-system").within(() => {
-        cy.getByTestId("system-badge").click();
+        cy.getByTestId("system-badge").click({ force: true });
         cy.getByTestId("system-select").find("input").type("demo m");
         cy.wait("@getSystemsWithSearch").then((interception) => {
           expect(interception.request.query.search).to.eq("demo m");
@@ -471,7 +471,7 @@ describe("Action center", () => {
         cy.getByTestId("add-btn").click({ force: true });
       });
       cy.wait("@addAssets");
-      cy.getByTestId("success-alert").should(
+      cy.getByTestId("toast-success-msg").should(
         "contain",
         'Browser request "11020051272" has been added to the system inventory.',
       );
@@ -481,7 +481,7 @@ describe("Action center", () => {
         cy.getByTestId("ignore-btn").click({ force: true });
       });
       cy.wait("@ignoreAssets");
-      cy.getByTestId("success-alert").should(
+      cy.getByTestId("toast-success-msg").should(
         "contain",
         'Browser request "11020051272" has been ignored and will not appear in future scans.',
       );
@@ -492,7 +492,7 @@ describe("Action center", () => {
         cy.getByTestId("restore-btn").click({ force: true });
       });
       cy.wait("@restoreAssets");
-      cy.getByTestId("success-alert").should(
+      cy.getByTestId("toast-success-msg").should(
         "contain",
         'Browser request "697301175" is no longer ignored and will appear in future scans.',
       );
@@ -507,7 +507,7 @@ describe("Action center", () => {
       cy.getByTestId("bulk-actions-menu").click();
       cy.getByTestId("bulk-add").click();
       cy.wait("@addAssets");
-      cy.getByTestId("success-alert").should(
+      cy.getByTestId("toast-success-msg").should(
         "contain",
         "3 assets from Google Tag Manager have been added to the system inventory.",
       );
@@ -522,7 +522,7 @@ describe("Action center", () => {
       cy.getByTestId("bulk-actions-menu").click();
       cy.getByTestId("bulk-ignore").click();
       cy.wait("@ignoreAssets");
-      cy.getByTestId("success-alert").should(
+      cy.getByTestId("toast-success-msg").should(
         "contain",
         "3 assets from Google Tag Manager have been ignored and will not appear in future scans.",
       );
@@ -538,7 +538,7 @@ describe("Action center", () => {
       cy.getByTestId("bulk-actions-menu").click();
       cy.getByTestId("bulk-restore").click();
       cy.wait("@restoreAssets");
-      cy.getByTestId("success-alert").should(
+      cy.getByTestId("toast-success-msg").should(
         "contain",
         "2 assets have been restored and will appear in future scans.",
       );
@@ -558,7 +558,7 @@ describe("Action center", () => {
       cy.getByTestId("add-all").should("have.class", "ant-btn-loading");
       cy.wait("@slowRequest");
       cy.url().should("not.contain", systemId);
-      cy.getByTestId("success-alert").should(
+      cy.getByTestId("toast-success-msg").should(
         "contain",
         "11 assets from Google Tag Manager have been added to the system inventory.",
       );
@@ -577,7 +577,7 @@ describe("Action center", () => {
       cy.getByTestId("system-select").antSelect("Fidesctl System");
       cy.getByTestId("save-btn").click();
       cy.wait("@patchAssets");
-      cy.getByTestId("success-alert").should(
+      cy.getByTestId("toast-success-msg").should(
         "contain",
         "3 assets have been assigned to Fidesctl System.",
       );
@@ -596,7 +596,7 @@ describe("Action center", () => {
       cy.getByTestId("taxonomy-select").antSelect("essential");
       cy.getByTestId("save-btn").click({ force: true });
       cy.wait("@patchAssets");
-      cy.getByTestId("success-alert").should(
+      cy.getByTestId("toast-success-msg").should(
         "contain",
         "Consent categories added to 3 assets from Google Tag Manager.",
       );

clients/admin-ui/src/features/ToastLink.module.scss

@@ -0,0 +1,6 @@
+.toastLink {
+  text-decoration: underline;
+  font-size: var(--fidesui-font-size-md);
+  padding-left: 0;
+  padding-right: 0;
+}

clients/admin-ui/src/features/common/ToastLink.tsx

@@ -1,6 +1,8 @@
 import { AntButton as Button } from "fidesui";
 import { ReactNode } from "react";
 
+import styles from "~/features/ToastLink.module.scss";
+
 // It's difficult to pass a NextLink directly into a toast, so we can use a styled button instead,
 // where the onClick can use the next router
 // https://github.com/chakra-ui/chakra-ui/issues/3690
@@ -15,8 +17,8 @@ const ToastLink = ({
     onClick={onClick}
     type="link"
     role="link"
-    size="large"
-    className="m-0 p-0 font-medium text-gray-700 underline"
+    size="small"
+    className={styles.toastLink}
   >
     {children}
   </Button>

clients/admin-ui/src/features/common/utils.ts

@@ -133,3 +133,7 @@ export const getDomain = (urlOrDomain: string): string => {
     return urlOrDomain.replace(/^(https?:\/\/)?(www\.)?/, "");
   }
 };
+
+export const stripHashFromUrl = (url: string) => {
+  return url.split("#")[0];
+};

clients/admin-ui/src/features/data-discovery-and-detection/action-center/hooks/useDiscoveredAssetsColumns.tsx

@@ -18,8 +18,10 @@ import { SystemCell } from "../tables/cells/SystemCell";
 
 export const useDiscoveredAssetsColumns = ({
   readonly,
+  onTabChange,
 }: {
   readonly: boolean;
+  onTabChange: (index: number) => void;
 }) => {
   const columnHelper = createColumnHelper<StagedResourceAPIResponse>();
 
@@ -158,7 +160,10 @@ export const useDiscoveredAssetsColumns = ({
     columnHelper.display({
       id: "actions",
       cell: (props) => (
-        <DiscoveredAssetActionsCell asset={props.row.original} />
+        <DiscoveredAssetActionsCell
+          asset={props.row.original}
+          onTabChange={onTabChange}
+        />
       ),
       header: "Actions",
       meta: {

clients/admin-ui/src/features/data-discovery-and-detection/action-center/hooks/useDiscoveredSystemAggregateColumns.tsx

@@ -21,12 +21,14 @@ interface UseDiscoveredSystemAggregateColumnsProps {
   monitorId: string;
   readonly: boolean;
   allowIgnore?: boolean;
+  onTabChange: (index: number) => void;
 }
 
 export const useDiscoveredSystemAggregateColumns = ({
   monitorId,
   readonly,
   allowIgnore,
+  onTabChange,
 }: UseDiscoveredSystemAggregateColumnsProps) => {
   const columnHelper = createColumnHelper<MonitorSystemAggregate>();
 
@@ -131,6 +133,7 @@ export const useDiscoveredSystemAggregateColumns = ({
         system={props.row.original}
         monitorId={monitorId}
         allowIgnore={allowIgnore}
+        onTabChange={onTabChange}
       />
     ),
     header: "Actions",