💄 Change UI for docker module

public/locales/en/modules/docker.json

@@ -11,8 +11,7 @@
       "name": "Name",
       "image": "Image",
       "ports": "Ports",
-      "state": "State",
+      "state": "State"
-      "addToHomarr": "Add to homarr"
     },
     "body": {
       "portCollapse": "{{ports}} more"
@@ -43,6 +42,9 @@
     },
     "remove": {
       "title": "Remove"
+    },
+    "addToHomarr": {
+      "title": "Add to Homarr"
     }
   },
   "messages": {

src/components/AppShelf/AddAppShelfItem.tsx

@@ -24,10 +24,11 @@ import { v4 as uuidv4 } from 'uuid';
 import { useDebouncedValue } from '@mantine/hooks';
 import { useTranslation } from 'next-i18next';
 import { useConfig } from '../../tools/state';
-import { tryMatchPort, ServiceTypeList, StatusCodes } from '../../tools/types';
+import { tryMatchPort, ServiceTypeList, StatusCodes, Config } from '../../tools/types';
 import Tip from '../layout/Tip';
 
 export function AddItemShelfButton(props: any) {
+  const { config, setConfig } = useConfig();
   const [opened, setOpened] = useState(false);
   const { t } = useTranslation('layout/add-service-app-shelf');
   return (
@@ -39,7 +40,7 @@ export function AddItemShelfButton(props: any) {
         opened={props.opened || opened}
         onClose={() => setOpened(false)}
       >
-        <AddAppShelfItemForm close={setOpened} />
+        <AddAppShelfItemForm config={config} setConfig={setConfig} setOpened={setOpened} />
       </Modal>
       <Tooltip withinPortal label={t('actionIcon.tooltip')}>
         <ActionIcon
@@ -82,9 +83,17 @@ function MatchService(name: string, form: any) {
 
 const DEFAULT_ICON = '/favicon.png';
 
-export function AddAppShelfItemForm(props: { close: () => void } & any) {
+interface AddAppShelfItemFormProps {
-  const { close } = props;
+  setOpened: (b: boolean) => void;
-  const { config, setConfig } = useConfig();
+  config: Config;
+  setConfig: (config: Config) => void;
+  // Any other props you want to pass to the form
+  [key: string]: any;
+}
+
+export function AddAppShelfItemForm(props: AddAppShelfItemFormProps) {
+  const { setOpened, config, setConfig } = props;
+  // Only get config and setConfig from useCOnfig if they are not present in props
   const [isLoading, setLoading] = useState(false);
   const { t } = useTranslation('layout/add-service-app-shelf');
 
@@ -195,12 +204,13 @@ export function AddAppShelfItemForm(props: { close: () => void } & any) {
               }),
             });
           } else {
+            console.log(newForm);
             setConfig({
               ...config,
               services: [...config.services, newForm],
             });
           }
-          close(false);
+          setOpened(false);
           form.reset();
         })}
       >

src/modules/docker/ContainerActionBar.tsx

@@ -1,9 +1,12 @@
-import { Button, Group } from '@mantine/core';
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { Button, Group, TextInput, Title } from '@mantine/core';
+import { closeAllModals, closeModal, openModal } from '@mantine/modals';
 import { showNotification, updateNotification } from '@mantine/notifications';
 import {
   IconCheck,
   IconPlayerPlay,
   IconPlayerStop,
+  IconPlus,
   IconRefresh,
   IconRotateClockwise,
   IconTrash,
@@ -13,6 +16,9 @@ import Dockerode from 'dockerode';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 import { TFunction } from 'react-i18next';
+import { AddAppShelfItemForm } from '../../components/AppShelf/AddAppShelfItem';
+import { tryMatchService } from '../../tools/addToHomarr';
+import { useConfig } from '../../tools/state';
 
 let t: TFunction<'modules/docker', undefined>;
 
@@ -63,6 +69,8 @@ export interface ContainerActionBarProps {
 export default function ContainerActionBar({ selected, reload }: ContainerActionBarProps) {
   t = useTranslation('modules/docker').t;
   const [isLoading, setisLoading] = useState(false);
+  const { config, setConfig } = useConfig();
+
   return (
     <Group>
       <Button
@@ -145,6 +153,33 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
       >
         {t('actionBar.remove.title')}
       </Button>
+      <Button
+        leftIcon={<IconPlus />}
+        color="indigo"
+        variant="light"
+        radius="md"
+        disabled={selected.length === 0 || selected.length > 1}
+        onClick={() => {
+          openModal({
+            size: 'xl',
+            modalId: selected.at(0)!.Id,
+            radius: 'md',
+            title: t('actionBar.addService.title'),
+            zIndex: 500,
+            children: (
+              <AddAppShelfItemForm
+                setConfig={setConfig}
+                config={config}
+                setOpened={() => closeModal(selected.at(0)!.Id)}
+                message={t('actionBar.addService.message')}
+                {...tryMatchService(selected.at(0)!)}
+              />
+            ),
+          });
+        }}
+      >
+        {t('actionBar.addToHomarr.title')}
+      </Button>
     </Group>
   );
 }

src/modules/docker/DockerModule.tsx

@@ -53,7 +53,7 @@ export default function DockerMenuButton(props: any) {
             icon: <IconX />,
             message: t('errors.integrationFailed.message'),
           });
-      });
+        });
     }, 300);
   }
   const exists = config.modules?.[DockerModule.id]?.enabled ?? false;

src/modules/docker/DockerTable.tsx

@@ -7,9 +7,8 @@ import {
   ScrollArea,
   TextInput,
   Modal,
-  ActionIcon,
 } from '@mantine/core';
-import { IconPlus, IconSearch } from '@tabler/icons';
+import { IconSearch } from '@tabler/icons';
 import Dockerode from 'dockerode';
 import { useTranslation } from 'next-i18next';
 import { useEffect, useState } from 'react';
@@ -36,10 +35,8 @@ 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);
 
   const { t } = useTranslation('modules/docker');
 
@@ -106,38 +103,12 @@ export default function DockerTable({
         <td>
           <ContainerState state={element.State} />
         </td>
-        <td>
-          <ActionIcon
-            color="indigo"
-            variant="light"
-            radius="md"
-            onClick={() => {
-              setRowSelected(element);
-              setOpened(true);
-            }}
-          >
-            <IconPlus />
-          </ActionIcon>
-        </td>
       </tr>
     );
   });
 
   return (
     <ScrollArea style={{ height: '80vh' }}>
-      <Modal
-        size="xl"
-        radius="md"
-        opened={opened}
-        onClose={() => setOpened(false)}
-        title={t('actionBar.addService.title')}
-      >
-        <AddAppShelfItemForm
-          setOpened={setOpened}
-          {...tryMatchService(rowSelected)}
-          message={t('actionBar.addService.message')}
-        />
-      </Modal>
       <TextInput
         placeholder={t('search.placeholder')}
         mt="md"
@@ -162,7 +133,6 @@ export default function DockerTable({
             <th>{t('table.header.image')}</th>
             <th>{t('table.header.ports')}</th>
             <th>{t('table.header.state')}</th>
-            <th>{t('table.header.addToHomarr')}</th>
           </tr>
         </thead>
         <tbody>{rows}</tbody>