@verdaccio/ui-components 3.0.0-next-7.6 → 3.0.0-next-7.8

package/src/components/UpLinks/UpLinks.tsx

@@ -1,3 +1,6 @@
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import React from 'react';
@@ -5,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 
 import { utils } from '../../utils';
 import NoItems from '../NoItems';
+import UpLinkLink from './UplinkLink';
 import { ListItemText, Spacer, StyledText } from './styles';
 
 const UpLinks: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
@@ -17,24 +21,43 @@ const UpLinks: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
   const { _uplinks: uplinks, latest } = packageMeta;
 
   if (Object.keys(uplinks).length === 0) {
-    return <NoItems data-testid="no-uplinks" text={t('uplinks.no-items', { name: latest.name })} />;
+    return (
+      <Card sx={{ mb: 2 }}>
+        <CardContent>
+          <NoItems data-testid="no-uplinks" text={t('uplinks.no-items', { name: latest.name })} />
+        </CardContent>
+      </Card>
+    );
   }
 
   return (
-    <>
-      <StyledText variant="subtitle1">{t('uplinks.title')}</StyledText>
-      <List>
-        {Object.keys(uplinks)
-          .reverse()
-          .map((name) => (
-            <ListItem key={name}>
-              <ListItemText>{name}</ListItemText>
-              <Spacer />
-              <ListItemText>{utils.formatDateDistance(uplinks[name].fetched)}</ListItemText>
-            </ListItem>
-          ))}
-      </List>
-    </>
+    <Card sx={{ mb: 2 }}>
+      <CardContent>
+        <Box data-testid="uplinks" sx={{ m: 2 }}>
+          <StyledText variant="subtitle1">{t('uplinks.title')}</StyledText>
+          <List dense={true}>
+            {Object.keys(uplinks)
+              .reverse()
+              .map((name) => (
+                <ListItem
+                  className="version-item"
+                  data-testid={`uplink-${name}`}
+                  key={name}
+                  sx={{ pr: 0 }}
+                >
+                  <ListItemText>
+                    <UpLinkLink packageName={latest.name} uplinkName={name} />
+                  </ListItemText>
+                  <Spacer />
+                  <ListItemText title={utils.formatDate(uplinks[name].fetched)}>
+                    {utils.formatDateDistance(uplinks[name].fetched)}
+                  </ListItemText>
+                </ListItem>
+              ))}
+          </List>
+        </Box>
+      </CardContent>
+    </Card>
   );
 };
 

package/src/components/UpLinks/UplinkLink.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { utils } from '../../utils';
+import LinkExternal from '../LinkExternal';
+
+const UpLinkLink: React.FC<{ packageName: string; uplinkName: string }> = ({
+  packageName,
+  uplinkName,
+}) => {
+  const link = utils.getUplink(uplinkName, packageName);
+  return link ? (
+    <LinkExternal to={link} variant="outline">
+      {uplinkName}
+    </LinkExternal>
+  ) : (
+    <>{uplinkName}</>
+  );
+};
+
+export default UpLinkLink;

package/src/components/UpLinks/styles.ts

