feat: allow ui hide package managers on sidebar (#2226)

* feat: allow ui hide package managers on sidebar

* add test

* add changeset

* chore: remove snapshot

* chore: update config

.changeset/wild-jokes-beam.md

@@ -0,0 +1,32 @@
+---
+'@verdaccio/types': minor
+'@verdaccio/ui-theme': minor
+'@verdaccio/web': minor
+---
+
+web: allow ui hide package managers on sidebar
+
+If there is a package manager of preference over others, you can define the package managers to be displayed on the detail page and sidebar, just define in the `config.yaml` and web section the list of package managers to be displayed.
+
+```
+web:
+  title: Verdaccio
+  sort_packages: asc
+  primary_color: #cccccc
+  pkgManagers:
+    - pnpm
+    - yarn
+    # - npm
+```
+
+To disable all package managers, just define empty:
+
+```
+web:
+  title: Verdaccio
+  sort_packages: asc
+  primary_color: #cccccc
+  pkgManagers:
+```
+
+and the section would be hidden.

packages/core/types/index.d.ts

@@ -15,6 +15,50 @@ declare module '@verdaccio/types' {
     url?: string;
   }
 
+  type PackageManagers = 'pnpm' | 'yarn' | 'npm';
+
+  // FUTURE: WebConf and TemplateUIOptions should be merged .
+  type CommonWebConf = {
+    title?: string;
+    logo?: string;
+    favicon?: string;
+    gravatar?: boolean;
+    sort_packages?: string;
+    darkMode?: boolean;
+    url_prefix?: string;
+    language?: string;
+    scope?: string;
+    pkgManagers?: PackageManagers[];
+  };
+
+  /**
+   * Options are passed to the index.html
+   */
+  export type TemplateUIOptions = {
+    uri?: string;
+    darkMode?: boolean;
+    protocol?: string;
+    host?: string;
+    base: string;
+    primaryColor?: string;
+    version?: string;
+    logoURI?: string;
+  } & CommonWebConf;
+
+  /**
+   * Options on config.yaml for web
+   */
+  type WebConf = {
+    // FIXME: rename to primaryColor and move it to CommonWebConf
+    primary_color?: string;
+    enable?: boolean;
+    scriptsHead?: string[];
+    scriptsBodyAfter?: string[];
+    metaScripts?: string[];
+    bodyBefore?: string[];
+    bodyAfter?: string[];
+  } & CommonWebConf;
+
   interface Dist {
     integrity?: string;
     shasum: string;
@@ -276,23 +320,6 @@ declare module '@verdaccio/types' {
   interface ListenAddress {
     [key: string]: string;
   }
-
-  interface WebConf {
-    enable?: boolean;
-    title?: string;
-    logo?: string;
-    favicon?: string;
-    gravatar?: boolean;
-    sort_packages?: string;
-    scriptsHead?: string[];
-    scriptsBodyAfter?: string[];
-    metaScripts?: string[];
-    bodyBefore?: string[];
-    bodyAfter?: string[];
-    darkMode?: boolean;
-    primary_color?: string;
-  }
-
   interface HttpsConfKeyCert {
     key: string;
     cert: string;

packages/plugins/ui-theme/jest/setup.ts

@@ -15,6 +15,7 @@ global.__VERDACCIO_BASENAME_UI_OPTIONS = {
   darkMode: false,
   language: 'en-US',
   uri: 'http://localhost:4873',
+  pkgManagers: ['pnpm', 'yarn', 'npm'],
   title: 'Verdaccio Dev UI',
   scope: '',
   version: 'v1.0.0',

packages/plugins/ui-theme/src/components/ActionBar/ActionBar.tsx

@@ -34,7 +34,7 @@ const ActionBar: React.FC = () => {
   }
 
   return (
-    <Box alignItems="center" display="flex" marginBottom="8px">
+    <Box alignItems="center" display="flex" marginBottom="14px">
       {actions.map((action) => (
         <ActionBarAction key={action.link} {...action} />
       ))}

packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Install/Install.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { render } from 'verdaccio-ui/utils/test-react-testing-library';
+import { render, screen } from 'verdaccio-ui/utils/test-react-testing-library';
 
 import { DetailContext } from '../../context';
 import { DetailContextProps } from '../../version-config';
@@ -22,32 +22,40 @@ const ComponentToBeRendered: React.FC = () => (
 /* eslint-disable react/jsx-no-bind*/
 describe('<Install />', () => {
   test('renders correctly', () => {
-    const { container } = render(<ComponentToBeRendered />);
-    expect(container.firstChild).toMatchSnapshot();
+    render(<ComponentToBeRendered />);
+    expect(screen.getByText('pnpm install foo')).toBeInTheDocument();
+    expect(screen.getByText('yarn add foo')).toBeInTheDocument();
+    expect(screen.getByText('npm install foo')).toBeInTheDocument();
   });
 
   test('should have 3 children', () => {
+    window.__VERDACCIO_BASENAME_UI_OPTIONS.pkgManagers = ['yarn', 'pnpm', 'npm'];
     const { getByTestId } = render(<ComponentToBeRendered />);
     const installListItems = getByTestId('installList');
     // installitems + subHeader = 4
     expect(installListItems.children.length).toBe(4);
   });
 
   test('should have the element NPM', () => {
+    window.__VERDACCIO_BASENAME_UI_OPTIONS.pkgManagers = ['npm'];
     const { getByTestId, queryByText } = render(<ComponentToBeRendered />);
     expect(getByTestId('installListItem-npm')).toBeTruthy();
     expect(queryByText(`npm install ${detailContextValue.packageName}`)).toBeTruthy();
     expect(queryByText('Install using npm')).toBeTruthy();
+    expect(screen.queryByText('pnpm install foo')).not.toBeInTheDocument();
+    expect(screen.queryByText('yarn add foo')).not.toBeInTheDocument();
   });
 
   test('should have the element YARN', () => {
+    window.__VERDACCIO_BASENAME_UI_OPTIONS.pkgManagers = ['yarn'];
     const { getByTestId, queryByText } = render(<ComponentToBeRendered />);
     expect(getByTestId('installListItem-yarn')).toBeTruthy();
     expect(queryByText(`yarn add ${detailContextValue.packageName}`)).toBeTruthy();
     expect(queryByText('Install using yarn')).toBeTruthy();
   });
 
   test('should have the element PNPM', () => {
+    window.__VERDACCIO_BASENAME_UI_OPTIONS.pkgManagers = ['pnpm'];
     const { getByTestId, queryByText } = render(<ComponentToBeRendered />);
     expect(getByTestId('installListItem-pnpm')).toBeTruthy();
     expect(queryByText(`pnpm install ${detailContextValue.packageName}`)).toBeTruthy();

packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Install/Install.tsx

@@ -5,18 +5,20 @@ import { useTranslation } from 'react-i18next';
 import List from 'verdaccio-ui/components/List';
 import Text from 'verdaccio-ui/components/Text';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
+import { useConfig } from 'verdaccio-ui/providers/config';
 
 import { DetailContext } from '../..';
 
 import InstallListItem, { DependencyManager } from './InstallListItem';
 
 const StyledText = styled(Text)<{ theme?: Theme }>((props) => ({
-  fontWeight: props.theme && props.theme.fontWeight.bold,
+  fontWeight: props.theme?.fontWeight.bold,
   textTransform: 'capitalize',
 }));
 
 const Install: React.FC = () => {
   const { t } = useTranslation();
+  const { configOptions } = useConfig();
   const detailContext = useContext(DetailContext);
 
   const { packageMeta, packageName } = detailContext;
@@ -25,15 +27,26 @@ const Install: React.FC = () => {
     return null;
   }
 
-  return (
+  const hasNpm = configOptions?.pkgManagers?.includes('npm');
+  const hasYarn = configOptions?.pkgManagers?.includes('yarn');
+  const hasPnpm = configOptions?.pkgManagers?.includes('pnpm') ?? true;
+  const hasPkgManagers = hasNpm | hasPnpm | hasYarn;
+
+  return hasPkgManagers ? (
     <List
       data-testid={'installList'}
       subheader={<StyledText variant={'subtitle1'}>{t('sidebar.installation.title')}</StyledText>}>
-      <InstallListItem dependencyManager={DependencyManager.NPM} packageName={packageName} />
-      <InstallListItem dependencyManager={DependencyManager.YARN} packageName={packageName} />
-      <InstallListItem dependencyManager={DependencyManager.PNPM} packageName={packageName} />
+      {hasNpm && (
+        <InstallListItem dependencyManager={DependencyManager.NPM} packageName={packageName} />
+      )}
+      {hasYarn && (
+        <InstallListItem dependencyManager={DependencyManager.YARN} packageName={packageName} />
+      )}
+      {hasPnpm && (
+        <InstallListItem dependencyManager={DependencyManager.PNPM} packageName={packageName} />
+      )}
     </List>
-  );
+  ) : null;
 };
 
 export default Install;