@verdaccio/ui-components 2.0.0-6-next.10 → 3.0.0-next-7.3

package/src/components/ActionBar/ActionBar.tsx

@@ -1,4 +1,6 @@
+/* eslint-disable verdaccio/jsx-spread */
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import React, { useState } from 'react';
 
 import { url } from '../../utils';
@@ -40,18 +42,20 @@ const ActionBar: React.FC<Props> = ({ showRaw, showDownloadTarball = true, packa
 
   return (
     <Box alignItems="center" display="flex" marginBottom="14px">
-      {actions.map((action) => (
-        <ActionBarAction key={action.type} {...action} />
-      ))}
-      {isRawViewerOpen && (
-        <RawViewer
-          isOpen={isRawViewerOpen}
-          onClose={() => {
-            setIsRawViewerOpen(false);
-          }}
-          packageMeta={packageMeta}
-        />
-      )}
+      <Stack direction="row" spacing={1}>
+        {actions.map((action) => (
+          <ActionBarAction key={action.type} {...action} />
+        ))}
+        {isRawViewerOpen && (
+          <RawViewer
+            isOpen={isRawViewerOpen}
+            onClose={() => {
+              setIsRawViewerOpen(false);
+            }}
+            packageMeta={packageMeta}
+          />
+        )}
+      </Stack>
     </Box>
   );
 };

package/src/components/ActionBar/ActionBarAction.tsx

@@ -3,25 +3,21 @@ import BugReportIcon from '@mui/icons-material/BugReport';
 import DownloadIcon from '@mui/icons-material/CloudDownload';
 import HomeIcon from '@mui/icons-material/Home';
 import RawOnIcon from '@mui/icons-material/RawOn';
+import CircularProgress from '@mui/material/CircularProgress';
 import FabMUI from '@mui/material/Fab';
 import Tooltip from '@mui/material/Tooltip';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { Theme } from '../../Theme';
-import { Dispatch } from '../../store/store';
+import { Dispatch, RootState } from '../../store/store';
 import { Link } from '../Link';
 
 export const Fab = styled(FabMUI)<{ theme?: Theme }>(({ theme }) => ({
   backgroundColor:
     theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
   color: theme?.palette.white,
-  marginRight: 10,
-  ':hover': {
-    color: theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
-    background: theme?.palette.white,
-  },
 }));
 
 type ActionType = 'VISIT_HOMEPAGE' | 'OPEN_AN_ISSUE' | 'DOWNLOAD_TARBALL' | 'RAW_DATA';
@@ -36,6 +32,7 @@ export interface ActionBarActionProps {
 const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link, action }) => {
   const { t } = useTranslation();
   const dispatch = useDispatch<Dispatch>();
+  const isLoading = useSelector((state: RootState) => state?.loading?.models.download);
 
   const handleDownload = useCallback(async () => {
     dispatch.download.getTarball({ link });
@@ -65,9 +62,17 @@ const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link, action })
     case 'DOWNLOAD_TARBALL':
       return (
         <Tooltip title={t('action-bar-action.download-tarball') as string}>
-          <Fab data-testid="download-tarball-btn" onClick={handleDownload} size="small">
-            <DownloadIcon />
-          </Fab>
+          {isLoading ? (
+            <CircularProgress sx={{ marginX: 0 }}>
+              <Fab data-testid="download-tarball-btn" onClick={handleDownload} size="small">
+                <DownloadIcon />
+              </Fab>
+            </CircularProgress>
+          ) : (
+            <Fab data-testid="download-tarball-btn" onClick={handleDownload} size="small">
+              <DownloadIcon />
+            </Fab>
+          )}
         </Tooltip>
       );
     case 'RAW_DATA':

package/src/components/Author/Author.tsx

@@ -1,11 +1,13 @@
+import { Typography } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
 import List from '@mui/material/List';
+import { useTheme } from '@mui/styles';
 import i18next from 'i18next';
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { url } from '../../utils';
-import { AuthorListItem, AuthorListItemText, StyledText } from './styles';
+import { AuthorListItem, StyledText } from './styles';
 
 export function getAuthorName(authorName?: string): string {
   if (!authorName) {
@@ -26,6 +28,8 @@ export function getAuthorName(authorName?: string): string {
 const Author: FC<{ packageMeta }> = ({ packageMeta }) => {
   const { t } = useTranslation();
 
+  const theme = useTheme();
+
   if (!packageMeta) {
     return null;
   }
@@ -37,8 +41,13 @@ const Author: FC<{ packageMeta }> = ({ packageMeta }) => {
   }
 
   const { email, name } = author;
-
-  const avatarComponent = <Avatar alt={author.name} src={author.avatar} />;
+  const avatarComponent = (
+    <Avatar
+      alt={author.name}
+      src={author.avatar}
+      sx={{ width: 40, height: 40, marginRight: theme.spacing(1) }}
+    />
+  );
 
   return (
     <List subheader={<StyledText variant={'subtitle1'}>{t('sidebar.author.title')}</StyledText>}>
@@ -50,7 +59,7 @@ const Author: FC<{ packageMeta }> = ({ packageMeta }) => {
             {avatarComponent}
           </a>
         )}
-        {name && <AuthorListItemText primary={getAuthorName(name)} />}
+        {name && <Typography variant="subtitle2">{getAuthorName(name)}</Typography>}
       </AuthorListItem>
     </List>
   );

package/src/components/Author/styles.ts

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import { Typography } from '@mui/material';
 import ListItem from '@mui/material/ListItem';
-import ListItemText from '@mui/material/ListItemText';
 
 import { Theme } from '../../Theme';
 
@@ -15,8 +14,3 @@ export const AuthorListItem = styled(ListItem)({
     backgroundColor: 'transparent',
   },
 });
-
-export const AuthorListItemText = styled(ListItemText)({
-  padding: '0 10px',
-  margin: 0,
-});

package/src/components/CopyClipboard/CopyToClipBoard.tsx

@@ -4,6 +4,7 @@ import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import React from 'react';
 
+import { Theme } from '../../Theme';
 import { copyToClipBoardUtility } from './utils';
 
 interface Props {
@@ -19,14 +20,14 @@ const Wrapper = styled('div')({
   justifyContent: 'space-between',
 });
 
-const Content = styled('span')({
+const Content = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   display: 'inline-block',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   height: 'auto',
   whiteSpace: 'break-spaces',
-  fontSize: '1rem',
-});
+  fontSize: theme?.fontSize.sm,
+}));
 
 function CopyToClipBoard({ text, children, dataTestId, title, ...props }: Props) {
   return (

package/src/components/Deprecated/Deprecated.tsx

@@ -1,30 +1,17 @@
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import { styled } from '@mui/system';
+import Alert from '@mui/material/Alert';
+import { useTheme } from '@mui/styles';
 import React from 'react';
 
-import { Theme } from '../../Theme';
-
-export const CardStyled = styled(Card)<{ theme?: Theme }>(({ theme }) => {
-  return {
-    marginTop: theme?.spacing(1),
-    marginBottom: theme?.spacing(0.5),
-    backgroundColor: theme?.palette?.error.light,
-    opacity: '0.9',
-    color: theme?.palette?.error.contrastText,
-    fontWeight: 'bold',
-  };
-});
-
 export type Props = {
   message: string;
 };
 
 const Deprecated: React.FC<Props> = ({ message }) => {
+  const theme = useTheme();
   return (
-    <CardStyled>
-      <CardContent>{message}</CardContent>
-    </CardStyled>
+    <Alert severity="warning" sx={{ marginTop: theme.spacing(1), marginBottom: theme.spacing(1) }}>
+      {message}
+    </Alert>
   );
 };
 

package/src/components/Engines/Engines.tsx

@@ -1,7 +1,7 @@
+import { Typography } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
 import Grid from '@mui/material/Grid';
 import List from '@mui/material/List';
-import ListItemText from '@mui/material/ListItemText';
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -24,7 +24,7 @@ const EngineItem: FC<EngineItemProps> = ({ title, element, engineText }) => (
     <List subheader={<StyledText variant={'subtitle1'}>{title}</StyledText>}>
       <EngineListItem>
         <Avatar sx={{ bgcolor: '#FFF' }}>{element}</Avatar>
-        <ListItemText primary={engineText} />
+        <Typography variant="subtitle2">{engineText}</Typography>
       </EngineListItem>
     </List>
   </Grid>
@@ -68,7 +68,7 @@ const Engine: React.FC<Props> = ({ packageMeta }) => {
       {engines.npm ? (
         <EngineItem
           element={<Npm />}
-          engineText={engines.node}
+          engineText={engines.npm}
           title={t('sidebar.engines.npm-version')}
         />
       ) : null}
@@ -77,7 +77,7 @@ const Engine: React.FC<Props> = ({ packageMeta }) => {
         <EngineItem
           element={<Yarn />}
           engineText={engines.yarn}
-          title={t('sidebar.engines.npm-version')}
+          title={t('sidebar.engines.yarn-version')}
         />
       ) : null}
 
@@ -85,7 +85,7 @@ const Engine: React.FC<Props> = ({ packageMeta }) => {
         <EngineItem
           element={<Pnpm />}
           engineText={engines.pnpm}
-          title={t('sidebar.engines.npm-version')}
+          title={t('sidebar.engines.pnpm-version')}
         />
       ) : null}
     </Grid>

package/src/components/Help/Help.test.tsx

@@ -1,11 +1,18 @@
 import React from 'react';
 
-import { render } from '../../test/test-react-testing-library';
+import { render, screen } from '../../test/test-react-testing-library';
 import Help from './Help';
 
 describe('<Help /> component', () => {
   test('should load the component in default state', () => {
-    const { container } = render(<Help />);
-    expect(container.firstChild).toMatchSnapshot();
+    render(<Help />);
+    expect(screen.getByText('help.title')).toBeInTheDocument();
+    expect(screen.getByText('help.sub-title')).toBeInTheDocument();
+    expect(screen.getByText('help.first-step')).toBeInTheDocument();
+    expect(screen.getByText('help.first-step-command-line')).toBeInTheDocument();
+    expect(screen.getByText('help.second-step')).toBeInTheDocument();
+    expect(screen.getByText('help.second-step-command-line')).toBeInTheDocument();
+    expect(screen.getByText('help.third-step')).toBeInTheDocument();
+    expect(screen.getByText('button.learn-more')).toBeInTheDocument();
   });
 });

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/Link/Link.tsx

@@ -15,15 +15,22 @@ export const CustomRouterLink = styled(RouterLink)`
 
 // TODO: improve any with custom types for a and RouterLink
 const Link = React.forwardRef<LinkRef, any>(function LinkFunction(
-  { external, to, children, variant, className },
+  { external, to, children, variant, className, onClick },
   ref
 ) {
   return external ? (
-    <a className={className} href={to} ref={ref} rel="noopener noreferrer" target="_blank">
+    <a
+      className={className}
+      href={to}
+      onClick={onClick}
+      ref={ref}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
       <Typography variant={variant ?? 'caption'}>{children}</Typography>
     </a>
   ) : (
-    <CustomRouterLink className={className} innerRef={ref} to={to}>
+    <CustomRouterLink className={className} innerRef={ref} onClick={onClick} to={to}>
       <Typography variant={variant}>{children}</Typography>
     </CustomRouterLink>
   );

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) => {
@@ -163,7 +165,6 @@ const Package: React.FC<PackageInterface> = ({
     dist?.tarball &&
     url.isURL(dist.tarball) && (
       <Link
-        external={true}
         onClick={() => {
           handleDownload(dist.tarball);
         }}
@@ -174,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>
@@ -195,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>