move resource niceid update to general page

src/app/[orgId]/settings/resources/[niceId]/general/page.tsx

@@ -68,9 +68,9 @@ export default function GeneralForm() {
     const router = useRouter();
     const t = useTranslations();
     const [editDomainOpen, setEditDomainOpen] = useState(false);
-    const {licenseStatus } = useLicenseStatusContext();
+    const { licenseStatus } = useLicenseStatusContext();
     const subscriptionStatus = useSubscriptionStatusContext();
-    const {user} = useUserContext();
+    const { user } = useUserContext();
 
     const { env } = useEnvContext();
 
@@ -102,6 +102,7 @@ export default function GeneralForm() {
             enabled: z.boolean(),
             subdomain: z.string().optional(),
             name: z.string().min(1).max(255),
+            niceId: z.string().min(1).max(255).optional(),
             domainId: z.string().optional(),
             proxyPort: z.number().int().min(1).max(65535).optional(),
             // enableProxy: z.boolean().optional()
@@ -130,6 +131,7 @@ export default function GeneralForm() {
         defaultValues: {
             enabled: resource.enabled,
             name: resource.name,
+            niceId: resource.niceId,
             subdomain: resource.subdomain ? resource.subdomain : undefined,
             domainId: resource.domainId || undefined,
             proxyPort: resource.proxyPort || undefined,
@@ -192,6 +194,7 @@ export default function GeneralForm() {
                 {
                     enabled: data.enabled,
                     name: data.name,
+                    niceId: data.niceId,
                     subdomain: data.subdomain ? toASCII(data.subdomain) : undefined,
                     domainId: data.domainId,
                     proxyPort: data.proxyPort,
@@ -212,16 +215,12 @@ export default function GeneralForm() {
             });
 
         if (res && res.status === 200) {
-            toast({
+            const updated = res.data.data;
-                title: t("resourceUpdated"),
-                description: t("resourceUpdatedDescription")
-            });
-
-            const resource = res.data.data;
 
             updateResource({
                 enabled: data.enabled,
                 name: data.name,
+                niceId: data.niceId,
                 subdomain: data.subdomain,
                 fullDomain: resource.fullDomain,
                 proxyPort: data.proxyPort,
@@ -230,8 +229,20 @@ export default function GeneralForm() {
                 // })
             });
 
-            router.refresh();
+            toast({
+                title: t("resourceUpdated"),
+                description: t("resourceUpdatedDescription")
+            });
+
+            if (data.niceId && data.niceId !== resource?.niceId) {
+                router.replace(`/${updated.orgId}/settings/resources/${data.niceId}/general`);
+            } else {
+                router.refresh();
+            }
+
+            setSaveLoading(false);
         }
+
         setSaveLoading(false);
     }
 
@@ -304,6 +315,24 @@ export default function GeneralForm() {
                                             )}
                                         />
 
+                                        <FormField
+                                            control={form.control}
+                                            name="niceId"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>{t("niceId") || "Nice ID"}</FormLabel>
+                                                    <FormControl>
+                                                        <Input
+                                                            {...field}
+                                                            placeholder="Enter Nice ID"
+                                                            className="flex-1"
+                                                        />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+
                                         {!resource.http && (
                                             <>
                                                 <FormField

src/app/[orgId]/settings/sites/[niceId]/general/page.tsx

@@ -37,7 +37,7 @@ import { Tag, TagInput } from "@app/components/tags/tag-input";
 
 const GeneralFormSchema = z.object({
     name: z.string().nonempty("Name is required"),
-    niceId: z.string().optional(),
+    niceId: z.string().min(1).max(255).optional(),
     dockerSocketEnabled: z.boolean().optional(),
     remoteSubnets: z
         .array(

src/components/ResourceInfoBox.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Check, InfoIcon, Pencil, ShieldCheck, ShieldOff, X } from "lucide-react";
+import { ShieldCheck, ShieldOff } from "lucide-react";
 import { useResourceContext } from "@app/hooks/useResourceContext";
 import CopyToClipboard from "@app/components/CopyToClipboard";
 import {
@@ -14,167 +14,25 @@ import { useTranslations } from "next-intl";
 import CertificateStatus from "@app/components/private/CertificateStatus";
 import { toUnicode } from "punycode";
 import { useEnvContext } from "@app/hooks/useEnvContext";
-import { Button } from "./ui/button";
-import { Input } from "./ui/input";
-import { createApiClient, formatAxiosError } from "@app/lib/api";
-import { useState } from "react";
-import { useToast } from "@app/hooks/useToast";
-import { UpdateResourceResponse } from "@server/routers/resource";
-import { AxiosResponse } from "axios";
-import { useRouter, usePathname } from "next/navigation";
 
 type ResourceInfoBoxType = {};
 
 export default function ResourceInfoBox({ }: ResourceInfoBoxType) {
     const { resource, authInfo, updateResource } = useResourceContext();
     const { env } = useEnvContext();
-    const api = createApiClient(useEnvContext());
-    const router = useRouter();
-    const pathname = usePathname();
-
-    const [isEditing, setIsEditing] = useState(false);
-    const [niceId, setNiceId] = useState(resource.niceId);
-    const [tempNiceId, setTempNiceId] = useState(resource.niceId);
-    const [isLoading, setIsLoading] = useState(false);
-    const { toast } = useToast();
 
     const t = useTranslations();
 
     const fullUrl = `${resource.ssl ? "https" : "http"}://${toUnicode(resource.fullDomain || "")}`;
 
 
-    const handleEdit = () => {
-        setTempNiceId(niceId);
-        setIsEditing(true);
-    };
-
-    const handleCancel = () => {
-        setTempNiceId(niceId);
-        setIsEditing(false);
-    };
-
-    const handleSave = async () => {
-        if (tempNiceId.trim() === "") {
-            toast({
-                variant: "destructive",
-                title: t("error"),
-                description: t("niceIdCannotBeEmpty")
-            });
-            return;
-        }
-
-        if (tempNiceId === niceId) {
-            setIsEditing(false);
-            return;
-        }
-
-        setIsLoading(true);
-
-        try {
-            const res = await api
-                .post<AxiosResponse<UpdateResourceResponse>>(
-                    `resource/${resource?.resourceId}`,
-                    {
-                        niceId: tempNiceId.trim()
-                    }
-                );
-
-            setNiceId(tempNiceId.trim());
-            setIsEditing(false);
-
-            updateResource({
-                niceId: tempNiceId.trim()
-            });
-
-            // update the URL to reflect the new niceId
-            const newPath = pathname.replace(`/resources/${niceId}`, `/resources/${tempNiceId.trim()}`);
-            router.replace(newPath);
-
-            toast({
-                title: t("niceIdUpdated"),
-                description: t("niceIdUpdatedSuccessfully")
-            });
-        } catch (e: any) {
-            toast({
-                variant: "destructive",
-                title: t("niceIdUpdateError"),
-                description: formatAxiosError(
-                    e,
-                    t("niceIdUpdateErrorDescription")
-                )
-            });
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-        if (e.key === "Enter") {
-            handleSave();
-        } else if (e.key === "Escape") {
-            handleCancel();
-        }
-    };
-
     return (
         <Alert>
             <AlertDescription>
                 {/* 4 cols because of the certs */}
                 <InfoSections
-                    cols={resource.http && env.flags.usePangolinDns ? 5 : 4}
+                    cols={resource.http && env.flags.usePangolinDns ? 4 : 3}
                 >
-                    <InfoSection>
-                        <InfoSectionTitle>
-                            {t("niceId")}
-                        </InfoSectionTitle>
-                        <InfoSectionContent>
-                            <div className="flex items-center gap-2">
-                                {isEditing ? (
-                                    <>
-                                        <Input
-                                            value={tempNiceId}
-                                            onChange={(e) => setTempNiceId(e.target.value)}
-                                            onKeyDown={handleKeyDown}
-                                            disabled={isLoading}
-                                            className="flex-1"
-                                            autoFocus
-                                        />
-                                        <Button
-                                            size="icon"
-                                            variant="ghost"
-                                            onClick={handleSave}
-                                            disabled={isLoading}
-                                            className="h-8 w-8"
-                                        >
-                                            <Check className="h-4 w-4" />
-                                        </Button>
-                                        <Button
-                                            size="icon"
-                                            variant="ghost"
-                                            onClick={handleCancel}
-                                            disabled={isLoading}
-                                            className="h-8 w-8"
-                                        >
-                                            <X className="h-4 w-4" />
-                                        </Button>
-                                    </>
-                                ) : (
-                                    <>
-                                        <span>{niceId}</span>
-                                        <Button
-                                            size="icon"
-                                            variant="ghost"
-                                            onClick={handleEdit}
-                                            className="h-8 w-8"
-                                        >
-                                            <Pencil className="h-4 w-4" />
-                                        </Button>
-                                    </>
-                                )}
-                            </div>
-                        </InfoSectionContent>
-                    </InfoSection>
                     {resource.http ? (
                         <>
                             <InfoSection>