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

package/src/components/Search/Search.test.tsx

@@ -4,6 +4,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import { api, store } from '../../';
 import { fireEvent, renderWithStore, screen, waitFor } from '../../test/test-react-testing-library';
 import Search from './Search';
+import { cleanDescription } from './utils';
 
 jest.mock('lodash/debounce', () =>
   jest.fn((fn) => {
@@ -45,7 +46,7 @@ describe('<Search /> component', () => {
   });
 
   test('handleSearch: when user type package name in search component, show suggestions', async () => {
-    const { getByPlaceholderText, getAllByText } = renderWithStore(
+    const { getByPlaceholderText, findAllByText } = renderWithStore(
       <ComponentToBeRendered />,
       store
     );
@@ -57,14 +58,14 @@ describe('<Search /> component', () => {
 
     expect(autoCompleteInput).toHaveAttribute('value', 'verdaccio');
 
-    const suggestionsElements = await waitFor(() => getAllByText('verdaccio', { exact: true }));
+    const suggestionsElements = await waitFor(() => findAllByText('verdaccio', { exact: true }));
 
     expect(suggestionsElements).toHaveLength(1);
     expect(api.request).toHaveBeenCalledTimes(1);
   });
 
   test('onBlur: should cancel all search requests', async () => {
-    const { getByPlaceholderText, getAllByText } = renderWithStore(
+    const { getByPlaceholderText, findAllByText } = renderWithStore(
       <ComponentToBeRendered />,
       store
     );
@@ -75,7 +76,7 @@ describe('<Search /> component', () => {
     fireEvent.change(autoCompleteInput, { target: { value: 'verdaccio' } });
     expect(autoCompleteInput).toHaveAttribute('value', 'verdaccio');
 
-    const suggestionsElements = await waitFor(() => getAllByText('verdaccio', { exact: true }));
+    const suggestionsElements = await waitFor(() => findAllByText('verdaccio', { exact: true }));
     expect(suggestionsElements).toHaveLength(1);
     expect(api.request).toHaveBeenCalledTimes(1);
 
@@ -110,7 +111,7 @@ describe('<Search /> component', () => {
   });
 
   test('handlePackagesClearRequested: should clear suggestions', async () => {
-    const { getByPlaceholderText, getAllByText } = renderWithStore(
+    const { getByPlaceholderText, findAllByText } = renderWithStore(
       <ComponentToBeRendered />,
       store
     );
@@ -120,18 +121,18 @@ describe('<Search /> component', () => {
     fireEvent.change(autoCompleteInput, { target: { value: 'verdaccio' } });
     expect(autoCompleteInput).toHaveAttribute('value', 'verdaccio');
 
-    const suggestionsElements = await waitFor(() => getAllByText('verdaccio', { exact: true }));
+    const suggestionsElements = await waitFor(() => findAllByText('verdaccio', { exact: true }));
     expect(suggestionsElements).toHaveLength(1);
 
     fireEvent.change(autoCompleteInput, { target: { value: ' ' } });
     const listBoxElement = screen.queryAllByRole('listbox');
-    // // when the page redirects, the list box should be empty again
+    // when the page redirects, the list box should be empty again
     expect(listBoxElement).toHaveLength(0);
     expect(api.request).toHaveBeenCalledTimes(1);
   });
 
   test('handleClickSearch: should change the window location on click or return key', async () => {
-    const { getByPlaceholderText, getAllByText } = renderWithStore(
+    const { getByPlaceholderText, findAllByText } = renderWithStore(
       <ComponentToBeRendered />,
       store
     );
@@ -141,7 +142,7 @@ describe('<Search /> component', () => {
     fireEvent.change(autoCompleteInput, { target: { value: 'verdaccio' } });
     expect(autoCompleteInput).toHaveAttribute('value', 'verdaccio');
 
-    const suggestionsElements = await waitFor(() => getAllByText('verdaccio', { exact: true }));
+    const suggestionsElements = await waitFor(() => findAllByText('verdaccio', { exact: true }));
     // console.log('suggestionsElements', suggestionsElements);
     expect(suggestionsElements).toHaveLength(1);
     // click on the second suggestion
@@ -151,3 +152,29 @@ describe('<Search /> component', () => {
     expect(listBoxElement).toHaveLength(0);
   });
 });
+
+describe('cleanDescription', () => {
+  test('should return plain text', () => {
+    const description = 'Hello, Mars!';
+    const output = cleanDescription(description);
+    expect(output).toBe(description);
+  });
+
+  test('should remove html tags from description', () => {
+    const description = '<h1>verdaccio</h1>';
+    const output = cleanDescription(description);
+    expect(output).toBe('verdaccio');
+  });
+
+  test('should remove markdown links from description', () => {
+    const description = '[verdaccio](https://verdaccio.org)';
+    const output = cleanDescription(description);
+    expect(output).toBe('verdaccio');
+  });
+
+  test('should remove markdown links', () => {
+    const description = '[![NPM version](https://img.shields.io/npm/latest.svg)]';
+    const output = cleanDescription(description);
+    expect(output).toBe('NPM version');
+  });
+});

package/src/components/Search/Search.tsx

@@ -9,6 +9,7 @@ import { RouteComponentProps, withRouter } from 'react-router';
 import { SearchResultWeb } from '@verdaccio/types';
 
 import { Dispatch, RootState, useConfig } from '../../';
+import { Route } from '../../utils';
 import AutoComplete from './AutoComplete';
 import SearchItem from './SearchItem';
 import { StyledInputAdornment, StyledTextField } from './styles';
@@ -27,6 +28,7 @@ const Search: React.FC<RouteComponentProps> = ({ history }) => {
   const { suggestions } = useSelector((state: RootState) => state.search);
   const isLoading = useSelector((state: RootState) => state?.loading?.models.search);
   const dispatch = useDispatch<Dispatch>();
+
   /**
    * Cancel all the requests which are in pending state.
    */
@@ -60,9 +62,9 @@ const Search: React.FC<RouteComponentProps> = ({ history }) => {
           if (searchRemote) {
             // TODO: check this part
             // @ts-ignore
-            history.push(`/-/web/detail/${value.package.name}`);
+            history.push(`${Route.DETAIL}${value.package.name}`);
           } else {
-            history.push(`/-/web/detail/${value.name}`);
+            history.push(`${Route.DETAIL}${value.name}`);
           }
           break;
       }

package/src/components/Search/SearchItem.tsx

@@ -9,6 +9,8 @@ import Stack from '@mui/material/Stack';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { cleanDescription } from './utils';
+
 type SearchItemProps = {
   name: string;
   version?: string;
@@ -28,15 +30,23 @@ export const Description = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   display: 'none',
   color: theme?.palette?.greyLight2,
   lineHeight: '1.5rem',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  alignItems: 'center',
+  overflow: 'hidden',
+  paddingLeft: theme.spacing(),
+  fontSize: theme?.fontSize.ssm,
+  [`@media (min-width: ${theme?.breakPoints.medium}px)`]: {
+    display: 'block',
+    width: '300px',
+  },
   [`@media (min-width: ${theme?.breakPoints.large}px)`]: {
     display: 'block',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    width: '200px',
-    alignItems: 'center',
-    overflow: 'hidden',
-    paddingLeft: theme.spacing(),
-    fontSize: theme?.fontSize.ssm,
+    width: '500px',
+  },
+  [`@media (min-width: 1440px)`]: {
+    display: 'block',
+    width: '600px',
   },
 }));
 
@@ -68,11 +78,12 @@ const SearchItem: React.FC<SearchItemProps> = ({
     // no action assigned by default
   };
   return (
+    // eslint-disable-next-line verdaccio/jsx-no-style
     <li {...props} style={{ flexDirection: 'column' }}>
       <Wrapper>
         <NameGroup>
           <Name>{name}</Name>
-          {description && <Description>{description}</Description>}
+          {description && <Description>{cleanDescription(description)}</Description>}
         </NameGroup>
         {version && <Version>{version}</Version>}
       </Wrapper>

package/src/components/Search/utils.ts

@@ -0,0 +1,17 @@
+function removeHtmlTags(input: string): string {
+  let previous;
+  do {
+    previous = input;
+    input = input.replace(/<[^>]*>?/gm, '');
+  } while (input !== previous);
+  return input;
+}
+
+export function cleanDescription(description: string): string {
+  let output = description;
+  // remove html tags from description (e.g. <h1...>)
+  output = removeHtmlTags(output);
+  // remove markdown links from description (e.g. [link](url))
+  output = output.replace(/\(.*?\)/gm, '').replace(/(\[!?|\])/gm, '');
+  return output;
+}

package/src/components/SettingsMenu/SettingsMenu.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { fireEvent, render, screen } from '../../test/test-react-testing-library';
+import SettingsMenu from './SettingsMenu';
+
+describe('<SettingsMenu />', () => {
+  test('should handle menu open and close', async () => {
+    render(<SettingsMenu packageName="foo" />);
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+    await screen.findByRole('menu');
+    // TODO onClose
+  });
+
+  test('should handle latest select', () => {
+    const { getByRole, getByText } = render(<SettingsMenu packageName="foo" />);
+    const button = getByRole('button');
+    fireEvent.click(button);
+    const menuItem = getByText('sidebar.installation.latest');
+    fireEvent.click(menuItem);
+    expect(getByText('sidebar.installation.latest')).toBeInTheDocument();
+  });
+
+  test('should handle global select', () => {
+    const { getByRole, getByText } = render(<SettingsMenu packageName="foo" />);
+    const button = getByRole('button');
+    fireEvent.click(button);
+    const menuItem = getByText('sidebar.installation.global');
+    fireEvent.click(menuItem);
+    expect(getByText('sidebar.installation.global')).toBeInTheDocument();
+  });
+
+  test('should handle yarn modern select', () => {
+    const { getByRole, getByText } = render(<SettingsMenu packageName="foo" />);
+    const button = getByRole('button');
+    fireEvent.click(button);
+    const menuItem = getByText('sidebar.installation.yarnModern');
+    fireEvent.click(menuItem);
+    expect(getByText('sidebar.installation.yarnModern')).toBeInTheDocument();
+  });
+});

package/src/components/SettingsMenu/SettingsMenu.tsx

@@ -7,24 +7,42 @@ import MenuItem from '@mui/material/MenuItem';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useConfig } from '../../providers';
 import { useSettings } from '../../providers/PersistenceSettingProvider';
 
 interface Props {
   packageName: string;
 }
 
-const InstallListItem: React.FC<Props> = ({ packageName }) => {
+const SettingsMenu: React.FC<Props> = ({ packageName }) => {
   const { t } = useTranslation();
   const { localSettings, updateSettings } = useSettings();
+  const { configOptions } = useConfig();
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
   const handleOpenMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
   };
 
+  const handleLatestSelect = () => {
+    updateSettings({
+      ...localSettings,
+      [packageName]: {
+        global: localSettings[packageName]?.global,
+        latest: !localSettings[packageName]?.latest,
+      },
+    });
+    setAnchorEl(null);
+  };
+
   const handleGlobalSelect = () => {
-    const statusGlobal = !localSettings[packageName]?.global;
-    updateSettings({ ...localSettings, [packageName]: { global: statusGlobal } });
+    updateSettings({
+      ...localSettings,
+      [packageName]: {
+        global: !localSettings[packageName]?.global,
+        latest: localSettings[packageName]?.latest,
+      },
+    });
     setAnchorEl(null);
   };
 
@@ -38,6 +56,7 @@ const InstallListItem: React.FC<Props> = ({ packageName }) => {
     setAnchorEl(null);
   };
 
+  const statusLatest = localSettings[packageName]?.latest;
   const statusGlobal = localSettings[packageName]?.global;
   return (
     <>
@@ -56,31 +75,50 @@ const InstallListItem: React.FC<Props> = ({ packageName }) => {
           'aria-labelledby': 'basic-button',
         }}
         anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
         id="basic-menu"
         onClose={handleClose}
         open={open}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
       >
-        <MenuItem onClick={handleGlobalSelect}>
+        <MenuItem onClick={handleLatestSelect}>
           {' '}
-          {statusGlobal === true ? (
+          {statusLatest === true ? (
             <ListItemIcon>
               <Check />
             </ListItemIcon>
           ) : null}
-          {t('sidebar.installation.global')}
+          {t('sidebar.installation.latest')}
         </MenuItem>
-        <MenuItem onClick={handleGlobalYarnModern}>
+        <MenuItem onClick={handleGlobalSelect}>
           {' '}
-          {localSettings?.yarnModern ? (
+          {statusGlobal === true ? (
             <ListItemIcon>
               <Check />
             </ListItemIcon>
           ) : null}
-          {t('sidebar.installation.yarnModern')}
+          {t('sidebar.installation.global')}
         </MenuItem>
+        {configOptions?.pkgManagers?.includes('yarn') && (
+          <MenuItem onClick={handleGlobalYarnModern}>
+            {' '}
+            {localSettings?.yarnModern ? (
+              <ListItemIcon>
+                <Check />
+              </ListItemIcon>
+            ) : null}
+            {t('sidebar.installation.yarnModern')}
+          </MenuItem>
+        )}
       </Menu>
     </>
   );
 };
 
-export default InstallListItem;
+export default SettingsMenu;

package/src/components/SideBarTitle/SideBarTitle.tsx

@@ -20,11 +20,23 @@ interface Props {
   time: string;
 }
 
+const Icon = styled.div<{ theme?: Theme }>(({ theme }) => ({
+  marginLeft: theme?.spacing(1),
+}));
+
 const ModuleJS: React.FC<{ module: ModuleType | void }> = ({ module }) => {
   if (module === 'commonjs') {
-    return <CommonJS />;
+    return (
+      <Icon>
+        <CommonJS />
+      </Icon>
+    );
   } else if (module === 'module') {
-    return <ES6Modules />;
+    return (
+      <Icon>
+        <ES6Modules />
+      </Icon>
+    );
   } else {
     return null;
   }
@@ -46,7 +58,11 @@ const DetailSidebarTitle: React.FC<Props> = ({
         <TitleWrapper>
           <>
             {packageName}
-            {hasTypes && <TypeScript />}
+            {hasTypes && (
+              <Icon>
+                <TypeScript />
+              </Icon>
+            )}
             <ModuleJS module={moduleType} />
           </>
         </TitleWrapper>

package/src/components/UpLinks/UpLinks.test.tsx

@@ -44,4 +44,11 @@ describe('<UpLinks /> component', () => {
 
     expect(wrapper).toMatchSnapshot();
   });
+
+  test('should not render if input is missing', () => {
+    const wrapper = render(<UpLinks packageMeta={undefined} />);
+    // expect nothing to be rendered
+    expect(wrapper.queryByTestId('no-uplinks-npm')).toBeNull();
+    expect(wrapper.queryByTestId('uplinks')).toBeNull();
+  });
 });

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', () => {