days_left field in admin UI

CHANGELOG.md

@@ -38,6 +38,7 @@ The types of changes are:
 * Added `days_left` field to Privacy request response [#1281](https://github.com/ethyca/fidesops/pull/1281)
 * Mapping Vault environment variables in docker-compose.yml [#1275](https://github.com/ethyca/fidesops/pull/1275)
 * Foundations for a new "manual_webhook" connector type [#1267](https://github.com/ethyca/fidesops/pull/1267)
+* Add Days left display to admin ui [#1283](https://github.com/ethyca/fidesops/pull/1283)
 * Data seeding for Datadog access tests [#1269](https://github.com/ethyca/fidesops/pull/1269)
 * Added support for one-to-many relationships for param_values in SaaS configs [#1253](https://github.com/ethyca/fidesops/pull/1253)
 

clients/ops/admin-ui/src/features/common/DaysLeftTag.tsx

@@ -0,0 +1,42 @@
+import { Tag } from "@fidesui/react";
+import React from "react";
+
+type DaysLeftTagProps = {
+  daysLeft?: number;
+  includeText: boolean;
+};
+
+const DaysLeftTag = ({ daysLeft, includeText }: DaysLeftTagProps) => {
+  if (!daysLeft) {
+    return null;
+  }
+
+  let backgroundColor = "";
+
+  switch (true) {
+    case daysLeft >= 10:
+      backgroundColor = "green.500";
+      break;
+
+    case daysLeft < 10 && daysLeft > 4:
+      backgroundColor = "orange.500";
+      break;
+
+    case daysLeft < 5:
+      backgroundColor = "red.400";
+      break;
+
+    default:
+      break;
+  }
+
+  const text = includeText ? `${daysLeft} days left` : daysLeft;
+
+  return (
+    <Tag backgroundColor={backgroundColor} color="white">
+      {text}
+    </Tag>
+  );
+};
+
+export default DaysLeftTag;

clients/ops/admin-ui/src/features/privacy-requests/RequestRow.tsx

@@ -15,6 +15,7 @@ import {
   useClipboard,
   useToast,
 } from "@fidesui/react";
+import DaysLeftTag from "common/DaysLeftTag";
 import { formatDate } from "common/utils";
 import { useRouter } from "next/router";
 import React, { useRef, useState } from "react";
@@ -151,6 +152,9 @@ const RequestRow: React.FC<{ request: PrivacyRequest }> = ({ request }) => {
       <Td pl={0} py={1}>
         <RequestStatusBadge status={request.status} />
       </Td>
+      <Td py={1}>
+        <DaysLeftTag daysLeft={request.days_left} includeText={false} />
+      </Td>
       <Td py={1}>
         <Tag
           color="white"

clients/ops/admin-ui/src/features/privacy-requests/RequestTable.tsx

@@ -61,6 +61,7 @@ const RequestTable: React.FC<RequestTableProps> = () => {
         <Thead>
           <Tr>
             <Th pl={0}>Status</Th>
+            <Th>Days Left</Th>
             <Th>Request Type</Th>
             <Th>Subject Identity</Th>
             <Th>Time Received</Th>

clients/ops/admin-ui/src/features/privacy-requests/types.ts

@@ -72,6 +72,7 @@ export interface PrivacyRequest {
   created_at: string;
   reviewed_by: string;
   id: string;
+  days_left?: number;
 }
 
 export interface PrivacyRequestResponse {

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

@@ -7,14 +7,15 @@ import {
   Text,
   useToast,
 } from "@fidesui/react";
+import DaysLeftTag from "common/DaysLeftTag";
 import { isErrorWithDetail, isErrorWithDetailArray } from "common/helpers";
 import { useRetryMutation } from "privacy-requests/privacy-requests.slice";
+import { PrivacyRequest } from "privacy-requests/types";
 import { useState } from "react";
 
 import ClipboardButton from "../common/ClipboardButton";
 import RequestStatusBadge from "../common/RequestStatusBadge";
 import RequestType from "../common/RequestType";
-import { PrivacyRequest } from "../privacy-requests/types";
 
 type RequestDetailsProps = {
   subjectRequest: PrivacyRequest;
@@ -94,6 +95,8 @@ const RequestDetails = ({ subjectRequest }: RequestDetailsProps) => {
               Retry
             </Button>
           )}
+
+          <DaysLeftTag daysLeft={subjectRequest.days_left} includeText />
         </HStack>
       </Flex>
     </>