@verdaccio/ui-components 3.0.0-next.1 → 3.0.0-next.2

package/src/components/Install/Install.test.tsx

@@ -5,6 +5,7 @@ import { PackageManagers } from '@verdaccio/types';
 import { useConfig } from '../../providers';
 import { render, screen } from '../../test/test-react-testing-library';
 import Install from './Install';
+import { getGlobalInstall } from './InstallListItem';
 import data from './__partials__/data.json';
 
 const ComponentToBeRendered: React.FC<{ pkgManagers?: PackageManagers[] }> = () => {
@@ -16,12 +17,9 @@ const ComponentToBeRendered: React.FC<{ pkgManagers?: PackageManagers[] }> = ()
 describe('<Install />', () => {
   test('renders correctly', () => {
     render(<ComponentToBeRendered />);
-    expect(screen.getByText('sidebar.installation.install-using-pnpm')).toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-yarn')).toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-npm')).toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-npm-command')).toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-yarn-command')).toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-pnpm-command')).toBeInTheDocument();
+    expect(screen.getByText('yarn add foo@8.0.0')).toBeInTheDocument();
+    expect(screen.getByText('pnpm install foo@8.0.0')).toBeInTheDocument();
+    expect(screen.getByText('npm install foo@8.0.0')).toBeInTheDocument();
   });
 
   test('should have 3 children', () => {
@@ -38,47 +36,41 @@ describe('<Install />', () => {
     render(<ComponentToBeRendered />);
 
     expect(screen.getByText('sidebar.installation.title')).toBeTruthy();
-    expect(screen.queryByText('sidebar.installation.install-using-pnpm')).not.toBeInTheDocument();
-    expect(screen.queryByText('sidebar.installation.install-using-yarn')).not.toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-npm')).toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-npm-command')).toBeInTheDocument();
-    expect(
-      screen.queryByText('sidebar.installation.install-using-yarn-command')
-    ).not.toBeInTheDocument();
-    expect(
-      screen.queryByText('sidebar.installation.install-using-pnpm-command')
-    ).not.toBeInTheDocument();
+    expect(screen.queryByText('pnpm')).not.toBeInTheDocument();
+    expect(screen.queryByText('yarn')).not.toBeInTheDocument();
+    expect(screen.getByText('npm install foo@8.0.0')).toBeInTheDocument();
   });
 
   test('should have the element YARN', () => {
     window.__VERDACCIO_BASENAME_UI_OPTIONS.pkgManagers = ['yarn'];
     render(<ComponentToBeRendered />);
     expect(screen.getByText('sidebar.installation.title')).toBeTruthy();
-    expect(screen.queryByText('sidebar.installation.install-using-pnpm')).not.toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-yarn')).toBeInTheDocument();
-    expect(screen.queryByText('sidebar.installation.install-using-npm')).not.toBeInTheDocument();
-    expect(
-      screen.queryByText('sidebar.installation.install-using-npm-command')
-    ).not.toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-yarn-command')).toBeInTheDocument();
-    expect(
-      screen.queryByText('sidebar.installation.install-using-pnpm-command')
-    ).not.toBeInTheDocument();
+    expect(screen.queryByText('pnpm')).not.toBeInTheDocument();
+    expect(screen.queryByText('npm')).not.toBeInTheDocument();
+    expect(screen.getByText('yarn add foo@8.0.0')).toBeInTheDocument();
   });
 
   test('should have the element PNPM', () => {
     window.__VERDACCIO_BASENAME_UI_OPTIONS.pkgManagers = ['pnpm'];
     render(<ComponentToBeRendered />);
-    expect(screen.getByText('sidebar.installation.title')).toBeTruthy();
-    expect(screen.getByText('sidebar.installation.install-using-pnpm')).toBeInTheDocument();
-    expect(screen.queryByText('sidebar.installation.install-using-yarn')).not.toBeInTheDocument();
-    expect(screen.queryByText('sidebar.installation.install-using-npm')).not.toBeInTheDocument();
-    expect(
-      screen.queryByText('sidebar.installation.install-using-npm-command')
-    ).not.toBeInTheDocument();
-    expect(
-      screen.queryByText('sidebar.installation.install-using-yarn-command')
-    ).not.toBeInTheDocument();
-    expect(screen.getByText('sidebar.installation.install-using-pnpm-command')).toBeInTheDocument();
+    expect(screen.queryByText('pnpm')).not.toBeInTheDocument();
+    expect(screen.queryByText('yarn')).not.toBeInTheDocument();
+    expect(screen.getByText('pnpm install foo@8.0.0')).toBeInTheDocument();
+  });
+});
+
+describe('getGlobalInstall', () => {
+  test('no global', () => {
+    expect(getGlobalInstall(false, 'foo', '1.0.0')).toEqual('1.0.0@foo');
+  });
+  test('global', () => {
+    expect(getGlobalInstall(true, 'foo', '1.0.0')).toEqual('-g 1.0.0@foo');
+  });
+
+  test('yarn no global', () => {
+    expect(getGlobalInstall(false, 'foo', '1.0.0', true)).toEqual('1.0.0@foo');
+  });
+  test('yarn global', () => {
+    expect(getGlobalInstall(true, 'foo', '1.0.0', true)).toEqual('1.0.0@foo');
   });
 });

