1128-Add Retry button back into the subject request detail view (ethy…

…ca#1131) * 1128-Add Retry button back into the subject request detail view * Updated CHANGELOG.md file * provide a way to give invited users the resume permission Co-authored-by: Sean Preston <sean@ethyca.com>
wiseaidev · Aug 23, 2022 · 1b73fe0 · 1b73fe0
1 parent 1ec332d
commit 1b73fe0
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -30,6 +30,7 @@ The types of changes are:
 * SaaS Connector Configuration - Testing a Connection [#985](https://github.com/ethyca/fidesops/pull/1099)
 * Add an endpoint for verifying the user's identity before queuing the privacy request. [#1111](https://github.com/ethyca/fidesops/pull/1111)
 * Adds tests for email endpoints and service [#1112](https://github.com/ethyca/fidesops/pull/1112)
+* Add Retry button back into the subject request detail view [#1128](https://github.com/ethyca/fidesops/pull/1131)
 
 ### Developer Experience
 

diff --git a/clients/ops/admin-ui/src/constants.ts b/clients/ops/admin-ui/src/constants.ts
@@ -17,6 +17,10 @@ export const USER_PRIVILEGES: UserPrivileges[] = [
     privilege: "Approve subject requests",
     scope: "privacy-request:review",
   },
+  {
+    privilege: "Resume subject requests",
+    scope: "privacy-request:resume",
+  },
   {
     privilege: "View datastore connections",
     scope: "connection:read",

diff --git a/clients/ops/admin-ui/src/features/subject-request/RequestDetails.tsx b/clients/ops/admin-ui/src/features/subject-request/RequestDetails.tsx
@@ -1,5 +1,15 @@
-import { Box, Divider, Flex, Heading, Text } from "@fidesui/react";
-import React from "react";
+import {
+  Button,
+  Divider,
+  Flex,
+  Heading,
+  HStack,
+  Text,
+  useToast,
+} from "@fidesui/react";
+import { isErrorWithDetail, isErrorWithDetailArray } from "common/helpers";
+import { useRetryMutation } from "privacy-requests/privacy-requests.slice";
+import { useState } from "react";
 
 import ClipboardButton from "../common/ClipboardButton";
 import RequestStatusBadge from "../common/RequestStatusBadge";
@@ -12,6 +22,30 @@ type RequestDetailsProps = {
 
 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 (
     <>
@@ -46,9 +80,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>
     </>
   );