fix: change bundleDependencies to array (#4680)

* fix: change bundleDependencies to array

* add changeset

* fixed testid

.changeset/twenty-queens-protect.md

@@ -0,0 +1,7 @@
+---
+'@verdaccio/ui-theme': patch
+'@verdaccio/ui-components': patch
+'@verdaccio/types': patch
+---
+
+fix: change bundleDependencies to array

packages/core/types/src/manifest.ts

@@ -123,7 +123,7 @@ export interface Version {
   devDependencies?: Dependencies;
   optionalDependencies?: Dependencies;
   peerDependenciesMeta?: PeerDependenciesMeta;
-  bundleDependencies?: Dependencies;
+  bundleDependencies?: string[];
   acceptDependencies?: Dependencies;
   keywords?: string | string[];
   nodeVersion?: string;

packages/plugins/ui-theme/src/i18n/crowdin/ui.json

@@ -71,7 +71,8 @@
   },
   "dependencies": {
     "has-no-dependencies": "{{package}} has no dependencies.",
-    "dependency-block": "{{package}}@{{version}}"
+    "dependency-block": "{{package}}: {{version}}",
+    "dependency-block-bundle": "{{package}}"
   },
   "form": {
     "username": "Username",

packages/ui-components/src/components/Dependencies/Dependencies.stories.tsx

@@ -71,17 +71,17 @@ const packageMeta = {
       shelljs: '^0.7.8',
       'update-notifier': '^2.1.0',
     },
-    bundleDependencies: {
-      'styled-components': '5.0.0',
-      'cross-spawn': '^5.0.1',
-      jscodeshift: '^0.3.30',
-      json5: '^0.5.1',
-      'latest-version': '^3.1.0',
-      'merge-dirs': '^0.2.1',
-      opencollective: '^1.0.3',
-      shelljs: '^0.7.8',
-      'update-notifier': '^2.1.0',
-    },
+    bundleDependencies: [
+      'styled-components',
+      'cross-spawn',
+      'jscodeshift',
+      'json5',
+      'latest-version',
+      'merge-dirs',
+      'opencollective',
+      'shelljs',
+      'update-notifier',
+    ],
   },
   _uplinks: {},
 };

packages/ui-components/src/components/Dependencies/Dependencies.tsx

@@ -1,7 +1,8 @@
 import styled from '@emotion/styled';
+import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
-import React from 'react';
+import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Theme } from '../../Theme';
@@ -31,8 +32,8 @@ const Dependencies: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
     dependencies,
     devDependencies,
     peerDependencies,
-    bundleDependencies,
     optionalDependencies,
+    bundleDependencies,
   };
   const hasDependencies =
     hasKeys(dependencies) ||
@@ -44,20 +45,22 @@ const Dependencies: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
     return (
       <CardWrap>
         <CardContent>
+          <Box data-testid="dependencies-box" sx={{ m: 2 }}>
             {Object.entries(dependencyMap).map(([dependencyType, dependencies]) => {
               if (!dependencies || Object.keys(dependencies).length === 0) {
                 return null;
               }
               return (
-              <>
+                <Fragment key={dependencyType}>
                   <DependencyBlock
                     dependencies={dependencies}
                     key={dependencyType}
                     title={dependencyType}
                   />
-              </>
+                </Fragment>
               );
             })}
+          </Box>
         </CardContent>
       </CardWrap>
     );

packages/ui-components/src/components/Dependencies/DependencyBlock.test.tsx

@@ -1,22 +1,33 @@
-import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { MemoryRouter, Route } from 'react-router';
 
-import { render, screen } from '../../test/test-react-testing-library';
+import { fireEvent, render, screen } from '../../test/test-react-testing-library';
 import { DependencyBlock } from './DependencyBlock';
 
+const mockHistory = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  useHistory: () => ({
+    push: mockHistory,
+  }),
+}));
+
 describe('<DependencyBlock /> component', () => {
   test('renders dependency block', () => {
     render(<DependencyBlock dependencies={{ jquery: '1.0.0' }} title="foo" />);
 
     expect(screen.getByText('foo (1)')).toBeInTheDocument();
     expect(screen.getByText('dependencies.dependency-block')).toBeInTheDocument();
-
-    userEvent.click(screen.getByText('dependencies.dependency-block'));
   });
 
-  test.todo('test the click event');
-  test.skip('handle change route handler', () => {
+  test('renders bundleDependencies block', () => {
+    render(<DependencyBlock dependencies={{ semver: '7.6.0' }} title="bundleDependencies" />);
+
+    expect(screen.getByText('bundleDependencies (1)')).toBeInTheDocument();
+    expect(screen.getByText('dependencies.dependency-block-bundle')).toBeInTheDocument();
+  });
+
+  test('handle change of route', async () => {
     render(
       <MemoryRouter
         initialEntries={[`/-/web/detail/some-dep`, `/-/web/detail/jquery`]}
@@ -28,6 +39,8 @@ describe('<DependencyBlock /> component', () => {
       </MemoryRouter>
     );
 
-    userEvent.click(screen.getByTestId('jquery'));
+    fireEvent.click(screen.getByTestId('jquery'));
+
+    await expect(mockHistory).toHaveBeenCalled();
   });
 });

packages/ui-components/src/components/Dependencies/DependencyBlock.tsx

@@ -44,25 +44,38 @@ export const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, depende
     history.push(`/-/web/detail/${name}`);
   }
 
+  function labelText(title: string, name: string, version: string): string {
+    if (title === 'bundleDependencies') {
+      return t('dependencies.dependency-block-bundle', { package: name });
+    } else {
+      return t('dependencies.dependency-block', { package: name, version });
+    }
+  }
+
   return (
     <Box data-testid={title} sx={{ margin: theme.spacing(2) }}>
       <StyledText sx={{ marginBottom: theme.spacing(1) }} variant="subtitle1">
         {`${title} (${deps.length})`}
       </StyledText>
       <Tags>
-        {deps.map(([name, version]) => (
+        {deps.map(([name, version]: [string, string]) => {
+          // Bundle dependencies are stored as array, for example [ 0: "semver" ]
+          // so the package name arrives here in the version field
+          const packageName = title == 'bundleDependencies' ? version : name;
+          return (
             <Tag
               className={'dep-tag'}
               clickable={true}
-            data-testid={name}
-            key={name}
-            label={t('dependencies.dependency-block', { package: name, version })}
+              data-testid={packageName}
+              key={packageName}
+              label={labelText(title, packageName, version)}
               // eslint-disable-next-line
               onClick={() => {
-              handleClick(name);
+                handleClick(packageName);
               }}
             />
-        ))}
+          );
+        })}
       </Tags>
     </Box>
   );