Skip to content

Commit

Permalink
Merge pull request #227 from cloudblue/feat/LITE-29398-update-extensi…
Browse files Browse the repository at this point in the history 
…on-template

LITE-29398: Update frontend for the extension template
  • Loading branch information
@Sainomori
Sainomori authored Jan 30, 2024
2 parents 6ecdaba + 813e815 commit 9b629fc
Show file tree
Hide file tree
Showing 12 changed files with 118 additions and 78 deletions.
11 changes: 11 additions & 0 deletions connect/cli/plugins/project/extension/templates/bootstrap/${project_slug}/.gitignore.j2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,14 @@ coverage.xml
.{{ project_slug }}_dev.env
node_modules
ui/tests/coverage

.DS_Store
# Editor directories and files
.vscode/*
!.vscode/extensions.json
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
.idea
44 changes: 23 additions & 21 deletions connect/cli/plugins/project/extension/templates/bootstrap/${project_slug}/package.json.j2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
"version": "{{ version }}",
"description": "{{ description }}",
"main": "index.js",
"engines": {
"node": ">=v18.19.0"
},
"directories": {
"test": "ui/tests"
},
Expand All @@ -16,28 +19,27 @@
"author": "{{ author }}",
"license": "{{ license }}",
"dependencies": {
"@cloudblueconnect/connect-ui-toolkit": "^26",
"@fontsource/roboto": "^4.5.8",
"css-minimizer-webpack-plugin": "^4.2.2"
"@cloudblueconnect/connect-ui-toolkit": "^30.1.0",
"@fontsource/roboto": "^5.0.8",
"css-minimizer-webpack-plugin": "^6.0.0"
},
"devDependencies": {
"@babel/core": "^7.18.0",
"@babel/preset-env": "^7.18.0",
"css-loader": "^6.7.1",
"eslint": "8.17.0",
"eslint-config-airbnb-base": "15.0.0",
"eslint-import-resolver-webpack": "0.13.2",
"eslint-plugin-import": "2.26.0",
"eslint-webpack-plugin": "^3.1.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"jest": "^28.1.0",
"jest-environment-jsdom": "28.1.0",
"@babel/core": "^7.23.7",
"@babel/preset-env": "^7.23.8",
"css-loader": "^6.9.1",
"eslint": "^8.56.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-import-resolver-webpack": "^0.13.8",
"eslint-plugin-import": "2.29.1",
"eslint-webpack-plugin": "^4.0.1",
"html-webpack-plugin": "^5.6.0",
"jest": "^29.7.0",
"jest-environment-jsdom": "29.7.0",
"jest-transform-stub": "^2.0.0",
"mini-css-extract-plugin": "^2.6.1",
"style-loader": "^3.3.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"copy-webpack-plugin": "^11.0.0"
"mini-css-extract-plugin": "^2.7.7",
"style-loader": "^3.3.4",
"webpack": "^5.90.0",
"webpack-cli": "^5.1.4",
"copy-webpack-plugin": "^12.0.2"
}
}
}
2 changes: 1 addition & 1 deletion connect/cli/plugins/project/extension/templates/bootstrap/${project_slug}/pyproject.toml.j2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ readme = "./README.md"

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

[tool.poetry.dev-dependencies]
pytest = ">=6.1.2,<8"
Expand Down
6 changes: 3 additions & 3 deletions .../cli/plugins/project/extension/templates/bootstrap/${project_slug}/ui/pages/index.html.j2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ All rights reserved.
<body>
<div id="loader"></div>
<div id="app">
<main-card title="Distribution of active subscriptions per marketplace">
<ui-card title="Distribution of active subscriptions per marketplace">
<div class="main-container">
<div id="chart">
</div>
Expand All @@ -26,8 +26,8 @@ All rights reserved.
</div>
</div>
</div>
</main-card>
</ui-card>
</div>
</body>

</html>
</html>
10 changes: 5 additions & 5 deletions ...i/plugins/project/extension/templates/bootstrap/${project_slug}/ui/pages/settings.html.j2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,23 +15,23 @@ All rights reserved.
<body>
<div id="loader"></div>
<div id="app">
<settings-card title="Choose your marketplaces you want to include in chart">
<ui-card title="Choose your marketplaces you want to include in chart">
<div class="list-wrapper">
<ul id="marketplaces" class="list">
</ul>
</div>
<div class="button-container">
<button id="save" class="button" disabled>SAVE</button>
</div>
</settings-card>
</ui-card>
</div>
<div id="error">
<settings-card title="Error">
<ui-card title="Error">
<div class="error-message">
<p id="error-message">Something went wrong. Please try to reload the page.</p>
</div>
</settings-card>
</ui-card>
</div>
</body>

</html>
</html>
4 changes: 2 additions & 2 deletions ...cli/plugins/project/extension/templates/bootstrap/${project_slug}/ui/src/components.js.j2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const prepareMarketplaces = (marketplaces) => {
<img src="${marketplace.icon}" alt="Thumbnail">
</div>
<div class="list-item-content">
<h4>${marketplace.id} - ${marketplace.name}</h4>
<h4><a class="marketplace-link" id="${marketplace.id}">${marketplace.id}</a> - ${marketplace.name}</h4>
<p>${marketplace.description}</p>
</div>
</li>`, '');
Expand All @@ -25,7 +25,7 @@ export const prepareMarketplacesWithSwitch = (marketplaces) => {
<img src="${marketplace.icon}" alt="Thumbnail">
</div>
<div class="list-item-content">
<h4>${marketplace.name}</h4>
<h4><a class="marketplace-link" id="${marketplace.id}">${marketplace.name}</a></h4>
<p>${marketplace.description}</p>
</div>
<div class="list-item switch">
Expand Down
24 changes: 22 additions & 2 deletions connect/cli/plugins/project/extension/templates/bootstrap/${project_slug}/ui/src/pages.js.j2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@
Copyright (c) {% now 'utc', '%Y' %}, {{ author }}
All rights reserved.
*/
{%- if extension_type != 'transformations' %}
import {
connectPortalRoutes,
} from '@cloudblueconnect/connect-ui-toolkit';

