fixed image download issue (#38)

Author: Pive01

ui/src/components/Feedback/DownloadProgress/DownloadProgress.tsx

@@ -30,6 +30,8 @@ export const DownloadProgress = ({ callback, imageName }: DownloadProgressProps)
     .reduce((partialSum, [, value]) => partialSum + statusValues.get(value), 0) / statusMap.size;
 
   useEffect(() => {
+    setIsDone(false);
+    setStatusMap(new Map());
     ddClient.docker.cli.exec('pull', [imageName], {
       stream: {
         onOutput(data): void {
@@ -61,7 +63,7 @@ export const DownloadProgress = ({ callback, imageName }: DownloadProgressProps)
         splitOutputLines: true,
       },
     });
-  }, []);
+  }, [imageName]);
 
   const percentageValue = Number.isNaN(percentage) ? 0 : percentage;
   return (

ui/src/components/Header/Controller.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, useEffect, useState } from 'react';
 import { Chip, ButtonGroup, Select, MenuItem, FormControl, Box, Badge, Tooltip } from '@mui/material';
 import { PlayArrow, Stop } from '@mui/icons-material';
-import { 
+import {
   isALocalStackContainer,
   removeTagFromImage,
   useDDClient,
@@ -91,13 +91,20 @@ export const Controller = (): ReactElement => {
     const isPro = runConfigs.find(config => config.name === runningConfig)
       .vars.some(item => item.variable === 'LOCALSTACK_API_KEY');
 
-    const imageToUse = isPro ? PRO_IMAGE : IMAGE;
-    const haveLocally = images.some(image => removeTagFromImage(image) === imageToUse);
-
-    if (!haveLocally) {
-      setDownloadProps({ open: true, image: imageToUse });
+    const haveCommunity = images.some(image => removeTagFromImage(image) === IMAGE);
+    if (!haveCommunity) {
+      setDownloadProps({ open: true, image: IMAGE });
       return;
     }
+
+    if (isPro) {
+      const havePro = images.some(image => removeTagFromImage(image) === PRO_IMAGE);
+      if (!havePro) {
+        setDownloadProps({ open: true, image: PRO_IMAGE });
+        return;
+      }
+    }
+
     const args = await normalizeArguments();
 
     setIsStarting(true);

ui/src/services/util/containers.ts

@@ -11,7 +11,7 @@ export function removeRepoFromImage(repoTag: string) {
 }
 
 export function removeTagFromImage(image: DockerImage){
-  return image.RepoTags[0].split(':').slice(0, -1).join(':');
+  return image.RepoTags?.at(0).split(':').slice(0, -1).join(':');
 }
 
 export const isALocalStackContainer = (container: DockerContainer) =>