Basic consent reporting UI (#4488)

CHANGELOG.md

@@ -28,6 +28,7 @@ The types of changes are:
 - TCF override management [#4484](https://github.com/ethyca/fides/pull/4484)
 - Readonly consent management table and modal [#4456](https://github.com/ethyca/fides/pull/4456), [#4477](https://github.com/ethyca/fides/pull/4477)
 - Access and erasure support for Gong [#4461](https://github.com/ethyca/fides/pull/4461)
+- Add new UI for CSV consent reporting [#4488](https://github.com/ethyca/fides/pull/4488)
 
 ### Changed
 - Increased max number of preferences allowed in privacy preference API calls [#4469](https://github.com/ethyca/fides/pull/4469)

clients/admin-ui/cypress/e2e/consent-reporting.cy.ts

@@ -0,0 +1,79 @@
+import { stubPlus } from "cypress/support/stubs";
+
+import { CONSENT_REPORTING_ROUTE } from "~/features/common/nav/v2/routes";
+
+describe("Consent reporting", () => {
+  beforeEach(() => {
+    cy.login();
+  });
+
+  describe("access", () => {
+    it("can access the consent reporting page", () => {
+      stubPlus(true, {
+        core_fides_version: "1.9.6",
+        fidesplus_server: "healthy",
+        fidesplus_version: "1.9.6",
+        system_scanner: {
+          enabled: false,
+          cluster_health: null,
+          cluster_error: null,
+        },
+        dictionary: {
+          enabled: false,
+          service_health: null,
+          service_error: null,
+        },
+        tcf: {
+          enabled: false,
+        },
+        fides_cloud: {
+          enabled: false,
+        },
+      });
+      cy.visit(CONSENT_REPORTING_ROUTE);
+      cy.getByTestId("consent-reporting");
+    });
+    it("can't access without plus", () => {
+      stubPlus(false);
+      cy.visit(CONSENT_REPORTING_ROUTE);
+      cy.getByTestId("home-content");
+    });
+  });
+
+  describe("downloading reports", () => {
+    beforeEach(() => {
+      stubPlus(true, {
+        core_fides_version: "1.9.6",
+        fidesplus_server: "healthy",
+        fidesplus_version: "1.9.6",
+        system_scanner: {
+          enabled: false,
+          cluster_health: null,
+          cluster_error: null,
+        },
+        dictionary: {
+          enabled: false,
+          service_health: null,
+          service_error: null,
+        },
+        tcf: {
+          enabled: false,
+        },
+        fides_cloud: {
+          enabled: false,
+        },
+      });
+      cy.visit(CONSENT_REPORTING_ROUTE);
+    });
+    it("can request a report", () => {
+      cy.intercept({
+        url: "/api/v1/plus/consent_reporting*",
+        method: "GET",
+      }).as("getConsentReport");
+      cy.getByTestId("input-from-date").type("2023-11-01");
+      cy.getByTestId("input-to-date").type("2023-11-07");
+      cy.getByTestId("download-btn").click();
+      cy.wait("@getConsentReport");
+    });
+  });
+});

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

@@ -52,6 +52,7 @@ export const baseApi = createApi({
     "User",
     "Configuration Settings",
     "TCF Purpose Override",
+    "Consent Reporting",
   ],
   endpoints: () => ({}),
 });

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

@@ -111,6 +111,13 @@ export const NAV_CONFIG: NavConfigGroup[] = [
         requiresPlus: true,
         scopes: [ScopeRegistryEnum.PRIVACY_EXPERIENCE_READ],
       },
+      {
+        title: "Consent reporting",
+        path: routes.CONSENT_REPORTING_ROUTE,
+        requiresFlag: "consentReporting",
+        requiresPlus: true,
+        scopes: [ScopeRegistryEnum.PRIVACY_NOTICE_READ],
+      },
     ],
   },
   {

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

@@ -20,6 +20,7 @@ export const PRIVACY_EXPERIENCE_ROUTE = "/consent/privacy-experience";
 export const PRIVACY_NOTICES_ROUTE = "/consent/privacy-notices";
 export const CONFIGURE_CONSENT_ROUTE = "/consent/configure";
 export const ADD_MULTIPLE_VENDORS_ROUTE = "/consent/configure/add-vendors";
+export const CONSENT_REPORTING_ROUTE = "/consent/reporting";
 
 // Management group
 export const USER_MANAGEMENT_ROUTE = "/user-management";

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

@@ -0,0 +1,78 @@
+import {
+  Button,
+  HStack,
+  Input,
+  InputGroup,
+  InputLeftAddon,
+  useToast,
+} from "@fidesui/react";
+import { useState } from "react";
+
+import { getErrorMessage } from "~/features/common/helpers";
+import { useLazyDownloadReportQuery } from "~/features/consent-reporting/consent-reporting.slice";
+
+const ConsentReporting = () => {
+  const [startDate, setStartDate] = useState<string>("");
+  const [endDate, setEndDate] = useState<string>("");
+
+  const toast = useToast();
+
+  const [downloadReportTrigger, { isLoading }] = useLazyDownloadReportQuery();
+
+  const handleDownloadClicked = async () => {
+    const result = await downloadReportTrigger({ startDate, endDate });
+    if (result.isError) {
+      const message = getErrorMessage(
+        result.error,
+        "A problem occurred while generating your consent report.  Please try again."
+      );
+      toast({ status: "error", description: message });
+    } else {
+      const a = document.createElement("a");
+      const csvBlob = new Blob([result.data], { type: "text/csv" });
+      a.href = window.URL.createObjectURL(csvBlob);
+      a.download = `consent-reports.csv`;
+      a.click();
+    }
+  };
+
+  return (
+    <HStack gap={4} maxWidth="720px" data-testid="consent-reporting">
+      <InputGroup size="sm" flex={1}>
+        <InputLeftAddon borderRadius="md">From</InputLeftAddon>
+        <Input
+          type="date"
+          name="From"
+          value={startDate}
+          max={endDate || undefined}
+          onChange={(e) => setStartDate(e.target.value)}
+          borderRadius="md"
+          data-testid="input-from-date"
+        />
+      </InputGroup>
+      <InputGroup size="sm" flex={1}>
+        <InputLeftAddon borderRadius="md">To</InputLeftAddon>
+        <Input
+          type="date"
+          name="To"
+          value={endDate}
+          min={startDate || undefined}
+          onChange={(e) => setEndDate(e.target.value)}
+          borderRadius="md"
+          data-testid="input-to-date"
+        />
+      </InputGroup>
+      <Button
+        onClick={handleDownloadClicked}
+        isLoading={isLoading}
+        colorScheme="primary"
+        size="sm"
+        data-testid="download-btn"
+      >
+        Download report
+      </Button>
+    </HStack>
+  );
+};
+
+export default ConsentReporting;

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

@@ -0,0 +1,49 @@
+import { baseApi } from "~/features/common/api.slice";
+
+type DateRange = {
+  startDate?: string;
+  endDate?: string;
+};
+
+export function convertDateRangeToSearchParams({
+  startDate,
+  endDate,
+}: DateRange) {
+  let startDateISO;
+  if (startDate) {
+    startDateISO = new Date(startDate);
+    startDateISO.setUTCHours(0, 0, 0);
+  }
+
+  let endDateISO;
+  if (endDate) {
+    endDateISO = new Date(endDate);
+    endDateISO.setUTCHours(0, 0, 0);
+  }
+
+  return {
+    ...(startDateISO ? { created_gt: startDateISO.toISOString() } : {}),
+    ...(endDateISO ? { created_lt: endDateISO.toISOString() } : {}),
+  };
+}
+
+export const consentReportingApi = baseApi.injectEndpoints({
+  endpoints: (build) => ({
+    downloadReport: build.query<any, DateRange>({
+      query: ({ startDate, endDate }) => {
+        const params = {
+          ...convertDateRangeToSearchParams({ startDate, endDate }),
+          download_csv: "true",
+        };
+        return {
+          url: "plus/consent_reporting",
+          params,
+          responseHandler: "content-type",
+        };
+      },
+      providesTags: ["Consent Reporting"],
+    }),
+  }),
+});
+
+export const { useLazyDownloadReportQuery } = consentReportingApi;

clients/admin-ui/src/flags.json

@@ -35,5 +35,11 @@
     "development": true,
     "test": true,
     "production": false
+  },
+  "consentReporting": {
+    "description": "Page to download consent reports by date",
+    "development": true,
+    "test": true,
+    "production": false
   }
 }

clients/admin-ui/src/pages/consent/reporting/index.tsx

@@ -0,0 +1,44 @@
+import { Box, Breadcrumb, BreadcrumbItem, Heading, Text } from "@fidesui/react";
+import NextLink from "next/link";
+import React from "react";
+
+import Layout from "~/features/common/Layout";
+import { CONSENT_REPORTING_ROUTE } from "~/features/common/nav/v2/routes";
+import ConsentReporting from "~/features/consent-reporting/ConsentReporting";
+
+const ConsentReportingPage = () => (
+  <Layout title="Configure consent">
+    <Box mb={4}>
+      <Heading fontSize="2xl" fontWeight="semibold" mb={2} data-testid="header">
+        Configure consent
+      </Heading>
+      <Box>
+        <Breadcrumb
+          fontWeight="medium"
+          fontSize="sm"
+          color="gray.600"
+          data-testid="breadcrumbs"
+        >
+          <BreadcrumbItem>
+            <NextLink href={CONSENT_REPORTING_ROUTE}>Consent</NextLink>
+          </BreadcrumbItem>
+          <BreadcrumbItem color="complimentary.500">
+            <NextLink href="#">Reporting</NextLink>
+          </BreadcrumbItem>
+        </Breadcrumb>
+      </Box>
+    </Box>
+    <Text fontSize="sm" mb={8} width={{ base: "100%", lg: "50%" }}>
+      Download a CSV containing a report of consent preferences made by users on
+      your sites. Select a date range below and click &quot;Download
+      report&quot;. Depending on the number of records in the date range you
+      select, it may take several minutes to prepare the file after you click
+      &quot;Download report&quot;.
+    </Text>
+    <Box data-testid="consent">
+      <ConsentReporting />
+    </Box>
+  </Layout>
+);
+
+export default ConsentReportingPage;