feat(integration): improve integration test connection (#3005)

apps/nextjs/src/app/[locale]/manage/tools/certificates/_components/add-certificate.tsx

@@ -1,82 +1,23 @@
 "use client";
 
-import { Button, FileInput, Group, Stack } from "@mantine/core";
-import { IconCertificate } from "@tabler/icons-react";
-import { z } from "zod";
+import { Button } from "@mantine/core";
 
-import { clientApi } from "@homarr/api/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
-import { useZodForm } from "@homarr/form";
-import { createModal, useModalAction } from "@homarr/modals";
-import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useModalAction } from "@homarr/modals";
+import { AddCertificateModal } from "@homarr/modals-collection";
 import { useI18n } from "@homarr/translation/client";
-import { superRefineCertificateFile } from "@homarr/validation/certificates";
 
 export const AddCertificateButton = () => {
   const { openModal } = useModalAction(AddCertificateModal);
   const t = useI18n();
 
   const handleClick = () => {
-    openModal({});
+    openModal({
+      async onSuccess() {
+        await revalidatePathActionAsync("/manage/tools/certificates");
+      },
+    });
   };
 
   return <Button onClick={handleClick}>{t("certificate.action.create.label")}</Button>;
 };
-
-const AddCertificateModal = createModal(({ actions }) => {
-  const t = useI18n();
-  const form = useZodForm(
-    z.object({
-      file: z.instanceof(File).nullable().superRefine(superRefineCertificateFile),
-    }),
-    {
-      initialValues: {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        file: null!,
-      },
-    },
-  );
-  const { mutateAsync } = clientApi.certificates.addCertificate.useMutation();
-
-  return (
-    <form
-      onSubmit={form.onSubmit(async (values) => {
-        const formData = new FormData();
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        formData.set("file", values.file!);
-        await mutateAsync(formData, {
-          async onSuccess() {
-            showSuccessNotification({
-              title: t("certificate.action.create.notification.success.title"),
-              message: t("certificate.action.create.notification.success.message"),
-            });
-            await revalidatePathActionAsync("/manage/tools/certificates");
-            actions.closeModal();
-          },
-          onError() {
-            showErrorNotification({
-              title: t("certificate.action.create.notification.error.title"),
-              message: t("certificate.action.create.notification.error.message"),
-            });
-          },
-        });
-      })}
-    >
-      <Stack>
-        <FileInput leftSection={<IconCertificate size={16} />} {...form.getInputProps("file")} />
-        <Group justify="end">
-          <Button onClick={actions.closeModal} variant="subtle" color="gray">
-            {t("common.action.cancel")}
-          </Button>
-          <Button type="submit" loading={form.submitting}>
-            {t("common.action.add")}
-          </Button>
-        </Group>
-      </Stack>
-    </form>
-  );
-}).withOptions({
-  defaultTitle(t) {
-    return t("certificate.action.create.label");
-  },
-});

apps/nextjs/src/app/[locale]/manage/tools/certificates/hostnames/_components/remove-hostname.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { ActionIcon } from "@mantine/core";
+import { IconTrash } from "@tabler/icons-react";
+
+import { clientApi } from "@homarr/api/client";
+import { revalidatePathActionAsync } from "@homarr/common/client";
+import { useConfirmModal } from "@homarr/modals";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useI18n } from "@homarr/translation/client";
+
+interface RemoveHostnameActionIconProps {
+  hostname: string;
+  thumbprint: string;
+}
+
+export const RemoveHostnameActionIcon = (input: RemoveHostnameActionIconProps) => {
+  const { mutateAsync } = clientApi.certificates.removeTrustedHostname.useMutation();
+  const { openConfirmModal } = useConfirmModal();
+  const t = useI18n();
+
+  const handleRemove = () => {
+    openConfirmModal({
+      title: t("certificate.action.removeHostname.label"),
+      children: t("certificate.action.removeHostname.confirm"),
+      // eslint-disable-next-line no-restricted-syntax
+      async onConfirm() {
+        await mutateAsync(input, {
+          async onSuccess() {
+            await revalidatePathActionAsync("/manage/tools/certificates/hostnames");
+            showSuccessNotification({
+              title: t("certificate.action.removeHostname.notification.success.title"),
+              message: t("certificate.action.removeHostname.notification.success.message"),
+            });
+          },
+          onError() {
+            showErrorNotification({
+              title: t("certificate.action.removeHostname.notification.error.title"),
+              message: t("certificate.action.removeHostname.notification.error.message"),
+            });
+          },
+        });
+      },
+    });
+  };
+
+  return (
+    <ActionIcon color="red" variant="subtle" onClick={handleRemove}>
+      <IconTrash color="red" size={16} stroke={1.5} />
+    </ActionIcon>
+  );
+};

