Skip to content

Commit 34eefde

Browse files
cynthia-sgcynthia-sg
authored
Upgrade frontend dependencies (#1825)
* Migrate from CRA to Vite Signed-off-by: Cintia Sánchez García <[email protected]> * Upgrade dependencies Signed-off-by: Cintia Sánchez García <[email protected]> * Update snapshots Signed-off-by: Cintia Sánchez García <[email protected]> * Use vitest library for unit tests Signed-off-by: Cintia Sánchez García <[email protected]> * Upgrade some deps Signed-off-by: Cintia Sánchez García <[email protected]> * Replace moment library by date-fns Signed-off-by: Cintia Sánchez García <[email protected]> * Fix linter Signed-off-by: Cintia Sánchez García <[email protected]> * Proxy data folder for development Signed-off-by: Cintia Sánchez García <[email protected]> * Fix warning tooltip arrow Signed-off-by: Cintia Sánchez García <[email protected]> * Fix ci frontend tests Signed-off-by: Cintia Sánchez García <[email protected]> * Add yarn analyze Signed-off-by: Cintia Sánchez García <[email protected]> * Suspense stats Signed-off-by: Cintia Sánchez García <[email protected]> * Preload apexcharts Signed-off-by: Cintia Sánchez García <[email protected]> * Fix chunks and some tests Signed-off-by: Cintia Sánchez García <[email protected]> * Fix manifest Signed-off-by: Cintia Sánchez García <[email protected]> * Add CodeBlock Signed-off-by: Cintia Sánchez García <[email protected]> * Update some deps Signed-off-by: Cintia Sánchez García <[email protected]> * Fix manifest path Signed-off-by: Cintia Sánchez García <[email protected]> * Adding Date Range filters Signed-off-by: Cintia Sánchez García <[email protected]> * Update some tests Signed-off-by: Cintia Sánchez García <[email protected]> * Fix logos path for tests Signed-off-by: Cintia Sánchez García <[email protected]> * Fix linter Signed-off-by: Cintia Sánchez García <[email protected]> * Fix logos url Signed-off-by: Cintia Sánchez García <[email protected]> * Fix logo url Signed-off-by: Cintia Sánchez García <[email protected]> * Fix linter Signed-off-by: Cintia Sánchez García <[email protected]> * Improve tests Signed-off-by: Cintia Sánchez García <[email protected]> --------- Signed-off-by: Cintia Sánchez García <[email protected]>
1 parent c44c8b2 commit 34eefde

File tree

104 files changed

+7816
-18726
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

104 files changed

+7816
-18726
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,4 +85,4 @@ jobs:
8585
run: yarn lint
8686
- name: Run frontend tests
8787
working-directory: ./web
88-
run: yarn test --watchAll=false --passWithNoTests --verbose --maxWorkers=4
88+
run: yarn test --reporter verbose --maxWorkers 4

‎web/eslint.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@ const config = [
3434
},
3535
globals: {
3636
...globals.browser,
37+
...globals.node,
38+
...globals.jest,
39+
...globals.vitest,
3740
},
3841
},
3942
},

‎web/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en" data-theme="light">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="shortcut icon" type="image/png" href="/static/media/logo.png" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#2a0552" />
8+
<meta name="description" content="{{ description }}" />
9+
<link rel="apple-touch-icon" href="/static/media/logo192.png" />
10+
<link rel="apple-touch-icon"
11+
sizes="512x512"
12+
href="/static/media/logo512.png" />
13+
<link rel="manifest" href="/static/manifest.json" />
14+
<title>{{ title }}</title>
15+
<meta property="og:type" content="website" />
16+
<meta property="og:title" content="{{ title }}" />
17+
<meta property="og:description" content="{{ description }}" />
18+
<meta property="og:image" content="{{ image }}" />
19+
<meta name="twitter:card" content="summary_large_image" />
20+
<meta name="twitter:title" content="{{ title }}" />
21+
<meta name="twitter:description" content="{{ description }}" />
22+
<meta name="twitter:image" content="{{ image }}" />
23+
<script type="module" src="/src/index.tsx"></script>
24+
</head>
25+
<body>
26+
<noscript>You need to enable JavaScript to run this app.</noscript>
27+
<div id="clo-wrapper"></div>
28+
</body>
29+
</html>

‎web/package.json‎

