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

@@ -0,0 +1,5 @@
+---
+'@verdaccio/ui-theme': patch
+---
+
+feat: Display publication time on sidebar

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",

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>

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}

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>
   );