fix(images): Fix TiCS violations (#5943)

Author: abuyukyi101198

src/app/images/components/ImagesTable/useImageTableColumns/useImageTableColumns.tsx

@@ -180,7 +180,7 @@ const useImageTableColumns = ({
                             <div
                               className="p-progress__value"
                               style={{
-                                width: `${isOptimistic ? 100 : isStopping ? 0 : sync_percentage}%`,
+                                width: `${isOptimistic ? 100 : sync_percentage}%`,
                               }}
                             />
                           </div>
@@ -314,37 +314,32 @@ const useImageTableColumns = ({
             row: Row<Image>;
           }) => {
             const isCommissioningImage = release === commissioningRelease;
+            const isCustom = id.endsWith("-custom");
+            const imageId = Number(id.split("-")[0]);
 
-            const isSyncing =
-              status === "Downloading" || status === "OptimisticDownloading";
-            const isUpdating =
-              update_status === "Downloading" ||
-              update_status === "OptimisticDownloading";
-
-            const isOptimistic =
+            const isOptimisticDownloading =
               status === "OptimisticDownloading" ||
               update_status === "OptimisticDownloading";
-
-            const isStopping =
+            const isOptimisticStopping =
               status === "OptimisticStopping" ||
               update_status === "OptimisticStopping";
+            const isDownloading =
+              status === "Downloading" || update_status === "Downloading";
 
-            const downloadInProgress = isSyncing || isUpdating || isStopping;
-
+            const downloadInProgress =
+              isDownloading || isOptimisticDownloading || isOptimisticStopping;
             const downloadAvailable =
               status === "Waiting for download" ||
               update_status === "Update available";
 
             const canBeDeleted = !isCommissioningImage && !downloadInProgress;
-            const isCustom = id.endsWith("-custom");
-            const imageId = Number(id.split("-")[0]);
 
             return getIsGrouped() ? null : (
               <div>
                 {isCustom ? null : downloadInProgress ? (
                   <Tooltip
                     message={
-                      !isOptimistic
+                      !isOptimisticDownloading && !isOptimisticStopping
                         ? TOOLTIP_MESSAGES.STOP_SYNC_ACTIVE
                         : TOOLTIP_MESSAGES.STOP_SYNC_OPTIMISTIC
                     }
@@ -355,8 +350,8 @@ const useImageTableColumns = ({
                       className="is-dense u-table-cell-padding-overlap"
                       disabled={
                         startSync.isPending ||
-                        isOptimistic ||
-                        isStopping ||
+                        isOptimisticDownloading ||
+                        isOptimisticStopping ||
                         isCustom
                       }
                       hasIcon
@@ -391,7 +386,7 @@ const useImageTableColumns = ({
                       disabled={
                         !downloadAvailable ||
                         stopSync.isPending ||
-                        isStopping ||
+                        isOptimisticStopping ||
                         isCustom
                       }
                       hasIcon

src/app/images/hooks/useOptimisticImages/utils/silentPolling.ts

@@ -53,6 +53,19 @@ export const parseOptimisticImagesLocalStorage = () => {
   return { startingImageIds, stoppingImageIds };
 };
 
+const removeImageFromLocalStorage = (imageId: number) => {
+  const { startingImageIds, stoppingImageIds } =
+    parseOptimisticImagesLocalStorage();
+
+  const updatedStartingIds = startingImageIds.filter((id) => id !== imageId);
+  const updatedStoppingIds = stoppingImageIds.filter((id) => id !== imageId);
+
+  localStorage.setItem(
+    "optimisticImages",
+    `OptimisticDownloading=${updatedStartingIds.join(",")};OptimisticStopping=${updatedStoppingIds.join(",")}`
+  );
+};
+
 /**
  * Starts a silent polling mechanism to check if optimistically updated images
  * have transitioned to "Downloading" state on the backend.
@@ -118,21 +131,8 @@ export const startOrExtendSilentPolling = (queryClient: QueryClient) => {
 
         if (resolved) {
           silentPoll.entries.delete(imageId);
-          const { startingImageIds, stoppingImageIds } =
-            parseOptimisticImagesLocalStorage();
-
           // Remove the resolved imageId from the appropriate array
-          const updatedStartingIds = startingImageIds.filter(
-            (id) => id !== imageId
-          );
-          const updatedStoppingIds = stoppingImageIds.filter(
-            (id) => id !== imageId
-          );
-
-          localStorage.setItem(
-            "optimisticImages",
-            `OptimisticDownloading=${updatedStartingIds.join(",")};OptimisticStopping=${updatedStoppingIds.join(",")}`
-          );
+          removeImageFromLocalStorage(imageId);
         }
       }
     } catch {
@@ -143,21 +143,8 @@ export const startOrExtendSilentPolling = (queryClient: QueryClient) => {
 
         if (entry.attempts >= MAX_ATTEMPTS_PER_IMAGE) {
           silentPoll.entries.delete(imageId);
-          const { startingImageIds, stoppingImageIds } =
-            parseOptimisticImagesLocalStorage();
-
           // Remove the timed-out imageId from the appropriate array
-          const updatedStartingIds = startingImageIds.filter(
-            (id) => id !== imageId
-          );
-          const updatedStoppingIds = stoppingImageIds.filter(
-            (id) => id !== imageId
-          );
-
-          localStorage.setItem(
-            "optimisticImages",
-            `OptimisticDownloading=${updatedStartingIds.join(",")};OptimisticStopping=${updatedStoppingIds.join(",")}`
-          );
+          removeImageFromLocalStorage(imageId);
         }
       }
     }

src/app/machines/views/MachineDetails/MachineNetwork/NetworkTable/NetworkTableActions/NetworkTableActions.tsx

@@ -1,4 +1,4 @@
-import type { ReactElement } from "react";
+import type { ComponentType, ReactElement } from "react";
 
 import { useSelector } from "react-redux";
 
@@ -209,7 +209,10 @@ const NetworkTableActions = ({
         children: `Remove ${getInterfaceTypeText(machine, nic, link)}...`,
         onClick: () => {
           openSidePanel({
-            component: RemovePhysicalForm,
+            // Cast component type to appease TiCS, local compiler shows no error
+            component: RemovePhysicalForm as ComponentType<
+              Record<string, unknown>
+            >,
             title: `Remove ${getInterfaceTypeText(machine, nic, link)}`,
             props: {
               systemId: machine.system_id,

src/app/machines/views/MachineDetails/MachineNetwork/RemovePhysicalForm/RemovePhysicalForm.tsx

@@ -16,11 +16,11 @@ import {
   isAlias,
 } from "@/app/store/utils";
 
-interface RemovePhysicalProps {
+type RemovePhysicalProps = {
   link?: NetworkLink | null;
   nic?: NetworkInterface | null;
   systemId: Machine["system_id"];
-}
+};
 
 const RemovePhysicalForm = ({
   link,

src/app/machines/views/MachineList/MachineListTable/tableModels.tsx

@@ -171,7 +171,7 @@ export const generateSkeletonRows = (
       [MachineColumns.POWER]: (
         <DoubleRow
           primary={<Placeholder>Xxxxxxxxxxx</Placeholder>}
-          secondary={<Placeholder>Xxxxxxx</Placeholder>}
+          secondary={<Placeholder>Xxxxxxxxxxx</Placeholder>}
         />
       ),
       [MachineColumns.STATUS]: (