diff --git a/.changeset/twenty-queens-protect.md b/.changeset/twenty-queens-protect.md
new file mode 100644
index 000000000..e72189bdf
--- /dev/null
+++ b/.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
diff --git a/packages/core/types/src/manifest.ts b/packages/core/types/src/manifest.ts
index 26ed5e310..03721f464 100644
--- a/packages/core/types/src/manifest.ts
+++ b/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;
diff --git a/packages/plugins/ui-theme/src/i18n/crowdin/ui.json b/packages/plugins/ui-theme/src/i18n/crowdin/ui.json
index e6a74798f..da6f63f06 100644
--- a/packages/plugins/ui-theme/src/i18n/crowdin/ui.json
+++ b/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",
diff --git a/packages/ui-components/src/components/Dependencies/Dependencies.stories.tsx b/packages/ui-components/src/components/Dependencies/Dependencies.stories.tsx
index 3d0f7dd4e..90ea58de2 100644
--- a/packages/ui-components/src/components/Dependencies/Dependencies.stories.tsx
+++ b/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: {},
};
diff --git a/packages/ui-components/src/components/Dependencies/Dependencies.tsx b/packages/ui-components/src/components/Dependencies/Dependencies.tsx
index cf02301aa..49382ab36 100644
--- a/packages/ui-components/src/components/Dependencies/Dependencies.tsx
+++ b/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 (
- {Object.entries(dependencyMap).map(([dependencyType, dependencies]) => {
- if (!dependencies || Object.keys(dependencies).length === 0) {
- return null;
- }
- return (
- <>
-
- >
- );
- })}
+
+ {Object.entries(dependencyMap).map(([dependencyType, dependencies]) => {
+ if (!dependencies || Object.keys(dependencies).length === 0) {
+ return null;
+ }
+ return (
+
+
+
+ );
+ })}
+
);
diff --git a/packages/ui-components/src/components/Dependencies/DependencyBlock.test.tsx b/packages/ui-components/src/components/Dependencies/DependencyBlock.test.tsx
index 93059af44..38e37f9a4 100644
--- a/packages/ui-components/src/components/Dependencies/DependencyBlock.test.tsx
+++ b/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(' component', () => {
test('renders dependency block', () => {
render();
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();
+
+ expect(screen.getByText('bundleDependencies (1)')).toBeInTheDocument();
+ expect(screen.getByText('dependencies.dependency-block-bundle')).toBeInTheDocument();
+ });
+
+ test('handle change of route', async () => {
render(
component', () => {
);
- userEvent.click(screen.getByTestId('jquery'));
+ fireEvent.click(screen.getByTestId('jquery'));
+
+ await expect(mockHistory).toHaveBeenCalled();
});
});
diff --git a/packages/ui-components/src/components/Dependencies/DependencyBlock.tsx b/packages/ui-components/src/components/Dependencies/DependencyBlock.tsx
index e6d18d356..9ca871ecf 100644
--- a/packages/ui-components/src/components/Dependencies/DependencyBlock.tsx
+++ b/packages/ui-components/src/components/Dependencies/DependencyBlock.tsx
@@ -44,25 +44,38 @@ export const DependencyBlock: React.FC = ({ 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 (
{`${title} (${deps.length})`}
- {deps.map(([name, version]) => (
- {
- handleClick(name);
- }}
- />
- ))}
+ {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 (
+ {
+ handleClick(packageName);
+ }}
+ />
+ );
+ })}
);