refactor(ui-react): use per-key custom_field endpoints

Replaces useUpdateDeviceCustomFields with useSetDeviceCustomField and
useDeleteDeviceCustomField. CustomFieldsSection now PUTs a single key on
add and DELETEs a single key on remove, dropping the bulk map replace
that forced sending name in the body. Gates the section on the new
device:customField:update permission.

Author: gustavosbarreto

ui-react/apps/console/src/hooks/useDeviceMutations.ts

@@ -6,6 +6,8 @@ import {
   deleteDeviceMutation,
   updateDeviceMutation,
   pullTagFromDeviceMutation,
+  setDeviceCustomFieldMutation,
+  deleteDeviceCustomFieldMutation,
 } from "../client/@tanstack/react-query.gen";
 import { createTag, pushTagToDevice } from "../client";
 import { useInvalidateByIds } from "./useInvalidateQueries";
@@ -42,10 +44,18 @@ export function useRenameDevice() {
   });
 }
 
-export function useUpdateDeviceCustomFields() {
+export function useSetDeviceCustomField() {
   const invalidate = useInvalidateByIds("getDevices", "getDevice");
   return useMutation({
-    ...updateDeviceMutation(),
+    ...setDeviceCustomFieldMutation(),
+    onSuccess: invalidate,
+  });
+}
+
+export function useDeleteDeviceCustomField() {
+  const invalidate = useInvalidateByIds("getDevices", "getDevice");
+  return useMutation({
+    ...deleteDeviceCustomFieldMutation(),
     onSuccess: invalidate,
   });
 }

ui-react/apps/console/src/pages/DeviceDetails.tsx

@@ -25,7 +25,8 @@ import {
   useAddDeviceTag,
   useRemoveDeviceTag,
   useRemoveDevice,
-  useUpdateDeviceCustomFields,
+  useSetDeviceCustomField,
+  useDeleteDeviceCustomField,
 } from "../hooks/useDeviceMutations";
 import { useNamespace } from "../hooks/useNamespaces";
 import { useAuthStore } from "../stores/authStore";
@@ -283,8 +284,9 @@ function CustomFieldsSection({
   uid: string;
   customFields: Record<string, string>;
 }) {
-  const mutation = useUpdateDeviceCustomFields();
-  const canEdit = useHasPermission("device:rename");
+  const setMutation = useSetDeviceCustomField();
+  const deleteMutation = useDeleteDeviceCustomField();
+  const canEdit = useHasPermission("device:customField:update");
   const [keyInput, setKeyInput] = useState("");
   const [valueInput, setValueInput] = useState("");
   const [adding, setAdding] = useState(false);
@@ -302,9 +304,9 @@ function CustomFieldsSection({
     setError(null);
     setAdding(true);
     try {
-      await mutation.mutateAsync({
-        path: { uid },
-        body: { name: "", custom_fields: { ...customFields, [key]: value } },
+      await setMutation.mutateAsync({
+        path: { uid, key },
+        body: { value },
       });
       setKeyInput("");
       setValueInput("");
@@ -315,12 +317,9 @@ function CustomFieldsSection({
   };
 
   const handleRemove = async (key: string) => {
-    const updated = { ...customFields };
-    delete updated[key];
     try {
-      await mutation.mutateAsync({
-        path: { uid },
-        body: { name: "", custom_fields: updated },
+      await deleteMutation.mutateAsync({
+        path: { uid, key },
       });
     } catch {
       /* invalidation handles UI update */

ui-react/apps/console/src/pages/devices/__tests__/DeviceDetails.test.tsx

@@ -11,14 +11,16 @@ vi.mock("@/hooks/useDevice", () => ({
   useDevice: vi.fn(),
 }));
 
-const mockUpdateCustomFields = vi.fn();
+const mockSetCustomField = vi.fn();
+const mockDeleteCustomField = vi.fn();
 
 vi.mock("@/hooks/useDeviceMutations", () => ({
   useRenameDevice: () => ({ mutateAsync: vi.fn() }),
   useAddDeviceTag: () => ({ mutateAsync: vi.fn() }),
   useRemoveDeviceTag: () => ({ mutateAsync: vi.fn() }),
   useRemoveDevice: () => ({ mutateAsync: vi.fn() }),
-  useUpdateDeviceCustomFields: () => ({ mutateAsync: mockUpdateCustomFields }),
+  useSetDeviceCustomField: () => ({ mutateAsync: mockSetCustomField }),
+  useDeleteDeviceCustomField: () => ({ mutateAsync: mockDeleteCustomField }),
 }));
 
 vi.mock("@/hooks/useNamespaces", () => ({
@@ -122,7 +124,8 @@ function renderPage() {
 
 describe("DeviceDetails", () => {
   beforeEach(() => {
-    mockUpdateCustomFields.mockReset().mockResolvedValue({});
+    mockSetCustomField.mockReset().mockResolvedValue({});
+    mockDeleteCustomField.mockReset().mockResolvedValue({});
     vi.mocked(useDevice).mockReturnValue({
       device: null,
       isLoading: false,
@@ -258,11 +261,9 @@ describe("DeviceDetails", () => {
       await user.click(xBtn);
       await user.click(screen.getByText("Yes"));
 
-      expect(mockUpdateCustomFields).toHaveBeenCalledWith(
+      expect(mockDeleteCustomField).toHaveBeenCalledWith(
         expect.objectContaining({
-          body: expect.objectContaining({
-            custom_fields: { owner: "team-a" },
-          }),
+          path: expect.objectContaining({ uid: "test-uid", key: "env" }),
         }),
       );
     });
@@ -280,11 +281,10 @@ describe("DeviceDetails", () => {
       await user.type(screen.getByPlaceholderText("key"), "region");
       await user.type(screen.getByPlaceholderText("value"), "us-east{Enter}");
 
-      expect(mockUpdateCustomFields).toHaveBeenCalledWith(
+      expect(mockSetCustomField).toHaveBeenCalledWith(
         expect.objectContaining({
-          body: expect.objectContaining({
-            custom_fields: { region: "us-east" },
-          }),
+          path: expect.objectContaining({ uid: "test-uid", key: "region" }),
+          body: { value: "us-east" },
         }),
       );
     });
@@ -303,7 +303,7 @@ describe("DeviceDetails", () => {
       await user.type(screen.getByPlaceholderText("value"), "staging{Enter}");
 
       expect(screen.getByText("This key already exists.")).toBeInTheDocument();
-      expect(mockUpdateCustomFields).not.toHaveBeenCalled();
+      expect(mockSetCustomField).not.toHaveBeenCalled();
     });
   });
 });

ui-react/apps/console/src/utils/permission.ts

@@ -25,6 +25,7 @@ const permissions = {
   "device:accept": RoleLevel.OPERATOR,
   "device:reject": RoleLevel.OPERATOR,
   "device:rename": RoleLevel.OPERATOR,
+  "device:customField:update": RoleLevel.OPERATOR,
   "device:remove": RoleLevel.ADMINISTRATOR,
   "device:choose": RoleLevel.OWNER,