Skip to content

Devx 11066 add name field to toolbar app #332

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
conshus merged 2 commits into from
Apr 16, 2026
Merged

Devx 11066 add name field to toolbar app #332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
91227e9
Update zip file name based on tutorial filename
conshus Apr 16, 2026
2d81aa9
Add filename input for zip file generation
conshus Apr 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 20 additions & 2 deletions toolbar-app/vonage-toolbar/app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ let tutorial: {
starterFiles: string[];
capabilities: string[];
version: string;
filename: string;
} = {
files: [],
openFiles: [],
Expand All @@ -16,12 +17,14 @@ let tutorial: {
starterFiles: [],
capabilities: [],
version: '',
filename: ''
};

export default defineToolbarApp({
init(canvas, app, server) {
const myWindow = document.createElement('astro-dev-toolbar-window');
const myContent = document.createElement('div');
myContent.style.overflowY = 'auto';
myContent.innerHTML = `
<details name='steps' open>
<summary>Step 1: Select panels needed</summary>
Expand Down Expand Up @@ -86,7 +89,12 @@ export default defineToolbarApp({
<input id='version' placeholder='0.0.0'/>
</details>
<details name='steps'>
<summary>Step 9: Finish up</summary>
<summary>Step 9: Enter filename for the zip file</summary>
This will be used also for the repo's folder name
<br/><input id='filename' placeholder='product_name-language-topic' style='width: 300px;'/>
</details>
<details name='steps'>
<summary>Step 10: Finish up</summary>
Click to start generating the tutorial: <button id="generate">generate</button>
<p id="status"></p>
<span id="complete">
Expand All @@ -102,6 +110,15 @@ export default defineToolbarApp({

const astroToolbarWindow = canvas.querySelector('astro-dev-toolbar-window');

const filenameInput = astroToolbarWindow?.querySelector(
'#filename'
) as HTMLInputElement;
filenameInput.value = tutorial.filename !== '' ? tutorial.filename : '';
filenameInput?.addEventListener('change', (event) => {
tutorial.filename = filenameInput?.value;
saveTutorial();
});

const versionInput = astroToolbarWindow?.querySelector(
'#version'
) as HTMLInputElement;
Expand Down Expand Up @@ -182,6 +199,7 @@ export default defineToolbarApp({
}
versionInput.value = tutorial.version;
repositoryInput.value = tutorial.repository;
filenameInput.value = tutorial.filename;
}

function checkLocalStorage() {
Expand Down Expand Up @@ -432,7 +450,7 @@ export default defineToolbarApp({
astroToolbarWindow?.querySelector(
'#download-link'
) as HTMLAnchorElement
).href = `${window.location.origin}/product_name-language-topic.zip`;
).href = `${window.location.origin}/${tutorial.filename}.zip`;
generateButton.disabled = false;
completeSpan.style.display = 'block';
// clear local storage
Expand Down
2 changes: 1 addition & 1 deletion toolbar-app/vonage-toolbar/integration.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export default {
const zip = new AdmZip();
let exclude = ['node_modules', 'dist'];
const sourceDir = './';
const zipFile = './public/product_name-language-topic.zip';
const zipFile = data.tutorial.filename === '' ? './public/product_name-language-topic.zip' : `./public/${data.tutorial.filename}.zip`;
await zip.addLocalFolderPromise(sourceDir, {
filter: (filePath) => !exclude.some((ex) => filePath.includes(ex)),
});
Expand Down
Loading