Add a webview to generate a devfile without ansible-creator (#1681)

* Add a webview to generate a devfile without ansible-creator

.config/dictionary.txt

@@ -3,6 +3,8 @@ Ansible
 Anson
 CFLAGS
 Containerfile
+Devfile
+Devfiles
 Dockal
 Dpkg
 Elio
@@ -13,6 +15,7 @@ Ganesh
 HORIZONTALLINE
 IAM
 Jenkinsfile
+KUBEDOCK
 Launay
 Maciążek
 Nalawade

.pre-commit-config.yaml

@@ -14,6 +14,7 @@ ci:
     - codecov
     - depcheck
     - eslint
+    - compare-devfile
 exclude: >
   (?x)^(
     .config/requirements.in|
@@ -104,6 +105,12 @@ repos:
         language: system
         files: "codecov.yml"
         pass_filenames: false
+
+      - id: compare-devfile
+        name: Compare extension devfile with ansible-creator
+        entry: tools/compare_devfile.sh
+        language: script
+
   - repo: https://github.com/ScribeMD/pre-commit-hooks
     rev: 0.16.3
     hooks:

.vscodeignore

@@ -23,6 +23,7 @@
 !media/contentCreator/icons/ansible-logo-red.png
 !media/contentCreator/createAnsibleCollectionPageStyle.css
 !media/contentCreator/createAnsibleProjectPageStyle.css
+!media/contentCreator/createDevfilePageStyle.css
 !media/contentCreator/welcomePageStyle.css
 !media/lightspeedExplorerView/style.css
 !media/welcomePage/lightspeed.png
@@ -39,6 +40,7 @@
 !out/client/webview/apps/contentCreator/welcomePageApp.js
 !out/client/webview/apps/contentCreator/createAnsibleCollectionPageApp.js
 !out/client/webview/apps/contentCreator/createAnsibleProjectPageApp.js
+!out/client/webview/apps/contentCreator/createDevfilePageApp.js
 !out/client/webview/apps/quickLinks/quickLinksApp.js
 !out/server/src/server.js
 !package.json
@@ -73,3 +75,6 @@
 !media/walkthroughs/startAutomatingPlaybook/learning.png
 !media/walkthroughs/startAutomatingPlaybook/open-folder.png
 !media/walkthroughs/startAutomatingPlaybook/playbook-project.md
+
+# resources
+!resources/contentCreator/createDevfile/devfile-template.txt

media/baseStyles/baseFormStyle.css

@@ -18,6 +18,16 @@ body {
     margin: 25px 0px 50px;
 }
 
+.title-description-div {
+    box-sizing: border-box;
+    display: flex;
+    flex-flow: column nowrap;
+    width: 100%;
+    max-width: 650px;
+    text-align: left;
+    margin: 25px 0px 40px;
+}
+
 h1 {
     border: none;
     font-size: 2.7em;

media/contentCreator/createDevfilePageStyle.css

@@ -0,0 +1,131 @@
+@import url(../baseStyles/baseFormStyle.css);
+
+.container {
+    display: flex;
+    flex-direction: column;
+}
+
+.element {
+    margin-bottom: 14px;
+}
+
+h3 {
+    border: none;
+    font-size: 1.1em;
+    font-style: normal;
+    font-weight: normal;
+    margin: 0;
+    color: var(--vscode-foreground);
+    white-space: wrap;
+}
+
+.description-div {
+    box-sizing: border-box;
+    display: flex;
+    flex-flow: column nowrap;
+    width: 100%;
+    max-width: 650px;
+    text-align: left;
+    margin: 0px 0px 40px;
+}
+
+vscode-text-field {
+    margin-top: 6px;
+    margin-bottom: 6px;
+}
+
+vscode-text-area {
+    margin-top: 6px;
+    margin-bottom: 6px;
+}
+
+.devfile-name-div {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#devfile-name {
+    width:49%;
+    display:inline-block;
+}
+
+.checkbox-div {
+    display: flex; /* Use flexbox */
+    flex-direction: column; /* Arrange child elements vertically */
+    margin-top: 22px;
+    margin-bottom: 10px;
+    width: 100%;
+}
+
+.image-div {
+    display: flex; /* Use flexbox */
+    flex-direction: row; /* Arrange child elements vertically */
+    margin-top: 12px;
+    margin-bottom: 30px;
+    width: 100%;
+}
+
+vscode-dropdown {
+    width: 400px;
+}
+
+.full-devfile-path {
+    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 */
+}
+
+.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;
+}
+
+#log-to-file-options-div {
+    display: none;
+    flex-direction: column;
+    border-style: dotted;
+    border-color: var(--focus-border);
+    border-width: 0.5px;
+    padding: 8px;
+}
+
+.log-level-div {
+    margin: 4px 0px;
+}

package.json

@@ -346,6 +346,10 @@
         "command": "ansible.content-creator.create-ansible-project",
         "title": "Ansible: Create New Playbook Project"
       },
+      {
+        "command": "ansible.content-creator.create-devfile",
+        "title": "Ansible: Create a Devfile"
+      },
       {
         "command": "ansible.content-creator.create",
         "title": "Ansible Content Creator: Create"

resources/contentCreator/createDevfile/devfile-template.txt

@@ -0,0 +1,15 @@
+schemaVersion: 2.2.2
+metadata:
+  name: {{ dev_file_name }}
+components:
+  - name: tooling-container
+    container:
+      image: {{ dev_file_image }}
+      memoryRequest: 256M
+      memoryLimit: 6Gi
+      cpuRequest: 250m
+      cpuLimit: 2000m
+      args: ["tail", "-f", "/dev/null"]
+      env:
+        - name: KUBEDOCK_ENABLED
+          value: "true"

src/extension.ts

@@ -71,6 +71,7 @@ import {
   AuthProviderType,
 } from "./features/lightspeed/lightspeedUser";
 import { PlaybookFeedbackEvent } from "./interfaces/lightspeed";
+import { CreateDevfile } from "./features/contentCreator/createDevfilePage";
 
 export let client: LanguageClient;
 export let lightSpeedManager: LightSpeedManager;
@@ -539,6 +540,16 @@ export async function activate(context: ExtensionContext): Promise<void> {
     ),
   );
 
+  // open web-view for creating devfile
+  context.subscriptions.push(
+    vscode.commands.registerCommand(
+      "ansible.content-creator.create-devfile",
+      () => {
+        CreateDevfile.render(context.extensionUri);
+      },
+    ),
+  );
+
   // open ansible-creator create
   context.subscriptions.push(
     vscode.commands.registerCommand("ansible.content-creator.create", () => {