Skip to content

Commit

Permalink
Update addPlugin webview to use @vscode-elements/elements package
Browse files Browse the repository at this point in the history
  • Loading branch information
@shatakshiiii
shatakshiiii committed Jan 30, 2025
1 parent 0bac24a commit a487d3c
Show file tree
Hide file tree
Showing 4 changed files with 139 additions and 82 deletions.
28 changes: 23 additions & 5 deletions media/contentCreator/addPluginPageStyle.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,35 @@
.container {
display: flex;
flex-direction: column;
font-size: 1em;
}

.element {
margin-bottom: 14px;
}

vscode-text-field {
margin-top: 6px;
vscode-textfield {
margin-bottom: 6px;
width: 100%;
}

vscode-text-area {
vscode-textarea {
margin-top: 6px;
margin-bottom: 6px;
}

vscode-form-group {
width: 100%;
margin: 0;
}

.plugin-name-div {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 18px;
margin-bottom: 20px;
width: 100%;
}

#plugin-name {
Expand Down Expand Up @@ -55,7 +63,7 @@ vscode-text-area {
width: 100%;
}

vscode-dropdown {
vscode-single-select {
width: 200px;
}

Expand Down Expand Up @@ -88,6 +96,16 @@ vscode-checkbox i {
font-size: small;
}

vscode-divider {
width: 100%;
}

#vscode-logs-label {
padding: 0;
align-self: flex-start;
margin-top: 12px;
}

#ade-docs-link {
margin-left: 30px;
font-style: italic;
Expand Down
79 changes: 53 additions & 26 deletions src/features/contentCreator/addPluginPage.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,11 +100,11 @@ export class AddPlugin {
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'nonce-${nonce}'; style-src ${webview.cspSource}; font-src ${webview.cspSource};">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'nonce-${nonce}'; style-src ${webview.cspSource}; font-src ${webview.cspSource};"/>
<title>AAA</title>
<link rel="stylesheet" href="${styleUri}">
<link rel="stylesheet" href="${codiconsUri}">
<link rel="stylesheet" href="${styleUri}"/>
<link rel="stylesheet" href="${codiconsUri}"id="vscode-codicon-stylesheet"/>
</head>
<body>
Expand All @@ -116,27 +116,40 @@ export class AddPlugin {
<form id="init-form">
<section class="component-container">
<vscode-text-field id="path-url" class="required" form="init-form" placeholder="${homeDir}"
size="512">Collection root directory *
<section slot="end" class="explorer-icon">
<vscode-button id="folder-explorer" appearance="icon">
<span class="codicon codicon-folder-opened"></span>
</vscode-button>
</section>
</vscode-text-field>
<vscode-form-group variant="vertical">
<vscode-label for="path-url">
<span class="normal">Collection root directory *</span>
</vscode-label>
<vscode-textfield id="path-url" class="required" form="init-form" placeholder="${homeDir}"
size="512">
<vscode-icon
slot="content-after"
id="folder-explorer"
name="folder-opened"
action-icon
></vscode-icon>
</vscode-textfield>
</vscode-form-group>
<div class="plugin-type-div">
<div class="dropdown-container">
<label for="plugin-dropdown">Plugin type *</label>
<vscode-dropdown id="plugin-dropdown">
<vscode-label for="plugin-dropdown">
<span class="normal">Plugin type *</span>
</vscode-label>
<vscode-single-select id="plugin-dropdown">
<vscode-option>filter</vscode-option>
<vscode-option>lookup</vscode-option>
</vscode-dropdown>
</vscode-single-select>
</div>
</div>
<div class="plugin-name-div">
<vscode-text-field id="plugin-name" form="init-form" placeholder="Enter plugin name" size="512">Plugin name *</vscode-text-field>
<vscode-form-group variant="vertical">
<vscode-label for="plugin-name">
<span class="normal">Plugin name *</span>
</vscode-label>
<vscode-textfield id="plugin-name" form="init-form" placeholder="Enter plugin name" size="512"></vscode-textfield>
</vscode-form-group>
</div>
<div id="full-collection-path" class="full-collection-path">
Expand All @@ -145,13 +158,15 @@ export class AddPlugin {
<div class="verbose-div">
<div class="dropdown-container">
<label for="verbosity-dropdown">Output verbosity</label>
<vscode-dropdown id="verbosity-dropdown">
<vscode-label for="verbosity-dropdown">
<span class="normal">Output Verbosity</span>
</vscode-label>
<vscode-single-select id="verbosity-dropdown">
<vscode-option>Off</vscode-option>
<vscode-option>Low</vscode-option>
<vscode-option>Medium</vscode-option>
<vscode-option>High</vscode-option>
</vscode-dropdown>
</vscode-single-select>
</div>
</div>
Expand All @@ -160,7 +175,7 @@ export class AddPlugin {
</div>
<div class="group-buttons">
<vscode-button id="clear-button" form="init-form" appearance="secondary">
<vscode-button id="clear-button" form="init-form" secondary>
<span class="codicon codicon-clear-all"></span>
&nbsp; Clear All
</vscode-button>
Expand All @@ -170,14 +185,16 @@ export class AddPlugin {
</vscode-button>
</div>
<br>
<vscode-divider></vscode-divider>
<br>
<vscode-text-area id="log-text-area" cols="512" rows="10" placeholder="Output of the command execution"
resize="vertical" readonly>Logs</vscode-text-area>
<vscode-label id="vscode-logs-label" for="log-text-area">
<span class="normal">Logs</span>
</vscode-label>
<vscode-textarea id="log-text-area" cols="90" rows="10" placeholder="Output of the command execution"
resize="vertical" readonly></vscode-textarea>
<div class="group-buttons">
<vscode-button id="clear-logs-button" form="init-form" appearance="secondary">
<vscode-button id="clear-logs-button" form="init-form" secondary>
<span class="codicon codicon-clear-all"></span>
&nbsp; Clear Logs
</vscode-button>
Expand All @@ -195,6 +212,16 @@ export class AddPlugin {
</form>
<!-- Component registration code -->
<script type="module" nonce="${getNonce()}">
import "@vscode-elements/elements/dist/vscode-button/index.js";
import "@vscode-elements/elements/dist/vscode-checkbox/index.js";
import "@vscode-elements/elements/dist/vscode-divider/index.js";
import "@vscode-elements/elements/dist/vscode-form-group/index.js";
import "@vscode-elements/elements/dist/vscode-label/index.js";
import "@vscode-elements/elements/dist/vscode-single-select/index.js";
import "@vscode-elements/elements/dist/vscode-textarea/index.js";
import "@vscode-elements/elements/dist/vscode-textfield/index.js";
</script>
<script type="module" nonce="${nonce}" src="${webviewUri}"></script>
</body>
</html>
Expand Down Expand Up @@ -324,7 +351,7 @@ export class AddPlugin {

// execute ansible-creator command
const ansibleCreatorExecutionResult = await runCommand(command, env);
commandOutput += `------------------------------------ ansible-creator logs ------------------------------------\n`;
commandOutput += `----------------------------------------- ansible-creator logs ------------------------------------------\n`;
commandOutput += ansibleCreatorExecutionResult.output;
const commandPassed = ansibleCreatorExecutionResult.status;

Expand Down
106 changes: 59 additions & 47 deletions src/webview/apps/contentCreator/addPluginPageApp.ts
View file
Original file line number Diff line number Diff line change
@@ -1,70 +1,80 @@
/* eslint-disable @typescript-eslint/no-explicit-any */

import {
allComponents,
Button,
Checkbox,
TextArea,
TextField,
provideVSCodeDesignSystem,
Dropdown,
} from "@vscode/webview-ui-toolkit";
import {
PluginFormInterface,
PostMessageEvent,
} from "../../../features/contentCreator/types";

provideVSCodeDesignSystem().register(allComponents);
import "@vscode-elements/elements";
import {
VscodeButton,
VscodeCheckbox,
VscodeIcon,
VscodeSingleSelect,
VscodeTextarea,
VscodeTextfield,
} from "@vscode-elements/elements";

const vscode = acquireVsCodeApi();
window.addEventListener("load", main);

let pluginNameTextField: TextField;
let pluginTypeDropdown: Dropdown;
let pluginNameTextField: VscodeTextfield;
let pluginTypeDropdown: VscodeSingleSelect;

let collectionPathUrlTextField: TextField;
let folderExplorerButton: Button;
let collectionPathUrlTextField: VscodeTextfield;
let folderExplorerIcon: VscodeIcon;

let initCreateButton: Button;
let initClearButton: Button;
let initCreateButton: VscodeButton;
let initClearButton: VscodeButton;

let overwriteCheckbox: Checkbox;
let overwriteCheckbox: VscodeCheckbox;

let verboseDropdown: Dropdown;
let verboseDropdown: VscodeSingleSelect;

let initCollectionPathDiv: HTMLElement | null;
let initCollectionPathElement: HTMLElement;

let initLogsTextArea: TextArea;
let initClearLogsButton: Button;
let initOpenScaffoldedFolderButton: Button;
let initLogsTextArea: VscodeTextarea;
let initClearLogsButton: VscodeButton;
let initOpenScaffoldedFolderButton: VscodeButton;

let projectUrl = "";

function main() {
// elements for scaffolding ansible plugin interface
pluginNameTextField = document.getElementById("plugin-name") as TextField;
pluginTypeDropdown = document.getElementById("plugin-dropdown") as Dropdown;

collectionPathUrlTextField = document.getElementById("path-url") as TextField;
folderExplorerButton = document.getElementById("folder-explorer") as Button;

overwriteCheckbox = document.getElementById("overwrite-checkbox") as Checkbox;

verboseDropdown = document.getElementById("verbosity-dropdown") as Dropdown;
initCreateButton = document.getElementById("create-button") as Button;
initClearButton = document.getElementById("clear-button") as Button;

initLogsTextArea = document.getElementById("log-text-area") as TextArea;
initClearLogsButton = document.getElementById("clear-logs-button") as Button;
pluginNameTextField = document.getElementById(
"plugin-name",
) as VscodeTextfield;
pluginTypeDropdown = document.getElementById(
"plugin-dropdown",
) as VscodeSingleSelect;

collectionPathUrlTextField = document.getElementById(
"path-url",
) as VscodeTextfield;
folderExplorerIcon = document.getElementById("folder-explorer") as VscodeIcon;

overwriteCheckbox = document.getElementById(
"overwrite-checkbox",
) as VscodeCheckbox;

verboseDropdown = document.getElementById(
"verbosity-dropdown",
) as VscodeSingleSelect;
initCreateButton = document.getElementById("create-button") as VscodeButton;
initClearButton = document.getElementById("clear-button") as VscodeButton;

initLogsTextArea = document.getElementById("log-text-area") as VscodeTextarea;
initClearLogsButton = document.getElementById(
"clear-logs-button",
) as VscodeButton;
initOpenScaffoldedFolderButton = document.getElementById(
"open-folder-button",
) as Button;
) as VscodeButton;

pluginNameTextField.addEventListener("input", toggleCreateButton);
collectionPathUrlTextField.addEventListener("input", toggleCreateButton);

folderExplorerButton.addEventListener("click", openExplorer);
folderExplorerIcon.addEventListener("click", openExplorer);

initCreateButton.addEventListener("click", handleInitCreateClick);
initCreateButton.disabled = true;
Expand All @@ -80,12 +90,13 @@ function main() {
initCollectionPathDiv = document.getElementById("full-collection-path");

initCollectionPathElement = document.createElement("p");
initCollectionPathElement.innerHTML = collectionPathUrlTextField.placeholder;
initCollectionPathElement.innerHTML =
collectionPathUrlTextField.placeholder as string;
initCollectionPathDiv?.appendChild(initCollectionPathElement);
}

function openExplorer(event: any) {
const source = event.target.parentNode.id;
const source = event.target.id;

let selectOption;

Expand Down Expand Up @@ -123,13 +134,14 @@ function openExplorer(event: any) {

function handleInitClearClick() {
pluginNameTextField.value = "";
pluginTypeDropdown.currentValue = "filter";
pluginTypeDropdown.value = "filter";
collectionPathUrlTextField.value = "";

initCollectionPathElement.innerHTML = collectionPathUrlTextField.placeholder;
initCollectionPathElement.innerHTML =
collectionPathUrlTextField.placeholder as string;

overwriteCheckbox.checked = false;
verboseDropdown.currentValue = "Off";
verboseDropdown.value = "Off";

initCreateButton.disabled = true;
}
Expand All @@ -139,11 +151,11 @@ function toggleCreateButton() {
if (!collectionPathUrlTextField.value.trim()) {
initCollectionPathElement.innerHTML = `${
collectionPathUrlTextField.placeholder
}/plugins/${pluginTypeDropdown.currentValue.trim()}/${pluginNameTextField.value.trim()}`;
}/plugins/${pluginTypeDropdown.value.trim()}/${pluginNameTextField.value.trim()}`;

if (!pluginNameTextField.value.trim()) {
initCollectionPathElement.innerHTML =
collectionPathUrlTextField.placeholder;
collectionPathUrlTextField.placeholder as string;
}
} else {
initCollectionPathElement.innerHTML =
Expand All @@ -164,9 +176,9 @@ function handleInitCreateClick() {
command: "init-create",
payload: {
pluginName: pluginNameTextField.value.trim(),
pluginType: pluginTypeDropdown.currentValue.trim(),
pluginType: pluginTypeDropdown.value.trim(),
collectionPath: collectionPathUrlTextField.value.trim(),
verbosity: verboseDropdown.currentValue.trim(),
verbosity: verboseDropdown.value.trim(),
isOverwritten: overwriteCheckbox.checked,
} as PluginFormInterface,
});
Expand Down
Loading

0 comments on commit a487d3c

Please sign in to comment.