diff --git a/CHANGELOG.md b/CHANGELOG.md
index 78359d9e0..e4fd6c34c 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/clients/ops/admin-ui/src/features/common/DaysLeftTag.tsx b/clients/ops/admin-ui/src/features/common/DaysLeftTag.tsx
new file mode 100644
index 000000000..fd739c74d
--- /dev/null
+++ b/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 (
+
+ {text}
+
+ );
+};
+
+export default DaysLeftTag;
diff --git a/clients/ops/admin-ui/src/features/privacy-requests/RequestRow.tsx b/clients/ops/admin-ui/src/features/privacy-requests/RequestRow.tsx
index b7bccee50..aa213d86a 100644
--- a/clients/ops/admin-ui/src/features/privacy-requests/RequestRow.tsx
+++ b/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 }) => {
|
+
+
+ |
= () => {
| Status |
+ Days Left |
Request Type |
Subject Identity |
Time Received |
diff --git a/clients/ops/admin-ui/src/features/privacy-requests/types.ts b/clients/ops/admin-ui/src/features/privacy-requests/types.ts
index 05f0dc2d2..a54250d0e 100644
--- a/clients/ops/admin-ui/src/features/privacy-requests/types.ts
+++ b/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 {
diff --git a/clients/ops/admin-ui/src/features/subject-request/RequestDetails.tsx b/clients/ops/admin-ui/src/features/subject-request/RequestDetails.tsx
index 1bc7dfbb0..a6a5de377 100644
--- a/clients/ops/admin-ui/src/features/subject-request/RequestDetails.tsx
+++ b/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
)}
+
+
>
|