package/src/components/Install/Install.tsx

@@ -27,7 +27,6 @@ export type Props = {
 const Install: React.FC<Props> = ({ packageMeta, packageName, configOptions }) => {
   const { t } = useTranslation();
   const theme = useTheme();
-
   if (!packageMeta || !packageName) {
     return null;
   }
@@ -51,13 +50,25 @@ const Install: React.FC<Props> = ({ packageMeta, packageName, configOptions }) =
         subheader={<StyledText variant={'subtitle1'}>{t('sidebar.installation.title')}</StyledText>}
       >
         {hasNpm && (
-          <InstallListItem dependencyManager={DependencyManager.NPM} packageName={packageName} />
+          <InstallListItem
+            dependencyManager={DependencyManager.NPM}
+            packageName={packageName}
+            packageVersion={packageMeta.latest.version}
+          />
         )}
         {hasYarn && (
-          <InstallListItem dependencyManager={DependencyManager.YARN} packageName={packageName} />
+          <InstallListItem
+            dependencyManager={DependencyManager.YARN}
+            packageName={packageName}
+            packageVersion={packageMeta.latest.version}
+          />
         )}
         {hasPnpm && (
-          <InstallListItem dependencyManager={DependencyManager.PNPM} packageName={packageName} />
+          <InstallListItem
+            dependencyManager={DependencyManager.PNPM}
+            packageName={packageName}
+            packageVersion={packageMeta.latest.version}
+          />
         )}
       </List>
     </>

package/src/components/Install/InstallListItem.tsx

@@ -2,8 +2,8 @@ import styled from '@emotion/styled';
 import Avatar from '@mui/material/Avatar';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
+import { useTheme } from '@mui/styles';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
 import { useSettings } from '../../providers/PersistenceSettingProvider';
 import CopyToClipBoard from '../CopyClipboard';
@@ -35,78 +35,94 @@ export enum DependencyManager {
 interface Interface {
   packageName: string;
   dependencyManager: DependencyManager;
+  packageVersion?: string;
 }
 
-const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }) => {
-  const { t } = useTranslation();
+export function getGlobalInstall(isGlobal, packageVersion, packageName, isYarn = false) {
+  const name = isGlobal
+    ? `${isYarn ? '' : '-g'} ${packageVersion ? `${packageName}@${packageVersion}` : packageName}`
+    : packageVersion
+    ? `${packageName}@${packageVersion}`
+    : packageName;
+
+  return name.trim();
+}
+
+const InstallListItem: React.FC<Interface> = ({
+  packageName,
+  dependencyManager,
+  packageVersion,
+}) => {
   const { localSettings } = useSettings();
+  const theme = useTheme();
   const isGlobal = localSettings[packageName]?.global ?? false;
-  const pkgName = isGlobal ? `-g ${packageName}` : packageName;
-
   switch (dependencyManager) {
     case DependencyManager.NPM:
       return (
         <InstallItem data-testid={'installListItem-npm'}>
-          <PackageMangerAvatar alt="npm" sx={{ bgcolor: '#FFF' }}>
+          <PackageMangerAvatar alt="npm" sx={{ bgcolor: theme.palette.white }}>
             <Npm />
           </PackageMangerAvatar>
           <InstallListItemText
             primary={
               <CopyToClipBoard
-                dataTestId="installYarn"
-                text={t('sidebar.installation.install-using-npm-command', {
-                  packageName: pkgName,
-                })}
-                title={t('sidebar.installation.install-using-npm-command', {
-                  packageName: pkgName,
-                })}
+                dataTestId="instalNpm"
+                text={`npm install ${getGlobalInstall(isGlobal, packageVersion, packageName)}`}
+                title={`npm install ${getGlobalInstall(isGlobal, packageVersion, packageName)}`}
               />
             }
-            secondary={t('sidebar.installation.install-using-npm')}
           />
         </InstallItem>
       );
     case DependencyManager.YARN:
       return (
         <InstallItem data-testid={'installListItem-yarn'}>
-          <PackageMangerAvatar alt="yarn" sx={{ bgcolor: '#FFF' }}>
+          <PackageMangerAvatar alt="yarn" sx={{ bgcolor: theme.palette.white }}>
             <Yarn />
           </PackageMangerAvatar>
           <InstallListItemText
             primary={
               <CopyToClipBoard
                 dataTestId="installYarn"
-                text={t('sidebar.installation.install-using-yarn-command', {
-                  packageName: pkgName,
-                })}
-                title={t('sidebar.installation.install-using-yarn-command', {
-                  packageName: pkgName,
-                })}
+                text={
+                  isGlobal
+                    ? `yarn ${localSettings.yarnModern ? '' : 'global'} add ${getGlobalInstall(
+                        isGlobal,
+                        packageVersion,
+                        packageName,
+                        true
+                      )}`
+                    : `yarn add ${getGlobalInstall(isGlobal, packageVersion, packageName, true)}`
+                }
+                title={
+                  isGlobal
+                    ? `yarn global add ${getGlobalInstall(
+                        isGlobal,
+                        packageVersion,
+                        packageName,
+                        true
+                      )}`
+                    : `yarn add ${getGlobalInstall(isGlobal, packageVersion, packageName, true)}`
+                }
               />
             }
-            secondary={t('sidebar.installation.install-using-yarn')}
           />
         </InstallItem>
       );
     case DependencyManager.PNPM:
       return (
         <InstallItem data-testid={'installListItem-pnpm'}>
-          <PackageMangerAvatar alt={'pnpm'} sx={{ bgcolor: '#FFF' }}>
+          <PackageMangerAvatar alt={'pnpm'} sx={{ bgcolor: theme.palette.white }}>
             <Pnpm />
           </PackageMangerAvatar>
           <InstallListItemText
             primary={
               <CopyToClipBoard
                 dataTestId="installPnpm"
-                text={t('sidebar.installation.install-using-pnpm-command', {
-                  packageName: pkgName,
-                })}
-                title={t('sidebar.installation.install-using-pnpm-command', {
-                  packageName: pkgName,
-                })}
+                text={`pnpm install ${getGlobalInstall(isGlobal, packageVersion, packageName)}`}
+                title={`pnpm install ${getGlobalInstall(isGlobal, packageVersion, packageName)}`}
               />
             }
-            secondary={t('sidebar.installation.install-using-pnpm')}
           />
         </InstallItem>
       );

package/src/components/Package/Package.tsx

@@ -4,6 +4,7 @@ import BugReport from '@mui/icons-material/BugReport';
 import DownloadIcon from '@mui/icons-material/CloudDownload';
 import HomeIcon from '@mui/icons-material/Home';
 import { useTheme } from '@mui/material';
+import CircularProgress from '@mui/material/CircularProgress';
 import Grid from '@mui/material/Grid';
 import ListItem from '@mui/material/ListItem';
 import Tooltip from '@mui/material/Tooltip';
@@ -71,6 +72,7 @@ const Package: React.FC<PackageInterface> = ({
   const dispatch = useDispatch<Dispatch>();
   const { t } = useTranslation();
   const theme = useTheme();
+  const isLoading = useSelector((state: RootState) => state?.loading?.models.download);
 
   const handleDownload = useCallback(
     async (tarballDist: string) => {
@@ -173,7 +175,13 @@ const Package: React.FC<PackageInterface> = ({
           title={t('package.tarball')}
         >
           <IconButton aria-label={t('package.download')} size="large">
-            <DownloadIcon />
+            {isLoading ? (
+              <CircularProgress size={13}>
+                <DownloadIcon />
+              </CircularProgress>
+            ) : (
+              <DownloadIcon />
+            )}
           </IconButton>
         </Tooltip>
       </Link>
@@ -194,6 +202,7 @@ const Package: React.FC<PackageInterface> = ({
           container={true}
           item={true}
           justify="flex-end"
+          spacing={3}
           xs={true}
         >
           {renderHomePageLink()}

package/src/components/RawViewer/RawViewer.tsx

@@ -47,12 +47,7 @@ type Props = {
 const RawViewer: React.FC<Props> = ({ isOpen = false, onClose, packageMeta }) => {
   const { t } = useTranslation();
   return (
-    <Dialog
-      data-testid={'rawViewer--dialog'}
-      fullScreen={true}
-      id="raw-viewer--dialog-container"
-      open={isOpen}
-    >
+    <Dialog data-testid={'rawViewer--dialog'} fullScreen={true} open={isOpen}>
       <ViewerTitle id="viewer-title" onClose={onClose}>
         {t('action-bar-action.raw')}
       </ViewerTitle>

package/src/components/Readme/Readme.tsx

@@ -1,30 +1,19 @@
-import styled from '@emotion/styled';
-import 'github-markdown-css';
 import 'highlight.js/styles/default.css';
 import React from 'react';
 
-import { Theme } from '../../Theme';
+import { useCustomTheme } from '../../';
+import ReadmeDark from './ReadmeDark';
+import ReadmeLight from './ReadmeLight';
 import { Props } from './types';
-import { parseReadme } from './utils';
 
 const Readme: React.FC<Props> = ({ description }) => {
-  return (
-    <Wrapper
-      className="markdown-body"
-      dangerouslySetInnerHTML={{ __html: parseReadme(description) as string }}
-    />
+  // @ts-ignore
+  const { isDarkMode } = useCustomTheme();
+
+  return isDarkMode ? (
+    <ReadmeDark description={description} />
+  ) : (
+    <ReadmeLight description={description} />
   );
 };
 export default Readme;
-
-const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
-  background: theme?.palette.white,
-  color: theme?.palette.black,
-  padding: theme?.spacing(2, 3),
-  ul: {
-    listStyle: 'disc',
-  },
-  img: {
-    maxWidth: '100%',
-  },
-}));

package/src/components/Readme/ReadmeDark.tsx

@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+import cx from 'classnames';
+import 'highlight.js/styles/default.css';
+import React from 'react';
+
+import { Theme } from '../../Theme';
+// @ts-ignore
+import styles from './github-markdown-dark.css';
+import { Props } from './types';
+import { parseReadme } from './utils';
+
+const Readme: React.FC<Props> = ({ description }) => {
+  return (
+    <Wrapper
+      className={cx('markdown-body', styles['markdown-body'])}
+      dangerouslySetInnerHTML={{ __html: parseReadme(description) as string }}
+    />
+  );
+};
+export default Readme;
+
+const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  background: theme?.palette.white,
+  color: theme?.palette.black,
+  padding: theme?.spacing(2, 3),
+  ul: {
+    listStyle: 'disc',
+  },
+  img: {
+    maxWidth: '100%',
+  },
+}));

package/src/components/Readme/ReadmeLight.tsx

@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+import cx from 'classnames';
+import 'highlight.js/styles/default.css';
+import React from 'react';
+
+import { Theme } from '../../Theme';
+// @ts-ignore
+import styles from './github-markdown-light.css';
+import { Props } from './types';
+import { parseReadme } from './utils';
+
+const Readme: React.FC<Props> = ({ description }) => {
+  return (
+    <Wrapper
+      className={cx('markdown-body', styles['markdown-body'])}
+      dangerouslySetInnerHTML={{ __html: parseReadme(description) as string }}
+    />
+  );
+};
+export default Readme;
+
+const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  background: theme?.palette.white,
+  color: theme?.palette.black,
+  padding: theme?.spacing(2, 3),
+  ul: {
+    listStyle: 'disc',
+  },
+  img: {
+    maxWidth: '100%',
+  },
+}));