{%- endif %}
import {
{%- if 'tfnapp' in application_types %}
validate,
Expand Down Expand Up @@ -57,7 +63,7 @@ export const saveSettingsData = async (app) => {
enableButton('save', 'Save');
};

export const index = async () => {
export const index = async (app) => {
hideComponent('app');
showComponent('loader');
const settings = await getSettings();
Expand All @@ -68,6 +74,13 @@ export const index = async () => {
showComponent('app');
renderChart(chart);
renderMarketplaces(marketplaces);

// Add navigation to each marketplace element
document.querySelectorAll('.marketplace-link').forEach(el => {
el.addEventListener('click', () => {
app.navigateTo(connectPortalRoutes.marketplaceDetails, el.id);
});
});
};

export const settings = async (app) => {
Expand All @@ -84,6 +97,13 @@ export const settings = async (app) => {
enableButton('save', 'Save');
addEventListener('save', 'click', saveSettingsData.bind(null, app));
showComponent('app');

// Add navigation to each marketplace element
document.querySelectorAll('.marketplace-link').forEach(el => {
el.addEventListener('click', () => {
app.navigateTo(connectPortalRoutes.marketplaceDetails, el.id);
});
});
} catch (error) {
app.emit('snackbar:error', error);
showComponent('error');
Expand Down Expand Up @@ -339,4 +359,4 @@ export const manual = (app) => {
});
};

{%- endif %}
{%- endif %}
4 changes: 2 additions & 2 deletions ...li/plugins/project/extension/templates/bootstrap/${project_slug}/ui/src/pages/index.js.j2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,5 @@ import '@fontsource/roboto/500.css';
import '../../styles/index.css';


createApp({ 'main-card': Card })
.then(() => { index(); });
createApp({ 'ui-card': Card })
.then(index);
2 changes: 1 addition & 1 deletion ...plugins/project/extension/templates/bootstrap/${project_slug}/ui/src/pages/settings.js.j2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,5 @@ import '@fontsource/roboto/500.css';
import '../../styles/index.css';


createApp({ 'settings-card': Card })
createApp({ 'ui-card': Card })
.then(settings);
6 changes: 6 additions & 0 deletions .../cli/plugins/project/extension/templates/bootstrap/${project_slug}/ui/styles/index.css.j2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -324,3 +324,9 @@ h1 {
justify-content: space-evenly;
align-items: center;
}

.marketplace-link {
color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.6);
text-decoration: underline;
cursor: pointer;
}
8 changes: 4 additions & 4 deletions ...i/plugins/project/extension/templates/bootstrap/${project_slug}/ui/tests/pages.spec.js.j2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ describe('pages.js', () => {
describe('index', () => {
beforeAll(() => {
document.body.innerHTML = `<div id="app">
<main-card title="Distribution of active subscriptions per marketplace">
<ui-card title="Distribution of active subscriptions per marketplace">
<div class="main-container">
<div id="chart">
</div>
Expand All @@ -72,7 +72,7 @@ describe('pages.js', () => {
</div>
</div>
</div>
</main-card>
</ui-card>
</div>`;
});
beforeEach(async () => {
Expand Down Expand Up @@ -114,13 +114,13 @@ describe('pages.js', () => {
describe('settings', () => {
beforeAll(() => {
document.body.innerHTML = `<div id="app">
<main-card title="Settings">
<ui-card title="Settings">
<div class="main-container">
<div id="settings">
</div>
</div>
<button id="save" class="btn btn-primary">Save</button>
</main-card>
</ui-card>
</div>`;
});
describe('app is not passed', () => {
Expand Down
Loading

0 comments on commit 9b629fc

Please sign in to comment.