@@ -15,6 +15,7 @@ export const Spacer = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   } `,
   whiteSpace: 'nowrap',
   height: '0.5em',
+  margin: '0 16px',
 }));
 
 export const ListItemText = styled(MuiListItemText)<{ theme?: Theme }>(({ theme }) => ({

package/src/components/Versions/HistoryList.tsx

@@ -7,8 +7,8 @@ import { useTranslation } from 'react-i18next';
 
 import { useConfig } from '../../providers';
 import { Time, Versions } from '../../types/packageMeta';
-import { utils } from '../../utils';
-import { Link } from '../Link';
+import { Route, utils } from '../../utils';
+import Link from '../Link';
 import { ListItemText, Spacer } from './styles';
 
 interface Props {
@@ -40,8 +40,13 @@ const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) =
       {Object.keys(listVersions)
         .reverse()
         .map((version) => (
-          <ListItem className="version-item" data-testid={`version-${version}`} key={version}>
-            <Link to={`/-/web/detail/${packageName}/v/${version}`} variant="caption">
+          <ListItem
+            className="version-item"
+            data-testid={`version-${version}`}
+            key={version}
+            sx={{ pr: 0 }}
+          >
+            <Link to={`${Route.DETAIL}${packageName}/v/${version}`} variant="outline">
               <ListItemText disableTypography={false} primary={version}></ListItemText>
             </Link>
             {typeof versions[version]?.deprecated === 'string' ? (

package/src/components/Versions/TagList.tsx

@@ -3,7 +3,8 @@ import ListItem from '@mui/material/ListItem';
 import React from 'react';
 
 import { DistTags, Time } from '../../types/packageMeta';
-import { Link } from '../Link';
+import { Route } from '../../utils';
+import Link from '../Link';
 import { ListItemText, Spacer } from './styles';
 
 interface Props {
@@ -19,8 +20,8 @@ const VersionsTagList: React.FC<Props> = ({ tags, packageName, time }) => (
         return time[tags[a]] < time[tags[b]] ? 1 : time[tags[a]] > time[tags[b]] ? -1 : 0;
       })
       .map((tag) => (
-        <ListItem className="version-item" data-testid={`tag-${tag}`} key={tag}>
-          <Link to={`/-/web/detail/${packageName}/v/${tags[tag]}`} variant="outline">
+        <ListItem className="version-item" data-testid={`tag-${tag}`} key={tag} sx={{ pr: 0 }}>
+          <Link to={`${Route.DETAIL}${packageName}/v/${tags[tag]}`} variant="outline">
             <ListItemText>{tag}</ListItemText>
           </Link>
           <Spacer />

package/src/components/Versions/Versions.test.tsx

@@ -45,6 +45,8 @@ describe('<Version /> component', () => {
     expect(screen.queryAllByTestId('version-list-text')).toHaveLength(65);
     fireEvent.change(screen.getByRole('textbox'), { target: { value: '2.3.0' } });
     expect(screen.queryAllByTestId('version-list-text')).toHaveLength(1);
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: '' } });
+    expect(screen.queryAllByTestId('version-list-text')).toHaveLength(65);
   });
 
   test('should not render versions', () => {

package/src/components/Versions/Versions.tsx

@@ -1,4 +1,8 @@
+import styled from '@emotion/styled';
 import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/styles';
@@ -7,12 +11,18 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import semver from 'semver';
 
+import { Theme } from '../../Theme';
 import { useConfig } from '../../providers';
 import VersionsHistoryList from './HistoryList';
 import VersionsTagList from './TagList';
 
 export type Props = { packageMeta: any; packageName: string };
 
+export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
+  fontWeight: props.theme && props.theme.fontWeight.bold,
+  textTransform: 'capitalize',
+}));
+
 const Versions: React.FC<Props> = ({ packageMeta, packageName }) => {
   const { t } = useTranslation();
   const { configOptions } = useConfig();
@@ -46,38 +56,53 @@ const Versions: React.FC<Props> = ({ packageMeta, packageName }) => {
   };
 
   return (
-    <>
-      {hasDistTags ? (
-        <>
-          <Typography variant="subtitle1">{t('versions.current-tags')}</Typography>
-          <VersionsTagList packageName={packageName} tags={distTags} time={time} />
-        </>
-      ) : null}
-      <>
-        <Typography variant="subtitle1">{t('versions.version-history')}</Typography>
-        <TextField
-          helperText={t('versions.search.placeholder')}
-          onChange={debounce((e) => {
-            filterVersions(e.target.value);
-          }, 200)}
-          size="small"
-          variant="standard"
-        />
-      </>
-      {hasVersionHistory ? (
-        <>
-          {hideDeprecatedVersions === true && (
-            <Alert
-              severity="info"
-              sx={{ marginTop: theme.spacing(1), marginBottom: theme.spacing(1) }}
-            >
-              {t('versions.hide-deprecated')}
-            </Alert>
-          )}
-          <VersionsHistoryList packageName={packageName} time={time} versions={packageVersions} />
-        </>
-      ) : null}
-    </>
+    <Card sx={{ mb: 2 }}>
+      <CardContent>
+        <Box data-testid="versions" sx={{ m: 2 }}>
+          {hasDistTags ? (
+            <>
+              <StyledText variant="subtitle1">
+                {t('versions.current-tags')}
+                <span>{` (${Object.keys(distTags).length})`}</span>
+              </StyledText>
+              <VersionsTagList packageName={packageName} tags={distTags} time={time} />
+            </>
+          ) : null}
+          <>
+            <StyledText variant="subtitle1">
+              {t('versions.version-history')}
+              <span>{` (${Object.keys(packageVersions).length})`}</span>
+            </StyledText>
+            <TextField
+              helperText={t('versions.search.placeholder')}
+              onChange={debounce((e) => {
+                filterVersions(e.target.value);
+              }, 200)}
+              size="small"
+              variant="standard"
+              width="50%"
+            />
+          </>
+          {hasVersionHistory ? (
+            <>
+              {hideDeprecatedVersions === true && (
+                <Alert
+                  severity="info"
+                  sx={{ marginTop: theme.spacing(1), marginBottom: theme.spacing(1) }}
+                >
+                  {t('versions.hide-deprecated')}
+                </Alert>
+              )}
+              <VersionsHistoryList
+                packageName={packageName}
+                time={time}
+                versions={packageVersions}
+              />
+            </>
+          ) : null}
+        </Box>
+      </CardContent>
+    </Card>
   );
 };
 

package/src/index.ts

@@ -1,6 +1,5 @@
 export { default as CopyClipboard, copyToClipBoardUtility } from './components/CopyClipboard';
 export * from './components/CopyClipboard';
-export { Link } from './components/Link';
 export { default as ActionBar } from './components/ActionBar';
 export { default as Author } from './components/Author';
 export { default as Dependencies } from './components/Dependencies';
@@ -12,7 +11,11 @@ export { default as FundButton } from './components/FundButton';
 export { default as Heading } from './components/Heading';
 export * as Icons from './components/Icons';
 export { default as Install } from './components/Install';
+export { default as Keywords } from './components/Keywords';
+export { default as Link } from './components/Link';
+export { default as LinkExternal } from './components/LinkExternal';
 export { default as RawViewer } from './components/RawViewer';
+export { default as Person } from './components/Person';
 export { default as Readme } from './components/Readme';
 export { default as SideBarTitle } from './components/SideBarTitle';
 export { default as UpLinks } from './components/UpLinks';

package/src/providers/AppConfigurationProvider/AppConfigurationProvider.tsx

@@ -28,6 +28,7 @@ const defaultValues: ConfigProviderProps = {
     showSearch: true,
     showRaw: true,
     showDownloadTarball: true,
+    showUplinks: true,
     hideDeprecatedVersions: false,
     title: 'Verdaccio',
   },

package/src/providers/PersistenceSettingProvider/PersistenceSettingProvider.tsx

@@ -10,11 +10,13 @@ import React, {
 import useLocalStorage from '../../hooks/useLocalStorage';
 
 type PersistenceSettingsProps = {
+  isLatest?: boolean;
   isGlobal?: boolean;
   yarnModern: boolean;
 };
 
 const defaultValues: PersistenceSettingsProps = {
+  isLatest: false,
   isGlobal: false,
   yarnModern: false,
 };

package/src/providers/VersionProvider/VersionProvider.test.tsx

@@ -30,7 +30,7 @@ describe('<Header /> component with logged in state', () => {
   });
 
   test('should load data from the provider', async () => {
-    await act(async () => {
+    act(() =>
       renderWithStore(
         <MemoryRouter initialEntries={[`/-/web/detail/storybook`]}>
           <Route path={Routes.PACKAGE}>
@@ -40,8 +40,8 @@ describe('<Header /> component with logged in state', () => {
           </Route>
         </MemoryRouter>,
         store
-      );
-    });
+      )
+    );
     await waitFor(() => screen.getByText('storybook'));
     expect(screen.getByText('storybook')).toBeInTheDocument();
     expect(screen.getByText('MIT')).toBeInTheDocument();

package/src/sections/Detail/Detail.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { render } from '../../test/test-react-testing-library';
+import { render, screen } from '../../test/test-react-testing-library';
 import DetailContainer from './Detail';
 
 describe('DetailContainer', () => {
@@ -8,5 +8,12 @@ describe('DetailContainer', () => {
     const { container } = render(<DetailContainer />);
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  test('renders without uplinks', () => {
+    window.__VERDACCIO_BASENAME_UI_OPTIONS.showUplinks = false;
+    render(<DetailContainer />);
+    expect(screen.queryByTestId('uplinks-tab')).toBeFalsy();
+  });
+
   test.todo('should test click on tabs');
 });

package/src/sections/Detail/Detail.tsx

@@ -2,7 +2,7 @@ import Box from '@mui/material/Box';
 import React, { useState } from 'react';
 
 import Deprecated from '../../components/Deprecated';
-import { useVersion } from '../../providers';
+import { useConfig, useVersion } from '../../providers';
 import ContainerContent from './ContainerContent';
 import Tabs from './Tabs';
 
@@ -14,7 +14,10 @@ export enum TabPosition {
 }
 
 const DetailContainer: React.FC = () => {
-  const tabs = Object.values(TabPosition);
+  const { configOptions } = useConfig();
+  const tabs = configOptions.showUplinks
+    ? Object.values(TabPosition)
+    : Object.values(TabPosition).filter((tab) => tab !== TabPosition.UPLINKS);
   const [tabPosition, setTabPosition] = useState(0);
   const { readMe, packageMeta } = useVersion();
 
@@ -23,8 +26,12 @@ const DetailContainer: React.FC = () => {
   };
 
   return (
-    <Box component="div" display="flex" flexDirection="column" padding={2}>
-      <Tabs onChange={handleChange} tabPosition={tabPosition} />
+    <Box component="div" display="flex" flexDirection="column" padding={0}>
+      <Tabs
+        onChange={handleChange}
+        showUplinks={configOptions.showUplinks}
+        tabPosition={tabPosition}
+      />
       {packageMeta?.latest?.deprecated && <Deprecated message={packageMeta?.latest?.deprecated} />}
       <ContainerContent readDescription={readMe} tabPosition={tabs[tabPosition]} />
     </Box>

package/src/sections/Detail/Tabs.tsx

@@ -9,16 +9,19 @@ import { Theme } from '../../Theme';
 interface Props {
   onChange: (event: React.ChangeEvent<{}>, newValue: number) => void;
   tabPosition: number;
+  showUplinks?: boolean;
 }
 
-const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChange }) => {
+const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChange, showUplinks }) => {
   const { t } = useTranslation();
   return (
     <Tabs onChange={onChange} value={tabPosition} variant={'fullWidth'}>
       <Tab data-testid={'readme-tab'} id={'readme-tab'} label={t('tab.readme')} />
       <Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={t('tab.dependencies')} />
       <Tab data-testid={'versions-tab'} id={'versions-tab'} label={t('tab.versions')} />
-      <Tab data-testid={'uplinks-tab'} id={'uplinks-tab'} label={t('tab.uplinks')} />
+      {showUplinks && (
+        <Tab data-testid={'uplinks-tab'} id={'uplinks-tab'} label={t('tab.uplinks')} />
+      )}
     </Tabs>
   );
 };

package/src/sections/Footer/Footer.tsx

@@ -50,15 +50,22 @@ const Footer = () => {
               <Icon>
                 <FlagsIcon.TW />
               </Icon>
+              <Icon>
+                <FlagsIcon.CA />
+              </Icon>
             </Flags>
           </ToolTip>
         </Left>
         <Right>
           {configOptions?.version && (
             <>
-              <span data-testid="version-footer">{t('footer.powered-by')}</span>
-              <Logo isDefault={true} onClick={goToVerdaccioWebsite} size="x-small" />
-              {`/ ${configOptions.version}`}
+              <PoweredBy data-testid="version-footer">{t('footer.powered-by')}</PoweredBy>
+              <Logo
+                isDefault={true}
+                onClick={goToVerdaccioWebsite}
+                size="x-small"
+                title={configOptions.version}
+              />
             </>
           )}
         </Right>
@@ -69,13 +76,17 @@ const Footer = () => {
 
 export default Footer;
 
+const PoweredBy = styled('span')(() => ({
+  paddingRight: '5px',
+}));
+
 const StyledEarth = styled(Earth)<{ theme?: Theme }>(({ theme }) => ({
   margin: theme.spacing(0, 1),
 }));
 
 const Flags = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   display: 'inline-grid',
-  gridTemplateColumns: 'repeat(8, max-content)',
+  gridTemplateColumns: 'repeat(10, max-content)',
   gridGap: theme.spacing(0, 1),
   position: 'absolute',
   background: theme?.palette.greyAthens,

package/src/sections/Footer/styles.ts

@@ -14,6 +14,8 @@ export const Inner = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'flex-end',
+  paddingLeft: 16,
+  paddingRight: 16,
   width: '100%',
   [`@media (min-width: ${theme?.breakPoints.medium}px)`]: {
     minWidth: 400,
@@ -32,10 +34,12 @@ export const Left = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   [`@media (min-width: ${theme?.breakPoints.medium}px)`]: {
     display: 'flex',
   },
+  marginLeft: 1,
 }));
 
 export const Right = styled(Left)({
   display: 'flex',
+  marginRight: 1,
 });
 
 export const Love = styled('span')<{ theme?: Theme }>(({ theme }) => ({

package/src/sections/Header/Header.test.tsx

@@ -39,7 +39,7 @@ describe('<Header /> component with logged in state', () => {
     cleanup();
   });
 
-  test('should load the component n logged out state', () => {
+  test('should load the component in logged out state', () => {
     renderWithStore(
       <Router>
         <Header />
@@ -59,7 +59,9 @@ describe('<Header /> component with logged in state', () => {
       </Router>,
       store
     );
-    store.dispatch.login.logInUser({ username: 'store', token: '12345' });
+    act(() => {
+      store.dispatch.login.logInUser({ username: 'store', token: '12345' });
+    });
 
     await waitFor(() => {
       expect(screen.getByTestId('logInDialogIcon')).toBeTruthy();
@@ -78,13 +80,13 @@ describe('<Header /> component with logged in state', () => {
     const loginBtn = screen.getByTestId('header--button-login');
     fireEvent.click(loginBtn);
 
-    const loginDialog = await waitFor(() => screen.getByTestId('login--dialog'));
+    const loginDialog = await waitFor(() => screen.findByTestId('login--dialog'));
 
     expect(loginDialog).toBeTruthy();
   });
 
   test('should login and logout the user', async () => {
-    const { getByText, getByTestId } = renderWithStore(
+    const { getByText, getByTestId, findByText, findByTestId } = renderWithStore(
       <Router>
         <Header />
       </Router>,
@@ -104,14 +106,14 @@ describe('<Header /> component with logged in state', () => {
     await act(async () => {
       fireEvent.click(signInButton);
     });
-    await waitFor(() => getByTestId('logInDialogIcon'));
+    await waitFor(() => findByTestId('logInDialogIcon'));
     const headerMenuAccountCircle = getByTestId('logInDialogIcon');
     fireEvent.click(headerMenuAccountCircle);
 
     // // wait for button Logout's appearance and return the element
-    const logoutBtn = await waitFor(() => getByText('button.logout'));
+    const logoutBtn = await waitFor(() => findByText('button.logout'));
     fireEvent.click(logoutBtn);
-    await waitFor(() => getByText('button.login'));
+    await waitFor(() => findByText('button.login'));
     expect(getByText('button.login')).toBeTruthy();
   });
 
@@ -169,12 +171,12 @@ describe('<Header /> component with logged in state', () => {
     expect(infoBtn).toBeInTheDocument();
     fireEvent.click(infoBtn);
     // wait for registrationInfo modal appearance and return the element
-    const registrationInfoModal = await waitFor(() => screen.getByTestId('registryInfo--dialog'));
+    const registrationInfoModal = await waitFor(() => screen.findByTestId('registryInfo--dialog'));
     expect(registrationInfoModal).toBeTruthy();
   });
 
   test('should close the registrationInfo modal when clicking on the button close', async () => {
-    const { getByTestId, getByText, queryByTestId } = renderWithStore(
+    const { getByTestId, findByText, queryByTestId } = renderWithStore(
       <Router>
         <Header HeaderInfoDialog={CustomInfoDialog} />
       </Router>,
@@ -185,7 +187,7 @@ describe('<Header /> component with logged in state', () => {
     fireEvent.click(infoBtn);
 
     // wait for Close's button of registrationInfo modal appearance and return the element
-    const closeBtn = await waitFor(() => getByText('button.close'));
+    const closeBtn = await waitFor(() => findByText('button.close'));
     fireEvent.click(closeBtn);
 
     const hasRegistrationInfoModalBeenRemoved = await waitForElementToBeRemoved(() =>

package/src/sections/Header/HeaderLeft.tsx

@@ -1,29 +1,37 @@
-import styled from '@emotion/styled';
+import Toolbar from '@mui/material/Toolbar';
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link as RouterLink } from 'react-router-dom';
 
 import { Logo, Search } from '../../';
-import { LeftSide, SearchWrapper } from './styles';
+import { SearchWrapper } from './styles';
 
 interface Props {
   showSearch?: boolean;
 }
 
-const StyledLink = styled(Link)({
-  marginRight: '1em',
-});
-
 const HeaderLeft: React.FC<Props> = ({ showSearch }) => (
-  <LeftSide>
-    <StyledLink to={'/'}>
+  <Toolbar
+    sx={{
+      display: 'flex',
+      padding: 0,
+      marginLeft: 1,
+      flex: 1,
+      '@media (min-width: 600px)': {
+        padding: 0,
+        marginLeft: 1,
+        marginRight: '20px',
+      },
+    }}
+  >
+    <RouterLink to={'/'}>
       <Logo />
-    </StyledLink>
+    </RouterLink>
     {showSearch && (
       <SearchWrapper data-testid="search-container">
         <Search />
       </SearchWrapper>
     )}
-  </LeftSide>
+  </Toolbar>
 );
 
 export default HeaderLeft;

package/src/sections/Header/HeaderMenu.tsx

@@ -39,7 +39,7 @@ const HeaderMenu: React.FC<Props> = ({
       <Menu
         anchorEl={anchorEl}
         anchorOrigin={{
-          vertical: 'top',
+          vertical: 'bottom',
           horizontal: 'right',
         }}
         onClose={onLoggedInMenuClose}