From 6ad13de884fe7cab22825a5744a9f818df8db3cf Mon Sep 17 00:00:00 2001
From: Marc Bernard <59966492+mbtools@users.noreply.github.com>
Date: Fri, 30 Sep 2022 13:53:46 -0400
Subject: [PATCH] feat: display publication time on sidebar (#3408)

- Show the publication time next to the version on the sidebar
- Bonus: display the full date and time on hover
---
 .changeset/unlucky-hairs-wonder.md                        | 5 +++++
 packages/plugins/ui-theme/src/i18n/crowdin/ui.json        | 3 ++-
 .../DetailContainer/Versions/VersionsHistoryList.tsx      | 4 ++--
 .../src/pages/Version/DetailSidebar/DetailSidebar.tsx     | 5 ++++-
 .../pages/Version/DetailSidebar/DetailSidebarTitle.tsx    | 8 +++++++-
 5 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/unlucky-hairs-wonder.md

diff --git a/.changeset/unlucky-hairs-wonder.md b/.changeset/unlucky-hairs-wonder.md
new file mode 100644
index 000000000..752433c63
--- /dev/null
+++ b/.changeset/unlucky-hairs-wonder.md
@@ -0,0 +1,5 @@
+---
+'@verdaccio/ui-theme': patch
+---
+
+feat: Display publication time on sidebar
diff --git a/packages/plugins/ui-theme/src/i18n/crowdin/ui.json b/packages/plugins/ui-theme/src/i18n/crowdin/ui.json
index 91950f381..2723c402f 100644
--- a/packages/plugins/ui-theme/src/i18n/crowdin/ui.json
+++ b/packages/plugins/ui-theme/src/i18n/crowdin/ui.json
@@ -96,7 +96,8 @@
   "sidebar": {
     "detail": {
       "latest-version": "Latest v{{version}}",
-      "version": "v{{version}}"
+      "version": "v{{version}}",
+      "published": "Published"
     },
     "installation": {
       "title": "Installation",
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/VersionsHistoryList.tsx b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/VersionsHistoryList.tsx
index e7371ac74..2bd9d796e 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/VersionsHistoryList.tsx
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/VersionsHistoryList.tsx
@@ -2,7 +2,7 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { formatDateDistance } from 'verdaccio-ui/utils/package';
+import { formatDate, formatDateDistance } from 'verdaccio-ui/utils/package';
 
 import { Time, Versions } from '../../../../../types/packageMeta';
 import { ListItemText, Spacer, StyledLink } from './styles';
@@ -26,7 +26,7 @@ const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) =
               <ListItemText>{version}</ListItemText>
             </StyledLink>
             <Spacer />
-            <ListItemText>
+            <ListItemText title={formatDate(time[version])}>
               {time[version] ? formatDateDistance(time[version]) : t('versions.not-available')}
             </ListItemText>
           </ListItem>
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebar.tsx b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebar.tsx
index 174288b8d..2d826ac6f 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebar.tsx
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebar.tsx
@@ -32,6 +32,8 @@ const DetailSidebar: React.FC = () => {
   const detailContext = useContext(DetailContext);
   const { packageMeta, packageName, packageVersion } = detailContext;
   const { configOptions } = useConfig();
+  const version = packageVersion || packageMeta?.latest.version || '';
+  const time = packageMeta?.time ? packageMeta.time[version] : '';
 
   if (!packageMeta || !packageName) {
     return null;
@@ -45,7 +47,8 @@ const DetailSidebar: React.FC = () => {
         isLatest={typeof packageVersion === 'undefined'}
         moduleType={getModuleType(packageMeta)}
         packageName={packageName}
-        version={packageVersion || packageMeta.latest.version}
+        time={time}
+        version={version}
       />
       <ActionBar
         showDownloadTarball={configOptions.showDownloadTarball}
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebarTitle.tsx b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebarTitle.tsx
index 1c55d9121..f7edcc235 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebarTitle.tsx
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebarTitle.tsx
@@ -6,6 +6,7 @@ import { ModuleType } from 'types/packageMeta';
 import Heading from 'verdaccio-ui/components/Heading';
 import { CommonJS, ES6Modules, TypeScript } from 'verdaccio-ui/components/Icons';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
+import { formatDate, formatDateDistance } from 'verdaccio-ui/utils/package';
 
 interface Props {
   packageName: string;
@@ -14,6 +15,7 @@ interface Props {
   isLatest: boolean;
   hasTypes?: boolean;
   moduleType: ModuleType | void;
+  time: string;
 }
 
 const ModuleJS: React.FC<{ module: ModuleType | void }> = ({ module }) => {
@@ -33,6 +35,7 @@ const DetailSidebarTitle: React.FC<Props> = ({
   isLatest,
   hasTypes,
   moduleType,
+  time,
 }) => {
   const { t } = useTranslation();
   return (
@@ -47,10 +50,13 @@ const DetailSidebarTitle: React.FC<Props> = ({
         </TitleWrapper>
       </StyledHeading>
       {description && <div>{description}</div>}
-      <StyledBoxVersion>
+      <StyledBoxVersion title={formatDate(time)}>
         {isLatest
           ? t('sidebar.detail.latest-version', { version })
           : t('sidebar.detail.version', { version })}
+        {time
+          ? ' - ' + t('sidebar.detail.published') + ' ' + formatDateDistance(time)
+          : t('versions.not-available')}
       </StyledBoxVersion>
     </Box>
   );