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

package/src/components/RawViewer/RawViewer.tsx

@@ -3,6 +3,7 @@ import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import IconButton from '@mui/material/IconButton';
+import { useTheme } from '@mui/styles';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import ReactJson from 'react-json-view';
@@ -22,6 +23,7 @@ const ViewerTitle = (props: ViewerTitleProps) => {
       {onClose ? (
         <IconButton
           aria-label="close"
+          data-testid="close-raw-viewer"
           onClick={onClose}
           sx={{
             position: 'absolute',
@@ -46,18 +48,20 @@ type Props = {
 /* eslint-disable verdaccio/jsx-spread */
 const RawViewer: React.FC<Props> = ({ isOpen = false, onClose, packageMeta }) => {
   const { t } = useTranslation();
+  const theme = useTheme();
   return (
     <Dialog data-testid={'rawViewer--dialog'} fullScreen={true} open={isOpen}>
       <ViewerTitle id="viewer-title" onClose={onClose}>
-        {t('action-bar-action.raw')}
+        {t('action-bar-action.raw-title', { package: packageMeta.latest.name })}
       </ViewerTitle>
       <DialogContent>
         <ReactJson
-          collapseStringsAfterLength={40}
-          collapsed={true}
-          enableClipboard={false}
+          collapseStringsAfterLength={200}
+          collapsed={2}
+          enableClipboard={true}
           groupArraysAfterLength={10}
           src={packageMeta as any}
+          theme={theme?.palette.mode == 'light' ? 'bright:inverted' : 'bright'}
         />
       </DialogContent>
     </Dialog>

package/src/components/Readme/Readme.spec.tsx

@@ -15,4 +15,21 @@ describe('<Readme /> component', () => {
     const wrapper = render(<Readme description="<h1>This is a test string</h1>" />);
     expect(wrapper.getByText('This is a test string')).toBeInTheDocument();
   });
+
+  test('should sanitize html', () => {
+    const markdown = `<script>alert('test')</script>`;
+    const wrapper = render(<Readme description={markdown} />);
+    expect(wrapper.queryAllByText('test')).toHaveLength(0);
+  });
+
+  test('should highlight code', () => {
+    const markdown = `\`\`\`js\nconst test = 1 + 2;\n\`\`\``;
+    const wrapper = render(<Readme description={markdown} />);
+    expect(wrapper.getByText('const')).toBeInTheDocument();
+    expect(wrapper.getByText('const')).toHaveClass('hljs-keyword');
+    expect(wrapper.getByText('1')).toBeInTheDocument();
+    expect(wrapper.getByText('1')).toHaveClass('hljs-number');
+    expect(wrapper.getByText('2')).toBeInTheDocument();
+    expect(wrapper.getByText('2')).toHaveClass('hljs-number');
+  });
 });

package/src/components/Readme/Readme.tsx

@@ -2,8 +2,6 @@ import styled from '@emotion/styled';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
-import { useTheme } from '@mui/styles';
-import 'highlight.js/styles/default.css';
 import React from 'react';
 
 import { useCustomTheme } from '../../';
@@ -14,12 +12,19 @@ import { parseReadme } from './utils';
 const Readme: React.FC<Props> = ({ description }) => {
   // @ts-ignore
   const { isDarkMode } = useCustomTheme();
-  const theme = useTheme();
+
+  // Stackoverflow theme fits well to Verdaccio dark colors
+  // https://highlightjs.org/examples
+  if (isDarkMode) {
+    require('highlight.js/styles/github-dark.css');
+  } else {
+    require('highlight.js/styles/github.css');
+  }
 
   return (
-    <Card>
+    <Card sx={{ mb: 2 }}>
       <CardContent>
-        <Box data-testid="readme" sx={{ margin: theme.spacing(1) }}>
+        <Box data-testid="readme" sx={{ m: 2 }}>
           <Wrapper
             className={`markdown-body ${isDarkMode ? 'markdown-dark' : 'markdown-light'}`}
             dangerouslySetInnerHTML={{ __html: parseReadme(description) as string }}

package/src/components/Readme/utils.ts

@@ -21,9 +21,6 @@ marked.setOptions({
 });
 
 export function parseReadme(readme: string): string | void {
-  if (typeof readme === 'string') {
-    const html = marked.parse(readme);
-    return DOMPurify.sanitize(html);
-  }
-  return '';
+  const html = marked.parse(readme);
+  return DOMPurify.sanitize(html);
 }

package/src/components/RegistryInfoDialog/styles.ts

@@ -4,10 +4,11 @@ import DialogTitle from '@mui/material/DialogTitle';
 
 import { Theme } from '../../';
 
-export const Title = styled(DialogTitle)<{ theme?: Theme }>((props) => ({
-  backgroundColor: props.theme?.palette.primary.main,
-  color: props.theme?.palette.white,
-  fontSize: props.theme?.fontSize.lg,
+export const Title = styled(DialogTitle)<{ theme?: Theme }>(({ theme }) => ({
+  backgroundColor:
+    theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+  color: theme?.palette.white,
+  fontSize: theme?.fontSize.lg,
 }));
 
 export const Content = styled(DialogContent)<{ theme?: Theme }>(({ theme }) => ({

package/src/components/Repository/Repository.tsx

@@ -4,6 +4,7 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/styles';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -11,20 +12,13 @@ import { Theme } from '../../Theme';
 import { url as urlUtils } from '../../utils';
 import CopyClipboard from '../CopyClipboard';
 import { Git } from '../Icons';
-import { Link } from '../Link';
+import LinkExternal from '../LinkExternal';
 
 const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
   fontWeight: props.theme?.fontWeight.bold,
   textTransform: 'capitalize',
 }));
 
-const GithubLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.white,
-  ':hover': {
-    color: theme?.palette.dodgerBlue,
-  },
-}));
-
 const RepositoryListItem = styled(ListItem)({
   padding: 0,
   ':hover': {
@@ -33,18 +27,19 @@ const RepositoryListItem = styled(ListItem)({
 });
 
 const RepositoryListItemText = styled(ListItemText)({
-  padding: '0 10px',
+  padding: '0 0 0 10px',
   margin: 0,
 });
 
 const RepositoryAvatar = styled(Avatar)({
-  borderRadius: '0px',
-  padding: '0',
+  padding: 0,
+  marginLeft: 0,
   backgroundColor: 'transparent',
 });
 
 const Repository: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
   const { t } = useTranslation();
+  const theme = useTheme();
   const url = packageMeta?.latest?.repository?.url;
   if (!url || !urlUtils.isURL(url)) {
     return null;
@@ -66,15 +61,15 @@ const Repository: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
       subheader={<StyledText variant="subtitle1">{t('sidebar.repository.title')}</StyledText>}
     >
       <RepositoryListItem>
-        <RepositoryAvatar sx={{ backgroundColor: '#fff' }}>
+        <RepositoryAvatar sx={{ bgcolor: theme.palette.white }}>
           <Git />
         </RepositoryAvatar>
         <RepositoryListItemText
           primary={
             <CopyClipboard dataTestId="repositoryID" text={repositoryURL} title={repositoryURL}>
-              <GithubLink external={true} to={repositoryURL} variant="outline">
+              <LinkExternal to={repositoryURL} variant="outline">
                 {repositoryURL}
-              </GithubLink>
+              </LinkExternal>
             </CopyClipboard>
           }
         />

package/src/components/Search/AutoComplete/styles.ts

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled('div')({
+  width: '100%',
+  position: 'relative',
+  zIndex: 1,
+});

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();
+  });
 });