Add privacy preference lookup functionality

Author: lucanovera

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

@@ -25,6 +25,9 @@ export const baseApi = createApi({
     "Classify Instances Systems",
     "Connection Type",
     "Consentable Items",
+    "Consent Reporting",
+    "Consent Reporting Export",
+    "Current Privacy Preferences",
     "Custom Assets",
     "Custom Field Definition",
     "Custom Fields",
@@ -66,8 +69,6 @@ export const baseApi = createApi({
     "User",
     "Configuration Settings",
     "TCF Purpose Override",
-    "Consent Reporting",
-    "Consent Reporting Export",
     "OpenID Provider",
   ],
   endpoints: () => ({}),

clients/admin-ui/src/features/consent-reporting/ConsentLookupModal.tsx

@@ -1,30 +1,67 @@
+import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import {
-  AntFlex as Flex,
   AntForm as Form,
   AntInput as Input,
   AntTypography as Typography,
-  Button,
   Modal,
   ModalBody,
   ModalCloseButton,
   ModalContent,
   ModalHeader,
   ModalOverlay,
+  useToast,
 } from "fidesui";
 import { useState } from "react";
 
+import { PreferenceWithNoticeInformation } from "~/types/api";
+
+import { getErrorMessage } from "../common/helpers";
+import { FidesTableV2 } from "../common/table/v2";
+import { useLazyGetCurrentPrivacyPreferencesQuery } from "./consent-reporting.slice";
+import useConsentLookupTableColumns from "./hooks/useConsentLookupTableColumns";
+
 interface ConsentLookupModalProps {
   isOpen: boolean;
   onClose: () => void;
 }
 
 const ConsentLookupModal = ({ isOpen, onClose }: ConsentLookupModalProps) => {
-  const [showModal, setShowModal] = useState(false);
+  const [isSearching, setIsSearching] = useState(false);
+  const [searchResults, setSearchResults] = useState<
+    PreferenceWithNoticeInformation[]
+  >([]);
+  const [getCurrentPrivacyPreferencesTrigger] =
+    useLazyGetCurrentPrivacyPreferencesQuery();
+
+  const toast = useToast();
 
-  const handleSearch = (value: string) => {
-    console.log("value", value);
+  const handleSearch = async (search: string) => {
+    setIsSearching(true);
+    const { data, isError, error } = await getCurrentPrivacyPreferencesTrigger({
+      search,
+    });
+    if (isError) {
+      const errorMsg = getErrorMessage(
+        error,
+        `A problem occurred while looking up the preferences.`,
+      );
+
+      toast({ status: "error", description: errorMsg });
+    } else {
+      setSearchResults(data?.preferences || []);
+    }
+    setIsSearching(false);
   };
 
+  const columns = useConsentLookupTableColumns();
+  const tableInstance = useReactTable<PreferenceWithNoticeInformation>({
+    getCoreRowModel: getCoreRowModel(),
+    data: searchResults,
+    columns,
+    getRowId: (row) => `${row.privacy_notice_history_id}`,
+    manualPagination: true,
+  });
+
   return (
     <Modal
       id="custom-field-modal-hello-world"
@@ -58,9 +95,15 @@ const ConsentLookupModal = ({ isOpen, onClose }: ConsentLookupModalProps) => {
                 placeholder="Enter email, phone number, or device ID"
                 enterButton="Search"
                 onSearch={handleSearch}
+                loading={isSearching}
               />
             </Form.Item>
           </Form>
+          <div className="mb-4">
+            <FidesTableV2<PreferenceWithNoticeInformation>
+              tableInstance={tableInstance}
+            />
+          </div>
         </ModalBody>
       </ModalContent>
     </Modal>

clients/admin-ui/src/features/consent-reporting/consent-reporting.slice.ts

@@ -1,5 +1,5 @@
 import { baseApi } from "~/features/common/api.slice";
-import { Page_ConsentReportingSchema_ } from "~/types/api";
+import { Page_ConsentReportingSchema_, PreferencesSaved } from "~/types/api";
 
 type DateRange = {
   startDate?: string;
@@ -30,7 +30,20 @@ export function convertDateRangeToSearchParams({
 
 export const consentReportingApi = baseApi.injectEndpoints({
   endpoints: (build) => ({
-    downloadReport: build.query<any, DateRange>({
+    getCurrentPrivacyPreferences: build.query<any, { search: string }>({
+      query: ({ search }) => ({
+        url: "current-privacy-preferences",
+        params: {
+          email: search,
+          phone_number: search,
+          fides_user_device_id: search,
+          external_id: search,
+        },
+      }),
+      providesTags: ["Current Privacy Preferences"],
+    }),
+
+    downloadReport: build.query<PreferencesSaved, DateRange>({
       query: ({ startDate, endDate }) => {
         const params = {
           ...convertDateRangeToSearchParams({ startDate, endDate }),
@@ -63,4 +76,5 @@ export const consentReportingApi = baseApi.injectEndpoints({
 export const {
   useLazyDownloadReportQuery,
   useGetAllHistoricalPrivacyPreferencesQuery,
+  useLazyGetCurrentPrivacyPreferencesQuery,
 } = consentReportingApi;

clients/admin-ui/src/features/consent-reporting/hooks/useConsentLookupTableColumns.tsx

@@ -0,0 +1,44 @@
+import { createColumnHelper } from "@tanstack/react-table";
+import { useMemo } from "react";
+
+import { DefaultCell, DefaultHeaderCell } from "~/features/common/table/v2";
+import { PreferenceWithNoticeInformation } from "~/types/api";
+
+const columnHelper = createColumnHelper<PreferenceWithNoticeInformation>();
+
+const useConsentLookupTableColumns = () => {
+  const columns = useMemo(
+    () => [
+      columnHelper.accessor((row) => row.notice_id, {
+        id: "notice_id",
+        cell: ({ getValue }) => <DefaultCell value={getValue()} />,
+        header: (props) => <DefaultHeaderCell value="Notice Id" {...props} />,
+        enableSorting: false,
+      }),
+      columnHelper.accessor((row) => row.notice_key, {
+        id: "notice_key",
+        cell: ({ getValue }) => <DefaultCell value={getValue()} />,
+        header: (props) => <DefaultHeaderCell value="Notice Key" {...props} />,
+        enableSorting: false,
+      }),
+      columnHelper.accessor((row) => row.preference, {
+        id: "preference",
+        cell: ({ getValue }) => <DefaultCell value={getValue()} />,
+        header: (props) => <DefaultHeaderCell value="Preference" {...props} />,
+        enableSorting: false,
+      }),
+      columnHelper.accessor((row) => row.privacy_notice_history_id, {
+        id: "privacy_notice_history_id",
+        cell: ({ getValue }) => <DefaultCell value={getValue()} />,
+        header: (props) => (
+          <DefaultHeaderCell value="Privacy Notice History Id" {...props} />
+        ),
+        enableSorting: false,
+      }),
+    ],
+    [],
+  );
+
+  return columns;
+};
+export default useConsentLookupTableColumns;