🚧 WIP on docker import feature

src/components/Manage/Tools/Docker/ContainerTable.tsx

@@ -14,7 +14,6 @@ import { IconSearch } from '@tabler/icons-react';
 import Dockerode, { ContainerInfo } from 'dockerode';
 import { useTranslation } from 'next-i18next';
 import { Dispatch, SetStateAction, useMemo, useState } from 'react';
-import { api } from '~/utils/api';
 
 import { MIN_WIDTH_MOBILE } from '../../../../constants/constants';
 import ContainerState from './ContainerState';
@@ -98,6 +97,7 @@ export default function ContainerTable({
               <Row
                 key={container.Id}
                 container={container}
+                icon={(container as any).icon ?? undefined}
                 selected={selected}
                 toggleRow={toggleRow}
                 width={width}
@@ -115,26 +115,12 @@ type RowProps = {
   selected: boolean;
   toggleRow: (container: ContainerInfo) => void;
   width: number;
+  icon?: string;
 };
-const Row = ({ container, selected, toggleRow, width }: RowProps) => {
+const Row = ({ icon, container, selected, toggleRow, width }: RowProps) => {
   const { t } = useTranslation('modules/docker');
   const { classes, cx } = useStyles();
-  const { data: iconsData } = api.icon.all.useQuery();
-  if (!iconsData) return null;
   const containerName = container.Names[0].replace('/', '');
-  // Example image : linuxserver.io/sonarr:latest
-  // Remove the slashes
-  const imageParsed = container.Image.split('/');
-  // Remove the version
-  const image = imageParsed[imageParsed.length - 1].split(':')[0];
-  const foundIcon = iconsData
-    .flatMap((repository) =>
-      repository.entries.map((entry) => ({
-        ...entry,
-        repository: repository.name,
-      }))
-    )
-    .find((entry) => entry.name.toLowerCase().includes(image.toLowerCase()));
 
   return (
     <tr className={cx({ [classes.rowSelected]: selected })}>
@@ -143,7 +129,7 @@ const Row = ({ container, selected, toggleRow, width }: RowProps) => {
       </td>
       <td>
         <Group noWrap>
-          <Image withPlaceholder src={foundIcon?.url} alt={image} width={30} height={30} />
+          <Image withPlaceholder src={icon} width={30} height={30} />
           <Text size="lg" weight={600}>
             {containerName}
           </Text>
@@ -151,7 +137,7 @@ const Row = ({ container, selected, toggleRow, width }: RowProps) => {
       </td>
       {width > MIN_WIDTH_MOBILE && (
         <td>
-          <Text size="lg">{container.Image}</Text>
+          <Text size="lg">{container.Image.slice(0, 25)}</Text>
         </td>
       )}
       {width > MIN_WIDTH_MOBILE && (