From 4fdee7cc6361a54177eba5818c1f8ac67428c154 Mon Sep 17 00:00:00 2001
From: Tanishq Singh <tanishqsingh640@gmail.com>
Date: Fri, 28 Apr 2023 16:09:52 +0530
Subject: [PATCH] Add tooltip with absolute date and time on relative times

---
 .../dashboard/src/admin/ProjectsSearch.tsx    |  9 ++++++---
 components/dashboard/src/admin/UserSearch.tsx |  7 ++++++-
 .../dashboard/src/admin/WorkspacesSearch.tsx  | 11 +++++++---
 .../dashboard/src/projects/Prebuilds.tsx      |  5 ++++-
 components/dashboard/src/projects/Project.tsx | 20 +++++++++++++++----
 .../src/projects/ProjectListItem.tsx          |  9 ++++++---
 components/dashboard/src/teams/Members.tsx    |  4 +++-
 7 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/components/dashboard/src/admin/ProjectsSearch.tsx b/components/dashboard/src/admin/ProjectsSearch.tsx
index 9a9bd8abf95a89..33b3d873b1c750 100644
--- a/components/dashboard/src/admin/ProjectsSearch.tsx
+++ b/components/dashboard/src/admin/ProjectsSearch.tsx
@@ -16,6 +16,7 @@ import { AdminPageHeader } from "./AdminPageHeader";
 import Pagination from "../Pagination/Pagination";
 import { SpinnerLoader } from "../components/Loader";
 import searchIcon from "../icons/search.svg";
