feat: form page / webview component for bootc

### What does this PR do?

Our first ever form page!

This is a massive PR / "initiliazation" PR to get our form page started.

It includes some basic features and a working, functional form page
that:

* Checks what images are available / listed and filters out non-bootc
  ones
* Submit it and have it running in the background

There are also some significant architectural changes:
* Shared / frontend / backend folders that demonstrate each section of
  the extension, in order to do cross-communication between the webview
  and backend
* Refactoring of the "quickpick" so it is now separate from the other
  functionalities of the extension and is still useable. It is now in a
  separate function that just gets the users input from quickpick

To note:

* There may be some validation that is still needed / to test / try to
  "break" the form

### Screenshot / video of UI

<!-- If this PR is changing UI, please include
screenshots or screencasts showing the difference -->

### What issues does this PR fix or reference?

<!-- Include any related issues from Podman Desktop
repository (or from another issue tracker). -->

Closes #141

### How to test this PR?

<!-- Please explain steps to reproduce -->

1. `yarn watch` or `yarn build` in the extension folder
2. You MAY have to do `yarn install` or `yarn` in both the root folder,
   and `packages/frontend` and `packages/backend` for it to work
   correctly.
3. Go to the LATEST changes on the main branch of podman desktop, and
   run `yarn watch --extension-folder ../bootc/packages/backend`

Signed-off-by: Charlie Drage <[email protected]>

.dockerignore

@@ -0,0 +1 @@
+node_modules

.eslintignore

@@ -2,3 +2,4 @@ build
 *.config.js
 __mocks__
 coverage
+packages/backend/media/**

.eslintrc.json

@@ -19,7 +19,7 @@
     "ecmaVersion": 12,
     "sourceType": "module",
     "project": [
-      "./tsconfig.json"
+      "packages/*/tsconfig.json"
     ]
   },
   "settings": {
@@ -88,4 +88,4 @@
     "redundant-undefined/redundant-undefined": "error",
     "import/no-extraneous-dependencies": "error"
   }
-}
+}

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.github/workflows/pr-check.yaml

@@ -73,8 +73,8 @@ jobs:
         if: ${{ matrix.os=='ubuntu-22.04' || matrix.os=='macos-14' }}
         run: yarn format:check
 
-      - name: Run tests
-        run: yarn test
+      - name: Run unit tests
+        run: yarn test:unit
 
       - name: Run build
         run: yarn build

.gitignore

@@ -3,3 +3,4 @@ node_modules
 dist
 .eslintcache
 **/coverage
+.idea

.prettierrc

@@ -1,8 +1,12 @@
 {
+  "svelteSortOrder" : "options-styles-scripts-markup",
+  "svelteStrictMode": true,
+  "svelteAllowShorthand": false,
+  "svelteIndentScriptAndStyle": false,
   "bracketSameLine": true,
   "singleQuote": true,
   "arrowParens": "avoid",
   "printWidth": 120,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "plugins": ["prettier-plugin-svelte"]
 }
-

Containerfile

@@ -16,15 +16,17 @@
 # SPDX-License-Identifier: Apache-2.0
 
 FROM scratch as builder
-COPY dist/ /extension/dist
-COPY package.json /extension/
+COPY packages/backend/dist/ /extension/dist
+COPY packages/backend/package.json /extension/
+COPY packages/backend/media/ /extension/media
 COPY LICENSE /extension/
-COPY icon-dark.png /extension/
-COPY icon-light.png /extension/
-COPY bootable.woff2 /extension/
+COPY packages/backend/icon-dark.png /extension/
+COPY packages/backend/icon-light.png /extension/
+COPY packages/backend/bootable.woff2 /extension/
 COPY README.md /extension/
 
 
+
 FROM scratch
 
 LABEL org.opencontainers.image.title="Bootable Container Extension" \

package.json

@@ -5,90 +5,54 @@
   "version": "0.4.0-next",
   "icon": "icon-dark.png",
   "publisher": "redhat",
