🚧 edit niceid in private resources

src/components/EditInternalResourceDialog.tsx

@@ -18,7 +18,7 @@ import { resourceQueries } from "@app/lib/queries";
 import { ListSitesResponse } from "@server/routers/site";
 import { useQueryClient } from "@tanstack/react-query";
 import { useTranslations } from "next-intl";
-import { useState } from "react";
+import { useState, useTransition } from "react";
 import {
     cleanForFQDN,
     InternalResourceForm,
@@ -49,10 +49,9 @@ export default function EditInternalResourceDialog({
     const t = useTranslations();
     const api = createApiClient(useEnvContext());
     const queryClient = useQueryClient();
-    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [isSubmitting, startTransition] = useTransition();
 
     async function handleSubmit(values: InternalResourceFormValues) {
-        setIsSubmitting(true);
         try {
             let data = { ...values };
             if (data.mode === "host" && isHostname(data.destination)) {
@@ -70,6 +69,7 @@ export default function EditInternalResourceDialog({
                 name: data.name,
                 siteId: data.siteId,
                 mode: data.mode,
+                niceId: data.niceId,
                 destination: data.destination,
                 alias:
                     data.alias &&
@@ -127,8 +127,6 @@ export default function EditInternalResourceDialog({
                 ),
                 variant: "destructive"
             });
-        } finally {
-            setIsSubmitting(false);
         }
     }
 
@@ -162,7 +160,9 @@ export default function EditInternalResourceDialog({
                         orgId={orgId}
                         siteResourceId={resource.id}
                         formId="edit-internal-resource-form"
-                        onSubmit={handleSubmit}
+                        onSubmit={(values) =>
+                            startTransition(() => handleSubmit(values))
+                        }
                     />
                 </CredenzaBody>
                 <CredenzaFooter>

src/components/InternalResourceForm.tsx

@@ -132,6 +132,7 @@ export type InternalResourceData = {
     siteName: string;
     mode: "host" | "cidr";
     siteId: number;
+    niceId: string;
     destination: string;
     alias?: string | null;
     tcpPortRangeString?: string | null;
@@ -149,6 +150,7 @@ export type InternalResourceFormValues = {
     mode: "host" | "cidr";
     destination: string;
     alias?: string | null;
+    niceId?: string;
     tcpPortRangeString?: string | null;
     udpPortRangeString?: string | null;
     disableIcmp?: boolean;
@@ -243,6 +245,12 @@ export function InternalResourceForm({
                     : undefined
             ),
         alias: z.string().nullish(),
+        niceId: z
+            .string()
+            .min(1)
+            .max(255)
+            .regex(/^[a-zA-Z0-9-]+$/)
+            .optional(),
         tcpPortRangeString: createPortRangeStringSchema(t),
         udpPortRangeString: createPortRangeStringSchema(t),
         disableIcmp: z.boolean().optional(),
@@ -387,6 +395,7 @@ export function InternalResourceForm({
                   disableIcmp: resource.disableIcmp ?? false,
                   authDaemonMode: resource.authDaemonMode ?? "site",
                   authDaemonPort: resource.authDaemonPort ?? null,
+                  niceId: resource.niceId,
                   roles: [],
                   users: [],
                   clients: []
@@ -534,7 +543,7 @@ export function InternalResourceForm({
                 className="space-y-6"
                 id={formId}
             >
-                <div className="grid grid-cols-2 gap-4">
+                <div className="grid gap-4">
                     <FormField
                         control={form.control}
                         name="name"
@@ -548,6 +557,19 @@ export function InternalResourceForm({
                             </FormItem>
                         )}
                     />
+                    <FormField
+                        control={form.control}
+                        name="niceId"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>{t("identifier")}</FormLabel>
+                                <FormControl>
+                                    <Input {...field} />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
                     <FormField
                         control={form.control}
                         name="siteId"