Lines changed: 36 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -6,77 +6,73 @@
66
"dependencies": {
77
"apexcharts": "3.49.0",
88
"classnames": "^2.5.1",
9-
"clo-ui": "https://github.com/cncf/clo-ui.git#v0.5.2",
9+
"clo-ui": "https://github.com/cncf/clo-ui.git#v0.5.5",
10+
"date-fns": "^4.1.0",
1011
"lodash": "^4.17.21",
11-
"moment": "^2.30.1",
1212
"nth-check": "^2.0.1",
13-
"react": "^18.3.1",
13+
"react": "^19.2.0",
1414
"react-apexcharts": "^1.5.0",
15-
"react-dom": "^18.3.1",
15+
"react-dom": "^19.2.0",
1616
"react-icons": "^5.5.0",
17-
"react-markdown": "^9.1.0",
18-
"react-router-dom": "^6.30.0",
19-
"react-syntax-highlighter": "^15.6.6",
17+
"react-markdown": "^10.1.0",
18+
"react-date-range": "1.4.0",
19+
"react-router-dom": "^7.9.4",
20+
"react-syntax-highlighter": "^16.1.0",
2021
"rehype-external-links": "^3.0.0"
2122
},
2223
"devDependencies": {
2324
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
24-
"@eslint/js": "^9.36.0",
25+
"@eslint/js": "^9.38.0",
2526
"@testing-library/dom": "^10.4.1",
26-
"@testing-library/jest-dom": "^6.8.0",
27+
"@testing-library/jest-dom": "^6.9.1",
2728
"@testing-library/react": "^16.3.0",
2829
"@testing-library/user-event": "^14.6.1",
29-
"@types/jest": "^29.5.14",
30+
"@types/jest": "^30.0.0",
3031
"@types/lodash": "^4.17.20",
31-
"@types/node": "^24.5.2",
32-
"@types/react": "^18.3.18",
33-
"@types/react-dom": "^18.3.5",
32+
"@types/node": "^24.9.2",
33+
"@types/react": "^19.2.2",
34+
"@types/react-dom": "^19.2.2",
35+
"@types/react-date-range": "^1.4.10",
3436
"@types/react-router-dom": "^5.3.2",
3537
"@types/react-syntax-highlighter": "^15.5.13",
36-
"eslint": "^9.36.0",
38+
"@vitejs/plugin-react": "^5.1.0",
39+
"@vitest/coverage-v8": "^4.0.4",
40+
"eslint": "^9.38.0",
3741
"eslint-config-prettier": "^10.1.8",
3842
"eslint-plugin-prettier": "^5.5.4",
39-
"eslint-plugin-react-hooks": "^5.2.0",
43+
"eslint-plugin-react-hooks": "^7.0.1",
4044
"eslint-plugin-simple-import-sort": "^12.1.1",
4145
"globals": "^16.4.0",
4246
"jest-fetch-mock": "^3.0.3",
43-
"minimatch": "9.0.4",
47+
"jsdom": "^27.0.1",
48+
"minimatch": "10.1.1",
4449
"postcss": "^8.5.6",
4550
"prettier": "^3.6.2",
46-
"react-scripts": "5.0.1",
4751
"sass": "^1.93.2",
4852
"shx": "^0.4.0",
49-
"typescript": "^5.9.2",
50-
"typescript-eslint": "^8.44.1"
51-
},
52-
"resolutions": {
53-
"@types/react-syntax-highlighter/**/@types/react": "18.3.18",
54-
"@types/react-router-dom/**/@types/react": "18.3.18",
55-
"@types/react-router-dom/**/@types/react-dom": "18.3.5",
56-
"react-scripts/**/core-js-pure": "3.41.0",
57-
"react-scripts/**/nth-check": "^2.0.1",
58-
"clo-ui/**/rimraf": "^3.0.2"
59-
},
60-
"proxy": "http://127.0.0.1:8000",
61-
"jest": {
62-
"moduleNameMapper": {
63-
"\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
64-
"\\.(css|less|scss|sass)$": "<rootDir>/__mocks__/fileMock.js"
65-
}
53+
"source-map-explorer": "^2.5.3",
54+
"typescript": "^5.9.3",
55+
"typescript-eslint": "^8.46.2",
56+
"vite": "^7.1.12",
57+
"vitest": "^4.0.4"
6658
},
6759
"scripts": {
6860
"copy:static": "shx rm -rf src/static && shx mkdir src/static && shx cp -r public/static/* src",
6961
"copy:scorecard": "shx cp public/scorecard.html build",
70-
"build": "yarn copy:static && INLINE_RUNTIME_CHUNK=false IMAGE_INLINE_SIZE_LIMIT=0 DISABLE_ESLINT_PLUGIN=true react-scripts build && shx cp -r build/static/* build && shx rm -rf build/static && yarn copy:scorecard",
71-
"eject": "react-scripts eject",
62+
"copy:manifest": "shx cp public/manifest.json build",
63+
"analyze": "source-map-explorer --no-border-checks 'build/js/*.js'",
64+
"build": "yarn copy:static && vite build && shx cp -r build/static/* build && shx rm -rf build/static && yarn copy:scorecard && yarn copy:manifest",
7265
"format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
7366
"format:diff": "prettier --list-different \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
74-
"isready": "yarn format && yarn lint && yarn test --watchAll=false --passWithNoTests --verbose && yarn build",
67+
"isready": "yarn format && yarn lint && yarn test --passWithNoTests && yarn build",
7568
"lint": "eslint src --max-warnings 0",
7669
"lint:fix": "eslint src --max-warnings 0 --fix",
77-
"start": "yarn copy:static && DANGEROUSLY_DISABLE_HOST_CHECK=true DISABLE_ESLINT_PLUGIN=true react-scripts start",
78-
"test": "sed -i -e 's/const FORCE_EXIT_DELAY = 500;/const FORCE_EXIT_DELAY = 1000;/g' ./node_modules/jest-worker/build/base/BaseWorkerPool.js && TZ=UTC react-scripts test # See https://github.com/facebook/jest/issues/11354",
79-
"test:coverage": "react-scripts test --coverage --watchAll=false"
70+
"start": "yarn copy:static && vite --host",
71+
"test": "vitest run --passWithNoTests",
72+
"test:coverage": "vitest run --passWithNoTests --coverage"
73+
},
74+
"resolutions": {
75+
"react-date-range/date-fns": "2.30.0"
8076
},
8177
"browserslist": {
8278
"production": [

‎web/public/index.html‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎web/src/App.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import 'clo-ui/styles/xxxl_grid.scss';
22

33
import { AlertController } from 'clo-ui/components/AlertController';
4-
import { useState } from 'react';
4+
import { lazy, Suspense, useState } from 'react';
55
import { BrowserRouter as Router, Navigate, Route, Routes, useParams } from 'react-router-dom';
66

77
import { AppContextProvider } from './context/AppContextProvider';
88
import Layout from './layout';
99
import Detail from './layout/detail';
1010
import NotFound from './layout/notFound';
1111
import Search from './layout/search';
12-
import StatsView from './layout/stats';
12+
13+
const StatsView = lazy(() => import('./layout/stats'));
1314

1415
// Old path without :foundation is redirected to CNCF foundation by default
1516
const ProjectsRedirection = () => {
@@ -40,7 +41,14 @@ function App() {
4041
/>
4142
<Route path="projects/:project" element={<ProjectsRedirection />} />
4243
<Route path="projects/:foundation/:project" element={<Detail setInvisibleFooter={setInvisibleFooter} />} />
43-
<Route path="stats" element={<StatsView />} />
44+
<Route
45+
path="stats"
46+
element={
47+
<Suspense fallback={null}>
48+
<StatsView />
49+
</Suspense>
50+
}
51+
/>
4452
<Route path="*" element={<NotFound />} />
4553
</Route>
4654
</Routes>

‎web/src/api/index.test.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
import fetchMock, { enableFetchMocks } from 'jest-fetch-mock';
2+
import { createRequire } from 'module';
3+
import { vi } from 'vitest';
24

35
import { ErrorKind, Project, ProjectDetail, SortBy, SortDirection } from '../types';
46
import API from './index';
7+
const require = createRequire(import.meta.url);
8+
59
enableFetchMocks();
610

711
const getData = (fixtureId: string): object => {
8-
// eslint-disable-next-line @typescript-eslint/no-require-imports
912
return require(`./__fixtures__/index/${fixtureId}.json`) as object;
1013
};
1114

1215
describe('API', () => {
1316
afterEach(() => {
14-
jest.resetAllMocks();
17+
vi.resetAllMocks();
1518
});
1619

1720
describe('API', () => {

‎web/src/layout/common/BadgeModal.test.tsx‎

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { render, screen } from '@testing-library/react';
22
import userEvent from '@testing-library/user-event';
33
import { Foundation } from 'clo-ui/components/Foundation';
4+
import { vi } from 'vitest';
45

56
import BadgeModal from './BadgeModal';
67

7-
const mockOnCloseModal = jest.fn();
8+
const mockOnCloseModal = vi.fn();
89

910
const defaultProps = {
1011
foundation: Foundation.cncf,
@@ -15,7 +16,7 @@ const defaultProps = {
1516

1617
describe('BadgeModal', () => {
1718
afterEach(() => {
18-
jest.resetAllMocks();
19+
vi.resetAllMocks();
1920
});
2021

2122
it('creates snapshot', () => {
@@ -33,15 +34,11 @@ describe('BadgeModal', () => {
3334

3435
const badge = screen.getByAltText('CLOMonitor badge');
3536
expect(badge).toBeInTheDocument();
36-
expect(badge).toHaveProperty(
37-
'src',
38-
'https://img.shields.io/endpoint?url=http://localhost/api/projects/cncf/proj/badge'
39-
);
37+
const endpointUrl = `https://img.shields.io/endpoint?url=${window.location.origin}/api/projects/cncf/proj/badge`;
38+
expect(badge).toHaveProperty('src', endpointUrl);
4039
const code = screen.getByTestId('code');
4140
expect(code).toBeInTheDocument();
42-
expect(code).toHaveTextContent(
43-
'[![CLOMonitor](https://img.shields.io/endpoint?url=http://localhost/api/projects/cncf/proj/badge)](http://localhost/projects/cncf/proj)'
44-
);
41+
expect(code).toHaveTextContent(`[![CLOMonitor](${endpointUrl})](${window.location.origin}/projects/cncf/proj)`);
4542
});
4643

4744
it('renders ascii tab', async () => {
@@ -54,15 +51,11 @@ describe('BadgeModal', () => {
5451

5552
const badge = screen.getByAltText('CLOMonitor badge');
5653
expect(badge).toBeInTheDocument();
57-
expect(badge).toHaveProperty(
58-
'src',
59-
'https://img.shields.io/endpoint?url=http://localhost/api/projects/cncf/proj/badge'
60-
);
54+
const endpointUrl = `https://img.shields.io/endpoint?url=${window.location.origin}/api/projects/cncf/proj/badge`;
55+
expect(badge).toHaveProperty('src', endpointUrl);
6156
const code = screen.getByTestId('code');
6257
expect(code).toBeInTheDocument();
63-
expect(code).toHaveTextContent(
64-
'http://localhost/projects/cncf/proj[image:https://img.shields.io/endpoint?url=http://localhost/api/projects/cncf/proj/badge[CLOMonitor]]'
65-
);
58+
expect(code).toHaveTextContent(`${window.location.origin}/projects/cncf/proj[image:${endpointUrl}[CLOMonitor]]`);
6659
});
6760
});
6861
});

‎web/src/layout/common/BadgeModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { CodeBlock } from 'clo-ui/components/CodeBlock';
21
import { Foundation } from 'clo-ui/components/Foundation';
32
import { Modal } from 'clo-ui/components/Modal';
43
import { Tabs } from 'clo-ui/components/Tabs';
54
import { useContext } from 'react';
65

76
import { AppContext } from '../../context/AppContextProvider';
7+
import { CodeBlock } from './CodeBlock';
88

99
interface OpenModalStatus {
1010
status: boolean;

‎web/src/layout/common/CategoriesSummary.test.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { render, screen } from '@testing-library/react';
22
import { BrowserRouter as Router } from 'react-router-dom';
3+
import { vi } from 'vitest';
34

45
import { ScoreType } from '../../types';
56
import CategoriesSummary from './CategoriesSummary';
7+
import styles from './CategoriesSummary.module.css';
68

79
const defaultProps = {
810
score: {
@@ -18,7 +20,7 @@ const defaultProps = {
1820

1921
describe('CategoriesSummary', () => {
2022
afterEach(() => {
21-
jest.resetAllMocks();
23+
vi.resetAllMocks();
2224
});
2325

2426
it('creates snapshot', () => {
@@ -56,10 +58,10 @@ describe('CategoriesSummary', () => {
5658
</Router>
5759
);
5860

59-
expect(container.children[0]).toHaveClass('bigSize');
61+
expect(container.children[0]).toHaveClass(styles.bigSize);
6062
expect(container.children[0].children[1]).toHaveClass('px-0 px-sm-3');
6163
expect(container.children[0].children[1].children[0]).toHaveClass('gx-4 gx-md-5');
62-
expect(screen.getByText('85')).toHaveClass('bigSize');
64+
expect(screen.getByText('85').className).toContain('bigSize');
6365
});
6466
});
6567
});

0 commit comments

Comments
 (0)