feat: add edit hostname

frontend/src/components/hostname-edit.tsx

@@ -0,0 +1,89 @@
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { Server } from "@/models/server";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useRef } from "react";
+import { toast } from "sonner";
+
+export function HostnameEditDialog({ serverId }: { serverId: number }) {
+  const queryClient = useQueryClient();
+  const query = useQuery({
+    queryKey: ["server", serverId],
+    enabled: Boolean(serverId),
+    queryFn: async () => {
+      const response = await fetch(`/api/servers/${serverId}`);
+      if (!response.ok) {
+        throw new Error(`Failed to load server (${response.status})`);
+      }
+      return (await response.json()) as Server;
+    },
+    refetchInterval: 5000,
+  });
+  const ref = useRef<HTMLInputElement>(null);
+  async function updateHostname() {
+    let newHostname = ref.current?.value || "";
+    if (!newHostname || newHostname.trim().length === 0) {
+      toast("Hostname is required", {
+        description: `Could not update hostname for server ${query.data?.nickname ?? query.data?.name}`,
+      });
+      return;
+    }
+    let url = `/api/servers/${serverId}/hostname`;
+    let response = await fetch(url + "?new_hostname=" + newHostname, {
+      method: "PATCH",
+    });
+    if (!response.ok) {
+      toast(`Failed to update server (${response.status})`);
+      return;
+    }
+    await queryClient.invalidateQueries({ queryKey: ["server", serverId] });
+  }
+  return (
+    <Dialog>
+      <form>
+        <DialogTrigger asChild>
+          <Button variant="outline">Edit Hostname</Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Edit Hostname</DialogTitle>
+            <DialogDescription>
+              Make changes to the server hostname here. Click save when
+              you&apos;re done.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4">
+            <div className="grid gap-3">
+              <Label htmlFor="hostname">Hostname</Label>
+              <Input
+                ref={ref}
+                id="hostname"
+                name="hostname"
+                defaultValue={query.data?.hostname}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button type="submit" onClick={() => updateHostname()}>
+              Save changes
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </form>
+    </Dialog>
+  );
+}

frontend/src/components/ui/dialog.tsx

@@ -0,0 +1,141 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

frontend/src/routes/server.$serverId.tsx

@@ -18,6 +18,7 @@ import {
 import { Skeleton } from "@/components/ui/skeleton";
 import { Button } from "@/components/ui/button";
 import { cityToFlag } from "@/models/cityflags";
+import { HostnameEditDialog } from "@/components/hostname-edit";
 
 export const Route = createFileRoute("/server/$serverId")({
   component: RouteComponent,
@@ -126,6 +127,11 @@ function ServerDetails({ server }: { server: Server }) {
                 </Badge>
                 <Badge variant="secondary">Max CPU: {server.maxCpuCount}</Badge>
               </div>
+
+              <Separator />
+              <div>
+                <HostnameEditDialog serverId={server.id} />
+              </div>
             </CardContent>
           </Card>
         </TabsContent>

scp_core/src/apis/default_api.rs

@@ -2724,14 +2724,23 @@ pub async fn api_v1_servers_server_id_patch(
     if let Some(ref user_agent) = configuration.user_agent {
         req_builder = req_builder.header(reqwest::header::USER_AGENT, user_agent.clone());
     }
-    req_builder = req_builder.json(&p_body_api_v1_servers_server_id_patch_request);
+
+    req_builder = req_builder
+        .body(serde_json::to_string(&p_body_api_v1_servers_server_id_patch_request).unwrap());
 
     if let Some(ref token) = configuration.bearer_access_token {
         req_builder =
             req_builder.header(reqwest::header::AUTHORIZATION, format!("Bearer {}", token));
     }
 
+    req_builder = req_builder.header(reqwest::header::ACCEPT, "application/json");
+    req_builder = req_builder.header(
+        reqwest::header::CONTENT_TYPE,
+        "application/merge-patch+json",
+    );
+
     let req = req_builder.build()?;
+    dbg!(req.body().unwrap());
     let resp = configuration.client.execute(req).await?;
 
     let status = resp.status();

scp_core/src/models/api_v1_servers__server_id__patch_request.rs

@@ -0,0 +1,34 @@
+/*
+ * SCP (Server Control Panel) REST API
+ *
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 2025.1218.164029
+ * 
+ * Generated by: https://openapi-generator.tech
+ */
+
+use crate::models;
+use serde::{Deserialize, Serialize};
+
+#[derive(Clone, Debug, PartialEq, Serialize, Deserialize)]
+#[serde(untagged)]
+pub enum ApiV1ServersServerIdPatchRequest {
+    ServerStatePatch(Box<models::ServerStatePatch>),
+    ServerAutostartPatch(Box<models::ServerAutostartPatch>),
+    ServerBootorderPatch(Box<models::ServerBootorderPatch>),
+    ServerOsOptimizationPatch(Box<models::ServerOsOptimizationPatch>),
+    ServerCpuTopologyPatch(Box<models::ServerCpuTopologyPatch>),
+    ServerUefiPatch(Box<models::ServerUefiPatch>),
+    ServerHostnamePatch(Box<models::ServerHostnamePatch>),
+    ServerNicknamePatch(Box<models::ServerNicknamePatch>),
+    ServerKeyboardLayoutPatch(Box<models::ServerKeyboardLayoutPatch>),
+    ServerSetRootPasswordPatch(Box<models::ServerSetRootPasswordPatch>),
+}
+
+impl Default for ApiV1ServersServerIdPatchRequest {
+    fn default() -> Self {
+        Self::ServerStatePatch(Default::default())
+    }
+}
+

src/main.rs

@@ -56,6 +56,7 @@ async fn main() -> std::io::Result<()> {
             .service(auth::get_user)
             .service(servers::list_servers)
             .service(servers::get_server)
+            .service(servers::update_server_hostname)
             .service(
                 Files::new("/", "./frontend/dist")
                     .index_file("index.html")

src/servers.rs

@@ -1,4 +1,5 @@
-use actix_web::{Responder, get, web};
+use actix_web::{Responder, get, patch, web};
+use serde::Deserialize;
 
 use crate::helper;
 
@@ -26,3 +27,31 @@ pub async fn get_server(id: web::Path<i32>) -> impl Responder {
 
     serde_json::to_string(&response).unwrap()
 }
+
+#[derive(Deserialize)]
+struct HostnameRequest {
+    new_hostname: String,
+}
+
+#[patch("/api/servers/{id}/hostname")]
+pub async fn update_server_hostname(
+    id: web::Path<i32>,
+    new_hostname: web::Query<HostnameRequest>,
+) -> impl Responder {
+    let config = helper::get_authed_api_config().await.unwrap();
+    let hostname_patch = scp_core::models::server_hostname_patch::ServerHostnamePatch {
+        hostname: Some(new_hostname.new_hostname.clone()),
+    };
+    let patch_request =
+        scp_core::models::_api_v1_servers__server_id__patch_request::ApiV1ServersServerIdPatchRequest::ServerHostnamePatch(Box::new(hostname_patch));
+    let response = scp_core::apis::default_api::api_v1_servers_server_id_patch(
+        &config,
+        id.into_inner(),
+        patch_request,
+        None,
+    )
+    .await
+    .unwrap();
+
+    serde_json::to_string(&response).unwrap()
+}