From 2a99e38aac201dd78a5812240ebc44035b15c7d1 Mon Sep 17 00:00:00 2001
From: Maina Wycliffe <wmmaina7@gmail.com>
Date: Fri, 30 Aug 2024 21:05:50 +0300
Subject: [PATCH] chore: Show an age with a full tooltip of timestamp

Fixes #2232

Update src/ui/Age/Age.tsx

Co-authored-by: Moshe Immerman <moshe@flanksource.com>

fix: fix formatting issue
---
 .storybook/preview.tsx     |  1 +
 src/ui/Age/Age.stories.tsx | 16 ++++++++
 src/ui/Age/Age.tsx         | 77 ++++++++++++++++++++++++++++----------
 3 files changed, 75 insertions(+), 19 deletions(-)
 create mode 100644 src/ui/Age/Age.stories.tsx

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index f0c9faef4..3e4c16291 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -4,6 +4,7 @@ import { initialize, mswLoader } from "msw-storybook-addon";
 import { RouterContext } from "next/dist/shared/lib/router-context.shared-runtime";
 import React from "react";
 import { MemoryRouter } from "react-router-dom";
+import "react-tooltip/dist/react-tooltip.css";
 import "tailwindcss/tailwind.css";
 import "../pages/global.css";
 import "./storybook.css";
diff --git a/src/ui/Age/Age.stories.tsx b/src/ui/Age/Age.stories.tsx
new file mode 100644
index 000000000..3913b06dc
--- /dev/null
+++ b/src/ui/Age/Age.stories.tsx
@@ -0,0 +1,16 @@
+import { Meta } from "@storybook/react";
+import dayjs from "dayjs";
+import Age from "./Age";
+
+export default {
+  component: Age,
+  title: "Age"
+} satisfies Meta;
+
+export const Default = () => (
+  <Age from={dayjs().subtract(1, "d").toISOString()} />
+);
+
+export const WithFromAndTwo = () => (
+  <Age from={dayjs().toISOString()} to={dayjs().add(2, "h").toISOString()} />
+);
diff --git a/src/ui/Age/Age.tsx b/src/ui/Age/Age.tsx
index 0b5895ee3..05402c274 100644
--- a/src/ui/Age/Age.tsx
+++ b/src/ui/Age/Age.tsx
@@ -1,45 +1,84 @@
-import dayjs from "dayjs";
 import clsx from "clsx";
+import dayjs from "dayjs";
+import LocalizedFormat from "dayjs/plugin/localizedFormat";
+import { Tooltip } from "react-tooltip";
 import { isEmpty } from "../../utils/date";
 
+function formatDate(data: dayjs.Dayjs) {
+  return data.format("YYYY-MM-DD HH:mm:ssZ");
+}
+
+dayjs.extend(LocalizedFormat);
+
+type AgeProps = {
+  className?: string;
+  from?: Date | string;
+  to?: Date | string;
+  suffix?: boolean;
+};
+
 export default function Age({
   className = "",
   from,
   to,
   suffix = false
-}: {
-  className?: string;
-  from?: Date | string;
-  to?: Date | string;
-  suffix?: boolean;
-}) {
+}: AgeProps) {
   if (isEmpty(from)) {
     return null;
   }
-  let _from = dayjs(from);
+
+  const _from = dayjs(from);
 
   if (isEmpty(to)) {
     return (
-      <span title={_from.format()} className={className}>
-        {_from.local().fromNow(!suffix)}
-      </span>
+      <>
+        <span
+          data-tooltip-id={`age-tooltip-${_from.local().fromNow(!suffix)}`}
+          className={className}
+        >
+          {_from.local().fromNow(!suffix)}
+        </span>
+        <Tooltip
+          id={`age-tooltip-${_from.local().fromNow(!suffix)}`}
+          content={formatDate(_from)}
+        />
+      </>
     );
   }
-  let _to = dayjs(to);
 
-  let duration = dayjs.duration(_to.diff(_from));
+  const _to = dayjs(to);
+
+  const duration = dayjs.duration(_to.diff(_from));
 
   if (duration.asMilliseconds() < 1000) {
     return (
-      <span title={_from.format()} className={className}>
-        {duration.asMilliseconds()}ms
-      </span>
+      <>
+        <span
+          data-tooltip-id={`age-tooltip-${duration.asMilliseconds()}`}
+          className={className}
+        >
+          {duration.asMilliseconds()}ms
+        </span>
+        <Tooltip
+          id={`age-tooltip-${duration.asMilliseconds()}`}
+          content={`${formatDate(_from)}`}
+        />
+      </>
     );
   }
 
   return (
-    <span className={clsx(className, "whitespace-nowrap")}>
-      {_from.local().to(_to)}
-    </span>
+    <>
+      <span
+        data-tooltip-id={`age-tooltip-${_from.local().to(_to)}`}
+        className={clsx(className, "whitespace-nowrap")}
+      >
+        {_from.local().to(_to)}
+      </span>
+      <Tooltip
+        id={`age-tooltip-${_from.local().to(_to)}`}
+        content={`${formatDate(_from)} - ${formatDate(_to)}`}
+      />
+    </>
   );
 }