+import Tooltip from "../components/Tooltip";
 
 export default function ProjectsSearchPage() {
     return (
@@ -155,9 +156,11 @@ export function ProjectsSearch() {
                         <div className="text-gray-500 dark:text-gray-100 truncate">{p.project.cloneUrl}</div>
                     </div>
                     <div className="flex w-2/12 self-center">
-                        <div className="text-sm w-full text-gray-400 truncate">
-                            {dayjs(p.project.creationTime).fromNow()}
-                        </div>
+                        <Tooltip content={dayjs(p.project.creationTime).format("MMM D, YYYY")}>
+                            <div className="text-sm w-full text-gray-400 truncate">
+                                {dayjs(p.project.creationTime).fromNow()}
+                            </div>
+                        </Tooltip>
                     </div>
                 </div>
             </Link>
diff --git a/components/dashboard/src/admin/UserSearch.tsx b/components/dashboard/src/admin/UserSearch.tsx
index 42946b2cefa82f..eca67580ed6e15 100644
--- a/components/dashboard/src/admin/UserSearch.tsx
+++ b/components/dashboard/src/admin/UserSearch.tsx
@@ -15,6 +15,7 @@ import { getGitpodService } from "../service/service";
 import { AdminPageHeader } from "./AdminPageHeader";
 import UserDetail from "./UserDetail";
 import searchIcon from "../icons/search.svg";
+import Tooltip from "../components/Tooltip";
 
 export default function UserSearch() {
     const location = useLocation();
@@ -144,7 +145,11 @@ function UserEntry(p: { user: User }) {
                     </div>
                 </div>
                 <div className="flex w-5/12 self-center">
-                    <div className="text-sm w-full text-gray-400 truncate">{dayjs(p.user.creationDate).fromNow()}</div>
+                    <Tooltip content={dayjs(p.user.creationDate).format("MMM D, YYYY")}>
+                        <div className="text-sm w-full text-gray-400 truncate">
+                            {dayjs(p.user.creationDate).fromNow()}
+                        </div>
+                    </Tooltip>
                 </div>
             </div>
         </Link>
diff --git a/components/dashboard/src/admin/WorkspacesSearch.tsx b/components/dashboard/src/admin/WorkspacesSearch.tsx
index 44e425b01f1564..aceb7d18dc3c0b 100644
--- a/components/dashboard/src/admin/WorkspacesSearch.tsx
+++ b/components/dashboard/src/admin/WorkspacesSearch.tsx
@@ -29,6 +29,7 @@ import { isGitpodIo } from "../utils";
 import { SpinnerLoader } from "../components/Loader";
 import { WorkspaceStatusIndicator } from "../workspaces/WorkspaceStatusIndicator";
 import searchIcon from "../icons/search.svg";
+import Tooltip from "../components/Tooltip";
 
 interface Props {
     user?: User;
@@ -192,9 +193,13 @@ function WorkspaceEntry(p: { ws: WorkspaceAndInstance }) {
                     </div>
                 </div>
                 <div className="flex w-2/12 self-center">
-                    <div className="text-sm w-full text-gray-400 truncate">
-                        {dayjs(p.ws.instanceCreationTime || p.ws.workspaceCreationTime).fromNow()}
-                    </div>
+                    <Tooltip
+                        content={dayjs(p.ws.instanceCreationTime || p.ws.workspaceCreationTime).format("MMM D, YYYY")}
+                    >
+                        <div className="text-sm w-full text-gray-400 truncate">
+                            {dayjs(p.ws.instanceCreationTime || p.ws.workspaceCreationTime).fromNow()}
+                        </div>
+                    </Tooltip>
                 </div>
             </div>
         </Link>
diff --git a/components/dashboard/src/projects/Prebuilds.tsx b/components/dashboard/src/projects/Prebuilds.tsx
index 56b4f560264a3e..e9044a61e7a7e1 100644
--- a/components/dashboard/src/projects/Prebuilds.tsx
+++ b/components/dashboard/src/projects/Prebuilds.tsx
@@ -23,6 +23,7 @@ import { Disposable } from "vscode-jsonrpc";
 import { useCurrentProject } from "./project-context";
 import { getProjectTabs } from "./projects.routes";
 import search from "../icons/search.svg";
+import Tooltip from "../components/Tooltip";
 
 export default function PrebuildsPage(props: { project?: Project; isAdminDashboard?: boolean }) {
     const currentProject = useCurrentProject();
@@ -222,7 +223,9 @@ export default function PrebuildsPage(props: { project?: Project; isAdminDashboa
                                                         alt={p.info.startedBy}
                                                     />
                                                 )}
-                                                Triggered {formatDate(p.info.startedAt)}
+                                                <Tooltip content={dayjs(p.info.startedAt).format("MMM D, YYYY")}>
+                                                    Triggered {formatDate(p.info.startedAt)}
+                                                </Tooltip>
                                             </p>
                                         </div>
                                     </ItemField>
diff --git a/components/dashboard/src/projects/Project.tsx b/components/dashboard/src/projects/Project.tsx
index 6a21d95cc5df70..fa2cb6d73e98ef 100644
--- a/components/dashboard/src/projects/Project.tsx
+++ b/components/dashboard/src/projects/Project.tsx
@@ -24,6 +24,7 @@ import { useCurrentProject } from "./project-context";
 import { getProjectTabs } from "./projects.routes";
 import { shortCommitMessage, toRemoteURL } from "./render-utils";
 import search from "../icons/search.svg";
+import Tooltip from "../components/Tooltip";
 
 export default function ProjectsPage() {
     const history = useHistory();
@@ -334,10 +335,21 @@ export default function ProjectsPage() {
                                                         <div className="text-base text-gray-500 dark:text-gray-50 font-medium mb-1 truncate">
                                                             {shortCommitMessage(branch.changeTitle)}
                                                         </div>
-                                                        <p>
-                                                            {avatar}Authored {formatDate(branch.changeDate)} ·{" "}
-                                                            {branch.changeHash?.substring(0, 8)}
-                                                        </p>
+                                                        {branch.changeDate ? (
+                                                            <Tooltip
+                                                                content={dayjs(branch.changeDate).format("MMM D, YYYY")}
+                                                            >
+                                                                <p>
+                                                                    {avatar}Authored {formatDate(branch.changeDate)} ·{" "}
+                                                                    {branch.changeHash?.substring(0, 8)}
+                                                                </p>
+                                                            </Tooltip>
+                                                        ) : (
+                                                            <p>
+                                                                {avatar}Authored {formatDate(branch.changeDate)} ·{" "}
+                                                                {branch.changeHash?.substring(0, 8)}
+                                                            </p>
+                                                        )}
                                                     </div>
                                                 </ItemField>
                                                 <ItemField className="flex items-center my-auto">
diff --git a/components/dashboard/src/projects/ProjectListItem.tsx b/components/dashboard/src/projects/ProjectListItem.tsx
index a9b9c683920b99..838646332fbc71 100644
--- a/components/dashboard/src/projects/ProjectListItem.tsx
+++ b/components/dashboard/src/projects/ProjectListItem.tsx
@@ -16,6 +16,7 @@ import { gitpodHostUrl } from "../service/service";
 import { useLatestProjectPrebuildQuery } from "../data/prebuilds/latest-project-prebuild-query";
 import { StartWorkspaceModalContext } from "../workspaces/start-workspace-modal-context";
 import { useNewCreateWorkspacePage } from "../workspaces/CreateWorkspacePage";
+import Tooltip from "../components/Tooltip";
 
 type ProjectListItemProps = {
     project: Project;
@@ -102,9 +103,11 @@ export const ProjectListItem: FunctionComponent<ProjectListItemProps> = ({ proje
                                 {prebuild?.info?.branch}
                             </div>
                             <span className="flex-shrink-0 mx-1 text-gray-400 dark:text-gray-600">·</span>
-                            <div className="flex-shrink-0 text-gray-400 dark:text-gray-500 group-hover:text-gray-800 dark:group-hover:text-gray-300">
-                                {dayjs(prebuild?.info?.startedAt).fromNow()}
-                            </div>
+                            <Tooltip content={dayjs(prebuild?.info?.startedAt).format("MMM D, YYYY")}>
+                                <div className="flex-shrink-0 text-gray-400 dark:text-gray-500 group-hover:text-gray-800 dark:group-hover:text-gray-300">
+                                    {dayjs(prebuild?.info?.startedAt).fromNow()}
+                                </div>
+                            </Tooltip>
                         </Link>
                         <Link
                             to={`/projects/${Project.slug(project!)}/prebuilds`}
diff --git a/components/dashboard/src/teams/Members.tsx b/components/dashboard/src/teams/Members.tsx
index 226b8cbf304adb..251945601130a0 100644
--- a/components/dashboard/src/teams/Members.tsx
+++ b/components/dashboard/src/teams/Members.tsx
@@ -187,7 +187,9 @@ export default function MembersPage() {
                                     </div>
                                 </ItemField>
                                 <ItemField className="my-auto">
-                                    <span className="text-gray-400">{dayjs(m.memberSince).fromNow()}</span>
+                                    <Tooltip content={dayjs(m.memberSince).format("MMM D, YYYY")}>
+                                        <span className="text-gray-400">{dayjs(m.memberSince).fromNow()}</span>
+                                    </Tooltip>
                                 </ItemField>
                                 <ItemField className="flex items-center my-auto">
                                     <span className="text-gray-400 capitalize">