apps/nextjs/src/app/[locale]/manage/tools/certificates/hostnames/page.tsx

@@ -0,0 +1,99 @@
+import { X509Certificate } from "node:crypto";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import {
+  Button,
+  Group,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+} from "@mantine/core";
+import { IconCertificateOff } from "@tabler/icons-react";
+
+import { auth } from "@homarr/auth/next";
+import { getTrustedCertificateHostnamesAsync } from "@homarr/certificates/server";
+import { getI18n } from "@homarr/translation/server";
+
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import { NoResults } from "~/components/no-results";
+import { RemoveHostnameActionIcon } from "./_components/remove-hostname";
+
+export default async function TrustedHostnamesPage() {
+  const session = await auth();
+  if (!session?.user.permissions.includes("admin")) {
+    notFound();
+  }
+
+  const t = await getI18n();
+
+  const trustedHostnames = await getTrustedCertificateHostnamesAsync().then((hostnames) => {
+    return hostnames.map((hostname) => {
+      let subject: string | null;
+      try {
+        subject = new X509Certificate(hostname.certificate).subject;
+      } catch {
+        subject = null;
+      }
+      return {
+        ...hostname,
+        subject,
+      };
+    });
+  });
+
+  return (
+    <>
+      <DynamicBreadcrumb />
+
+      <Stack>
+        <Group justify="space-between">
+          <Stack gap={4}>
+            <Title>{t("certificate.page.hostnames.title")}</Title>
+            <Text>{t("certificate.page.hostnames.description")}</Text>
+          </Stack>
+
+          <Button variant="default" component={Link} href="/manage/tools/certificates">
+            {t("certificate.page.hostnames.toCertificates")}
+          </Button>
+        </Group>
+
+        {trustedHostnames.length === 0 && (
+          <NoResults icon={IconCertificateOff} title={t("certificate.page.hostnames.noResults.title")} />
+        )}
+
+        {trustedHostnames.length >= 1 && (
+          <Table>
+            <TableThead>
+              <TableTr>
+                <TableTh>{t("certificate.field.hostname.label")}</TableTh>
+                <TableTh>{t("certificate.field.subject.label")}</TableTh>
+                <TableTh>{t("certificate.field.fingerprint.label")}</TableTh>
+                <TableTh></TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {trustedHostnames.map(({ hostname, subject, thumbprint }) => (
+                <TableTr key={`${hostname}-${thumbprint}`}>
+                  <TableTd>{hostname}</TableTd>
+                  <TableTd>{subject}</TableTd>
+                  <TableTd>{thumbprint}</TableTd>
+                  <TableTd>
+                    <Group justify="end">
+                      <RemoveHostnameActionIcon hostname={hostname} thumbprint={thumbprint} />
+                    </Group>
+                  </TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        )}
+      </Stack>
+    </>
+  );
+}

apps/nextjs/src/app/[locale]/manage/tools/certificates/page.tsx

@@ -1,6 +1,7 @@
 import { X509Certificate } from "node:crypto";
+import Link from "next/link";
 import { notFound } from "next/navigation";
-import { Card, Group, SimpleGrid, Stack, Text, Title } from "@mantine/core";
+import { Button, Card, Group, SimpleGrid, Stack, Text, Title } from "@mantine/core";
 import { IconAlertTriangle, IconCertificate, IconCertificateOff } from "@tabler/icons-react";
 import dayjs from "dayjs";
 
@@ -64,7 +65,12 @@ export default async function CertificatesPage({ params }: CertificatesPageProps
             <Text>{t("certificate.page.list.description")}</Text>
           </Stack>
 
-          <AddCertificateButton />
+          <Group>
+            <Button variant="default" component={Link} href="/manage/tools/certificates/hostnames">
+              {t("certificate.page.list.toHostnames")}
+            </Button>
+            <AddCertificateButton />
+          </Group>
         </Group>
 
         {x509Certificates.length === 0 && (