feat: image deletion

Adds the 'DELETING' state to images so that a spinner appears while they
are being deleted. Follows the identical pattern to pods, deployments, etc:
- Add new status.
- Set the status when deleting and fire an event.
- Propagate event through ColumnActions.
- List/Details trigger UI change.

Fixes #5474.

Signed-off-by: Tim deBoer <git@tdeboer.ca>

packages/renderer/src/lib/image/ImageActions.spec.ts

@@ -51,13 +51,15 @@ test('Expect showMessageBox to be called when error occurs', async () => {
   showMessageBoxMock.mockResolvedValue({ response: 0 });
   getContributedMenusMock.mockImplementation(() => Promise.resolve([]));
 
+  const image: ImageInfoUI = {
+    name: 'dummy',
+    status: 'UNUSED',
+  } as ImageInfoUI;
+
   render(ImageActions, {
     onPushImage: vi.fn(),
     onRenameImage: vi.fn(),
-    image: {
-      name: 'dummy',
-      status: 'UNUSED',
-    } as unknown as ImageInfoUI,
+    image,
   });
   const button = screen.getByTitle('Delete Image');
   expect(button).toBeDefined();
@@ -66,6 +68,8 @@ test('Expect showMessageBox to be called when error occurs', async () => {
   await waitFor(() => {
     expect(showMessageBoxMock).toHaveBeenCalledOnce();
   });
+
+  expect(image.status).toBe('DELETING');
 });
 
 test('Expect no dropdown when one contribution and dropdownMenu off', async () => {

packages/renderer/src/lib/image/ImageActions.svelte

@@ -7,7 +7,7 @@ import { runImageInfo } from '../../stores/run-image-store';
 import type { Menu } from '../../../../main/src/plugin/menu-registry';
 import ContributionActions from '/@/lib/actions/ContributionActions.svelte';
 import { ImageUtils } from './image-utils';
-import { onDestroy, onMount } from 'svelte';
+import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 import { MenuContext } from '../../../../main/src/plugin/menu-registry';
 import ActionsWrapper from './ActionsMenu.svelte';
 import type { Unsubscriber } from 'svelte/motion';
@@ -29,6 +29,8 @@ let globalContext: ContextUI;
 let contextsUnsubscribe: Unsubscriber;
 let groupingContributions = false;
 
+const dispatch = createEventDispatcher<{ update: ImageInfoUI }>();
+
 onMount(async () => {
   contributions = await window.getContributedMenus(MenuContext.DASHBOARD_IMAGE);
   groupingContributions = groupContributions && !dropdownMenu && contributions.length > 1;
@@ -60,6 +62,9 @@ async function runImage(imageInfo: ImageInfoUI) {
 $: window.hasAuthconfigForImage(image.name).then(result => (isAuthenticatedForThisImage = result));
 
 async function deleteImage(): Promise<void> {
+  image.status = 'DELETING';
+  dispatch('update', image);
+
   try {
     await imageUtils.deleteImage(image);
   } catch (error) {

packages/renderer/src/lib/image/ImageColumnActions.svelte

@@ -30,7 +30,8 @@ function closeModals() {
   image="{object}"
   onPushImage="{handlePushImageModal}"
   onRenameImage="{handleRenameImageModal}"
-  dropdownMenu="{true}" />
+  dropdownMenu="{true}"
+  on:update />
 
 {#if pushImageModal && pushImageModalImageInfo}
   <PushImageModal

packages/renderer/src/lib/image/ImageDetails.svelte

@@ -137,7 +137,8 @@ onDestroy(() => {
       onRenameImage="{handleRenameImageModal}"
       detailed="{true}"
       dropdownMenu="{false}"
-      groupContributions="{true}" />
+      groupContributions="{true}"
+      on:update="{() => (image = image)}" />
     <svelte:fragment slot="tabs">
       <Tab title="Summary" url="summary" />
       <Tab title="History" url="history" />

packages/renderer/src/lib/image/ImageInfoUI.ts

@@ -33,7 +33,7 @@ export interface ImageInfoUI {
   // no tag, we encode <none>
   base64RepoTag: string;
   selected: boolean;
-  status: 'USED' | 'UNUSED';
+  status: 'USED' | 'UNUSED' | 'DELETING';
   icon: any;
   labels?: { [label: string]: string };
   badges: ViewContributionBadgeValue[];

packages/renderer/src/lib/image/ImagesList.svelte

@@ -292,7 +292,8 @@ const row = new Row<ImageInfoUI>({
       data="{images}"
       columns="{columns}"
       row="{row}"
-      defaultSortColumn="Age">
+      defaultSortColumn="Age"
+      on:update="{() => (images = images)}">
     </Table>
 
     {#if providerConnections.length === 0}