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 )} + +