chore: consolidate local integration changes

devfront/src/features/clients/ClientConsentsPage.tsx

@@ -4,11 +4,14 @@ import {
   ChevronLeft,
   ChevronRight,
   Download,
+  Edit3,
   Filter,
+  Save,
   Search,
   ShieldHalf,
+  X,
 } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import { PageHeader } from "../../../../common/core/components/page";
 import {
@@ -34,11 +37,208 @@ import {
   TableHeader,
   TableRow,
 } from "../../components/ui/table";
-import { fetchClient, fetchConsents, revokeConsent } from "../../lib/devApi";
+import {
+  fetchClient,
+  fetchConsents,
+  fetchRPUserMetadata,
+  revokeConsent,
+  updateRPUserMetadata,
+} from "../../lib/devApi";
 import { t } from "../../lib/i18n";
 import { cn } from "../../lib/utils";
 import { ClientDetailTabs } from "./ClientDetailTabs";
 
+type RPClaimValueType =
+  | "text"
+  | "number"
+  | "boolean"
+  | "array"
+  | "object"
+  | "date"
+  | "datetime";
+type CustomClaimPermission = "admin_only" | "user_and_admin";
+
+type RPClaimSchema = {
+  key: string;
+  value: string;
+  valueType: RPClaimValueType;
+  readPermission: CustomClaimPermission;
+  writePermission: CustomClaimPermission;
+};
+
+type MetadataDraftRow = {
+  id: string;
+  key: string;
+  value: string;
+  valueType: RPClaimValueType;
+  readPermission: CustomClaimPermission;
+  writePermission: CustomClaimPermission;
+  schemaBacked: boolean;
+};
+
+function isCustomClaimPermission(
+  value: unknown,
+): value is CustomClaimPermission {
+  return value === "admin_only" || value === "user_and_admin";
+}
+
+function readPermissionMetadata(
+  metadata: Record<string, unknown> | undefined,
+  key: string,
+  fallback: CustomClaimPermission,
+  field: "readPermission" | "writePermission",
+) {
+  const raw = metadata?.[`${key}_permissions`];
+  if (!raw || typeof raw !== "object" || Array.isArray(raw)) {
+    return fallback;
+  }
+  const value = (raw as Record<string, unknown>)[field];
+  return isCustomClaimPermission(value) ? value : fallback;
+}
+
+function metadataToDraftRows(
+  metadata: Record<string, unknown> | undefined,
+  schemas: RPClaimSchema[],
+): MetadataDraftRow[] {
+  if (schemas.length > 0) {
+    return schemas.map((schema) => ({
+      id: `rp-claim-${schema.key}`,
+      key: schema.key,
+      value: metadataValueToInputString(
+        metadata?.[schema.key],
+        schema.value,
+        schema.valueType,
+      ),
+      valueType: schema.valueType,
+      readPermission: readPermissionMetadata(
+        metadata,
+        schema.key,
+        schema.readPermission,
+        "readPermission",
+      ),
+      writePermission: readPermissionMetadata(
+        metadata,
+        schema.key,
+        schema.writePermission,
+        "writePermission",
+      ),
+      schemaBacked: true,
+    }));
+  }
+
+  return Object.entries(metadata ?? {})
+    .filter(([key]) => !key.endsWith("_permissions"))
+    .map(([key, value], index) => ({
+      id: `${key}-${index}`,
+      key,
+      value: metadataValueToString(value, ""),
+      valueType: "text",
+      readPermission: readPermissionMetadata(
+        metadata,
+        key,
+        "admin_only",
+        "readPermission",
+      ),
+      writePermission: readPermissionMetadata(
+        metadata,
+        key,
+        "admin_only",
+        "writePermission",
+      ),
+      schemaBacked: false,
+    }));
+}
+
+function draftRowsToMetadata(rows: MetadataDraftRow[]) {
+  const metadata: Record<string, unknown> = {};
+  for (const row of rows) {
+    const key = row.key.trim();
+    if (!key) continue;
+    metadata[key] = row.value.trim();
+    metadata[`${key}_permissions`] = {
+      readPermission: row.readPermission,
+      writePermission: row.writePermission,
+    };
+  }
+  return metadata;
+}
+
+function isRPClaimValueType(value: string): value is RPClaimValueType {
+  return (
+    value === "text" ||
+    value === "number" ||
+    value === "boolean" ||
+    value === "array" ||
+    value === "object" ||
+    value === "date" ||
+    value === "datetime"
+  );
+}
+
+function metadataValueToString(value: unknown, fallback: string) {
+  if (typeof value === "string") return value;
+  if (value == null) return fallback;
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  return JSON.stringify(value);
+}
+
+function metadataValueToInputString(
+  value: unknown,
+  fallback: string,
+  valueType: RPClaimValueType,
+) {
+  const text = metadataValueToString(value, fallback);
+  if (valueType === "date") {
+    return text.slice(0, 10);
+  }
+  if (valueType === "datetime") {
+    return text.slice(0, 16);
+  }
+  return text;
+}
+
+function readRPClaimSchemas(
+  metadata: Record<string, unknown> | undefined,
+): RPClaimSchema[] {
+  const rawClaims = metadata?.id_token_claims;
+  if (!Array.isArray(rawClaims)) return [];
+
+  return rawClaims
+    .map((item) => {
+      if (!item || typeof item !== "object") return null;
+      const record = item as Record<string, unknown>;
+      if (record.namespace !== "rp_claims") return null;
+      const key = typeof record.key === "string" ? record.key.trim() : "";
+      if (!key) return null;
+      const rawValueType =
+        typeof record.valueType === "string" ? record.valueType : "text";
+      const valueType = isRPClaimValueType(rawValueType)
+        ? rawValueType
+        : "text";
+      return {
+        key,
+        value: metadataValueToString(record.value, ""),
+        valueType,
+        readPermission: isCustomClaimPermission(record.readPermission)
+          ? record.readPermission
+          : "admin_only",
+        writePermission: isCustomClaimPermission(record.writePermission)
+          ? record.writePermission
+          : "admin_only",
+      };
+    })
+    .filter((item): item is RPClaimSchema => item !== null);
+}
+
+function rpClaimInputType(valueType: RPClaimValueType) {
+  if (valueType === "date") return "date";
+  if (valueType === "datetime") return "datetime-local";
+  if (valueType === "number") return "number";
+  return "text";
+}
+
 function ClientConsentsPage() {
   const params = useParams();
   const clientId = params.id ?? "";
@@ -47,12 +247,20 @@ function ClientConsentsPage() {
   const [statusFilter, setStatusFilter] = useState<string[]>([]);
   const [scopeFilter, setScopeFilter] = useState<string[]>([]);
   const [isAdvancedFilterOpen, setIsAdvancedFilterOpen] = useState(false);
+  const [editingSubject, setEditingSubject] = useState("");
+  const [metadataDraftRows, setMetadataDraftRows] = useState<
+    MetadataDraftRow[]
+  >([]);
 
   const { data: clientData } = useQuery({
     queryKey: ["client", clientId],
     queryFn: () => fetchClient(clientId),
     enabled: clientId.length > 0,
   });
+  const rpClaimSchemas = useMemo(
+    () => readRPClaimSchemas(clientData?.client.metadata),
+    [clientData?.client.metadata],
+  );
   const {
     data: consentsData,
     isLoading,
@@ -63,6 +271,7 @@ function ClientConsentsPage() {
     queryFn: () => fetchConsents(subject, clientId, "all"),
     enabled: clientId.length > 0,
   });
+  const rows = consentsData?.items ?? [];
   const revokeMutation = useMutation({
     mutationFn: (payload: { subject: string }) =>
       revokeConsent(payload.subject, clientId),
@@ -70,6 +279,34 @@ function ClientConsentsPage() {
       refetch();
     },
   });
+  const selectedRow =
+    rows.find((row) => row.subject === editingSubject) ?? undefined;
+  const metadataQuery = useQuery({
+    queryKey: ["rp-user-metadata", clientId, editingSubject],
+    queryFn: () => fetchRPUserMetadata(clientId, editingSubject),
+    enabled: clientId.length > 0 && editingSubject.length > 0,
+  });
+  const metadataMutation = useMutation({
+    mutationFn: () =>
+      updateRPUserMetadata(
+        clientId,
+        editingSubject,
+        draftRowsToMetadata(metadataDraftRows),
+      ),
+    onSuccess: () => {
+      setEditingSubject("");
+      setMetadataDraftRows([]);
+      refetch();
+    },
+  });
+
+  useEffect(() => {
+    if (metadataQuery.data) {
+      setMetadataDraftRows(
+        metadataToDraftRows(metadataQuery.data.metadata, rpClaimSchemas),
+      );
+    }
+  }, [metadataQuery.data, rpClaimSchemas]);
 
   const handleRevoke = (sub: string) => {
     if (
@@ -84,7 +321,6 @@ function ClientConsentsPage() {
     }
   };
 
-  const rows = consentsData?.items ?? [];
   const allScopes = Array.from(new Set(rows.flatMap((r) => r.grantedScopes)));
   const filteredRows = rows.filter((row) => {
     const matchStatus =
@@ -169,6 +405,39 @@ function ClientConsentsPage() {
     }
   };
 
+  const openMetadataEditor = (row: (typeof rows)[number]) => {
+    setEditingSubject(row.subject);
+    setMetadataDraftRows(metadataToDraftRows(row.rpMetadata, rpClaimSchemas));
+  };
+
+  const updateMetadataDraftRow = (
+    id: string,
+    patch: Partial<MetadataDraftRow>,
+  ) => {
+    setMetadataDraftRows((current) =>
+      current.map((row) => (row.id === id ? { ...row, ...patch } : row)),
+    );
+  };
+
+  const addMetadataDraftRow = () => {
+    setMetadataDraftRows((current) => [
+      ...current,
+      {
+        id: `rp-metadata-${Date.now()}`,
+        key: "",
+        value: "",
+        valueType: "text",
+        readPermission: "admin_only",
+        writePermission: "admin_only",
+        schemaBacked: false,
+      },
+    ]);
+  };
+
+  const removeMetadataDraftRow = (id: string) => {
+    setMetadataDraftRows((current) => current.filter((row) => row.id !== id));
+  };
+
   if (error) {
     const axiosError = error as AxiosError<{ error?: string }>;
     if (axiosError.response?.status === 403) {
@@ -450,6 +719,9 @@ function ClientConsentsPage() {
                       "Last Authenticated / Revoked",
                     )}
                   </TableHead>
+                  <TableHead>
+                    {t("ui.dev.clients.consents.table.rp_claims", "RP Claims")}
+                  </TableHead>
                   <TableHead className="text-right">
                     {t("ui.dev.clients.consents.table.action", "Action")}
                   </TableHead>
@@ -459,7 +731,7 @@ function ClientConsentsPage() {
                 {filteredRows.length === 0 && !isLoading && !error ? (
                   <TableRow>
                     <TableCell
-                      colSpan={7}
+                      colSpan={8}
                       className="h-32 text-center text-muted-foreground"
                     >
                       <div className="flex flex-col items-center gap-2">
@@ -552,17 +824,57 @@ function ClientConsentsPage() {
                           "-"
                         )}
                       </TableCell>
+                      <TableCell>
+                        {row.rpMetadata &&
+                        Object.keys(row.rpMetadata).some(
+                          (key) => !key.endsWith("_permissions"),
+                        ) ? (
+                          <div className="flex flex-wrap gap-1">
+                            {Object.entries(row.rpMetadata)
+                              .filter(([key]) => !key.endsWith("_permissions"))
+                              .map(([key, value]) => (
+                                <Badge
+                                  key={key}
+                                  variant="muted"
+                                  className="border bg-muted/40 font-mono text-[11px] text-foreground"
+                                >
+                                  {key}:{" "}
+                                  {typeof value === "string"
+                                    ? value
+                                    : JSON.stringify(value)}
+                                </Badge>
+                              ))}
+                          </div>
+                        ) : (
+                          <span className="text-xs text-muted-foreground">
+                            {t("ui.common.na", "N/A")}
+                          </span>
+                        )}
+                      </TableCell>
                       <TableCell className="text-right">
-                        {row.status === "active" && (
+                        <div className="flex justify-end gap-2">
                           <Button
                             variant="ghost"
-                            className="text-destructive hover:bg-destructive/10"
-                            onClick={() => handleRevoke(row.subject)}
-                            disabled={revokeMutation.isPending}
+                            className="gap-2"
+                            onClick={() => openMetadataEditor(row)}
                           >
-                            {t("ui.dev.clients.consents.revoke", "Revoke")}
+                            <Edit3 className="h-4 w-4" />
+                            {t(
+                              "ui.dev.clients.consents.rp_claims.edit",
+                              "사용자 Claim 설정",
+                            )}
                           </Button>
-                        )}
+                          {row.status === "active" && (
+                            <Button
+                              variant="ghost"
+                              className="text-destructive hover:bg-destructive/10"
+                              onClick={() => handleRevoke(row.subject)}
+                              disabled={revokeMutation.isPending}
+                            >
+                              {t("ui.dev.clients.consents.revoke", "Revoke")}
+                            </Button>
+                          )}
+                        </div>
                       </TableCell>
                     </TableRow>
                   ))
@@ -597,6 +909,182 @@ function ClientConsentsPage() {
         </CardContent>
       </Card>
 
+      {editingSubject && (
+        <Card className="glass-panel">
+          <CardHeader className="pb-4">
+            <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+              <div>
+                <CardTitle className="text-lg">
+                  {t(
+                    "ui.dev.clients.consents.rp_claims.title",
+                    "RP Custom Claims",
+                  )}
+                </CardTitle>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  {selectedRow?.userName || editingSubject}
+                </p>
+              </div>
+              <div className="flex gap-2">
+                {rpClaimSchemas.length === 0 && (
+                  <Button
+                    variant="outline"
+                    className="gap-2"
+                    onClick={addMetadataDraftRow}
+                  >
+                    <Edit3 className="h-4 w-4" />
+                    {t("ui.common.add", "추가")}
+                  </Button>
+                )}
+                <Button
+                  variant="ghost"
+                  className="gap-2"
+                  onClick={() => {
+                    setEditingSubject("");
+                    setMetadataDraftRows([]);
+                  }}
+                >
+                  <X className="h-4 w-4" />
+                  {t("ui.common.cancel", "취소")}
+                </Button>
+                <Button
+                  className="gap-2"
+                  disabled={metadataMutation.isPending}
+                  onClick={() => metadataMutation.mutate()}
+                >
+                  <Save className="h-4 w-4" />
+                  {t("ui.dev.clients.consents.rp_claims.save", "Claim 저장")}
+                </Button>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {metadataQuery.isLoading ? (
+              <p className="text-sm text-muted-foreground">
+                {t("msg.common.loading", "불러오는 중...")}
+              </p>
+            ) : metadataDraftRows.length === 0 ? (
+              <div className="rounded-md border border-dashed p-6 text-center text-sm text-muted-foreground">
+                {t(
+                  "msg.dev.clients.consents.rp_claims.empty",
+                  "등록된 RP custom claim 값이 없습니다.",
+                )}
+              </div>
+            ) : (
+              metadataDraftRows.map((row) => (
+                <div
+                  key={row.id}
+                  className="grid gap-3 md:grid-cols-[minmax(180px,0.8fr)_minmax(220px,1fr)_150px_150px_auto]"
+                >
+                  {row.schemaBacked ? (
+                    <div className="flex h-10 items-center rounded-md border bg-muted/30 px-3 font-mono text-xs">
+                      {row.key}
+                    </div>
+                  ) : (
+                    <Input
+                      value={row.key}
+                      onChange={(event) =>
+                        updateMetadataDraftRow(row.id, {
+                          key: event.target.value,
+                        })
+                      }
+                      className="font-mono text-xs"
+                      placeholder={t(
+                        "ui.dev.clients.consents.rp_claims.key_placeholder",
+                        "claim_key",
+                      )}
+                    />
+                  )}
+                  <Input
+                    type={rpClaimInputType(row.valueType)}
+                    value={row.value}
+                    onChange={(event) =>
+                      updateMetadataDraftRow(row.id, {
+                        value: event.target.value,
+                      })
+                    }
+                    className="font-mono text-xs"
+                    placeholder={t(
+                      "ui.dev.clients.consents.rp_claims.value_placeholder",
+                      "claim value",
+                    )}
+                  />
+                  <select
+                    value={row.readPermission}
+                    onChange={(event) =>
+                      updateMetadataDraftRow(row.id, {
+                        readPermission: event.target
+                          .value as CustomClaimPermission,
+                      })
+                    }
+                    className="h-10 rounded-md border border-input bg-background px-3 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    aria-label={t(
+                      "ui.dev.clients.consents.rp_claims.read_permission",
+                      "읽기 권한",
+                    )}
+                  >
+                    <option value="admin_only">
+                      {t(
+                        "ui.common.custom_claim_permission.admin_only",
+                        "관리자만 가능",
+                      )}
+                    </option>
+                    <option value="user_and_admin">
+                      {t(
+                        "ui.common.custom_claim_permission.user_and_admin",
+                        "사용자 및 관리자 가능",
+                      )}
+                    </option>
+                  </select>
+                  <select
+                    value={row.writePermission}
+                    onChange={(event) =>
+                      updateMetadataDraftRow(row.id, {
+                        writePermission: event.target
+                          .value as CustomClaimPermission,
+                      })
+                    }
+                    className="h-10 rounded-md border border-input bg-background px-3 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    aria-label={t(
+                      "ui.dev.clients.consents.rp_claims.write_permission",
+                      "쓰기 권한",
+                    )}
+                  >
+                    <option value="admin_only">
+                      {t(
+                        "ui.common.custom_claim_permission.admin_only",
+                        "관리자만 가능",
+                      )}
+                    </option>
+                    <option value="user_and_admin">
+                      {t(
+                        "ui.common.custom_claim_permission.user_and_admin",
+                        "사용자 및 관리자 가능",
+                      )}
+                    </option>
+                  </select>
+                  {row.schemaBacked ? (
+                    <Badge
+                      variant="muted"
+                      className="h-10 justify-center rounded-md px-3 font-mono text-xs"
+                    >
+                      {row.valueType}
+                    </Badge>
+                  ) : (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => removeMetadataDraftRow(row.id)}
+                    >
+                      <X className="h-4 w-4" />
+                    </Button>
+                  )}
+                </div>
+              ))
+            )}
+          </CardContent>
+        </Card>
+      )}
+
       <div className="grid gap-6 md:grid-cols-3">
         <Card className="glass-panel">
           <CardHeader className="pb-2">