From 34304eac338fc67ff69a0e594a0e8cd30edc869d Mon Sep 17 00:00:00 2001
From: Maina Wycliffe <wmmaina7@gmail.com>
Date: Wed, 11 Sep 2024 23:01:14 +0300
Subject: [PATCH] feat: highlight deleted configs and improve how they deleted
 configs are shown

Fixes #2249
---
 .../Configs/Sidebar/ConfigDetails.tsx         | 32 +++++++++++--------
 src/ui/Age/Age.tsx                            |  8 ++---
 .../ConfigsDetailsBreadCrumb.tsx              | 25 ++++++++++++++-
 3 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/src/components/Configs/Sidebar/ConfigDetails.tsx b/src/components/Configs/Sidebar/ConfigDetails.tsx
index a37ffae34..a0c83adcc 100644
--- a/src/components/Configs/Sidebar/ConfigDetails.tsx
+++ b/src/components/Configs/Sidebar/ConfigDetails.tsx
@@ -5,7 +5,7 @@ import { Age } from "@flanksource-ui/ui/Age";
 import TextSkeletonLoader from "@flanksource-ui/ui/SkeletonLoader/TextSkeletonLoader";
 import dayjs from "dayjs";
 import { useMemo } from "react";
-import { FaExclamationTriangle } from "react-icons/fa";
+import { FaExclamationTriangle, FaTrash } from "react-icons/fa";
 import { Link } from "react-router-dom";
 import { InfoMessage } from "../../InfoMessage";
 import { Status } from "../../Status";
@@ -113,11 +113,27 @@ export function ConfigDetails({ configId }: Props) {
               ]}
             />
           )}
-          {configDetails.health && (
+          {configDetails.deleted_at && (
             <DisplayDetailsRow
               items={[
                 {
                   label: "Status",
+                  value: (
+                    <div className="flex items-center gap-1">
+                      <FaTrash className="inline text-red-500" />
+                      <span>Deleted</span>
+                      <Age from={configDetails.deleted_at} suffix={true} />
+                    </div>
+                  )
+                }
+              ]}
+            />
+          )}
+          {configDetails.health && (
+            <DisplayDetailsRow
+              items={[
+                {
+                  label: configDetails.deleted_at ? "Last status" : "Status",
                   value: (
                     <>
                       <Status
@@ -184,17 +200,7 @@ export function ConfigDetails({ configId }: Props) {
                       )}
                   </>
                 )
-              },
-              ...(configDetails.deleted_at
-                ? [
-                    {
-                      label: "Deleted",
-                      value: (
-                        <Age from={configDetails.deleted_at} suffix={true} />
-                      )
-                    }
-                  ]
-                : [])
+              }
             ]}
           />
 
diff --git a/src/ui/Age/Age.tsx b/src/ui/Age/Age.tsx
index 05402c274..5561417e9 100644
--- a/src/ui/Age/Age.tsx
+++ b/src/ui/Age/Age.tsx
@@ -4,7 +4,7 @@ import LocalizedFormat from "dayjs/plugin/localizedFormat";
 import { Tooltip } from "react-tooltip";
 import { isEmpty } from "../../utils/date";
 
-function formatDate(data: dayjs.Dayjs) {
+export function formatDateForTooltip(data: dayjs.Dayjs) {
   return data.format("YYYY-MM-DD HH:mm:ssZ");
 }
 
@@ -40,7 +40,7 @@ export default function Age({
         </span>
         <Tooltip
           id={`age-tooltip-${_from.local().fromNow(!suffix)}`}
-          content={formatDate(_from)}
+          content={formatDateForTooltip(_from)}
         />
       </>
     );
@@ -61,7 +61,7 @@ export default function Age({
         </span>
         <Tooltip
           id={`age-tooltip-${duration.asMilliseconds()}`}
-          content={`${formatDate(_from)}`}
+          content={`${formatDateForTooltip(_from)}`}
         />
       </>
     );
@@ -77,7 +77,7 @@ export default function Age({
       </span>
       <Tooltip
         id={`age-tooltip-${_from.local().to(_to)}`}
-        content={`${formatDate(_from)} - ${formatDate(_to)}`}
+        content={`${formatDateForTooltip(_from)} - ${formatDateForTooltip(_to)}`}
       />
     </>
   );
diff --git a/src/ui/BreadcrumbNav/ConfigsDetailsBreadCrumb.tsx b/src/ui/BreadcrumbNav/ConfigsDetailsBreadCrumb.tsx
index 28741ddd4..f478e9e3b 100644
--- a/src/ui/BreadcrumbNav/ConfigsDetailsBreadCrumb.tsx
+++ b/src/ui/BreadcrumbNav/ConfigsDetailsBreadCrumb.tsx
@@ -1,6 +1,10 @@
+import dayjs from "dayjs";
+import { FaTrash } from "react-icons/fa";
+import { Tooltip } from "react-tooltip";
 import { BreadcrumbChild, BreadcrumbNav, BreadcrumbRoot } from ".";
 import { ConfigItem } from "../../api/types/configs";
 import ConfigsTypeIcon from "../../components/Configs/ConfigsTypeIcon";
+import { formatDateForTooltip } from "../Age/Age";
 import TextSkeletonLoader from "../SkeletonLoader/TextSkeletonLoader";
 
 type Props = {
@@ -14,6 +18,11 @@ export function ConfigsDetailsBreadcrumbNav({
   config,
   children
 }: Props) {
+  const isDeleted = !!config?.deleted_at;
+  const timestamp = isDeleted
+    ? formatDateForTooltip(dayjs(config?.deleted_at))
+    : undefined;
+
   return (
     <BreadcrumbNav
       list={[
@@ -35,7 +44,21 @@ export function ConfigsDetailsBreadcrumbNav({
                 link={`/catalog/${config?.id}`}
                 key="config-name"
               >
-                {config?.name}
+                <div className="flex items-center gap-2">
+                  <span>{config?.name}</span>
+                  {isDeleted && (
+                    <>
+                      <FaTrash
+                        data-tooltip-id={`deleted-${config?.id}`}
+                        className="inline-block text-red-500"
+                      />
+                      <Tooltip
+                        id={`deleted-${config?.id}`}
+                        content={`Deleted: ${timestamp}`}
+                      />
+                    </>
+                  )}
+                </div>
               </BreadcrumbChild>
             ]),
         ...(children ? [children] : [])