🔀 Merge pull request #374 from Skeeww/ui/docker

💄Improve Docker module UI

next-i18next.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   // https://www.i18next.com/overview/configuration-options#logging
-  debug: process.env.NODE_ENV === 'development',
   i18n: {
     defaultLocale: 'en',
     locales: ['en', 'de', 'en', 'es', 'fr', 'it', 'ja', 'nl', 'pl', 'ru', 'sl', 'sv', 'zh'],

public/locales/en/modules/docker.json

@@ -37,12 +37,14 @@
     "start": {
       "title": "Start"
     },
-    "refreshData": "Refresh data",
+    "refreshData": {
-    "addToHomarr": {
+      "title": "Refresh data"
-      "title": "Add to Homarr"
     },
     "remove": {
       "title": "Remove"
+    },
+    "addToHomarr": {
+      "title": "Add to Homarr"
     }
   },
   "messages": {

src/components/AppShelf/AddAppShelfItem.tsx

@@ -25,10 +25,11 @@ import { useTranslation } from 'next-i18next';
 import { useEffect, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { useConfig } from '../../tools/state';
-import { ServiceTypeList, StatusCodes, tryMatchPort } 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 (
@@ -40,7 +41,7 @@ export function AddItemShelfButton(props: any) {
         opened={props.opened || opened}
         onClose={() => setOpened(false)}
       >
-        <AddAppShelfItemForm setOpened={setOpened} />
+        <AddAppShelfItemForm config={config} setConfig={setConfig} setOpened={setOpened} />
       </Modal>
       <Tooltip withinPortal label={t('actionIcon.tooltip')}>
         <ActionIcon
@@ -83,9 +84,17 @@ function MatchService(name: string, form: any) {
 
 const DEFAULT_ICON = '/favicon.png';
 
-export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & any) {
+interface AddAppShelfItemFormProps {
-  const { setOpened } = 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');
 
@@ -201,6 +210,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
               }),
             });
           } else {
+            console.log(newForm);
             setConfig({
               ...config,
               services: [...config.services, newForm],
@@ -401,8 +411,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
               )}
             </Stack>
           </Tabs.Panel>
-          <Tabs.Panel value={t('modal.tabs.advancedOptions.title')}>
+          <Tabs.Panel value="Advanced Options">
-            <Space h="sm" />
             <Stack>
               <Switch
                 label={t('modal.tabs.advancedOptions.form.ping.label')}

src/modules/docker/ContainerActionBar.tsx

@@ -1,4 +1,6 @@
-import { Button, Group, Modal, Title } 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,
@@ -11,10 +13,14 @@ import {
 } from '@tabler/icons';
 import axios from 'axios';
 import Dockerode from 'dockerode';
-import { useState } from 'react';
 import { useTranslation } from 'next-i18next';
-import { tryMatchService } from '../../tools/addToHomarr';
+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>;
 
 function sendDockerCommand(
   action: string,
@@ -22,8 +28,6 @@ function sendDockerCommand(
   containerName: string,
   reload: () => void
 ) {
-  const { t } = useTranslation('modules/docker');
-
   showNotification({
     id: containerId,
     loading: true,
@@ -63,24 +67,28 @@ export interface ContainerActionBarProps {
 }
 
 export default function ContainerActionBar({ selected, reload }: ContainerActionBarProps) {
-  const [opened, setOpened] = useState<boolean>(false);
+  t = useTranslation('modules/docker').t;
-  const { t } = useTranslation('modules/docker');
+  const [isLoading, setisLoading] = useState(false);
+  const { config, setConfig } = useConfig();
 
   return (
     <Group>
-      <Modal
+      <Button
-        size="xl"
+        leftIcon={<IconRefresh />}
+        onClick={() => {
+          setisLoading(true);
+          setTimeout(() => {
+            reload();
+            setisLoading(false);
+          }, 750);
+        }}
+        variant="light"
+        color="violet"
+        loading={isLoading}
         radius="md"
-        opened={opened}
-        onClose={() => setOpened(false)}
-        title={t('actionBar.addService.title')}
       >
-        <AddAppShelfItemForm
+        {t('actionBar.refreshData.title')}
-          setOpened={setOpened}
+      </Button>
-          {...tryMatchService(selected.at(0))}
-          message={t('actionBar.addService.message')}
-        />
-      </Modal>
       <Button
         leftIcon={<IconRotateClockwise />}
         onClick={() =>
@@ -93,6 +101,7 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
         variant="light"
         color="orange"
         radius="md"
+        disabled={selected.length === 0}
       >
         {t('actionBar.restart.title')}
       </Button>
@@ -108,6 +117,7 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
         variant="light"
         color="red"
         radius="md"
+        disabled={selected.length === 0}
       >
         {t('actionBar.stop.title')}
       </Button>
@@ -123,32 +133,10 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
         variant="light"
         color="green"
         radius="md"
+        disabled={selected.length === 0}
       >
         {t('actionBar.start.title')}
       </Button>
-      <Button leftIcon={<IconRefresh />} onClick={() => reload()} variant="light" radius="md">
-        {t('actionBar.refreshData.title')}
-      </Button>
-      <Button
-        leftIcon={<IconPlus />}
-        color="indigo"
-        variant="light"
-        radius="md"
-        onClick={() => {
-          if (selected.length !== 1) {
-            showNotification({
-              autoClose: 5000,
-              title: <Title order={5}>{t('errors.oneServiceAtATime')}</Title>,
-              color: 'red',
-              message: undefined,
-            });
-          } else {
-            setOpened(true);
-          }
-        }}
-      >
-        {t('actionBar.addToHomarr.title')}
-      </Button>
       <Button
         leftIcon={<IconTrash />}
         color="red"
@@ -161,9 +149,37 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
             )
           )
         }
+        disabled={selected.length === 0}
       >
         {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

@@ -42,7 +42,9 @@ export default function DockerMenuButton(props: any) {
           setContainers(res.data);
           setSelection([]);
         })
-        .catch(() =>
+        .catch(() => {
+          // Remove containers from the list
+          setContainers([]);
           // Send an Error notification
           showNotification({
             autoClose: 1500,
@@ -50,8 +52,8 @@ export default function DockerMenuButton(props: any) {
             color: 'red',
             icon: <IconX />,
             message: t('errors.integrationFailed.message'),
-          })
+          });
-        );
+        });
     }, 300);
   }
   const exists = config.modules?.[DockerModule.id]?.enabled ?? false;

src/modules/docker/DockerTable.tsx

@@ -1,9 +1,19 @@
-import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput } from '@mantine/core';
+import {
+  Table,
+  Checkbox,
+  Group,
+  Badge,
+  createStyles,
+  ScrollArea,
+  TextInput,
+  Modal,
+} from '@mantine/core';
 import { IconSearch } from '@tabler/icons';
-import { useTranslation } from 'next-i18next';
-
 import Dockerode from 'dockerode';
+import { useTranslation } from 'next-i18next';
 import { useEffect, useState } from 'react';
+import { AddAppShelfItemForm } from '../../components/AppShelf/AddAppShelfItem';
+import { tryMatchService } from '../../tools/addToHomarr';
 import ContainerState from './ContainerState';
 
 const useStyles = createStyles((theme) => ({
@@ -105,6 +115,7 @@ export default function DockerTable({
         icon={<IconSearch size={14} />}
         value={search}
         onChange={handleSearchChange}
+        disabled={usedContainers.length === 0}
       />
       <Table captionSide="bottom" highlightOnHover sx={{ minWidth: 800 }} verticalSpacing="sm">
         <thead>
@@ -112,9 +123,10 @@ 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>{t('table.header.name')}</th>