Privacy notice initial page and redux

CHANGELOG.md

@@ -22,6 +22,7 @@ The types of changes are:
 * Feature flags can be set such that they cannot be modified by the user [#2966](https://github.com/ethyca/fides/pull/2966)
 * Added the datamap UI to make it open source [#2988](https://github.com/ethyca/fides/pull/2988)
 * Introduced a `FixedLayout` component (from the datamap UI) for pages that need to be a fixed height and scroll within [#2992](https://github.com/ethyca/fides/pull/2992)
+* Added preliminary privacy notice page [#2995](https://github.com/ethyca/fides/pull/2995)
 
 ### Changed
 * Set `privacyDeclarationDeprecatedFields` flags to false and set `userCannotModify` to true [2987](https://github.com/ethyca/fides/pull/2987)

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

@@ -0,0 +1,29 @@
+import { PRIVACY_NOTICES_ROUTE } from "~/features/common/nav/v2/routes";
+import { RoleRegistryEnum } from "~/types/api";
+
+describe("Privacy notices", () => {
+  beforeEach(() => {
+    cy.login();
+  });
+
+  describe("permissions", () => {
+    it("should not be viewable for approvers", () => {
+      cy.assumeRole(RoleRegistryEnum.APPROVER);
+      cy.visit(PRIVACY_NOTICES_ROUTE);
+      // should be redirected to the home page
+      cy.getByTestId("home-content");
+    });
+
+    it("should be visible to everyone else", () => {
+      [
+        RoleRegistryEnum.CONTRIBUTOR,
+        RoleRegistryEnum.OWNER,
+        RoleRegistryEnum.VIEWER,
+      ].forEach((role) => {
+        cy.assumeRole(role);
+        cy.visit(PRIVACY_NOTICES_ROUTE);
+        cy.getByTestId("privacy-notices-page");
+      });
+    });
+  });
+});

clients/admin-ui/src/app/store.ts

@@ -31,6 +31,7 @@ import {
 } from "user-management/index";
 
 import { STORAGE_ROOT_KEY } from "~/constants";
+import { authApi, reducer as authReducer } from "~/features/auth";
 import { baseApi } from "~/features/common/api.slice";
 import { reducer as featuresReducer } from "~/features/common/features";
 import { healthApi } from "~/features/common/health.slice";
@@ -56,11 +57,10 @@ import {
   reducer as organizationReducer,
 } from "~/features/organization";
 import { plusApi } from "~/features/plus/plus.slice";
+import { reducer as privacyNoticesReducer } from "~/features/privacy-notices/privacy-notices.slice";
 import { reducer as systemReducer } from "~/features/system";
 import { reducer as taxonomyReducer, taxonomyApi } from "~/features/taxonomy";
 
-import { authApi, reducer as authReducer } from "../features/auth";
-
 /**
  * To prevent the "redux-perist failed to create sync storage. falling back to noop storage"
  * console message within Next.js, the following snippet is required.
@@ -109,6 +109,7 @@ const reducer = {
   datastoreConnections: datastoreConnectionReducer,
   features: featuresReducer,
   organization: organizationReducer,
+  privacyNotices: privacyNoticesReducer,
   subjectRequests: privacyRequestsReducer,
   system: systemReducer,
   taxonomy: taxonomyReducer,

clients/admin-ui/src/features/common/api.slice.ts

@@ -24,6 +24,7 @@ export const baseApi = createApi({
     "Dataset",
     "Datasets",
     "System",
+    "PrivacyNotices",
   ],
   endpoints: () => ({}),
 });

clients/admin-ui/src/features/common/nav/v2/nav-config.ts

@@ -1,3 +1,4 @@
+import { FlagNames } from "~/features/common/features";
 import { ScopeRegistryEnum } from "~/types/api";
 
 import * as routes from "./routes";
@@ -7,7 +8,7 @@ export type NavConfigRoute = {
   path: string;
   exact?: boolean;
   requiresPlus?: boolean;
-  requiresFlag?: string;
+  requiresFlag?: FlagNames;
   /** This route is only available if the user has ANY of these scopes */
   scopes: ScopeRegistryEnum[];
 };
@@ -48,6 +49,13 @@ export const NAV_CONFIG: NavConfigGroup[] = [
         requiresFlag: "privacyRequestsConfiguration",
         scopes: [ScopeRegistryEnum.MESSAGING_CREATE_OR_UPDATE],
       },
+      {
+        title: "Privacy notices",
+        path: routes.PRIVACY_NOTICES_ROUTE,
+        requiresFlag: "privacyNotices",
+        requiresPlus: true,
+        scopes: [ScopeRegistryEnum.PRIVACY_NOTICE_READ],
+      },
     ],
   },
   {

clients/admin-ui/src/features/privacy-notices/PrivacyNoticesTable.tsx

@@ -0,0 +1,37 @@
+import { Box, List, ListItem, Text } from "@fidesui/react";
+
+import { useAppSelector } from "~/app/hooks";
+
+import {
+  selectAllPrivacyNotices,
+  selectPage,
+  selectPageSize,
+  useGetAllPrivacyNoticesQuery,
+} from "./privacy-notices.slice";
+
+const PrivacyNoticesTable = () => {
+  // Subscribe to get all privacy notices
+  const page = useAppSelector(selectPage);
+  const pageSize = useAppSelector(selectPageSize);
+  useGetAllPrivacyNoticesQuery({ page, size: pageSize });
+
+  const privacyNotices = useAppSelector(selectAllPrivacyNotices);
+
+  if (privacyNotices.length === 0) {
+    return <Text>No privacy notices found.</Text>;
+  }
+
+  return (
+    <Box>
+      <List>
+        {privacyNotices.map((notice) => (
+          <ListItem key={notice.id}>
+            {notice.name} - {notice.consent_mechanism}
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  );
+};
+
+export default PrivacyNoticesTable;

clients/admin-ui/src/features/privacy-notices/privacy-notices.slice.ts

@@ -0,0 +1,82 @@
+import { createSelector, createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+import type { RootState } from "~/app/store";
+import { baseApi } from "~/features/common/api.slice";
+import {
+  Page_PrivacyNoticeResponse_,
+  PrivacyNoticeRegion,
+  PrivacyNoticeResponse,
+} from "~/types/api";
+
+export interface State {
+  activePrivacyNoticeId?: string;
+  page?: number;
+  pageSize?: number;
+}
+
+const initialState: State = {
+  page: 1,
+  pageSize: 10,
+};
+
+interface PrivacyNoticesParams {
+  show_disabled?: boolean;
+  region?: PrivacyNoticeRegion;
+  systems_applicable?: boolean;
+  page?: number;
+  size?: number;
+}
+
+const privacyNoticesApi = baseApi.injectEndpoints({
+  endpoints: (build) => ({
+    getAllPrivacyNotices: build.query<
+      Page_PrivacyNoticeResponse_,
+      PrivacyNoticesParams
+    >({
+      query: () => ({ url: `privacy-notice/` }),
+      providesTags: () => ["PrivacyNotices"],
+    }),
+  }),
+});
+
+export const { useGetAllPrivacyNoticesQuery } = privacyNoticesApi;
+
+export const privacyNoticesSlice = createSlice({
+  name: "privacyNotices",
+  initialState,
+  reducers: {
+    setActivePrivacyNoticeId: (
+      draftState,
+      action: PayloadAction<string | undefined>
+    ) => {
+      draftState.activePrivacyNoticeId = action.payload;
+    },
+  },
+});
+
+export const { setActivePrivacyNoticeId } = privacyNoticesSlice.actions;
+
+export const { reducer } = privacyNoticesSlice;
+
+const selectPrivacyNotices = (state: RootState) => state.privacyNotices;
+export const selectPage = createSelector(
+  selectPrivacyNotices,
+  (state) => state.page
+);
+
+export const selectPageSize = createSelector(
+  selectPrivacyNotices,
+  (state) => state.pageSize
+);
+
+const emptyPrivacyNotices: PrivacyNoticeResponse[] = [];
+export const selectAllPrivacyNotices = createSelector(
+  [(RootState) => RootState, selectPage, selectPageSize],
+  (RootState, page, pageSize) => {
+    const data = privacyNoticesApi.endpoints.getAllPrivacyNotices.select({
+      page,
+      size: pageSize,
+    })(RootState)?.data;
+    return data ? data.items : emptyPrivacyNotices;
+  }
+);

clients/admin-ui/src/flags.json

@@ -23,5 +23,12 @@
     "development": true,
     "test": true,
     "production": false
+  },
+  "privacyNotices": {
+    "description": "Page to configure consent privacy notices",
+    "development": true,
+    "test": true,
+    "production": false,
+    "userCannotModify": true
   }
 }

clients/admin-ui/src/pages/consent/privacy-notices.tsx

@@ -0,0 +1,14 @@
+import { Box } from "@fidesui/react";
+
+import Layout from "~/features/common/Layout";
+import PrivacyNoticesTable from "~/features/privacy-notices/PrivacyNoticesTable";
+
+const PrivacyNoticesPage = () => (
+  <Layout title="Privacy notices">
+    <Box data-testid="privacy-notices-page">
+      <PrivacyNoticesTable />
+    </Box>
+  </Layout>
+);
+
+export default PrivacyNoticesPage;