863 - Retry a DSR (FE) (#938)

CHANGELOG.md

@@ -19,12 +19,12 @@ The types of changes are:
 ## [Unreleased](https://github.com/ethyca/fidesops/compare/1.6.3...main)
 
 ### Added
-
 * Erasure support for Salesforce [#888](https://github.com/ethyca/fidesops/pull/888)
 * Access and erasure support for Sendgrid contacts endpoint [#883](https://github.com/ethyca/fidesops/pull/883)
 * Added saas config base info to connection config responses [#904](https://github.com/ethyca/fidesops/pull/904)
 * Access and erasure support for Adobe Campaign [#905](https://github.com/ethyca/fidesops/pull/905)
 * Added db vs saas to connection type api [#937](https://github.com/ethyca/fidesops/pull/937)
+* Retry a DSR (FE) [#863](https://github.com/ethyca/fidesops/pull/938)
 
 ### Changed
 

clients/admin-ui/jest.config.js

@@ -20,6 +20,11 @@ module.exports = {
     // Handle module aliases
     "^@/components/(.*)$": "<rootDir>/components/$1",
     "^common/(.*)$": "<rootDir>/src/features/common/$1",
+    "^datastore-connections/(.*)$":
+      "<rootDir>/src/features/datastore-connections/$1",
+    "^privacy-requests/(.*)$": "<rootDir>/src/features/privacy-requests/$1",
+    "^subject-request/(.*)$": "<rootDir>/src/features/subject-request/$1",
+    "^user-management/(.*)$": "<rootDir>/src/features/user-management/$1",
   },
   // Add more setup options before each test is run
   setupFilesAfterEnv: ["<rootDir>/__tests__/jest.setup.ts"],

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

@@ -1,10 +1,10 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { addCommonHeaders } from "common/CommonHeaders";
 
 import type { RootState } from "../../app/store";
 import { BASE_API_URN, BASE_URL } from "../../constants";
 import { selectToken } from "../auth";
-import { addCommonHeaders } from "../common/CommonHeaders";
 import {
   DenyPrivacyRequest,
   PrivacyRequest,
@@ -95,13 +95,21 @@ export const privacyRequestApi = createApi({
       }),
       invalidatesTags: ["Request"],
     }),
+    retry: build.mutation<PrivacyRequest, Pick<PrivacyRequest, "id">>({
+      query: ({ id }) => ({
+        url: `privacy-request/${id}/retry`,
+        method: "POST",
+      }),
+      invalidatesTags: ["Request"],
+    }),
   }),
 });
 
 export const {
   useGetAllPrivacyRequestsQuery,
   useApproveRequestMutation,
   useDenyRequestMutation,
+  useRetryMutation,
 } = privacyRequestApi;
 
 export const requestCSVDownload = async ({

clients/admin-ui/src/features/subject-request/RequestDetails.tsx

@@ -1,17 +1,50 @@
-import { Box, Divider, Flex, Heading, Text } from "@fidesui/react";
-import React from "react";
-
-import ClipboardButton from "../common/ClipboardButton";
-import RequestStatusBadge from "../common/RequestStatusBadge";
-import RequestType from "../common/RequestType";
-import { PrivacyRequest } from "../privacy-requests/types";
+import {
+  Button,
+  Divider,
+  Flex,
+  Heading,
+  HStack,
+  Text,
+  useToast,
+} from "@fidesui/react";
+import ClipboardButton from "common/ClipboardButton";
+import { isErrorWithDetail, isErrorWithDetailArray } from "common/helpers";
+import RequestStatusBadge from "common/RequestStatusBadge";
+import RequestType from "common/RequestType";
+import { useRetryMutation } from "privacy-requests/privacy-requests.slice";
+import { PrivacyRequest } from "privacy-requests/types";
+import { useState } from "react";
 
 type RequestDetailsProps = {
   subjectRequest: PrivacyRequest;
 };
 
 const RequestDetails = ({ subjectRequest }: RequestDetailsProps) => {
   const { id, status, policy } = subjectRequest;
+  const [retry] = useRetryMutation();
+  const toast = useToast();
+  const [isRetrying, setRetrying] = useState(false);
+
+  const handleRetry = async () => {
+    setRetrying(true);
+    retry(subjectRequest)
+      .unwrap()
+      .catch((error) => {
+        let errorMsg = "An unexpected error occurred. Please try again.";
+        if (isErrorWithDetail(error)) {
+          errorMsg = error.data.detail;
+        } else if (isErrorWithDetailArray(error)) {
+          errorMsg = error.data.detail[0].msg;
+        }
+        toast({
+          status: "error",
+          description: errorMsg,
+        });
+      })
+      .finally(() => {
+        setRetrying(false);
+      });
+  };
 
   return (
     <>
@@ -35,7 +68,6 @@ const RequestDetails = ({ subjectRequest }: RequestDetailsProps) => {
         </Text>
         <ClipboardButton requestId={id} />
       </Flex>
-
       <Flex alignItems="center">
         <Text mb={4} mr={2} fontSize="sm" color="gray.900" fontWeight="500">
           Request Type:
@@ -46,9 +78,21 @@ const RequestDetails = ({ subjectRequest }: RequestDetailsProps) => {
         <Text mb={4} mr={2} fontSize="sm" color="gray.900" fontWeight="500">
           Status:
         </Text>
-        <Box>
+        <HStack spacing="16px">
           <RequestStatusBadge status={status} />
-        </Box>
+          {status === "error" && (
+            <Button
+              isLoading={isRetrying}
+              loadingText="Retrying"
+              onClick={handleRetry}
+              size="xs"
+              spinnerPlacement="end"
+              variant="outline"
+            >
+              Retry
+            </Button>
+          )}
+        </HStack>
       </Flex>
     </>
   );

clients/admin-ui/tsconfig.json

@@ -13,7 +13,11 @@
     "moduleResolution": "node",
     "noEmit": true,
     "paths": {
-      "common/*": ["src/features/common/*"]
+      "common/*": ["src/features/common/*"],
+      "datastore-connections/*": ["src/features/datastore-connections/*"],
+      "privacy-requests/*": ["src/features/privacy-requests/*"],
+      "subject-request/*": ["src/features/subject-request/*"],
+      "user-management/*": ["src/features/user-management/*"]
     },
     "resolveJsonModule": true,
     "skipLibCheck": true,