@nocobase/portal-template-default 1.0.2 → 1.0.4

package/src/pages/users/role-detail.tsx

@@ -0,0 +1,272 @@
+import { useGetLocale, useOne, useTranslate } from "@refinedev/core";
+import { useParams } from "react-router";
+
+import { LoadingState } from "@/components/app-shell/loading-state";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { useAIPageElementHandle } from "@/extensions/nocobase-ai";
+import { RouteDrawer } from "@/extensions/nocobase-route-surfaces";
+import type { Role } from "@/lib/nocobase/acl";
+import { resolveTranslatableText } from "@/lib/i18n";
+import { resolveRoleLabel } from "./role-utils";
+import { getUserShowPath, userRoutes } from "./routes";
+import type { RoleRecord } from "./types";
+
+export function RoleDetailRoute({
+  returnTo,
+}: {
+  returnTo: "list" | "show";
+}) {
+  const { id, roleName } = useParams<{
+    id?: string;
+    roleName: string;
+  }>();
+
+  if (!roleName) return null;
+
+  const closeTarget =
+    returnTo === "show" && id
+      ? getUserShowPath(id)
+      : userRoutes.list;
+
+  return (
+    <RoleDetailDrawer
+      role={{ name: roleName }}
+      closeTo={closeTarget}
+    />
+  );
+}
+
+export function RoleDetailDrawer({
+  role,
+  closeTo,
+}: {
+  role?: Role;
+  closeTo: string;
+}) {
+  const translate = useTranslate();
+  const getLocale = useGetLocale();
+  const locale = getLocale();
+  const { result, query } = useOne<RoleRecord>({
+    resource: "roles",
+    id: role?.name,
+    errorNotification: false,
+    queryOptions: {
+      enabled: Boolean(role?.name),
+      retry: false,
+    },
+  });
+
+  const record = result ?? role ?? { name: "" };
+  const title = resolveRoleLabel(record);
+  const description = resolveTranslatableText(result?.description, {
+    ns: "starter",
+  });
+  const actions = result?.strategy?.actions ?? [];
+  const detailContext = useAIPageElementHandle({
+    id: `role-detail-${record.name || "current"}`,
+    title: `${translate(
+      "roles.ai.detail",
+      { ns: "app" },
+      "Role details"
+    )}: ${title}`,
+    kind: "detail",
+    getContext: () => ({
+      resource: "roles",
+      record: {
+        name: record.name,
+        title,
+        description,
+        default: result?.default,
+        hidden: result?.hidden,
+        allowConfigure: result?.allowConfigure,
+        actions,
+        createdAt: result?.createdAt,
+        updatedAt: result?.updatedAt,
+      },
+    }),
+  });
+
+  const formatBoolean = (value?: boolean) => {
+    if (typeof value !== "boolean") return "-";
+    return value
+      ? translate("common.yes", { ns: "app" }, "Yes")
+      : translate("common.no", { ns: "app" }, "No");
+  };
+  const formatDate = (value?: string) =>
+    value
+      ? new Intl.DateTimeFormat(locale, {
+          dateStyle: "medium",
+          timeStyle: "short",
+        }).format(new Date(value))
+      : "-";
+
+  if (!role) return null;
+
+  return (
+    <RouteDrawer
+      title={title}
+      description={translate(
+        "roles.drawer.description",
+        { ns: "app" },
+        "Review the role associated with this user."
+      )}
+      closeLabel={translate("buttons.close", "Close")}
+      closeTo={closeTo}
+    >
+      <div
+        ref={detailContext.ref}
+        className="min-h-0 flex-1 overflow-y-auto px-5 py-5"
+      >
+        {query.isLoading ? (
+          <LoadingState className="min-h-48" />
+        ) : (
+          <div className="space-y-5">
+            {query.isError ? (
+              <Alert>
+                <AlertDescription>
+                  {translate(
+                    "roles.detail.unavailable",
+                    { ns: "app" },
+                    "Additional role details are unavailable. Showing the relation data included with the user."
+                  )}
+                </AlertDescription>
+              </Alert>
+            ) : null}
+
+            <RoleDetailSection
+              title={translate(
+                "roles.detail.identity",
+                { ns: "app" },
+                "Role identity"
+              )}
+              items={[
+                [
+                  translate("roles.fields.name", { ns: "app" }, "Name"),
+                  role.name,
+                ],
+                [
+                  translate("roles.fields.title", { ns: "app" }, "Title"),
+                  title,
+                ],
+                [
+                  translate(
+                    "roles.fields.description",
+                    { ns: "app" },
+                    "Description"
+                  ),
+                  description || "-",
+                ],
+              ]}
+            />
+
+            <Separator />
+
+            <RoleDetailSection
+              title={translate(
+                "roles.detail.settings",
+                { ns: "app" },
+                "Settings"
+              )}
+              items={[
+                [
+                  translate(
+                    "roles.fields.default",
+                    { ns: "app" },
+                    "Default role"
+                  ),
+                  formatBoolean(result?.default),
+                ],
+                [
+                  translate("roles.fields.hidden", { ns: "app" }, "Hidden"),
+                  formatBoolean(result?.hidden),
+                ],
+                [
+                  translate(
+                    "roles.fields.allowConfigure",
+                    { ns: "app" },
+                    "Can configure"
+                  ),
+                  formatBoolean(result?.allowConfigure),
+                ],
+              ]}
+            />
+
+            {actions.length ? (
+              <>
+                <Separator />
+                <section className="space-y-3">
+                  <h3 className="text-sm font-medium">
+                    {translate(
+                      "roles.detail.actions",
+                      { ns: "app" },
+                      "Allowed actions"
+                    )}
+                  </h3>
+                  <div className="flex flex-wrap gap-1">
+                    {actions.map((action) => (
+                      <Badge key={action} variant="outline">
+                        {action}
+                      </Badge>
+                    ))}
+                  </div>
+                </section>
+              </>
+            ) : null}
+
+            <Separator />
+
+            <RoleDetailSection
+              title={translate(
+                "roles.detail.timestamps",
+                { ns: "app" },
+                "Timestamps"
+              )}
+              items={[
+                [
+                  translate(
+                    "roles.fields.createdAt",
+                    { ns: "app" },
+                    "Created at"
+                  ),
+                  formatDate(result?.createdAt),
+                ],
+                [
+                  translate(
+                    "roles.fields.updatedAt",
+                    { ns: "app" },
+                    "Updated at"
+                  ),
+                  formatDate(result?.updatedAt),
+                ],
+              ]}
+            />
+          </div>
+        )}
+      </div>
+    </RouteDrawer>
+  );
+}
+
+function RoleDetailSection({
+  title,
+  items,
+}: {
+  title: string;
+  items: Array<[label: string, value: string | number]>;
+}) {
+  return (
+    <section className="space-y-3">
+      <h3 className="text-sm font-medium">{title}</h3>
+      <dl className="grid gap-4 sm:grid-cols-2">
+        {items.map(([label, value]) => (
+          <div key={label} className="space-y-1">
+            <dt className="text-xs text-muted-foreground">{label}</dt>
+            <dd className="text-sm font-medium break-words">{value}</dd>
+          </div>
+        ))}
+      </dl>
+    </section>
+  );
+}

