Adding gateway resources

This commit is contained in:
Owen
2026-09-24 09:49:08 -04:00
parent 1dace9c9f7
commit a17b870ed2
12 changed files with 247 additions and 45 deletions
@@ -0,0 +1,106 @@
"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 { createGatewayFormSchema } 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 { useSaveSiteResource } from "@app/hooks/useSaveSiteResource";
import { buildSelectedSitesForResource } from "@app/lib/privateResourceUtils";
export default function PrivateResourceGatewayPage() {
const t = useTranslations();
const { save, siteResource } = useSaveSiteResource();
const [selectedSites, setSelectedSites] = useState(() =>
buildSelectedSitesForResource(siteResource)
);
const formSchema = useMemo(() => createGatewayFormSchema(t), [t]);
type FormValues = z.infer<typeof formSchema>;
const form = useForm<FormValues>({
resolver: zodResolver(formSchema),
defaultValues: {
siteIds: siteResource.siteIds,
mode: "gateway"
}
});
const [, formAction, saveLoading] = useActionState(async () => {
const isValid = await form.trigger();
if (!isValid) return;
const data = form.getValues();
await save({
siteIds: data.siteIds,
mode: "gateway"
});
}, null);
return (
<SettingsContainer>
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
{t("gatewaySettings")}
</SettingsSectionTitle>
<SettingsSectionDescription>
{t(
"editInternalResourceDialogDestinationGatewayDescription"
)}
</SettingsSectionDescription>
</SettingsSectionHeader>
<SettingsSectionBody>
<SettingsSectionForm variant="half">
<Form {...form}>
<form
action={formAction}
id="private-resource-gateway-form"
>
<SettingsFormGrid>
<SettingsFormCell span="half">
<PrivateResourceSitesField
control={form.control}
orgId={siteResource.orgId}
selectedSites={selectedSites}
onSelectedSitesChange={
setSelectedSites
}
/>
</SettingsFormCell>
</SettingsFormGrid>
</form>
</Form>
</SettingsSectionForm>
</SettingsSectionBody>
<SettingsSectionFooter>
<Button
type="submit"
form="private-resource-gateway-form"
loading={saveLoading}
>
{t("saveSettings")}
</Button>
</SettingsSectionFooter>
</SettingsSection>
</SettingsContainer>
);
}
@@ -53,7 +53,8 @@ export default async function PrivateResourceLayout(
| "cidrSettings"
| "httpSettings"
| "sshSettings"
| "inferenceSettings";
| "inferenceSettings"
| "gatewaySettings";
const navItems = [
{
@@ -164,6 +164,11 @@ export default function CreatePrivateResourcePage() {
value: "inference" as const,
title: t("createInternalResourceDialogModeInference"),
description: t("resourceTypeInferenceDescription")
},
{
value: "gateway" as const,
title: t("createInternalResourceDialogModeGateway"),
description: t("resourceTypeGatewayDescription")
}
];
@@ -560,6 +565,38 @@ export default function CreatePrivateResourcePage() {
</SettingsSection>
)}
{/* Gateway destination */}
{mode === "gateway" && (
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
{t("gatewaySettings")}
</SettingsSectionTitle>
<SettingsSectionDescription>
{t(
"editInternalResourceDialogDestinationGatewayDescription"
)}
</SettingsSectionDescription>
</SettingsSectionHeader>
<SettingsSectionBody>
<SettingsSectionForm variant="half">
<SettingsFormGrid>
<SettingsFormCell span="half">
<PrivateResourceSitesField
control={form.control}
orgId={orgId}
selectedSites={selectedSites}
onSelectedSitesChange={
setSelectedSites
}
/>
</SettingsFormCell>
</SettingsFormGrid>
</SettingsSectionForm>
</SettingsSectionBody>
</SettingsSection>
)}
{/* HTTP configuration */}
{mode === "http" && (
<SettingsSection>
+2 -1
View File
@@ -93,7 +93,8 @@ export function PrivateResourceInfoSections({
cidr: t("editInternalResourceDialogModeCidr"),
http: t("editInternalResourceDialogModeHttp"),
ssh: t("editInternalResourceDialogModeSsh"),
inference: t("editInternalResourceDialogModeInference")
inference: t("editInternalResourceDialogModeInference"),
gateway: t("editInternalResourceDialogModeGateway")
};
const destination = formatSiteResourceDestinationDisplay({
+2 -1
View File
@@ -376,7 +376,8 @@ export default function PrivateResourcesTable({
cidr: t("editInternalResourceDialogModeCidr"),
http: t("editInternalResourceDialogModeHttp"),
ssh: t("editInternalResourceDialogModeSsh"),
inference: t("editInternalResourceDialogModeInference")
inference: t("editInternalResourceDialogModeInference"),
gateway: t("editInternalResourceDialogModeGateway")
};
return <span>{modeLabels[resourceRow.mode]}</span>;
}
+2 -1
View File
@@ -71,7 +71,8 @@ function PrivateResourceMeta({ row }: { row: SiteResourceRow }) {
cidr: t("editInternalResourceDialogModeCidr"),
http: t("editInternalResourceDialogModeHttp"),
ssh: t("editInternalResourceDialogModeSsh"),
inference: t("editInternalResourceDialogModeInference")
inference: t("editInternalResourceDialogModeInference"),
gateway: t("editInternalResourceDialogModeGateway")
};
const dest = formatSiteResourceDestinationDisplay({
mode: row.mode,
+7
View File
@@ -652,6 +652,13 @@ export function createCidrFormSchema(t: TranslateFn) {
.superRefine((data, ctx) => destinationRefine(data, ctx, t));
}
export function createGatewayFormSchema(t: TranslateFn) {
return z.object({
siteIds: z.array(z.number().int().positive()).min(1),
mode: z.literal("gateway")
});
}
export function createHttpFormSchema(t: TranslateFn) {
return z
.object({