Fix download request as csv (#7190)

Author: lucanovera

clients/admin-ui/src/features/privacy-requests/dashboard/PrivacyRequestsDashboard.tsx

@@ -7,21 +7,18 @@ import {
   Pagination,
   Skeleton,
   Spin,
-  useMessage,
 } from "fidesui";
 import React, { useEffect, useMemo } from "react";
 
 import { BulkActionsDropdown } from "~/features/common/BulkActionsDropdown";
 import { useSelection } from "~/features/common/hooks/useSelection";
 import { ResultsSelectedCount } from "~/features/common/ResultsSelectedCount";
-import {
-  useLazyDownloadPrivacyRequestCsvV2Query,
-  useSearchPrivacyRequestsQuery,
-} from "~/features/privacy-requests/privacy-requests.slice";
+import { useSearchPrivacyRequestsQuery } from "~/features/privacy-requests/privacy-requests.slice";
 import { PrivacyRequestResponse } from "~/types/api";
 
 import { useAntPagination } from "../../common/pagination/useAntPagination";
 import { DuplicateRequestsButton } from "./DuplicateRequestsButton";
+import useDownloadPrivacyRequestReport from "./hooks/useDownloadPrivacyRequestReport";
 import { usePrivacyRequestBulkActions } from "./hooks/usePrivacyRequestBulkActions";
 import usePrivacyRequestsFilters from "./hooks/usePrivacyRequestsFilters";
 import { ListItem } from "./list-item/ListItem";
@@ -34,8 +31,6 @@ export const PrivacyRequestsDashboard = () => {
       pagination,
     });
 
-  const messageApi = useMessage();
-
   const { data, isLoading, isFetching, refetch } =
     useSearchPrivacyRequestsQuery({
       ...filterQueryParams,
@@ -70,23 +65,8 @@ export const PrivacyRequestsDashboard = () => {
     clearSelectedIds();
   }, [requests, clearSelectedIds]);
 
-  const [downloadReport] = useLazyDownloadPrivacyRequestCsvV2Query();
-
-  const handleExport = async () => {
-    let messageStr;
-    try {
-      await downloadReport(filterQueryParams);
-    } catch (error) {
-      if (error instanceof Error) {
-        messageStr = error.message;
-      } else {
-        messageStr = "Unknown error occurred";
-      }
-    }
-    if (messageStr) {
-      messageApi.error(messageStr, 5000);
-    }
-  };
+  const { downloadReport, isDownloadingReport } =
+    useDownloadPrivacyRequestReport();
 
   const { bulkActionMenuItems } = usePrivacyRequestBulkActions({
     requests,
@@ -143,7 +123,8 @@ export const PrivacyRequestsDashboard = () => {
             aria-label="Export report"
             data-testid="export-btn"
             icon={<Icons.Download />}
-            onClick={handleExport}
+            onClick={() => downloadReport(filterQueryParams)}
+            loading={isDownloadingReport}
           />
         </Flex>
       </Flex>

clients/admin-ui/src/features/privacy-requests/dashboard/hooks/useDownloadPrivacyRequestReport.ts

@@ -0,0 +1,39 @@
+import { useMessage } from "fidesui";
+
+import { getErrorMessage } from "~/features/common/helpers";
+
+import {
+  SearchFilterParams,
+  useLazyDownloadPrivacyRequestCsvV2Query,
+} from "../../privacy-requests.slice";
+
+const useDownloadPrivacyRequestReport = () => {
+  const messageApi = useMessage();
+
+  const [download, { isFetching }] = useLazyDownloadPrivacyRequestCsvV2Query();
+
+  const downloadReport = async (args: SearchFilterParams) => {
+    const result = await download(args);
+    if (result.isError) {
+      const message = getErrorMessage(
+        result.error,
+        "A problem occurred while generating your privacy request report. Please try again.",
+      );
+      messageApi.error(message);
+    } else {
+      const a = document.createElement("a");
+      const csvBlob = new Blob([result.data], { type: "text/csv" });
+      const csvUrl = window.URL.createObjectURL(csvBlob);
+      a.href = csvUrl;
+      a.download = `privacy-request-report.csv`;
+      a.click();
+      a.remove();
+      window.URL.revokeObjectURL(csvUrl);
+      messageApi.success("Successfully downloaded privacy request report");
+    }
+  };
+
+  return { downloadReport, isDownloadingReport: isFetching };
+};
+
+export default useDownloadPrivacyRequestReport;

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

@@ -116,7 +116,7 @@ interface DateRangeParams {
   to?: string | null;
 }
 
-interface SearchFilterParams
+export interface SearchFilterParams
   extends Partial<PrivacyRequestFilter>,
     Partial<DateRangeParams> {}