package/src/pages/users/role-utils.ts

@@ -0,0 +1,6 @@
+import type { Role } from "@/lib/nocobase/acl";
+import { resolveTranslatableText } from "@/lib/i18n";
+
+export function resolveRoleLabel(role: Role) {
+  return resolveTranslatableText(role.title || role.name, { ns: "starter" });
+}

package/src/pages/users/routes.ts

@@ -0,0 +1,24 @@
+export const userRoutes = {
+  list: "/users",
+  create: "/users/create",
+  edit: "/users/edit/:id",
+  show: "/users/show/:id",
+  role: "/users/roles/:roleName",
+  nestedEdit: "/users/show/:id/edit",
+  nestedRole: "/users/show/:id/roles/:roleName",
+} as const;
+
+export const getUserEditPath = (id: string | number) =>
+  `/users/edit/${encodeURIComponent(id)}`;
+
+export const getUserShowPath = (id: string | number) =>
+  `/users/show/${encodeURIComponent(id)}`;
+
+export const getRolePath = (roleName: string) =>
+  `/users/roles/${encodeURIComponent(roleName)}`;
+
+export const getUserRolePath = (
+  id: string | number,
+  roleName: string
+) =>
+  `/users/show/${encodeURIComponent(id)}/roles/${encodeURIComponent(roleName)}`;

package/src/pages/users/show.tsx

@@ -1,30 +1,34 @@
 import {
   useGetLocale,
-  useResourceParams,
   useShow,
   useTranslate,
 } from "@refinedev/core";
+import { useNavigate, useOutlet, useParams } from "react-router";
+import { Pencil, RotateCw } from "lucide-react";
 
-import { ShowView } from "@/components/resources/views/show-view";
-import { Badge } from "@/components/ui/badge";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { LoadingState } from "@/components/app-shell/loading-state";
+import { EditButton } from "@/components/resources/buttons/edit";
+import { RefreshButton } from "@/components/resources/buttons/refresh";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import { RouteDrawer } from "@/extensions/nocobase-route-surfaces";
 import { useAIPageElementHandle } from "@/extensions/nocobase-ai";
