✨ Readd possibility to add containers as apps to boards (#1276)

src/components/Manage/Tools/Docker/docker-select-board.modal.tsx

@@ -0,0 +1,120 @@
+import { Button, Group, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { ContextModalProps, modals } from '@mantine/modals';
+import { showNotification } from '@mantine/notifications';
+import { IconCheck, IconX } from '@tabler/icons-react';
+import { ContainerInfo } from 'dockerode';
+import { Trans, useTranslation } from 'next-i18next';
+import { z } from 'zod';
+import { api } from '~/utils/api';
+import { useI18nZodResolver } from '~/utils/i18n-zod-resolver';
+
+const dockerSelectBoardSchema = z.object({
+  board: z.string().nonempty(),
+});
+
+type InnerProps = {
+  containers: ContainerInfo[];
+};
+type FormType = z.infer<typeof dockerSelectBoardSchema>;
+
+export const DockerSelectBoardModal = ({ id, innerProps }: ContextModalProps<InnerProps>) => {
+  const { t } = useTranslation('tools/docker');
+  const { mutateAsync, isLoading } = api.boards.addAppsForContainers.useMutation();
+  const { i18nZodResolver } = useI18nZodResolver();
+  const handleSubmit = async (values: FormType) => {
+    await mutateAsync(
+      {
+        apps: innerProps.containers.map((container) => ({
+          name: container.Names.at(0) ?? 'App',
+          port: container.Ports.at(0)?.PublicPort,
+        })),
+        boardName: values.board,
+      },
+      {
+        onSuccess: () => {
+          showNotification({
+            title: t('notifications.selectBoard.success.title'),
+            message: t('notifications.selectBoard.success.message'),
+            icon: <IconCheck />,
+            color: 'green',
+          });
+
+          modals.close(id);
+        },
+        onError: () => {
+          showNotification({
+            title: t('notifications.selectBoard.error.title'),
+            message: t('notifications.selectBoard.error.message'),
+            icon: <IconX />,
+            color: 'red',
+          });
+        },
+      }
+    );
+  };
+
+  const form = useForm<FormType>({
+    initialValues: {
+      board: '',
+    },
+    validate: i18nZodResolver(dockerSelectBoardSchema),
+  });
+
+  const { data: boards } = api.boards.all.useQuery();
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <Stack>
+        <Text>{t('modals.selectBoard.text')}</Text>
+
+        <Select
+          label={t('modals.selectBoard.form.board.label')}
+          withAsterisk
+          withinPortal
+          data={
+            boards?.map((board) => ({
+              value: board.name,
+              label: board.name,
+            })) ?? []
+          }
+          {...form.getInputProps('board')}
+        />
+
+        <Group grow>
+          <Button
+            onClick={() => {
+              modals.close(id);
+            }}
+            variant="light"
+            color="gray"
+            type="button"
+          >
+            {t('common:cancel')}
+          </Button>
+          <Button
+            type="submit"
+            onClick={async () => {}}
+            disabled={isLoading}
+            variant="light"
+            color="green"
+          >
+            {t('modals.selectBoard.form.submit')}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+};
+
+export const openDockerSelectBoardModal = (innerProps: InnerProps) => {
+  modals.openContextModal({
+    modal: 'dockerSelectBoardModal',
+    title: (
+      <Title order={4}>
+        <Trans i18nKey="tools/docker:modals.selectBoard.title" />
+      </Title>
+    ),
+    innerProps,
+  });
+};