feat: open webview from image action

Removes the quick pick command, and instead triggers opening the webview, switching to
the build page, and preselecting the image.

Signed-off-by: Tim deBoer <[email protected]>

packages/backend/src/extension.ts

@@ -18,45 +18,20 @@
 
 import type { ExtensionContext } from '@podman-desktop/api';
 import * as extensionApi from '@podman-desktop/api';
-import { buildDiskImage } from './build-disk-image';
 import { History } from './history';
 import fs from 'node:fs';
-import { bootcBuildOptionSelection } from './quickpicks';
 import { RpcExtension } from '/@shared/src/messages/MessageProxy';
 import { BootcApiImpl } from './api-impl';
 import { HistoryNotifier } from './history/historyNotifier';
-import type { BuildType } from '/@shared/src/models/bootc';
+import { Messages } from '/@shared/src/messages/Messages';
 
 export async function activate(extensionContext: ExtensionContext): Promise<void> {
   console.log('starting bootc extension');
 
   const history = new History(extensionContext.storagePath);
   await history.loadFile();
 
-  extensionContext.subscriptions.push(
-    extensionApi.commands.registerCommand('bootc.image.build', async image => {
-      const selections = await bootcBuildOptionSelection(history);
-      if (selections) {
-        // Get a unique name for the build
-        const name = await history.getUnusedHistoryName(image.name);
-
-        await buildDiskImage(
-          {
-            id: name,
-            image: image.name,
-            tag: image.tag,
-            engineId: image.engineId,
-            type: [selections.type as BuildType],
-            folder: selections.folder,
-            arch: selections.arch,
-          },
-          history,
-        );
-      }
-    }),
-  );
-
-  const panel = extensionApi.window.createWebviewPanel('bootc', 'Bootc', {
+  const panel = extensionApi.window.createWebviewPanel('bootc', 'Bootable Containers', {
     localResourceRoots: [extensionApi.Uri.joinPath(extensionContext.extensionUri, 'media')],
   });
   extensionContext.subscriptions.push(panel);
@@ -106,6 +81,37 @@ export async function activate(extensionContext: ExtensionContext): Promise<void
   // so the frontend can be notified when the history changes and so we can update the UI / call listHistoryInfo
   const historyNotifier = new HistoryNotifier(panel.webview, extensionContext.storagePath);
   extensionContext.subscriptions.push(historyNotifier);
+
+  extensionContext.subscriptions.push(
+    extensionApi.commands.registerCommand('bootc.image.build', async image => {
+      await openBuildPage(panel, image);
+    }),
+  );
+}
+
+export async function openBuildPage(panel: extensionApi.WebviewPanel, image: { name: string, tag: string}): Promise<void> {
+  console.log('Opening webview for ' + image.name);
+
+  // this should use webview reveal function in the future
+  const webviews = extensionApi.window.listWebviews();
+  const bootcWebView = (await webviews).find(webview => webview.viewType === 'bootc');
+
+  if (!bootcWebView) {
+    console.error('Could not find bootc webview');
+    return;
+  }
+
+  await extensionApi.navigation.navigateToWebview(bootcWebView.id);
+
+  // if we trigger immediately, the webview hasn't loaded yet and can't redirect
+  // if we trigger too slow, there's a visible flash as the homepage appears first
+  await new Promise(r => setTimeout(r, 100));
+
+  await panel.webview.postMessage({
+    id: Messages.MSG_NAVIGATE_BUILD,
+    // Must pass in an empty body to satisfy the type system. If it is undefined, this fails
+    body: encodeURIComponent(image.name) + '/' + encodeURIComponent(image.tag),
+  });
 }
 
 export async function deactivate(): Promise<void> {

packages/frontend/src/App.svelte

@@ -7,6 +7,8 @@ import Build from './Build.svelte';
 import { onMount } from 'svelte';
 import { getRouterState } from './api/client';
 import Homepage from './Homepage.svelte';
+import { rpcBrowser } from '/@/api/client';
+import { Messages } from '/@shared/src/messages/Messages';
 
 router.mode.hash();
 
@@ -17,6 +19,11 @@ onMount(() => {
   const state = getRouterState();
   router.goto(state.url);
   isMounted = true;
+
+  return rpcBrowser.subscribe(Messages.MSG_NAVIGATE_BUILD, (x: string) => {
+    console.log(`Navigating to /build/${x}`);
+    router.goto(`/build/${x}`);
+  });
 });
 </script>
 
@@ -29,6 +36,9 @@ onMount(() => {
       <Route path="/build" breadcrumb="Build">
         <Build />
       </Route>
+      <Route path="/build/:name/:tag" breadcrumb="Build" let:meta>
+        <Build imageName="{decodeURIComponent(meta.params.name)}" imageTag="{decodeURIComponent(meta.params.tag)}" />
+      </Route>
     </div>
   </main>
 </Route>

packages/frontend/src/Build.svelte

@@ -12,6 +12,9 @@ import { Input } from '@podman-desktop/ui-svelte';
 import EmptyScreen from './lib/upstream/EmptyScreen.svelte';
 import { router } from 'tinro';
 
+export let imageName: string | undefined = undefined;
+export let imageTag: string | undefined = undefined;
+
 // Image variables
 let selectedImage: ImageInfo;
 let buildImageName: string;
@@ -33,14 +36,27 @@ let errorFormValidation = '';
 // Function that will use listHistoryInfo, if there is anything in the list, pick the first one in the list (as it's the most recent)
 // and fill buildFolder, buildType and buildArch with the values from the selected image.
 async function fillBuildOptions() {
+  // Fill the build options from history
   const historyInfo = await bootcClient.listHistoryInfo();
   if (historyInfo.length > 0) {
     const latestBuild = historyInfo[0];
     buildFolder = latestBuild.folder;
     buildType = latestBuild.type;
     buildArch = latestBuild.arch;
+  }
 
-    // Find the image that matches the latest build's name and tag and set selectedImage to that value
+  // If an image name and tag were passed in, try to use it as the selected image
+  if (imageName && imageTag) {
+    console.log('Preselecting image: ' + imageName + ' ' + imageTag);
+    selectedImage = bootcAvailableImages.find(
+      image => image.RepoTags && image.RepoTags.length > 0 && image.RepoTags[0] === `${imageName}:${imageTag}`,
+    );
+  }
+
+  // If not, use the last image from history if it is valid
+  if (!selectedImage && historyInfo.length > 0) {
+    const latestBuild = historyInfo[0];
+    // Find the image that matches the latest build's name and tag
     selectedImage = bootcAvailableImages.find(
       image =>
         image.RepoTags && image.RepoTags.length > 0 && image.RepoTags[0] === `${latestBuild.image}:${latestBuild.tag}`,

packages/shared/src/messages/Messages.ts

@@ -19,4 +19,5 @@
 export enum Messages {
   MSG_HISTORY_UPDATE = 'history-update',
   MSG_IMAGE_PULL_UPDATE = 'image-pull-update', // Responsible for any pull updates
+  MSG_NAVIGATE_BUILD = 'navigate-build',
 }