feat: adds webview build page

### What does this PR do? * Adds a webview build page * Uses the last deployed bootc build as the "previous selection" for the page * Added tests for the webview * Fixed current tests identified when adding new tsconfig ### Screenshot / video of UI  ### What issues does this PR fix or reference?  Closes #141 ### How to test this PR?  1. `yarn watch` in this extension directory 2. `cd podman-desktop` 3. `yarn watch --extension-folder ../bootc/packages/backend` 4. Press the bootc icon on the left that should be appear, and start a build via the shown webview. Signed-off-by: Charlie Drage <[email protected]>
podman-desktop · Mar 12, 2024 · 7e432af · 7e432af
1 parent 273e472
commit 7e432af
Show file tree

Hide file tree

Showing 39 changed files with 3,899 additions and 414 deletions.
diff --git a/Containerfile b/Containerfile
@@ -18,6 +18,7 @@
 FROM scratch as builder
 COPY packages/backend/dist/ /extension/dist
 COPY packages/backend/package.json /extension/
+COPY packages/backend/media/ /extension/media
 COPY LICENSE /extension/
 COPY packages/backend/icon-dark.png /extension/
 COPY packages/backend/icon-light.png /extension/

diff --git a/packages/backend/src/api-impl.ts b/packages/backend/src/api-impl.ts
@@ -0,0 +1,76 @@
+/**********************************************************************
+ * Copyright (C) 2024 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+import * as podmanDesktopApi from '@podman-desktop/api';
+import type { ImageInfo } from '@podman-desktop/api';
+import type { BootcApi } from '@shared/src/BootcAPI';
+import type { BootcBuildInfo } from '@shared/src/models/bootc';
+import { buildDiskImage } from './build-disk-image';
+import { History } from './history';
+
+export class BootcApiImpl implements BootcApi {
+  private history: History;
+
+  constructor(private readonly extensionContext: podmanDesktopApi.ExtensionContext) {
+    this.history = new History(extensionContext.storagePath);
+  }
+
+  async buildImage(build: BootcBuildInfo): Promise<void> {
+    return buildDiskImage(build, this.history);
+  }
+
+  async selectOutputFolder(): Promise<string> {
+    const path = await podmanDesktopApi.window.showOpenDialog({
+      title: 'Select output folder',
+      selectors: ['openDirectory'],
+    });
+    if (path && path.length > 0) {
+      return path[0].fsPath;
+    }
+    return '';
+  }
+
+  async listBootcImages(): Promise<ImageInfo[]> {
+    let images: ImageInfo[] = [];
+    try {
+      const retrieveImages = await podmanDesktopApi.containerEngine.listImages();
+      images = retrieveImages.filter(image => {
+        if (image.Labels) {
+          return image.Labels['bootc'] ?? image.Labels['containers.bootc'];
+        }
+      });
+    } catch (err) {
+      await podmanDesktopApi.window.showErrorMessage(`Error listing images: ${err}`);
+      console.error('Error listing images: ', err);
+    }
+    return images;
+  }
+
+  async listHistoryInfo(): Promise<BootcBuildInfo[]> {
+    try {
+      // Load the file so it retrieves the latest information.
+      await this.history.loadFile();
+    } catch (err) {
+      await podmanDesktopApi.window.showErrorMessage(
+        `Error loading history from ${this.extensionContext.storagePath}, error: ${err}`,
+      );
+      console.error('Error loading history: ', err);
+    }
+    return this.history.getHistory();
+  }
+}
diff --git a/packages/backend/src/build-disk-image.spec.ts b/packages/backend/src/build-disk-image.spec.ts
@@ -49,7 +49,10 @@ test('check image builder options', async () => {
   expect(options).toBeDefined();
   expect(options.name).toEqual(name);
   expect(options.Image).toEqual(bootcImageBuilderName);
-  expect(options.HostConfig.Binds[0]).toEqual(outputFolder + ':/output/');
+  expect(options.HostConfig).toBeDefined();
+  if (options.HostConfig?.Binds) {
+    expect(options.HostConfig.Binds[0]).toEqual(outputFolder + ':/output/');
+  }
   expect(options.Cmd).toEqual([image, '--type', type, '--target-arch', arch, '--output', '/output/']);
 });
 

diff --git a/packages/backend/src/container-utils.ts b/packages/backend/src/container-utils.ts
@@ -198,7 +198,7 @@ async function getVolumesMatchingContainer(engineId: string, container: string):
     // Go through each volume and only retrieve the ones that match our container
     // "Names" in the API weirdly has `/` appended to the beginning of the name due to how it models the podman API
     // so we have to make sure / is appended to the container name for comparison..
-    let volumeNames = [];
+    let volumeNames: string[] = [];
     volumes.Volumes.forEach(v => {
       v.containersUsage.forEach(c => {
         c.names.forEach(n => {
@@ -227,7 +227,7 @@ export async function removeContainerAndVolumes(engineId: string, container: str
 
     // If we are unable to get the containers, we should still try to delete the container, so we ignore the error
     // and just log the error.
-    let volumeNames = [];
+    let volumeNames: string[] = [];
     try {
       volumeNames = await getVolumesMatchingContainer(engineId, container);
       console.log('Matching volumes: ', volumeNames);

diff --git a/packages/backend/src/extension.spec.ts b/packages/backend/src/extension.spec.ts
@@ -21,6 +21,7 @@
 import { afterEach, beforeEach, expect, test, vi } from 'vitest';
 import type * as podmanDesktopApi from '@podman-desktop/api';
 import { activate, deactivate } from './extension';
+import * as fs from 'node:fs';
 
 /// mock console.log
 const originalConsoleLog = console.log;
@@ -34,6 +35,19 @@ vi.mock('@podman-desktop/api', async () => {
     commands: {
       registerCommand: vi.fn(),
     },
+    Uri: class {
+      static joinPath = () => ({ fsPath: '.' });
+    },
+    window: {
+      createWebviewPanel: () => ({
+        webview: {
+          html: '',
+          onDidReceiveMessage: vi.fn(),
+          postMessage: vi.fn(),
+        },
+        onDidChangeViewState: vi.fn(),
+      }),
+    },
   };
 });
 
@@ -52,7 +66,9 @@ test('check activate', async () => {
       push: vi.fn(),
     },
   } as unknown as podmanDesktopApi.ExtensionContext;
-
+  vi.spyOn(fs.promises, 'readFile').mockImplementation(() => {
+    return Promise.resolve('<html></html>');
+  });
   await activate(fakeContext);
 
   expect(consoleLogMock).toBeCalledWith('starting bootc extension');

diff --git a/packages/backend/src/extension.ts b/packages/backend/src/extension.ts
@@ -21,7 +21,11 @@ import * as extensionApi from '@podman-desktop/api';
 import { launchVFKit } from './launch-vfkit';
 import { buildDiskImage } from './build-disk-image';
 import { History } from './history';
+import fs from 'node:fs';
 import { bootcBuildOptionSelection } from './quickpicks';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { RpcExtension } from '@shared/src/messages/MessageProxy';
+import { BootcApiImpl } from './api-impl';
 
 export async function activate(extensionContext: ExtensionContext): Promise<void> {
   console.log('starting bootc extension');
@@ -35,19 +39,66 @@ export async function activate(extensionContext: ExtensionContext): Promise<void
     }),
     extensionApi.commands.registerCommand('bootc.image.build', async image => {
       const selections = await bootcBuildOptionSelection(history);
-      await buildDiskImage(
-        {
-          name: image.name,
-          tag: image.tag,
-          engineId: image.engineId,
-          type: selections.type,
-          folder: selections.folder,
-          arch: selections.arch,
-        },
-        history,
-      );
+      if (selections) {
+        await buildDiskImage(
+          {
+            name: image.name,
+            tag: image.tag,
+            engineId: image.engineId,
+            type: selections.type,
+            folder: selections.folder,
+            arch: selections.arch,
+          },
+          history,
+        );
+      }
     }),
   );
+
+  const panel = extensionApi.window.createWebviewPanel('bootc', 'Bootc', {
+    localResourceRoots: [extensionApi.Uri.joinPath(extensionContext.extensionUri, 'media')],
+  });
+
+  const indexHtmlUri = extensionApi.Uri.joinPath(extensionContext.extensionUri, 'media', 'index.html');
+  const indexHtmlPath = indexHtmlUri.fsPath;
+  let indexHtml = await fs.promises.readFile(indexHtmlPath, 'utf8');
+
+  // replace links with webView Uri links
+  // in the content <script type="module" crossorigin src="./index-RKnfBG18.js"></script> replace src with webview.asWebviewUri
+  const scriptLink = indexHtml.match(/<script.*?src="(.*?)".*?>/g);
+  if (scriptLink) {
+    scriptLink.forEach(link => {
+      const src = link.match(/src="(.*?)"/);
+      if (src) {
+        const webviewSrc = panel.webview.asWebviewUri(
+          extensionApi.Uri.joinPath(extensionContext.extensionUri, 'media', src[1]),
+        );
+        indexHtml = indexHtml.replace(src[1], webviewSrc.toString());
+      }
+    });
+  }
+
+  // and now replace for css file as well
+  const cssLink = indexHtml.match(/<link.*?href="(.*?)".*?>/g);
+  if (cssLink) {
+    cssLink.forEach(link => {
+      const href = link.match(/href="(.*?)"/);
+      if (href) {
+        const webviewHref = panel.webview.asWebviewUri(
+          extensionApi.Uri.joinPath(extensionContext.extensionUri, 'media', href[1]),
+        );
+        indexHtml = indexHtml.replace(href[1], webviewHref.toString());
+      }
+    });
+  }
+
+  // Update the html
+  panel.webview.html = indexHtml;
+
+  // Register the 'api' for the webview to communicate to the backend
+  const rpcExtension = new RpcExtension(panel.webview);
+  const bootcApi = new BootcApiImpl(extensionContext);
+  rpcExtension.registerInstance<BootcApiImpl>(BootcApiImpl, bootcApi);
 }
 
 export async function deactivate(): Promise<void> {

diff --git a/packages/frontend/.eslintignore b/packages/frontend/.eslintignore
@@ -0,0 +1,4 @@
+build
+*.config.js
+__mocks__
+coverage
diff --git a/packages/frontend/.eslintrc.json b/packages/frontend/.eslintrc.json
@@ -0,0 +1,13 @@
+{
+  "env": {
+    "browser": true,
+    "node": false
+  },
+  "extends": ["../../.eslintrc.json"],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-floating-promises": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "no-undef": "off"
+  }
+}
diff --git a/packages/frontend/index.html b/packages/frontend/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0" />
+    <title>BootC Extension</title>
+  </head>
+  <body class="overflow-auto text-white">
+    <div id="app"></div>
+    <script type="module" src="./src/main.ts"></script>
+  </body>
+</html>
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -0,0 +1,58 @@
+{
+  "name": "frontend",
+  "displayName": "frontend UI",
+  "description": "Frontend UI for the bootc extension",
+  "version": "0.4.0-next",
+  "type": "module",
+  "scripts": {
+    "preview": "vite preview",
+    "build": "vite build",
+    "test": "vitest run --coverage",
+    "test:watch": "vitest watch --coverage",
+    "format:check": "prettier --check \"src/**/*.ts\"",
+    "format:fix": "prettier --write \"src/**/*.{ts,svelte}\"",
+    "lint:check": "eslint . --ext js,ts,tsx",
+    "lint:fix": "eslint . --fix --ext js,ts,tsx",
+    "watch": "vite --mode development build -w"
+  },
+  "dependencies": {
+    "@podman-desktop/ui-svelte": "^0.0.202402292013-ac00cea0d",
+    "svelte-preprocess": "^5.1.3",
+    "tinro": "^0.6.12"
+  },
+  "devDependencies": {
+    "@fortawesome/fontawesome-free": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@podman-desktop/api": "^0.0.202402080712-0f5d4ce",
+    "@podman-desktop/ui-svelte": "^0.0.202402292013-ac00cea0d",
+    "@sveltejs/vite-plugin-svelte": "3.0.1",
+    "@tailwindcss/typography": "^0.5.10",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.2.0",
+    "@testing-library/svelte": "^4.0.5",
+    "@testing-library/user-event": "^14.5.1",
+    "@tsconfig/svelte": "^5.0.2",
+    "@types/humanize-duration": "^3.27.4",
+    "@types/node": "^20.11.17",
+    "@typescript-eslint/eslint-plugin": "6.15.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "autoprefixer": "^10.4.17",
+    "filesize": "^10.1.0",
+    "humanize-duration": "^3.31.0",
+    "jsdom": "^23.2.0",
+    "moment": "^2.30.1",
+    "postcss": "^8.4.35",
+    "postcss-load-config": "^5.0.2",
+    "prettier": "^3.1.1",
+    "prettier-plugin-svelte": "^3.1.2",
+    "svelte": "4.2.8",
+    "svelte-fa": "^3.0.4",
+    "svelte-markdown": "^0.4.1",
+    "svelte-preprocess": "^5.1.3",
+    "tailwindcss": "^3.4.1",
+    "vite": "^5.1.1",
+    "vitest": "^1.1.0"
+  }
+}
diff --git a/packages/frontend/postcss.config.cjs b/packages/frontend/postcss.config.cjs
@@ -0,0 +1,25 @@
+/**********************************************************************
+ * Copyright (C) 2024 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    'postcss-import': {},
+    autoprefixer: {},
+  },
+};
diff --git a/packages/frontend/src/App.svelte b/packages/frontend/src/App.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+import './app.css';
+import '@fortawesome/fontawesome-free/css/all.min.css';
+import { router } from 'tinro';
+import Route from './lib/Route.svelte';
+import Build from './Build.svelte';
+import { onMount } from 'svelte';
+import { getRouterState } from './api/client';
+
+router.mode.hash();
+
+let isMounted = false;
+
+onMount(() => {
+  // Load router state on application startup
+  const state = getRouterState();
+  router.goto(state.url);
+  isMounted = true;
+});
+</script>
+
+<Route path="/*" breadcrumb="Home" isAppMounted="{isMounted}" let:meta>
+  <main class="flex flex-col w-screen h-screen overflow-hidden bg-charcoal-700">
+    <div class="flex flex-row w-full h-full overflow-hidden">
+      <Route path="/" breadcrumb="Build">
+        <Build />
+      </Route>
+    </div>
+  </main>
+</Route>