Merge pull request #16 from jgrer/patched-image-name-fix

fix: textbox bug with patched image name
project-copacetic · Jul 10, 2024 · 00b590d · 00b590d
2 parents 93b8cb4 + a2fd5c4
commit 00b590d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 35 deletions.
diff --git a/ui/src/app.tsx b/ui/src/app.tsx
@@ -28,16 +28,11 @@ export function App() {
   const ddClient = createDockerDesktopClient();
   const learnMoreLink = "https://project-copacetic.github.io/copacetic/website/";
 
-  // The correct image name of the currently selected image. The latest tag is added if there is no tag.
-  const [imageName, setImageName] = useState("");
-
-
   const [selectedImage, setSelectedImage] = useState<string | null>(null);
   const [selectedScanner, setSelectedScanner] = useState<string | undefined>("trivy");
   const [selectedImageTag, setSelectedImageTag] = useState<string | undefined>(undefined);
   const [selectedTimeout, setSelectedTimeout] = useState<string | undefined>(undefined);
   const [totalOutput, setTotalOutput] = useState("");
-  const [actualImageTag, setActualImageTag] = useState("");
   const [errorText, setErrorText] = useState("");
   const [useContainerdChecked, setUseContainerdChecked] = useState(false);
   const [jsonFileName, setJsonFileName] = useState("default");
@@ -50,6 +45,9 @@ export function App() {
   const [showFailure, setShowFailure] = useState(false);
   const [showCopaOutputModal, setShowCopaOutputModal] = useState(false);
   const [showCommandLine, setShowCommandLine] = useState(false);
+
+  const baseImageName = selectedImage?.split(':')[0];
+
   useEffect(() => {
     const checkForContainerd = async () => {
       let containerdEnabled = await isContainerdEnabled();
@@ -70,8 +68,6 @@ export function App() {
     setSelectedImageTag(undefined);
     setSelectedTimeout(undefined);
     setTotalOutput("");
-    setImageName("");
-    setActualImageTag("");
   }
 
   const processError = (error: string) => {
@@ -84,24 +80,28 @@ export function App() {
     }
   }
 
-  async function triggerCopa() {
-    let stdout = "";
-    let stderr = "";
-
-
-    let imageTag = "";
+  const getImageTag = () => {
+    if (selectedImage === null) {
+      return;
+    }
     // Create the correct tag for the image
-    if (selectedImage !== null) {
-      let imageSplit = selectedImage.split(':');
+    const imageSplit = selectedImage.split(':');
+    if (selectedImageTag === undefined || selectedImageTag === "") {
       if (selectedImageTag !== undefined) {
-        imageTag = selectedImageTag;
+        return selectedImageTag;
       } else if (imageSplit?.length === 1) {
-        imageTag = `latest-patched`;
+        return `latest-patched`;
       } else {
-        imageTag = `${imageSplit[1]}-patched`;
+        return `${imageSplit[1]}-patched`;
       }
+    } else {
+      return selectedImageTag;
     }
-    setActualImageTag(imageTag);
+  }
+
+  async function triggerCopa() {
+    let stdout = "";
+    let stderr = "";
 
     if (selectedImage != null) {
       let commandParts: string[] = [
@@ -110,7 +110,7 @@ export function App() {
         // "--name=copa-extension",
         "copa-extension",
         `${selectedImage}`,
-        `${imageTag}`,
+        `${getImageTag()}`,
         `${selectedTimeout === undefined ? "5m" : selectedTimeout}`,
         `${useContainerdChecked ? 'custom-socket' : 'buildx'}`,
         "openvex"
@@ -154,10 +154,10 @@ export function App() {
             setShowLoading(false);
             if (exitCode == 0) {
               setShowSuccess(true);
-              ddClient.desktopUI.toast.success(`Copacetic - Created new patched image ${selectedImage}-${actualImageTag}`);
+              ddClient.desktopUI.toast.success(`Copacetic - Created new patched image ${baseImageName}:${getImageTag()}`);
             } else {
               setShowFailure(true);
-              ddClient.desktopUI.toast.error(`Copacetic - Failed to patch image ${imageName}`);
+              ddClient.desktopUI.toast.error(`Copacetic - Failed to patch image ${selectedImage}`);
               processError(latestStderr);
             }
           },
@@ -203,7 +203,7 @@ export function App() {
         <Typography align='center' variant="h6">Successfully patched image</Typography>
         <Stack direction="row">
           {showCommandLineButton}
-          <Typography align='center' variant="h6">{imageName}!</Typography>
+          <Typography align='center' variant="h6">{selectedImage}!</Typography>
         </Stack>
       </Stack>
       <Button
@@ -228,7 +228,7 @@ export function App() {
         src="error-icon.png"
       />
       <Stack sx={{ alignItems: 'center' }} >
-        <Typography align='center' variant="h6">Failed to patch {imageName}</Typography>
+        <Typography align='center' variant="h6">Failed to patch {selectedImage}</Typography>
         <Stack direction="row">
           {showCommandLineButton}
           <Typography align='center' variant="h6">{errorText}</Typography>
@@ -283,8 +283,6 @@ export function App() {
             patchImage={patchImage}
             useContainerdChecked={useContainerdChecked}
             setUseContainerdChecked={setUseContainerdChecked}
-            imageName={imageName}
-            setImageName={setImageName}
           />}
         {showLoading && loadingPage}
         {showSuccess && successPage}

diff --git a/ui/src/copainput.tsx b/ui/src/copainput.tsx
@@ -107,15 +107,6 @@ export function CopaInput(props: any) {
             value={props.selectedImage}
             onInputChange={(event: any, newValue: string | null) => {
               props.setSelectedImage(newValue);
-              if (newValue !== null) {
-                const seperateSplit = newValue?.split(':');
-                const numColons = seperateSplit.length - 1;
-                if (numColons === 0) {
-                  props.setImageName(newValue + ":latest");
-                } else {
-                  props.setImageName(newValue);
-                }
-              }
             }}
             id="image-select-combo-box"
             options={dockerImages}