Add basic page to configure the alias

2026-08-14 16:30:15 +02:00 · 2026-07-31 17:47:45 -04:00
parent 56e59a93f3
commit 42c0abedb7
5 changed files with 151 additions and 1 deletions
@@ -0,0 +1,107 @@
+"use client";
+
+import {
+    SettingsContainer,
+    SettingsFormCell,
+    SettingsFormGrid,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionFooter,
+    SettingsSectionForm,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "@app/components/Settings";
+import { Button } from "@app/components/ui/button";
+import { Form } from "@app/components/ui/form";
+import { createInferenceFormSchema } from "@app/lib/privateResourceForm";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslations } from "next-intl";
+import { useActionState, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { PrivateResourceSitesField } from "@app/components/PrivateResourceSitesField";
+import { PrivateResourceInferenceDestinationFields } from "@app/components/PrivateResourceDestinationFields";
+import { PrivateResourcePortRanges } from "@app/components/PrivateResourcePortRanges";
+import { useSaveSiteResource } from "@app/hooks/useSaveSiteResource";
+import {
+    asAnyControl,
+    asAnySetValue,
+    asAnyWatch
+} from "@app/lib/formControlUtils";
+import { buildSelectedSitesForResource } from "@app/lib/privateResourceUtils";
+
+export default function PrivateResourceInferencePage() {
+    const t = useTranslations();
+    const { save, siteResource } = useSaveSiteResource();
+    const [selectedSites, setSelectedSites] = useState(() =>
+        buildSelectedSitesForResource(siteResource)
+    );
+
+    const formSchema = useMemo(() => createInferenceFormSchema(t), [t]);
+    type FormValues = z.infer<typeof formSchema>;
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            mode: "inference",
+            alias: siteResource.alias ?? null
+        }
+    });
+
+    const [, formAction, saveLoading] = useActionState(async () => {
+        const isValid = await form.trigger();
+        if (!isValid) return;
+
+        const data = form.getValues();
+        await save({
+            mode: "inference",
+            alias: data.alias
+        });
+    }, null);
+
+    return (
+        <SettingsContainer>
+            <SettingsSection>
+                <SettingsSectionHeader>
+                    <SettingsSectionTitle>
+                        {t("hostSettings")}
+                    </SettingsSectionTitle>
+                    <SettingsSectionDescription>
+                        {t("editInternalResourceDialogDestinationDescription")}
+                    </SettingsSectionDescription>
+                </SettingsSectionHeader>
+
+                <SettingsSectionBody>
+                    <SettingsSectionForm variant="half">
+                        <Form {...form}>
+                            <form
+                                action={formAction}
+                                id="private-resource-host-form"
+                            >
+                                <SettingsFormGrid>
+                                    <SettingsFormCell span="full">
+                                        <PrivateResourceInferenceDestinationFields
+                                            control={asAnyControl(form.control)}
+                                            watch={asAnyWatch(form.watch)}
+                                        />
+                                    </SettingsFormCell>
+                                </SettingsFormGrid>
+                            </form>
+                        </Form>
+                    </SettingsSectionForm>
+                </SettingsSectionBody>
+
+                <SettingsSectionFooter>
+                    <Button
+                        type="submit"
+                        form="private-resource-host-form"
+                        loading={saveLoading}
+                    >
+                        {t("saveSettings")}
+                    </Button>
+                </SettingsSectionFooter>
+            </SettingsSection>
+        </SettingsContainer>
+    );
+}
@@ -52,7 +52,8 @@ export default async function PrivateResourceLayout(
        | "hostSettings"
        | "cidrSettings"
        | "httpSettings"
-        | "sshSettings";
+        | "sshSettings"
+        | "inferenceSettings";

    const navItems = [
        {