-import { resolveTranslatableText } from "@/lib/i18n";
+import { RoleBadges } from "./role-badges";
+import { resolveRoleLabel } from "./role-utils";
+import { getUserRolePath, userRoutes } from "./routes";
 import type { UserRecord } from "./types";
 
 export const UserShow = () => {
   const translate = useTranslate();
   const getLocale = useGetLocale();
   const locale = getLocale();
-  const { id } = useResourceParams();
-  const { result: record } = useShow<UserRecord>({
+  const navigate = useNavigate();
+  const { id } = useParams<{ id: string }>();
+  const nestedDrawer = useOutlet();
+  const { result: record, query } = useShow<UserRecord>({
+    resource: "users",
+    id,
     meta: {
       appends: ["roles"],
     },
@@ -35,10 +39,7 @@ export const UserShow = () => {
     record?.username ||
     record?.email ||
     translate("users.detail.unnamed", { ns: "app" }, "Unnamed user");
-  const roleLabels =
-    record?.roles?.map((role) =>
-      resolveTranslatableText(role.title || role.name, { ns: "starter" })
-    ) ?? [];
+  const roles = record?.roles ?? [];
   const detailContext = useAIPageElementHandle({
     id: `users-detail-${id ?? "current"}`,
     title: `${translate(
@@ -55,7 +56,10 @@ export const UserShow = () => {
         username: record?.username,
         email: record?.email,
         phone: record?.phone,
-        roles: roleLabels,
+        roles: roles.map((role) => ({
+          name: role.name,
+          title: resolveRoleLabel(role),
+        })),
         createdAt: record?.createdAt,
         updatedAt: record?.updatedAt,
       },
@@ -71,96 +75,183 @@ export const UserShow = () => {
       : "-";
 
   return (
-    <ShowView title={displayName}>
-      <Card ref={detailContext.ref} className="max-w-4xl">
-        <CardHeader>
-          <CardTitle>{displayName}</CardTitle>
-          <CardDescription>ID: {record?.id ?? "-"}</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-5">
-          <DetailSection
-            title={translate(
-              "users.detail.identity",
-              { ns: "app" },
-              "Identity"
-            )}
-            items={[
-              [
-                translate("users.fields.nickname", { ns: "app" }, "Nickname"),
-                record?.nickname || "-",
-              ],
-              [
-                translate("users.fields.username", { ns: "app" }, "Username"),
-                record?.username || "-",
-              ],
-            ]}
-          />
-          <Separator />
-          <DetailSection
-            title={translate("users.detail.contact", { ns: "app" }, "Contact")}
-            items={[
-              [
-                translate("users.fields.email", { ns: "app" }, "Email"),
-                record?.email || "-",
-              ],
-              [
-                translate("users.fields.phone", { ns: "app" }, "Phone"),
-                record?.phone || "-",
-              ],
-            ]}
-          />
-          <Separator />
-          <section className="space-y-3">
-            <h3 className="text-sm font-medium">
-              {translate("users.detail.access", { ns: "app" }, "Access")}
-            </h3>
-            <div className="flex flex-wrap gap-2">
-              {roleLabels.length ? (
-                roleLabels.map((role, index) => (
-                  <Badge key={`${role}-${index}`} variant="secondary">
-                    {role}
-                  </Badge>
-                ))
-              ) : (
-                <span className="text-sm text-muted-foreground">
-                  {translate(
+    <RouteDrawer
+        title={
+          query.isLoading && !record ? (
+            <Skeleton className="h-6 w-40" />
+          ) : (
+            displayName
+          )
+        }
+        description={translate(
+          "users.drawer.show.description",
+          { ns: "app" },
+          "Review this user's identity, contact information, and roles."
+        )}
+        closeLabel={translate("buttons.close", "Close")}
+        closeTo={userRoutes.list}
+        nested={nestedDrawer}
+        actions={
+          record ? (
+            <>
+              <RefreshButton
+                resource="users"
+                recordItemId={record.id}
+                variant="outline"
+                size="icon-sm"
+                aria-label={translate("buttons.refresh", "Refresh")}
+                title={translate("buttons.refresh", "Refresh")}
+              >
+                <RotateCw />
+              </RefreshButton>
+              <EditButton
+                resource="users"
+                recordItemId={record.id}
+                variant="outline"
+                size="icon-sm"
+                aria-label={translate(
+                  "users.actions.edit",
+                  { ns: "app" },
+                  "Edit user"
+                )}
+                title={translate(
+                  "users.actions.edit",
+                  { ns: "app" },
+                  "Edit user"
+                )}
+                onClick={() => navigate("edit")}
+              >
+                <Pencil />
+              </EditButton>
+            </>
+          ) : null
+        }
+      >
+        <div
+          ref={detailContext.ref}
+          className="min-h-0 flex-1 overflow-y-auto px-5 py-5"
+        >
+          {query.isLoading ? (
+            <LoadingState className="min-h-64" />
+          ) : query.isError ? (
+            <Alert variant="destructive">
+              <AlertTitle>
+                {translate(
+                  "users.detail.loadError.title",
+                  { ns: "app" },
+                  "Unable to load user"
+                )}
+              </AlertTitle>
+              <AlertDescription>
+                {translate(
+                  "users.detail.loadError.description",
+                  { ns: "app" },
+                  "The user may no longer exist, or you may not have permission to view it."
+                )}
+              </AlertDescription>
+            </Alert>
+          ) : (
+            <div className="space-y-5">
+              <DetailSection
+                title={translate(
+                  "users.detail.identity",
+                  { ns: "app" },
+                  "Identity"
+                )}
+                items={[
+                  [
+                    translate("users.fields.id", { ns: "app" }, "ID"),
+                    record?.id ?? "-",
+                  ],
+                  [
+                    translate(
+                      "users.fields.nickname",
+                      { ns: "app" },
+                      "Nickname"
+                    ),
+                    record?.nickname || "-",
+                  ],
+                  [
+                    translate(
+                      "users.fields.username",
+                      { ns: "app" },
+                      "Username"
+                    ),
+                    record?.username || "-",
+                  ],
+                ]}
+              />
+
+              <Separator />
+
+              <DetailSection
+                title={translate(
+                  "users.detail.contact",
+                  { ns: "app" },
+                  "Contact"
+                )}
+                items={[
+                  [
+                    translate("users.fields.email", { ns: "app" }, "Email"),
+                    record?.email || "-",
+                  ],
+                  [
+                    translate("users.fields.phone", { ns: "app" }, "Phone"),
+                    record?.phone || "-",
+                  ],
+                ]}
+              />
+
+              <Separator />
+
+              <section className="space-y-3">
+                <h3 className="text-sm font-medium">
+                  {translate("users.detail.access", { ns: "app" }, "Access")}
+                </h3>
+                <RoleBadges
+                  roles={roles}
+                  onSelect={(role) =>
+                    id ? navigate(getUserRolePath(id, role.name)) : undefined
+                  }
+                  empty={translate(
                     "users.detail.noRoles",
                     { ns: "app" },
                     "No assigned roles"
                   )}
-                </span>
-              )}
-            </div>
-          </section>
-          <Separator />
-          <DetailSection
-            title={translate(
-              "users.detail.timestamps",
-              { ns: "app" },
-              "Timestamps"
-            )}
-            items={[
-              [
-                translate(
-                  "users.fields.createdAt",
-                  { ns: "app" },
-                  "Created at"
-                ),
-                formatDate(record?.createdAt),
-              ],
-              [
-                translate(
-                  "users.fields.updatedAt",
+                />
+              </section>
+
+              <Separator />
+
+              <DetailSection
+                title={translate(
+                  "users.detail.timestamps",
                   { ns: "app" },
-                  "Updated at"
-                ),
-                formatDate(record?.updatedAt),
-              ],
-            ]}
-          />
-        </CardContent>
-      </Card>
-    </ShowView>
+                  "Timestamps"
+                )}
+                items={[
+                  [
+                    translate(
+                      "users.fields.createdAt",
+                      { ns: "app" },
+                      "Created at"
+                    ),
+                    formatDate(record?.createdAt),
+                  ],
+                  [
+                    translate(
+                      "users.fields.updatedAt",
+                      { ns: "app" },
+                      "Updated at"
+                    ),
+                    formatDate(record?.updatedAt),
+                  ],
+                ]}
+              />
+            </div>
+          )}
+        </div>
+    </RouteDrawer>
   );
 };
 
@@ -178,7 +269,7 @@ function DetailSection({
         {items.map(([label, value]) => (
           <div key={label} className="space-y-1">
             <dt className="text-xs text-muted-foreground">{label}</dt>
-            <dd className="text-sm font-medium">{value}</dd>
+            <dd className="text-sm font-medium break-words">{value}</dd>
           </div>
         ))}
       </dl>

package/src/pages/users/types.ts

@@ -18,3 +18,16 @@ export type UserFormValues = {
   phone: string;
   password?: string;
 };
+
+export type RoleRecord = Role & {
+  id?: string | number;
+  description?: string;
+  default?: boolean;
+  hidden?: boolean;
+  allowConfigure?: boolean;
+  strategy?: {
+    actions?: string[];
+  };
+  createdAt?: string;
+  updatedAt?: string;
+};

package/src/providers/i18n/index.ts

@@ -0,0 +1,3 @@
+export * from "./i18n-provider";
+export * from "./locale-store";
+export * from "./runtime";