Add execution environment webview without ansible-creator command usi…

…ng vscode-elements
ansible · Jan 29, 2025 · 389fd83 · 389fd83
1 parent c588f4a
commit 389fd83
Show file tree

Hide file tree

Showing 8 changed files with 627 additions and 167 deletions.
diff --git a/.config/dictionary.txt b/.config/dictionary.txt
@@ -155,6 +155,7 @@ lssh
 lxml
 markdownlint
 maxlength
+microdnf
 mkdocs
 mocharc
 mochawesome
@@ -188,6 +189,7 @@ pgrep
 piptools
 pipx
 pkgcache
+PKGMGR
 pkill
 podman
 precheck

diff --git a/media/contentCreator/createSampleExecutionEnvPageStyle.css b/media/contentCreator/createSampleExecutionEnvPageStyle.css
@@ -3,51 +3,101 @@
 .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;
+}
+
 .checkbox-div {
-    display: flex; /* Use flexbox */
-    flex-direction: column; /* Arrange child elements vertically */
+    display: flex;
+    /* Use flexbox */
+    flex-direction: column;
+    /* Arrange child elements vertically */
     margin-top: 22px;
     margin-bottom: 10px;
     width: 100%;
 }
 
+.overwriteCheckbox-div {
+    display: flex;
+    /* Use flexbox */
+    flex-direction: column;
+    /* Arrange child elements vertically */
+    margin-top: 22px;
+    margin-bottom: 20px;
+    width: 100%;
+}
+
+.suggestedCollections-div {
+    display: flex;
+    /* Use flexbox */
+    flex-direction: column;
+    /* Arrange child elements vertically */
+    margin-top: 18px;
+    margin-bottom: 20px;
+    width: 100%;
+}
+
+.checkbox-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    /* Space between columns */
+    justify-content: flex-start;
+    /* Aligns the columns to the left */
+}
+
+#suggestedCollections-checkboxes {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 5px;
+    width: 100%;
+}
+
 .verbose-div {
-    display: flex; /* Use flexbox */
-    flex-direction: row; /* Arrange child elements vertically */
+    display: flex;
+    /* Use flexbox */
+    flex-direction: row;
+    /* Arrange child elements vertically */
     margin-top: 12px;
-    margin-bottom: 30px;
+    margin-bottom: 15px;
     width: 100%;
 }
 
-vscode-dropdown {
-    width: 200px;
+vscode-single-select {
+    width: 500px;
 }
 
 .full-destination-path {
-    display: flex; /* Use flexbox */
-    flex-direction: row; /* Arrange child elements vertically */
+    display: flex;
+    /* Use flexbox */
+    flex-direction: row;
+    /* Arrange child elements vertically */
     color: var(--vscode-descriptionForeground);
 }
 
 .group-buttons {
-    display: flex; /* Use flexbox */
-    flex-direction: row; /* Arrange child elements vertically */
+    display: flex;
+    /* Use flexbox */
+    flex-direction: row;
+    /* Arrange child elements vertically */
 }
 
 .p-collection-name {
@@ -61,6 +111,17 @@ vscode-button {
 vscode-checkbox i {
     color: var(--vscode-descriptionForeground);
     font-size: small;
+    width: 100%;
+}
+
+vscode-divider {
+    width: 100%;
+}
+
+#vscode-logs-label {
+    padding: 0;
+    align-self: flex-start;
+    margin-left: 5px;
 }
 
 #ade-docs-link {

diff --git a/package.json b/package.json
@@ -351,8 +351,8 @@
         "title": "Ansible: Create a Devfile"
       },
       {
-        "command": "ansible.content-creator.create-sample-execution-env-file",
-        "title": "Ansible: Create a Sample Execution Environment file"
+        "command": "ansible.content-creator.create-execution-env-file",
+        "title": "Ansible: Create an Execution Environment file"
       },
       {
         "command": "ansible.content-creator.create-devcontainer",
@@ -925,7 +925,9 @@
     "@types/ini": "^4.1.1",
     "@vscode-elements/elements": "^1.10.0",
     "@vscode/webview-ui-toolkit": "^1.4.0",
+    "ansi-regex": "^6.1.0",
     "ini": "^5.0.0",
+    "js-yaml": "^4.1.0",
     "marked": "^15.0.6",
     "minimatch": "^10.0.1",
     "semver": "^7.6.3",
@@ -940,6 +942,7 @@
     "@types/chai": "^4.3.20",
     "@types/express": "^5.0.0",
     "@types/glob": "^8.1.0",
+    "@types/js-yaml": "^4.0.9",
     "@types/jsdom": "^21.1.7",
     "@types/lodash": "^4.17.14",
     "@types/minimatch": "^5.1.2",

diff --git a/src/extension.ts b/src/extension.ts
@@ -556,7 +556,7 @@ export async function activate(context: ExtensionContext): Promise<void> {
   // open web-view for creating sample Execution Environment file
   context.subscriptions.push(
     vscode.commands.registerCommand(
-      "ansible.content-creator.create-sample-execution-env-file",
+      "ansible.content-creator.create-execution-env-file",
       () => {
         CreateSampleExecutionEnv.render(context.extensionUri);
       },