PROD-2504 FE When-column-should-never-be-blank-or-have-N-A-in-Activit…

…y-table (#5177) Co-authored-by: Lucano Vera <[email protected]>
ethyca · Aug 12, 2024 · fdbbc4a · fdbbc4a
1 parent cd400eb
commit fdbbc4a
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -28,6 +28,8 @@ The types of changes are:
 - Fixes a Marigold Sailthru error when a user does not exist [#5145](https://github.com/ethyca/fides/pull/5145)
 - Fixed malformed HTML issue on switch components [#5166](https://github.com/ethyca/fides/pull/5166)
 - Fixed a timing issue with tcf/gpp locator iframe naming [#5173](https://github.com/ethyca/fides/pull/5173)
+- Detection & Discovery: The when column will now display the correct value with a tooltip showing the full date and time [#5177](https://github.com/ethyca/fides/pull/5177)
+
 
 ## [2.42.1](https://github.com/ethyca/fides/compare/2.42.0...2.42.1)
 

diff --git a/clients/admin-ui/src/features/common/table/v2/cells.tsx b/clients/admin-ui/src/features/common/table/v2/cells.tsx
@@ -11,6 +11,7 @@ import {
   SwitchProps,
   Text,
   TextProps,
+  Tooltip,
   useDisclosure,
   useToast,
   WarningIcon,
@@ -20,7 +21,7 @@ import { ChangeEvent, ReactNode } from "react";
 import { getErrorMessage, isErrorResult } from "~/features/common/helpers";
 import ConfirmationModal from "~/features/common/modals/ConfirmationModal";
 import { errorToastParams } from "~/features/common/toast";
-import { sentenceCase } from "~/features/common/utils";
+import { formatDate, sentenceCase } from "~/features/common/utils";
 import { RTKResult } from "~/types/errors";
 
 export const DefaultCell = ({
@@ -69,7 +70,23 @@ export const RelativeTimestampCell = ({
     addSuffix: true,
   });
 
-  return <DefaultCell value={sentenceCase(timestamp)} />;
+  const formattedDate = formatDate(new Date(time));
+
+  return (
+    <Flex alignItems="center" height="100%">
+      <Tooltip label={formattedDate} hasArrow>
+        <Text
+          fontSize="xs"
+          lineHeight={4}
+          fontWeight="normal"
+          overflow="hidden"
+          textOverflow="ellipsis"
+        >
+          {sentenceCase(timestamp)}
+        </Text>
+      </Tooltip>
+    </Flex>
+  );
 };
 
 export const BadgeCellContainer = ({ children }: { children: ReactNode }) => (

diff --git a/...ts/admin-ui/src/features/data-discovery-and-detection/hooks/useDetectionResultColumns.tsx b/...ts/admin-ui/src/features/data-discovery-and-detection/hooks/useDetectionResultColumns.tsx
@@ -52,7 +52,7 @@ const useDetectionResultColumns = ({
         cell: (props) => <DefaultCell value={props.getValue()} />,
         header: (props) => <DefaultHeaderCell value="Detected by" {...props} />,
       }),
-      columnHelper.accessor((row) => row.source_modified, {
+      columnHelper.accessor((row) => row.updated_at, {
         id: "time",
         cell: (props) => <RelativeTimestampCell time={props.getValue()} />,
         header: (props) => <DefaultHeaderCell value="When" {...props} />,
@@ -83,7 +83,7 @@ const useDetectionResultColumns = ({
         cell: (props) => <DefaultCell value={props.getValue()} />,
         header: (props) => <DefaultHeaderCell value="Detected by" {...props} />,
       }),
-      columnHelper.accessor((row) => row.source_modified, {
+      columnHelper.accessor((row) => row.updated_at, {
         id: "time",
         cell: (props) => <RelativeTimestampCell time={props.getValue()} />,
         header: (props) => <DefaultHeaderCell value="When" {...props} />,
@@ -114,7 +114,7 @@ const useDetectionResultColumns = ({
         cell: (props) => <DefaultCell value={props.getValue()} />,
         header: (props) => <DefaultHeaderCell value="Detected by" {...props} />,
       }),
-      columnHelper.accessor((row) => row.source_modified, {
+      columnHelper.accessor((row) => row.updated_at, {
         id: "time",
         cell: (props) => <RelativeTimestampCell time={props.getValue()} />,
         header: (props) => <DefaultHeaderCell value="When" {...props} />,

diff --git a/...ts/admin-ui/src/features/data-discovery-and-detection/hooks/useDiscoveryResultColumns.tsx b/...ts/admin-ui/src/features/data-discovery-and-detection/hooks/useDiscoveryResultColumns.tsx
@@ -60,7 +60,7 @@ const useDiscoveryResultColumns = ({
         cell: (props) => <DefaultCell value={props.getValue()} />,
         header: (props) => <DefaultHeaderCell value="Detected by" {...props} />,
       }),
-      columnHelper.accessor((row) => row.source_modified, {
+      columnHelper.accessor((row) => row.updated_at, {
         id: "time",
         cell: (props) => <RelativeTimestampCell time={props.getValue()} />,
         header: (props) => <DefaultHeaderCell value="When" {...props} />,
@@ -115,7 +115,7 @@ const useDiscoveryResultColumns = ({
         cell: () => <DefaultCell value="Table" />,
         header: "Type",
       }),
-      columnHelper.accessor((row) => row.source_modified, {
+      columnHelper.accessor((row) => row.updated_at, {
         id: "time",
         cell: (props) => <RelativeTimestampCell time={props.getValue()} />,
         header: "Time",
@@ -155,7 +155,7 @@ const useDiscoveryResultColumns = ({
         header: "Data category",
         minSize: 280, // keep a minimum width so the Select has space to display the options properly
       }),
-      columnHelper.accessor((row) => row.source_modified, {
+      columnHelper.accessor((row) => row.updated_at, {
         id: "time",
         cell: (props) => <RelativeTimestampCell time={props.getValue()} />,
         header: (props) => <DefaultHeaderCell value="When" {...props} />,

diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/tables/ActivityTable.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/tables/ActivityTable.tsx
@@ -143,7 +143,7 @@ const ActivityTable = ({
         cell: (props) => <DefaultCell value={props.getValue()} />,
         header: (props) => <DefaultHeaderCell value="Detected by" {...props} />,
       }),
-      columnHelper.accessor((row) => row.source_modified, {
+      columnHelper.accessor((row) => row.updated_at, {
         id: "time",
         cell: (props) => <RelativeTimestampCell time={props.getValue()} />,
         header: (props) => <DefaultHeaderCell value="When" {...props} />,