From 307e79c5e8ecead0eac33bb6c83709407ee88b36 Mon Sep 17 00:00:00 2001
From: Denis Golovin <dgolovin@redhat.com>
Date: Thu, 7 Sep 2023 23:59:37 -0700
Subject: [PATCH] fix: remove image tag only not the image using id

This fix:
* switches to use name:tag to delete image
* run delete commands as a chain to avoid conflicts when
  deleting different tags of the same image

Fix #2673

Signed-off-by: Denis Golovin <dgolovin@redhat.com>
---
 packages/renderer/src/lib/ImagesList.svelte   | 21 +++++++------------
 .../src/lib/image/ImageActions.svelte         |  2 +-
 .../src/lib/image/ImageDetails.svelte         | 12 +++++------
 .../renderer/src/lib/image/image-utils.ts     |  8 ++-----
 4 files changed, 15 insertions(+), 28 deletions(-)

diff --git a/packages/renderer/src/lib/ImagesList.svelte b/packages/renderer/src/lib/ImagesList.svelte
index 0aa633ab5cba0..6703e2ee17db6 100644
--- a/packages/renderer/src/lib/ImagesList.svelte
+++ b/packages/renderer/src/lib/ImagesList.svelte
@@ -164,21 +164,14 @@ function toggleAllImages(checked: boolean) {
 // delete the items selected in the list
 let bulkDeleteInProgress = false;
 async function deleteSelectedImages() {
+  bulkDeleteInProgress = true;
   const selectedImages = images.filter(image => image.selected);
-
-  if (selectedImages.length > 0) {
-    bulkDeleteInProgress = true;
-    await Promise.all(
-      selectedImages.map(async image => {
-        try {
-          await window.deleteImage(image.engineId, image.id);
-        } catch (e) {
-          console.log('error while removing image', e);
-        }
-      }),
-    );
-    bulkDeleteInProgress = false;
-  }
+  await selectedImages.reduce((prev: Promise<void>, image) => {
+    return prev
+      .then(() => window.deleteImage(image.engineId, `${image.name}:${image.tag}`))
+      .catch((e: unknown) => console.log('error while removing image', e));
+  }, Promise.resolve());
+  bulkDeleteInProgress = false;
 }
 
 let refreshTimeouts: NodeJS.Timeout[] = [];
diff --git a/packages/renderer/src/lib/image/ImageActions.svelte b/packages/renderer/src/lib/image/ImageActions.svelte
index 8962b96ce5e7b..3dc350492797a 100644
--- a/packages/renderer/src/lib/image/ImageActions.svelte
+++ b/packages/renderer/src/lib/image/ImageActions.svelte
@@ -35,7 +35,7 @@ $: window.hasAuthconfigForImage(image.name).then(result => (isAuthenticatedForTh
 
 async function deleteImage(): Promise<void> {
   try {
-    await window.deleteImage(image.engineId, image.id);
+    await window.deleteImage(image.engineId, `${image.name}:${image.tag}`);
   } catch (error) {
     errorTitle = 'Error while deleting image';
     errorMessage = String(error);
diff --git a/packages/renderer/src/lib/image/ImageDetails.svelte b/packages/renderer/src/lib/image/ImageDetails.svelte
index 1dcb575952861..60343b2d0db1b 100644
--- a/packages/renderer/src/lib/image/ImageDetails.svelte
+++ b/packages/renderer/src/lib/image/ImageDetails.svelte
@@ -43,15 +43,13 @@ onMount(() => {
   return imagesInfos.subscribe(images => {
     const matchingImage = images.find(c => c.Id === imageID && c.engineId === engineId);
     if (matchingImage) {
-      try {
-        image = imageUtils.getImageInfoUI(matchingImage, base64RepoTag);
-      } catch (err) {
-        console.error(err);
+      const tempImage = imageUtils.getImageInfoUI(matchingImage, base64RepoTag);
+      if (tempImage) {
+        image = tempImage;
+        return;
       }
-    } else if (detailsPage) {
-      // the image has been deleted
-      detailsPage.close();
     }
+    detailsPage.close();
   });
 });
 </script>
diff --git a/packages/renderer/src/lib/image/image-utils.ts b/packages/renderer/src/lib/image/image-utils.ts
index d6eeb63e8b04f..75ec7f6adc4b6 100644
--- a/packages/renderer/src/lib/image/image-utils.ts
+++ b/packages/renderer/src/lib/image/image-utils.ts
@@ -126,12 +126,8 @@ export class ImageUtils {
     }
   }
 
-  getImageInfoUI(imageInfo: ImageInfo, base64RepoTag: string): ImageInfoUI {
+  getImageInfoUI(imageInfo: ImageInfo, base64RepoTag: string): ImageInfoUI | undefined {
     const images = this.getImagesInfoUI(imageInfo, []);
-    const matchingImages = images.filter(image => image.base64RepoTag === base64RepoTag);
-    if (matchingImages.length === 1) {
-      return matchingImages[0];
-    }
-    throw new Error(`Unable to find a matching image for id ${imageInfo.Id} and tag ${base64RepoTag}`);
+    return images.find(image => image.base64RepoTag === base64RepoTag);
   }
 }