Skip to content

Commit 9b629fc

Browse files
SainomoriSainomori
authored
Merge pull request #227 from cloudblue/feat/LITE-29398-update-extension-template
LITE-29398: Update frontend for the extension template
2 parents 6ecdaba + 813e815 commit 9b629fc

File tree

12 files changed

+118
-78
lines changed

12 files changed

+118
-78
lines changed

‎connect/cli/plugins/project/extension/templates/bootstrap/${project_slug}/.gitignore.j2

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,14 @@ coverage.xml
55
.{{ project_slug }}_dev.env
66
node_modules
77
ui/tests/coverage
8+
9+
.DS_Store
10+
# Editor directories and files
11+
.vscode/*
12+
!.vscode/extensions.json
13+
*.suo
14+
*.ntvs*
15+
*.njsproj
16+
*.sln
17+
*.sw?
18+
.idea

‎connect/cli/plugins/project/extension/templates/bootstrap/${project_slug}/package.json.j2

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
"version": "{{ version }}",
44
"description": "{{ description }}",
55
"main": "index.js",
6+
"engines": {
7+
"node": ">=v18.19.0"
8+
},
69
"directories": {
710
"test": "ui/tests"
811
},
@@ -16,28 +19,27 @@
1619
"author": "{{ author }}",
1720
"license": "{{ license }}",
1821
"dependencies": {
19-
"@cloudblueconnect/connect-ui-toolkit": "^26",
20-
"@fontsource/roboto": "^4.5.8",
21-
"css-minimizer-webpack-plugin": "^4.2.2"
22+
"@cloudblueconnect/connect-ui-toolkit": "^30.1.0",
23+
"@fontsource/roboto": "^5.0.8",
24+
"css-minimizer-webpack-plugin": "^6.0.0"
2225
},
2326
"devDependencies": {
24-
"@babel/core": "^7.18.0",
25-
"@babel/preset-env": "^7.18.0",
26-
"css-loader": "^6.7.1",
27-
"eslint": "8.17.0",
28-
"eslint-config-airbnb-base": "15.0.0",
29-
"eslint-import-resolver-webpack": "0.13.2",
30-
"eslint-plugin-import": "2.26.0",
31-
"eslint-webpack-plugin": "^3.1.1",
32-
"file-loader": "^6.2.0",
33-
"html-webpack-plugin": "^5.5.0",
34-
"jest": "^28.1.0",
35-
"jest-environment-jsdom": "28.1.0",
27+
"@babel/core": "^7.23.7",
28+
"@babel/preset-env": "^7.23.8",
29+
"css-loader": "^6.9.1",
30+
"eslint": "^8.56.0",
31+
"eslint-config-airbnb-base": "^15.0.0",
32+
"eslint-import-resolver-webpack": "^0.13.8",
33+
"eslint-plugin-import": "2.29.1",
34+
"eslint-webpack-plugin": "^4.0.1",
35+
"html-webpack-plugin": "^5.6.0",
36+
"jest": "^29.7.0",
37+
"jest-environment-jsdom": "29.7.0",
3638
"jest-transform-stub": "^2.0.0",
37-
"mini-css-extract-plugin": "^2.6.1",
38-
"style-loader": "^3.3.1",
39-
"webpack": "^5.74.0",
40-
"webpack-cli": "^4.10.0",
41-
"copy-webpack-plugin": "^11.0.0"
39+
"mini-css-extract-plugin": "^2.7.7",
40+
"style-loader": "^3.3.4",
41+
"webpack": "^5.90.0",
42+
"webpack-cli": "^5.1.4",
43+
"copy-webpack-plugin": "^12.0.2"
4244
}
43-
}
45+
}

‎connect/cli/plugins/project/extension/templates/bootstrap/${project_slug}/pyproject.toml.j2

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ readme = "./README.md"
2525

2626
[tool.poetry.dependencies]
2727
python = ">=3.8,<4"
28-
connect-eaas-core = ">=27.14,<28"
28+
connect-eaas-core = ">=30"
2929

3030
[tool.poetry.dev-dependencies]
3131
pytest = ">=6.1.2,<8"

‎connect/cli/plugins/project/extension/templates/bootstrap/${project_slug}/ui/pages/index.html.j2

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ All rights reserved.
1515
<body>
1616
<div id="loader"></div>
1717
<div id="app">
18-
<main-card title="Distribution of active subscriptions per marketplace">
18+
<ui-card title="Distribution of active subscriptions per marketplace">
1919
<div class="main-container">
2020
<div id="chart">
2121
</div>
@@ -26,8 +26,8 @@ All rights reserved.
2626
</div>
2727
</div>
2828
</div>
29-
</main-card>
29+
</ui-card>
3030
</div>
3131
</body>
3232

33-
</html>
33+
</html>

‎connect/cli/plugins/project/extension/templates/bootstrap/${project_slug}/ui/pages/settings.html.j2

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,23 @@ All rights reserved.
1515
<body>
1616
<div id="loader"></div>
1717
<div id="app">
18-
<settings-card title="Choose your marketplaces you want to include in chart">
18+
<ui-card title="Choose your marketplaces you want to include in chart">
1919
<div class="list-wrapper">
2020
<ul id="marketplaces" class="list">
2121
</ul>
2222
</div>
2323
<div class="button-container">
2424
<button id="save" class="button" disabled>SAVE</button>
2525
</div>
26-
</settings-card>
26+
</ui-card>
2727
</div>
2828
<div id="error">
29-
<settings-card title="Error">
29+
<ui-card title="Error">
3030
<div class="error-message">
3131
<p id="error-message">Something went wrong. Please try to reload the page.</p>
3232
</div>
33-
</settings-card>
33+
</ui-card>
3434
</div>
3535
</body>
3636

37-
</html>
37+
</html>

‎connect/cli/plugins/project/extension/templates/bootstrap/${project_slug}/ui/src/components.js.j2

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const prepareMarketplaces = (marketplaces) => {
1111
<img src="${marketplace.icon}" alt="Thumbnail">
1212
</div>
1313
<div class="list-item-content">
14-
<h4>${marketplace.id} - ${marketplace.name}</h4>
14+
<h4><a class="marketplace-link" id="${marketplace.id}">${marketplace.id}</a> - ${marketplace.name}</h4>
1515
<p>${marketplace.description}</p>
1616
</div>
1717
</li>`, '');
@@ -25,7 +25,7 @@ export const prepareMarketplacesWithSwitch = (marketplaces) => {
2525
<img src="${marketplace.icon}" alt="Thumbnail">
2626
</div>
2727
<div class="list-item-content">
28-
<h4>${marketplace.name}</h4>
28+
<h4><a class="marketplace-link" id="${marketplace.id}">${marketplace.name}</a></h4>
2929
<p>${marketplace.description}</p>
3030
</div>
3131
<div class="list-item switch">

‎connect/cli/plugins/project/extension/templates/bootstrap/${project_slug}/ui/src/pages.js.j2

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22
Copyright (c) {% now 'utc', '%Y' %}, {{ author }}
33
All rights reserved.
44
*/
5+
{%- if extension_type != 'transformations' %}
6+
import {
7+
connectPortalRoutes,
8+
} from '@cloudblueconnect/connect-ui-toolkit';
9+
10+
{%- endif %}
511
import {
612
{%- if 'tfnapp' in application_types %}
713
validate,
@@ -57,7 +63,7 @@ export const saveSettingsData = async (app) => {
5763
enableButton('save', 'Save');
5864
};
5965

60-
export const index = async () => {
66+
export const index = async (app) => {
6167
hideComponent('app');
6268
showComponent('loader');
6369
const settings = await getSettings();
@@ -68,6 +74,13 @@ export const index = async () => {
6874
showComponent('app');
6975
renderChart(chart);
7076
renderMarketplaces(marketplaces);
77+
78+
// Add navigation to each marketplace element
79+
document.querySelectorAll('.marketplace-link').forEach(el => {
80+
el.addEventListener('click', () => {
81+
app.navigateTo(connectPortalRoutes.marketplaceDetails, el.id);
82+
});
83+
});
7184
};
7285

7386
export const settings = async (app) => {
@@ -84,6 +97,13 @@ export const settings = async (app) => {
8497
enableButton('save', 'Save');
8598
addEventListener('save', 'click', saveSettingsData.bind(null, app));
8699
showComponent('app');
100+
101+
// Add navigation to each marketplace element
102+
document.querySelectorAll('.marketplace-link').forEach(el => {
103+
el.addEventListener('click', () => {
104+
app.navigateTo(connectPortalRoutes.marketplaceDetails, el.id);
105+
});
106+
});
87107
} catch (error) {
88108
app.emit('snackbar:error', error);
89109
showComponent('error');
@@ -339,4 +359,4 @@ export const manual = (app) => {
339359
});
340360
};
341361

342-
{%- endif %}
362+
{%- endif %}

‎connect/cli/plugins/project/extension/templates/bootstrap/${project_slug}/ui/src/pages/index.js.j2

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,5 @@ import '@fontsource/roboto/500.css';
1212
import '../../styles/index.css';
1313

1414

15-
createApp({ 'main-card': Card })
16-
.then(() => { index(); });
15+
createApp({ 'ui-card': Card })
16+
.then(index);

‎connect/cli/plugins/project/extension/templates/bootstrap/${project_slug}/ui/src/pages/settings.js.j2

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,5 @@ import '@fontsource/roboto/500.css';
1212
import '../../styles/index.css';
1313

1414

15-
createApp({ 'settings-card': Card })
15+
createApp({ 'ui-card': Card })
1616
.then(settings);

‎connect/cli/plugins/project/extension/templates/bootstrap/${project_slug}/ui/styles/index.css.j2

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -324,3 +324,9 @@ h1 {
324324
justify-content: space-evenly;
325325
align-items: center;
326326
}
327+
328+
.marketplace-link {
329+
color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.6);
330+
text-decoration: underline;
331+
cursor: pointer;
332+
}

‎connect/cli/plugins/project/extension/templates/bootstrap/${project_slug}/ui/tests/pages.spec.js.j2

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ describe('pages.js', () => {
6161
describe('index', () => {
6262
beforeAll(() => {
6363
document.body.innerHTML = `<div id="app">
64-
<main-card title="Distribution of active subscriptions per marketplace">
64+
<ui-card title="Distribution of active subscriptions per marketplace">
6565
<div class="main-container">
6666
<div id="chart">
6767
</div>
@@ -72,7 +72,7 @@ describe('pages.js', () => {
7272
</div>
7373
</div>
7474
</div>
75-
</main-card>
75+
</ui-card>
7676
</div>`;
7777
});
7878
beforeEach(async () => {
@@ -114,13 +114,13 @@ describe('pages.js', () => {
114114
describe('settings', () => {
115115
beforeAll(() => {
116116
document.body.innerHTML = `<div id="app">
117-
<main-card title="Settings">
117+
<ui-card title="Settings">
118118
<div class="main-container">
119119
<div id="settings">
120120
</div>
121121
</div>
122122
<button id="save" class="btn btn-primary">Save</button>
123-
</main-card>
123+
</ui-card>
124124
</div>`;
125125
});
126126
describe('app is not passed', () => {

0 commit comments

Comments
 (0)