-  "license": "Apache-2.0",
+  "private": true,
   "engines": {
-    "podman-desktop": "^1.6.0"
-  },
-  "main": "./dist/extension.js",
-  "contributes": {
-    "configuration": {},
-    "menus": {
-      "dashboard/image": [
-        {
-          "command": "bootc.image.build",
-          "title": "Build Disk Image",
-          "when": "ostree.bootable in imageLabelKeys || containers.bootc in imageLabelKeys"
-        }
-      ]
-    },
-    "commands": [
-      {
-        "command": "bootc.image.build",
-        "title": "Build bootable disk image"
-      }
-    ],
-    "icons": {
-      "bootable-icon": {
-        "description": "bootable container icon",
-        "default": {
-          "fontPath": "bootable.woff2",
-          "fontCharacter": "\\0041"
-        }
-      }
-    },
-    "views": {
-      "icons/containersList": [
-        {
-          "when": "bootc.image.builder in containerLabelKeys",
-          "icon": "${bootable-icon}"
-        }
-      ],
-      "icons/image": [
-        {
-          "when": "ostree.bootable in imageLabelKeys || containers.bootc in imageLabelKeys",
-          "icon": "${bootable-icon}"
-        }
-      ],
-      "badges/image": [
-        {
-          "when": "ostree.bootable in imageLabelKeys || containers.bootc in imageLabelKeys",
-          "badge": {
-            "label": "bootc",
-            "color": {
-              "dark": "bg-sky-300",
-              "light": "bg-sky-300"
-            }
-          }
-        }
-      ]
-    }
+    "node": ">=18.12.0",
+    "npm": ">=8.19.2"
   },
   "scripts": {
-    "build": "vite build",
-    "test": "vitest run --coverage",
-    "test:watch": "vitest watch --coverage",
-    "format:check": "prettier --check \"src/**/*.ts\"",
-    "format:fix": "prettier --write \"src/**/*.ts\"",
-    "lint:check": "eslint . --ext js,ts,tsx",
-    "lint:fix": "eslint . --fix --ext js,ts,tsx",
-    "watch": "vite build -w"
+    "build": "concurrently \"yarn --cwd packages/frontend build\" \"yarn --cwd packages/backend build\"",
+    "watch": "concurrently \"yarn --cwd packages/frontend watch\" \"yarn --cwd packages/backend watch\"",
+    "format:check": "prettier --check \"**/src/**/*.{ts,svelte}\"",
+    "format:fix": "prettier --write \"**/src/**/*.{ts,svelte}\"",
+    "lint:check": "concurrently \"yarn --cwd packages/frontend lint:check\" \"yarn --cwd packages/backend lint:check\"",
+    "lint:fix": "concurrently \"yarn --cwd packages/frontend lint:fix\" \"yarn --cwd packages/backend lint:fix\"",
+    "test:backend": "vitest run -r packages/backend --passWithNoTests --coverage",
+    "test:frontend": "vitest run -r packages/frontend --passWithNoTests --coverage",
+    "test:shared": "vitest run -r packages/shared --passWithNoTests --coverage",
+    "test:unit": "npm run test:backend && npm run test:shared && npm run test:frontend",
+    "typecheck:shared": "tsc --noEmit --project packages/shared",
+    "typecheck:frontend": "tsc --noEmit --project packages/frontend",
+    "typecheck:backend": "tsc --noEmit --project packages/backend",
+    "typecheck": "npm run typecheck:shared && npm run typecheck:frontend && npm run typecheck:backend"
   },
   "devDependencies": {
-    "@podman-desktop/api": "^1.7.0",
-    "@typescript-eslint/eslint-plugin": "^6.16.0",
-    "@typescript-eslint/parser": "^6.16.0",
-    "@vitest/coverage-v8": "^1.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vitest/coverage-v8": "^1.2.2",
+    "autoprefixer": "^10.4.17",
+    "concurrently": "^8.2.2",
     "eslint": "^8.56.0",
     "eslint-import-resolver-custom-alias": "^1.3.2",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-etc": "^2.0.3",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-no-null": "^1.0.2",
     "eslint-plugin-redundant-undefined": "^1.0.0",
-    "eslint-plugin-sonarjs": "^0.23.0",
-    "prettier": "^3.1.1",
+    "eslint-plugin-sonarjs": "^0.24.0",
+    "prettier": "^3.2.5",
+    "prettier-plugin-svelte": "^3.2.1",
     "typescript": "5.3.3",
-    "vite": "^5.0.10",
+    "vite": "^5.1.3",
     "vitest": "^1.1.0"
+  },
+  "workspaces": {
+    "packages": [
+      "packages/*"
+    ]
+  },
+  "dependencies": {
+    "js-yaml": "^4.1.0",
+    "simple-git": "^3.22.0"
   }
 }

