Merge branch 'main' into HA-450_staged-resource-user-assigned-fields

Author: thingscouldbeworse

CHANGELOG.md

@@ -27,15 +27,24 @@ Changes can also be flagged with a GitHub label for tracking purposes. The URL o
 ### Changed
 - Add properties for user assigned systems/data_uses on staged resources [5841](https://github.com/ethyca/fides/pull/5841) https://github.com/ethyca/fides/labels/db-migration
 - Bumped supported Python versions to `3.10.16` and `3.9.21` [#5840](https://github.com/ethyca/fides/pull/5840)
+- Update the privacy request detail page to a new layout and improved styling [#5824](https://github.com/ethyca/fides/pull/5824)
 
 ### Developer Experience
 - Moved non-prod Admin UI dependencies to devDependencies [#5832](https://github.com/ethyca/fides/pull/5832)
+- Prevent Admin UI and Privacy Center from starting when running `nox -s dev` with datastore params [#5843](https://github.com/ethyca/fides/pull/5843)
+- Remove plotly (unused package) to reduce fides image size [#5852](https://github.com/ethyca/fides/pull/5852)
+
+### Fixed
+- Corrected the Tag color for some columns of the Privacy requests table. [#5848](https://github.com/ethyca/fides/pull/5848)
 
 ## [2.56.1](https://github.com/ethyca/fides/compare/2.56.0...2.56.1)
 
 ### Changed
 - Custom TCF purposes respect NOTICE_ONLY [#5830](https://github.com/ethyca/fides/pull/5830)
 
+### Fixed
+- Fixed usage of stale DB sessions when running privacy requests [#5834](https://github.com/ethyca/fides/pull/5834)
+
 ## [2.56.0](https://github.com/ethyca/fides/compare/2.55.4...2.56.0)
 
 ### Added
@@ -59,6 +68,7 @@ Changes can also be flagged with a GitHub label for tracking purposes. The URL o
 - Removed version pins in LDFLAGS & CFLAGS for local MSSQL builds [#5760](https://github.com/ethyca/fides/pull/5760)
 
 ### Fixed
+- Fixed background color of the message indicating the rows selected [#5847](https://github.com/ethyca/fides/pull/5847)
 - Fixed bug with D&D table column widths [#5813](https://github.com/ethyca/fides/pull/5813)
 - Fixed `poll_for_exited_privacy_request_tasks` for DSR-processing improvements [#5820](https://github.com/ethyca/fides/pull/5820)
 

clients/admin-ui/cypress/e2e/privacy-requests.cy.ts

@@ -102,12 +102,15 @@ describe("Privacy Requests", () => {
 
     it("shows the request details", () => {
       cy.getByTestId("privacy-request-details").within(() => {
-        cy.contains("Request ID").parent().contains(/pri_/);
+        cy.getByTestId("request-detail-value-id")
+          .should("have.prop", "value")
+          .should("match", /pri_/);
         cy.getByTestId("request-status-badge").contains("New");
       });
     });
 
     it("allows approving a new request", () => {
+      cy.getByTestId("privacy-request-actions-dropdown-btn").click();
       cy.getByTestId("privacy-request-approve-btn").click();
       cy.getByTestId("continue-btn").click();
 
@@ -117,6 +120,7 @@ describe("Privacy Requests", () => {
     });
 
     it("allows denying a new request", () => {
+      cy.getByTestId("privacy-request-actions-dropdown-btn").click();
       cy.getByTestId("privacy-request-deny-btn").click();
 
       cy.getByTestId("deny-privacy-request-modal").within(() => {
@@ -130,6 +134,7 @@ describe("Privacy Requests", () => {
     });
 
     it("shouldn't show the download button for pending requests", () => {
+      cy.getByTestId("privacy-request-actions-dropdown-btn").click();
       cy.getByTestId("download-results-btn").should("not.exist");
     });
   });
@@ -148,7 +153,11 @@ describe("Privacy Requests", () => {
       }).as("getAccessResultURL");
       stubPrivacyRequests(PrivacyRequestStatus.COMPLETE);
       cy.wait("@getAccessResultURL");
-      cy.getByTestId("download-results-btn").should("not.be.disabled");
+      cy.getByTestId("privacy-request-actions-dropdown-btn").click();
+      cy.getByTestId("download-results-btn")
+        .parents(".ant-dropdown-menu-item")
+        .should("not.have.class", "ant-dropdown-menu-item-disabled")
+        .should("have.attr", "aria-disabled", "false");
     });
 
     it("can't download when request info is stored locally", () => {
@@ -157,7 +166,11 @@ describe("Privacy Requests", () => {
       }).as("getAccessResultURL");
       stubPrivacyRequests(PrivacyRequestStatus.COMPLETE);
       cy.wait("@getAccessResultURL");
-      cy.getByTestId("download-results-btn").should("be.disabled");
+      cy.getByTestId("privacy-request-actions-dropdown-btn").click();
+      cy.getByTestId("download-results-btn")
+        .parents(".ant-dropdown-menu-item")
+        .should("have.class", "ant-dropdown-menu-item-disabled")
+        .should("have.attr", "aria-disabled", "true");
     });
 
     it("doesn't show the button for non-access requests", () => {
@@ -167,6 +180,7 @@ describe("Privacy Requests", () => {
         key: "test",
       });
       cy.wait("@getPrivacyRequest");
+      cy.getByTestId("privacy-request-actions-dropdown-btn").click();
       cy.getByTestId("download-results-btn").should("not.exist");
     });
   });

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

@@ -17,7 +17,7 @@ const DaysLeftTag = ({ daysLeft, includeText, status }: DaysLeftTagProps) => {
     status === PrivacyRequestStatus.DENIED ||
     status === PrivacyRequestStatus.IDENTITY_UNVERIFIED
   ) {
-    return null;
+    return <span>-</span>;
   }
 
   let color = "";

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

@@ -28,15 +28,15 @@ export const statusPropMap: {
     label: "Awaiting Email Send",
   },
   denied: {
-    color: "error",
+    color: "warning",
     label: "Denied",
   },
   canceled: {
     color: "marble",
     label: "Canceled",
   },
   error: {
-    color: "warning",
+    color: "error",
     label: "Error",
   },
   in_processing: {
@@ -68,7 +68,7 @@ interface RequestBadgeProps {
 const RequestStatusBadge = ({ status }: RequestBadgeProps) => (
   <Tag
     color={statusPropMap[status].color}
-    className="w-[120px] justify-center"
+    className="justify-center"
     data-testid="request-status-badge"
   >
     {statusPropMap[status].label}

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

@@ -1,4 +1,4 @@
-import { AntTag as Tag, Box } from "fidesui";
+import { AntTypography as Typography } from "fidesui";
 import { Rule } from "privacy-requests/types";
 import React from "react";
 
@@ -23,11 +23,11 @@ export const getActionTypes = (rules: Rule[]): ActionType[] =>
   );
 
 const RequestType = ({ rules }: RequestTypeProps) => {
-  const tags = getActionTypes(rules)
+  const actionTypeLabels = getActionTypes(rules)
     .map((action) => capitalize(action))
-    .map((action_type) => <Tag key={action_type}>{action_type}</Tag>);
+    .map((action_type) => action_type);
 
-  return <Box>{tags}</Box>;
+  return <Typography.Text>{actionTypeLabels.join(" - ")}</Typography.Text>;
 };
 
 export default RequestType;

clients/admin-ui/src/features/common/table/v2/RowSelectionBar.tsx

@@ -1,5 +1,6 @@
 import { Table as TableInstance } from "@tanstack/react-table";
 import { AntButton as Button, HStack, Td, Text, Tr } from "fidesui";
+import palette from "fidesui/src/palette/palette.module.scss";
 
 type RowSelectionBarProps<T> = {
   tableInstance: TableInstance<T>;
@@ -34,6 +35,7 @@ export const RowSelectionBar = <T,>({
         pr={2}
         py={0}
         colSpan={tableInstance.getAllColumns().length}
+        bgColor={palette.FIDESUI_FULL_WHITE}
       >
         <HStack>
           <Text data-testid="selected-row-count" fontSize="xs">

clients/admin-ui/src/features/privacy-requests/DownloadAccessResults.tsx

@@ -1,13 +1,12 @@
-import { Box, VStack } from "fidesui";
-import { useMemo } from "react";
+import { AntTabs as Tabs, AntTabsProps as TabsProps } from "fidesui";
+import { useMemo, useState } from "react";
 
 import { useGetAllPrivacyRequestsQuery } from "~/features/privacy-requests";
 import { PrivacyRequestStatus } from "~/types/api";
 
-import EventsAndLogs from "./events-and-logs/EventsAndLogs";
+import ActivityTimeline from "./events-and-logs/ActivityTimeline";
 import ManualProcessingList from "./manual-processing/ManualProcessingList";
 import RequestDetails from "./RequestDetails";
-import SubjectIdentities from "./SubjectIdentities";
 import { PrivacyRequestEntity } from "./types";
 
 type PrivacyRequestProps = {
@@ -36,23 +35,47 @@ const PrivacyRequest = ({ data: initialData }: PrivacyRequestProps) => {
   // Use latest data if available, otherwise use initial data
   const subjectRequest = latestData?.items[0] ?? initialData;
 
+  const isManualStepsRequired =
+    subjectRequest.status === PrivacyRequestStatus.REQUIRES_INPUT;
+
+  const [activeTabKey, setActiveTabKey] = useState(
+    isManualStepsRequired ? "manual-steps" : "activity",
+  );
+  const items: TabsProps["items"] = useMemo(
+    () => [
+      {
+        key: "activity",
+        label: "Activity",
+        children: <ActivityTimeline subjectRequest={subjectRequest} />,
+      },
+      {
+        key: "manual-steps",
+        label: "Manual steps",
+        children: (
+          <ManualProcessingList
+            subjectRequest={subjectRequest}
+            onComplete={() => setActiveTabKey("activity")}
+          />
+        ),
+        disabled: !isManualStepsRequired,
+      },
+    ],
+    [isManualStepsRequired, subjectRequest],
+  );
+
   return (
-    <VStack align="stretch" display="flex-start" spacing={6}>
-      <Box data-testid="privacy-request-details">
+    <div className="flex gap-8">
+      <div className="flex-1">
+        <Tabs
+          items={items}
+          activeKey={activeTabKey}
+          onChange={setActiveTabKey}
+        />
+      </div>
+      <div className="w-[432px]" data-testid="privacy-request-details">
         <RequestDetails subjectRequest={subjectRequest} />
-      </Box>
-      <Box>
-        <SubjectIdentities subjectRequest={subjectRequest} />
-      </Box>
-      {subjectRequest.status === PrivacyRequestStatus.REQUIRES_INPUT && (
-        <Box>
-          <ManualProcessingList subjectRequest={subjectRequest} />
-        </Box>
-      )}
-      <Box>
-        <EventsAndLogs subjectRequest={subjectRequest} />
-      </Box>
-    </VStack>
+      </div>
+    </div>
   );
 };