Skip to content

Commit aa45741

Browse files
caponettocaponetto
authored
feat(ws): create new script to start frontend returning mocked data (#314)
* Enable start:dev with real data and start:dev:mock with mocked data Signed-off-by: Guilherme Caponetto <638737+caponetto@users.noreply.github.com> * Reorganize mock-related code Signed-off-by: Guilherme Caponetto <638737+caponetto@users.noreply.github.com> * Refactor FE types according to BE types and adapt the FE code accordingly Signed-off-by: Guilherme Caponetto <638737+caponetto@users.noreply.github.com> * Reorganize types Signed-off-by: Guilherme Caponetto <638737+caponetto@users.noreply.github.com> * Prepare code for create/update/patch Signed-off-by: Guilherme Caponetto <638737+caponetto@users.noreply.github.com> * Format files with prettier Signed-off-by: Guilherme Caponetto <638737+caponetto@users.noreply.github.com> * Clean up unnecessary eslint comments Signed-off-by: Guilherme Caponetto <638737+caponetto@users.noreply.github.com> * Minor adjustments after rebase Signed-off-by: Guilherme Caponetto <638737+caponetto@users.noreply.github.com> * Add error boundary Signed-off-by: Guilherme Caponetto <638737+caponetto@users.noreply.github.com> * Add EnsureAPIAvailability component Signed-off-by: Guilherme Caponetto <638737+caponetto@users.noreply.github.com> * Add instructions for running the UI with a mocked API Signed-off-by: Guilherme Caponetto <638737+caponetto@users.noreply.github.com> * Enable create workspace Signed-off-by: Guilherme Caponetto <638737+caponetto@users.noreply.github.com> --------- Signed-off-by: Guilherme Caponetto <638737+caponetto@users.noreply.github.com>
1 parent bde6b4b commit aa45741

File tree

67 files changed

+2082
-1161
lines changed

Some content is hidden

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

67 files changed

+2082
-1161
lines changed

‎workspaces/frontend/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,12 @@ This is the default setup for running the UI locally. Make sure you build the pr
5050
npm run start:dev
5151
```
5252

53+
The command above requires the backend to be active in order to serve data. To run the UI independently, without establishing a connection to the backend, use the following command to start the application with a mocked API:
54+
55+
```bash
56+
npm run start:dev:mock
57+
```
58+
5359
### Testing
5460

5561
Run all tests:

‎workspaces/frontend/config/webpack.common.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -140,13 +140,13 @@ module.exports = (env) => {
140140
},
141141
{
142142
test: /\.css$/i,
143-
use: [
144-
'style-loader',
145-
'css-loader',
146-
],
143+
use: ['style-loader', 'css-loader'],
147144
include: [
148-
path.resolve(relativeDir, 'node_modules/@patternfly/react-catalog-view-extension/dist/css/react-catalog-view-extension.css'),
149-
]
145+
path.resolve(
146+
relativeDir,
147+
'node_modules/@patternfly/react-catalog-view-extension/dist/css/react-catalog-view-extension.css',
148+
),
149+
],
150150
},
151151
],
152152
},

‎workspaces/frontend/config/webpack.dev.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* eslint-disable @typescript-eslint/no-var-requires */
22

33
const path = require('path');
4+
const { EnvironmentPlugin } = require('webpack');
45
const { merge } = require('webpack-merge');
56
const common = require('./webpack.common.js');
67
const { stylePaths } = require('./stylePaths');
@@ -9,6 +10,7 @@ const PORT = process.env.PORT || '9000';
910
const PROXY_HOST = process.env.PROXY_HOST || 'localhost';
1011
const PROXY_PORT = process.env.PROXY_PORT || '4000';
1112
const PROXY_PROTOCOL = process.env.PROXY_PROTOCOL || 'http:';
13+
const MOCK_API_ENABLED = process.env.MOCK_API_ENABLED || 'false';
1214
const relativeDir = path.resolve(__dirname, '..');
1315

1416
module.exports = merge(common('development'), {
@@ -45,4 +47,9 @@ module.exports = merge(common('development'), {
4547
},
4648
],
4749
},
50+
plugins: [
51+
new EnvironmentPlugin({
52+
WEBPACK_REPLACE__mockApiEnabled: MOCK_API_ENABLED,
53+
}),
54+
],
4855
});

‎workspaces/frontend/jest.config.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,7 @@ module.exports = {
2626
testEnvironment: 'jest-environment-jsdom',
2727

2828
// include projects from node_modules as required
29-
transformIgnorePatterns: [
30-
'node_modules/(?!yaml|lodash-es|uuid|@patternfly|delaunator)',
31-
],
29+
transformIgnorePatterns: ['node_modules/(?!yaml|lodash-es|uuid|@patternfly|delaunator)'],
3230

3331
// A list of paths to snapshot serializer modules Jest should use for snapshot testing
3432
snapshotSerializers: [],

‎workspaces/frontend/package-lock.json‎

Lines changed: 19 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎workspaces/frontend/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"build:clean": "rimraf ./dist",
1818
"build:prod": "webpack --config ./config/webpack.prod.js",
1919
"start:dev": "webpack serve --hot --color --config ./config/webpack.dev.js",
20+
"start:dev:mock": "cross-env MOCK_API_ENABLED=true npm run start:dev",
2021
"test": "run-s test:lint test:unit test:cypress-ci",
2122
"test:cypress-ci": "npx concurrently -P -k -s first \"npm run cypress:server:build && npm run cypress:server\" \"npx wait-on tcp:127.0.0.1:9001 && npm run cypress:run:mock -- {@}\" -- ",
2223
"test:jest": "jest --passWithNoTests",
@@ -52,6 +53,7 @@
5253
"concurrently": "^9.1.0",
5354
"copy-webpack-plugin": "^11.0.0",
5455
"core-js": "^3.39.0",
56+
"cross-env": "^7.0.3",
5557
"css-loader": "^6.11.0",
5658
"css-minimizer-webpack-plugin": "^5.0.1",
5759
"cypress": "^13.16.1",
@@ -95,8 +97,8 @@
9597
"webpack-merge": "^5.10.0"
9698
},
9799
"dependencies": {
98-
"@patternfly/react-code-editor": "^6.2.0",
99100
"@patternfly/react-catalog-view-extension": "^6.1.0",
101+
"@patternfly/react-code-editor": "^6.2.0",
100102
"@patternfly/react-core": "^6.2.0",
101103
"@patternfly/react-icons": "^6.2.0",
102104
"@patternfly/react-styles": "^6.2.0",

‎workspaces/frontend/src/__mocks__/mockNamespaces.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { NamespacesList } from '~/app/types';
1+
import { buildMockNamespace } from '~/shared/mock/mockBuilder';
2+
import { Namespace } from '~/shared/api/backendApiTypes';
23

3-
export const mockNamespaces: NamespacesList = [
4-
{ name: 'default' },
5-
{ name: 'kubeflow' },
6-
{ name: 'custom-namespace' },
4+
export const mockNamespaces: Namespace[] = [
5+
buildMockNamespace({ name: 'default' }),
6+
buildMockNamespace({ name: 'kubeflow' }),
7+
buildMockNamespace({ name: 'custom-namespace' }),
78
];

‎workspaces/frontend/src/__mocks__/mockWorkspaces.ts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { buildMockWorkspace } from '~/shared/mock/mockBuilder';
2+
3+
export const mockWorkspaces = [
4+
buildMockWorkspace(),
5+
buildMockWorkspace({
6+
name: 'My Second Jupyter Notebook',
7+
podTemplate: {
8+
podMetadata: {
9+
labels: {},
10+
annotations: {},
11+
},
12+
volumes: {
13+
home: {
14+
pvcName: 'workspace-home-pvc',
15+
mountPath: '/home',
16+
readOnly: false,
17+
},
18+
data: [
19+
{
20+
pvcName: 'workspace-data-pvc',
21+
mountPath: '/data',
22+
readOnly: false,
23+
},
24+
],
25+
},
26+
options: {
27+
imageConfig: {
28+
current: {
29+
id: 'jupyterlab_scipy_180',
30+
displayName: 'jupyter-scipy:v1.9.0',
31+
description: 'JupyterLab, with SciPy Packages',
32+
labels: [
33+
{
34+
key: 'pythonVersion',
35+
value: '3.11',
36+
},
37+
],
38+
},
39+
},
40+
podConfig: {
41+
current: {
42+
id: 'large_cpu',
43+
displayName: 'Large CPU',
44+
description: 'Pod with 1 CPU, 16 Gb RAM',
45+
labels: [
46+
{ key: 'cpu', value: '4000m' },
47+
{ key: 'memory', value: '16Gi' },
48+
{ key: 'gpu', value: '1' },
49+
],
50+
},
51+
},
52+
},
53+
},
54+
}),
55+
];

‎workspaces/frontend/src/__mocks__/utils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ResponseBody } from '~/app/types';
1+
import { ResponseBody } from '~/shared/api/types';
22

33
export const mockBFFResponse = <T>(data: T): ResponseBody<T> => ({
44
data,

‎workspaces/frontend/src/__tests__/cypress/cypress/tests/mocked/workspaceKinds.mock.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { WorkspaceKind } from '~/shared/types';
1+
import type { WorkspaceKind } from '~/shared/api/backendApiTypes';
22

33
// Factory function to create a valid WorkspaceKind
44
function createMockWorkspaceKind(overrides: Partial<WorkspaceKind> = {}): WorkspaceKind {

0 commit comments

Comments
 (0)