💄 improve ui of DockerTable component

src/modules/docker/ContainerActionBar.tsx

@@ -1,19 +1,15 @@
-import { Button, Group, Modal, Title } from '@mantine/core';
+import { Button, Group, Modal } from '@mantine/core';
 import { showNotification, updateNotification } from '@mantine/notifications';
 import {
   IconCheck,
   IconPlayerPlay,
   IconPlayerStop,
-  IconPlus,
   IconRefresh,
   IconRotateClockwise,
   IconTrash,
 } from '@tabler/icons';
 import axios from 'axios';
 import Dockerode from 'dockerode';
-import { tryMatchService } from '../../tools/addToHomarr';
-import { AddAppShelfItemForm } from '../../components/AppShelf/AddAppShelfItem';
-import { useState } from 'react';
 
 function sendDockerCommand(
   action: string,
@@ -60,22 +56,8 @@ export interface ContainerActionBarProps {
 }
 
 export default function ContainerActionBar({ selected, reload }: ContainerActionBarProps) {
-  const [opened, setOpened] = useState<boolean>(false);
   return (
     <Group>
-      <Modal
-        size="xl"
-        radius="md"
-        opened={opened}
-        onClose={() => setOpened(false)}
-        title="Add service"
-      >
-        <AddAppShelfItemForm
-          setOpened={setOpened}
-          {...tryMatchService(selected.at(0))}
-          message="Add service to homarr"
-        />
-      </Modal>
       <Button
         leftIcon={<IconRotateClockwise />}
         onClick={() =>
@@ -88,6 +70,7 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
         variant="light"
         color="orange"
         radius="md"
+        disabled={selected.length === 0}
       >
         Restart
       </Button>
@@ -103,6 +86,7 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
         variant="light"
         color="red"
         radius="md"
+        disabled={selected.length === 0}
       >
         Stop
       </Button>
@@ -118,32 +102,13 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
         variant="light"
         color="green"
         radius="md"
+        disabled={selected.length === 0}
       >
         Start
       </Button>
-      <Button leftIcon={<IconRefresh />} onClick={() => reload()} variant="light" radius="md">
+      <Button leftIcon={<IconRefresh />} onClick={() => reload()} variant="light" color="violet" radius="md">
         Refresh data
       </Button>
-      <Button
-        leftIcon={<IconPlus />}
-        color="indigo"
-        variant="light"
-        radius="md"
-        onClick={() => {
-          if (selected.length !== 1) {
-            showNotification({
-              autoClose: 5000,
-              title: <Title order={5}>Please only add one service at a time!</Title>,
-              color: 'red',
-              message: undefined,
-            });
-          } else {
-            setOpened(true);
-          }
-        }}
-      >
-        Add to Homarr
-      </Button>
       <Button
         leftIcon={<IconTrash />}
         color="red"
@@ -156,6 +121,7 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
             )
           )
         }
+        disabled={selected.length === 0}
       >
         Remove
       </Button>

src/modules/docker/DockerTable.tsx

@@ -1,7 +1,9 @@
-import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput } from '@mantine/core';
-import { IconSearch } from '@tabler/icons';
+import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput, Button, Modal, ActionIcon, Tooltip } from '@mantine/core';
+import { IconPlus, IconSearch } from '@tabler/icons';
 import Dockerode from 'dockerode';
 import { useEffect, useState } from 'react';
+import { AddAppShelfItemForm } from '../../components/AppShelf/AddAppShelfItem';
+import { tryMatchService } from '../../tools/addToHomarr';
 import ContainerState from './ContainerState';
 
 const useStyles = createStyles((theme) => ({
@@ -23,8 +25,10 @@ export default function DockerTable({
   selection: Dockerode.ContainerInfo[];
 }) {
   const [usedContainers, setContainers] = useState<Dockerode.ContainerInfo[]>(containers);
+  const [rowSelected, setRowSelected] = useState<Dockerode.ContainerInfo>();
   const { classes, cx } = useStyles();
   const [search, setSearch] = useState('');
+  const [opened, setOpened] = useState<boolean>(false);
 
   useEffect(() => {
     setContainers(containers);
@@ -64,7 +68,9 @@ export default function DockerTable({
           />
         </td>
         <td>{element.Names[0].replace('/', '')}</td>
-        <td>{element.Image}</td>
+        <td>
+          {element.Image}
+        </td>
         <td>
           <Group>
             {element.Ports.sort((a, b) => a.PrivatePort - b.PrivatePort)
@@ -87,18 +93,49 @@ export default function DockerTable({
         <td>
           <ContainerState state={element.State} />
         </td>
+        <td>
+          <Group>
+            <Tooltip label="Add to Homarr">
+              <ActionIcon
+                color="indigo"
+                variant="light"
+                radius="md"
+                onClick={() => {
+                  setRowSelected(element);
+                  setOpened(true);
+                }}
+              >
+                <IconPlus />
+              </ActionIcon>
+            </Tooltip>
+          </Group>
+        </td>
       </tr>
     );
   });
 
   return (
     <ScrollArea style={{ height: '80vh' }}>
+      <Modal
+        size="xl"
+        radius="md"
+        opened={opened}
+        onClose={() => setOpened(false)}
+        title="Add service"
+      >
+        <AddAppShelfItemForm
+          setOpened={setOpened}
+          {...tryMatchService(rowSelected)}
+          message="Add service to homarr"
+        />
+      </Modal>
       <TextInput
         placeholder="Search by container or image name"
         mt="md"
         icon={<IconSearch size={14} />}
         value={search}
         onChange={handleSearchChange}
+        disabled={usedContainers.length === 0}
       />
       <Table captionSide="bottom" highlightOnHover sx={{ minWidth: 800 }} verticalSpacing="sm">
         <thead>
@@ -106,15 +143,17 @@ export default function DockerTable({
             <th style={{ width: 40 }}>
               <Checkbox
                 onChange={toggleAll}
-                checked={selection.length === usedContainers.length}
+                checked={selection.length === usedContainers.length && selection.length > 0}
                 indeterminate={selection.length > 0 && selection.length !== usedContainers.length}
                 transitionDuration={0}
+                disabled={usedContainers.length === 0}
               />
             </th>
             <th>Name</th>
             <th>Image</th>
             <th>Ports</th>
             <th>State</th>
+            <th>Action</th>
           </tr>
         </thead>
         <tbody>{rows}</tbody>