Add a webview to scaffold plugins through creator add subcommand (#1729)

* Add a webview to scaffold plugins through creator add subcommand

* Add addPluginPageApp.ts entry in codecov.yml file

* logs cleanup

* no need of force and ANSIBLE_CREATOR_VERSION_MIN

* try setting NODE_OPTIONS in ci.yaml

* try setting NODE_OPTIONS in taskfile

* Add NODE_OPTIONS env var in the package step

* Fix linting errors and sort quicklintViews for add section

* Test improvements in contentCreatorUiTest for plugin webview testing

* remove NODE_OPTIONS from where that's not needed

---------

Co-authored-by: Alison Hart <[email protected]>

.sonarcloud.properties

@@ -5,4 +5,6 @@ sonar.cpd.exclusions=\
     src/webview/apps/contentCreator/createSampleExecutionEnvPageApp.ts, \
     src/features/contentCreator/createDevcontainerPage.ts, \
     src/webview/apps/contentCreator/createDevcontainerPageApp.ts, \
+    src/features/contentCreator/addPluginPage.ts, \
+    src/webview/apps/contentCreator/addPluginPageApp.ts, \
     test/ui-test/*.ts

.vscodeignore

@@ -26,6 +26,7 @@
 !media/contentCreator/createDevfilePageStyle.css
 !media/contentCreator/createSampleExecutionEnvPageStyle.css
 !media/contentCreator/createDevcontainerPageStyle.css
+!media/contentCreator/addPluginPageStyle.css
 !media/contentCreator/welcomePageStyle.css
 !media/lightspeedExplorerView/style.css
 !media/quickLinks/lightspeed.png
@@ -48,6 +49,7 @@
 !out/client/webview/apps/contentCreator/createDevfilePageApp.js
 !out/client/webview/apps/contentCreator/createSampleExecutionEnvPageApp.js
 !out/client/webview/apps/contentCreator/createDevcontainerPageApp.js
+!out/client/webview/apps/contentCreator/addPluginPageApp.js
 !out/client/webview/apps/quickLinks/quickLinksApp.js
 !out/client/webview/apps/welcomePage/welcomePageApp.js
 !out/server/src/server.js

codecov.yml

@@ -21,5 +21,6 @@ ignore:
   - src/webview/apps/contentCreator/createDevfilePageApp.ts
   - src/webview/apps/contentCreator/createSampleExecutionEnvPageApp.ts
   - src/webview/apps/contentCreator/createDevcontainerPageApp.ts
+  - src/webview/apps/contentCreator/addPluginPageApp.ts
   - src/webview/apps/welcomePage/welcomePageApp.ts
   - src/webview/apps/quickLinks/quickLinksApp.ts

media/contentCreator/addPluginPageStyle.css

@@ -0,0 +1,111 @@
+@import url(../baseStyles/baseFormStyle.css);
+
+.container {
+    display: flex;
+    flex-direction: column;
+}
+
+.element {
+    margin-bottom: 14px;
+}
+
+vscode-text-field {
+    margin-top: 6px;
+    margin-bottom: 6px;
+}
+
+vscode-text-area {
+    margin-top: 6px;
+    margin-bottom: 6px;
+}
+
+.plugin-name-div {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#plugin-name {
+    width:49%;
+    display:inline-block;
+}
+
+.plugin-type-div {
+    display: flex; /* Use flexbox */
+    flex-direction: row; /* Arrange child elements vertically */
+    margin-top: 12px;
+    margin-bottom: 30px;
+    width: 100%;
+}
+
+.checkbox-div {
+    display: flex; /* Use flexbox */
+    flex-direction: column; /* Arrange child elements vertically */
+    margin-top: 22px;
+    margin-bottom: 10px;
+    width: 100%;
+}
+
+.verbose-div {
+    display: flex; /* Use flexbox */
+    flex-direction: row; /* Arrange child elements vertically */
+    margin-top: 12px;
+    margin-bottom: 30px;
+    width: 100%;
+}
+
+vscode-dropdown {
+    width: 200px;
+}
+
+.full-collection-path {
+    display: flex; /* Use flexbox */
+    flex-direction: row; /* Arrange child elements vertically */
+    color: var(--vscode-descriptionForeground);
+}
+
+.required-fields {
+    margin-top: 10px;
+    color: var(--vscode-descriptionForeground);
+}
+
+.group-buttons {
+    display: flex; /* Use flexbox */
+    flex-direction: row; /* Arrange child elements vertically */
+}
+
+.p-collection-name {
+    font-style: italic;
+}
+
+vscode-button {
+    margin: 0px 3px;
+}
+
+vscode-checkbox i {
+    color: var(--vscode-descriptionForeground);
+    font-size: small;
+}
+
+#ade-docs-link {
+    margin-left: 30px;
+    font-style: italic;
+}
+
+.dropdown-container {
+    box-sizing: border-box;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: flex-start;
+    justify-content: flex-start;
+}
+
+.dropdown-container label {
+    display: block;
+    color: var(--vscode-foreground);
+    cursor: pointer;
+    font-size: var(--vscode-font-size);
+    line-height: normal;
+    margin-bottom: 2px;
+}

package.json

@@ -358,6 +358,10 @@
         "command": "ansible.content-creator.create-devcontainer",
         "title": "Ansible: Create a Devcontainer"
       },
+      {
+        "command": "ansible.content-creator.add-plugin",
+        "title": "Ansible: Add a Plugin"
+      },
       {
         "command": "ansible.content-creator.create",
         "title": "Ansible Content Creator: Create"

src/extension.ts

@@ -65,6 +65,7 @@ import { showPlaybookGenerationPage } from "./features/lightspeed/playbookGenera
 import { showRoleGenerationPage } from "./features/lightspeed/roleGeneration";
 import { ExecException, execSync } from "child_process";
 import { CreateAnsibleProject } from "./features/contentCreator/createAnsibleProjectPage";
+import { AddPlugin } from "./features/contentCreator/addPluginPage";
 // import { LightspeedExplorerWebviewViewProvider } from "./features/lightspeed/explorerWebviewViewProvider";
 import {
   LightspeedUser,
@@ -572,6 +573,16 @@ export async function activate(context: ExtensionContext): Promise<void> {
     ),
   );
 
+  // open web-view for adding a plugin in an ansible collection
+  context.subscriptions.push(
+    vscode.commands.registerCommand(
+      "ansible.content-creator.add-plugin",
+      () => {
+        AddPlugin.render(context.extensionUri);
+      },
+    ),
+  );
+
   // open ansible-creator create
   context.subscriptions.push(
     vscode.commands.registerCommand("ansible.content-creator.create", () => {