Image Checker UI (podman-desktop#4859)

* feat: image checker ui Signed-off-by: Philippe Martin <[email protected]> * test: unit tests Signed-off-by: Philippe Martin <[email protected]> * feat: fake extension Signed-off-by: Philippe Martin <[email protected]> * fix: apply suggestions from code review Co-authored-by: Florent BENOIT <[email protected]> Signed-off-by: Philippe Martin <[email protected]> Signed-off-by: Philippe Martin <[email protected]> * fix: display error when provider fails Signed-off-by: Philippe Martin <[email protected]> Signed-off-by: Philippe Martin <[email protected]> * chore: add telemetry Signed-off-by: Philippe Martin <[email protected]> Signed-off-by: Philippe Martin <[email protected]> * fix: abort checks when user leaves the tab Signed-off-by: Philippe Martin <[email protected]> Signed-off-by: Philippe Martin <[email protected]> * fix: tests Signed-off-by: Philippe Martin <[email protected]> Signed-off-by: Philippe Martin <[email protected]> * fix: image-checker-provider-remove and consts Signed-off-by: Philippe Martin <[email protected]> Signed-off-by: Philippe Martin <[email protected]> * Revert "feat: fake extension" This reverts commit 69962c6. Signed-off-by: Philippe Martin <[email protected]> * fix: new design Signed-off-by: Philippe Martin <[email protected]> --------- Signed-off-by: Philippe Martin <[email protected]> Signed-off-by: Philippe Martin <[email protected]> Co-authored-by: Florent BENOIT <[email protected]>
feloy · Nov 24, 2023 · e9a83c2 · e9a83c2
1 parent f260c7c
commit e9a83c2
Show file tree

Hide file tree

Showing 7 changed files with 649 additions and 1 deletion.
diff --git a/packages/renderer/src/lib/image/ImageDetails.spec.ts b/packages/renderer/src/lib/image/ImageDetails.spec.ts
@@ -29,6 +29,7 @@ import { router } from 'tinro';
 import { lastPage } from '/@/stores/breadcrumb';
 import type { ContainerInfo } from '../../../../main/src/plugin/api/container-info';
 import { containersInfos } from '/@/stores/containers';
+import { imageCheckerProviders } from '/@/stores/image-checker-providers';
 
 const listImagesMock = vi.fn();
 const getContributedMenusMock = vi.fn();
@@ -203,3 +204,59 @@ describe('expect display usage of an image', () => {
     expect(usage).toBeInTheDocument();
   });
 });
+
+test('expect Check tab is not displayed by default', () => {
+  const imageID = '123456';
+  const engineId = 'podman';
+  const myImage = {
+    engineId,
+    Id: imageID,
+    Size: 0,
+  } as unknown as ImageInfo;
+  imagesInfos.set([myImage]);
+
+  hasAuthMock.mockImplementation(() => {
+    return new Promise(() => false);
+  });
+
+  render(ImageDetails, {
+    imageID,
+    engineId,
+    base64RepoTag: Buffer.from('<none>', 'binary').toString('base64'),
+  });
+  const summaryTab = screen.getByRole('link', { name: 'Summary' });
+  expect(summaryTab).toBeInTheDocument();
+  const checkTab = screen.queryByRole('link', { name: 'Check' });
+  expect(checkTab).not.toBeInTheDocument();
+});
+
+test('expect Check tab is displayed when an image checker provider exists', () => {
+  const imageID = '123456';
+  const engineId = 'podman';
+  const myImage = {
+    engineId,
+    Id: imageID,
+    Size: 0,
+  } as unknown as ImageInfo;
+  imagesInfos.set([myImage]);
+
+  hasAuthMock.mockImplementation(() => {
+    return new Promise(() => false);
+  });
+
+  imageCheckerProviders.set([
+    {
+      id: 'provider1',
+      label: 'Image Checker',
+    },
+  ]);
+  render(ImageDetails, {
+    imageID,
+    engineId,
+    base64RepoTag: Buffer.from('<none>', 'binary').toString('base64'),
+  });
+  const summaryTab = screen.getByRole('link', { name: 'Summary' });
+  expect(summaryTab).toBeInTheDocument();
+  const checkTab = screen.getByRole('link', { name: 'Check' });
+  expect(checkTab).toBeInTheDocument();
+});
diff --git a/packages/renderer/src/lib/image/ImageDetails.svelte b/packages/renderer/src/lib/image/ImageDetails.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { ImageInfoUI } from './ImageInfoUI';
 import Route from '../../Route.svelte';
-import { onMount } from 'svelte';
+import { onDestroy, onMount } from 'svelte';
 import { imagesInfos } from '../../stores/images';
 import ImageIcon from '../images/ImageIcon.svelte';
 import StatusIcon from '../images/StatusIcon.svelte';
@@ -15,6 +15,9 @@ import RenameImageModal from './RenameImageModal.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
 import Tab from '../ui/Tab.svelte';
 import { containersInfos } from '/@/stores/containers';
+import ImageDetailsCheck from './ImageDetailsCheck.svelte';
+import { imageCheckerProviders } from '/@/stores/image-checker-providers';
+import type { Unsubscriber } from 'svelte/motion';
 
 export let imageID: string;
 export let engineId: string;
@@ -38,7 +41,14 @@ function closeModals() {
 let image: ImageInfoUI;
 let detailsPage: DetailsPage;
 
+let showCheckTab: boolean = false;
+let providersUnsubscribe: Unsubscriber;
+
 onMount(() => {
+  providersUnsubscribe = imageCheckerProviders.subscribe(providers => {
+    showCheckTab = providers.length > 0;
+  });
+
   const imageUtils = new ImageUtils();
   // loading image info
   return imagesInfos.subscribe(images => {
@@ -55,6 +65,11 @@ onMount(() => {
     }
   });
 });
+
+onDestroy(() => {
+  // unsubscribe from the store
+  providersUnsubscribe?.();
+});
 </script>
 
 {#if image}
@@ -71,6 +86,9 @@ onMount(() => {
       <Tab title="Summary" url="summary" />
       <Tab title="History" url="history" />
       <Tab title="Inspect" url="inspect" />
+      {#if showCheckTab}
+        <Tab title="Check" url="check" />
+      {/if}
     </svelte:fragment>
     <svelte:fragment slot="content">
       <Route path="/summary" breadcrumb="Summary" navigationHint="tab">
@@ -82,6 +100,9 @@ onMount(() => {
       <Route path="/inspect" breadcrumb="Inspect" navigationHint="tab">
         <ImageDetailsInspect image="{image}" />
       </Route>
+      <Route path="/check" breadcrumb="Check" navigationHint="tab">
+        <ImageDetailsCheck image="{image}" />
+      </Route>
     </svelte:fragment>
   </DetailsPage>
 {/if}