packages/backend/.editorconfig

@@ -0,0 +1,18 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# https://github.com/jokeyrhyme/standard-editorconfig
+
+# top-most EditorConfig file
+root = true
+
+# defaults
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_size = 2
+indent_style = space
+
+[*.md]
+trim_trailing_whitespace = false

packages/backend/.eslintignore

@@ -0,0 +1,5 @@
+build
+*.config.js
+__mocks__
+coverage
+media/

packages/backend/.eslintrc.json

@@ -0,0 +1,91 @@
+{
+  "root": true,
+  "env": {
+    "es2021": true,
+    "node": true,
+    "browser": false
+  },
+  "extends": [
+    "eslint:recommended",
+    /** @see https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#recommended-configs */
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "plugin:etc/recommended",
+    "plugin:sonarjs/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module",
+    "project": [
+      "./tsconfig.json"
+    ]
+  },
+  "settings": {
+    "import/resolver": {
+      "typescript": true,
+      "node": true,
+      "eslint-import-resolver-custom-alias": {
+        "alias": {
+          "/@": "./src",
+          "/@gen": "./src-generated"
+        },
+        "extensions": [".ts"],
+        "packages": ["packages/*"]
+      }
+    }
+  },
+  "ignorePatterns": [
+    "node_modules/**",
+    "**/dist/**"
+  ],
+  "plugins": ["@typescript-eslint", "sonarjs", "etc", "redundant-undefined", "no-null"],
+  "rules": {
+    "eqeqeq": "error",
+    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/consistent-type-imports": "error",
+    "@typescript-eslint/no-explicit-any": "error",
+    "prefer-promise-reject-errors": "error",
+    "@typescript-eslint/await-thenable": "error",
+    "@typescript-eslint/no-floating-promises": "error",
+    "@typescript-eslint/no-misused-promises": "error",
+    "@typescript-eslint/prefer-optional-chain": "error",
+    "no-null/no-null": "error",
+
+  /**
+   * Having a semicolon helps the optimizer interpret your code correctly.
+   * This avoids rare errors in optimized code.
+   * @see https://twitter.com/alex_kozack/status/1364210394328408066
+   */
+    "semi": [
+      "error",
+      "always"
+    ],
+    /**
+     * This will make the history of changes in the hit a little cleaner
+     */
+    "comma-dangle": [
+      "warn",
+      "always-multiline"
+    ],
+    /**
+     * Just for beauty
+     */
+    "quotes": ["error", "single", { "allowTemplateLiterals": true }],
+    "import/no-duplicates": "error",
+    "import/no-unresolved": "off",
+    "import/default": "off",
+    "import/no-named-as-default-member": "off",
+    "import/no-named-as-default": "off",
+    "sonarjs/cognitive-complexity": "off",
+    "sonarjs/no-duplicate-string": "off",
+    "sonarjs/no-empty-collection": "off",
+    "sonarjs/no-small-switch": "off",
+    "etc/no-commented-out-code": "error",
+    "etc/no-deprecated": "off",
+    "redundant-undefined/redundant-undefined": "error",
+    "import/no-extraneous-dependencies": "error"
+  }
+}

packages/backend/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+.DS_Store
+dist
+.eslintcache
+**/coverage
+media

packages/backend/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "bracketSameLine": true,
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "printWidth": 120,
+  "trailingComma": "all"
+}
+

packages/backend/.yarnrc

@@ -0,0 +1 @@
+ignore-engines true