@nocobase/portal-template-default 1.0.3 → 1.0.5

package/src/pages/users/edit.tsx

@@ -1,38 +1,78 @@
-import {
-  type HttpError,
-  useResourceParams,
-  useTranslate,
-} from "@refinedev/core";
+import { type HttpError, useTranslate } from "@refinedev/core";
 import { useForm } from "@refinedev/react-hook-form";
 import { useMemo } from "react";
-import { useNavigate } from "react-router";
+import { useParams } from "react-router";
 
-import { EditView } from "@/components/resources/views/edit-view";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
 import { Form } from "@/components/ui/form";
 import { useAIForm, type AIFormField } from "@/extensions/nocobase-ai";
+import {
+  RouteDrawer,
+  RouteDrawerFooter,
+  useRefineUnsavedChangesGuard,
+  useRouteSurfaceClose,
+} from "@/extensions/nocobase-route-surfaces";
 import {
   applyAIUserFormValues,
   getAIUserFormFields,
   getAIUserFormValues,
 } from "./form-context";
 import { UserFormFields } from "./form-fields";
+import { getUserShowPath, userRoutes } from "./routes";
 import type { UserFormValues, UserRecord } from "./types";
 
-export const UserEdit = () => {
+export const UserEdit = ({
+  returnTo = "list",
+}: {
+  returnTo?: "list" | "show";
+}) => {
   const translate = useTranslate();
-  const navigate = useNavigate();
-  const { id } = useResourceParams();
+  const { id } = useParams<{ id: string }>();
+  const closeTo =
+    returnTo === "show" && id ? getUserShowPath(id) : userRoutes.list;
+  const { beforeClose, confirmation } = useRefineUnsavedChangesGuard();
+
+  return (
+    <>
+      <RouteDrawer
+        title={translate(
+          "users.drawer.edit.title",
+          { ns: "app" },
+          "Edit user"
+        )}
+        description={translate(
+          "users.drawer.edit.description",
+          { ns: "app" },
+          "Update this user's identity and contact information."
+        )}
+        closeLabel={translate("buttons.close", "Close")}
+        closeTo={closeTo}
+        beforeClose={beforeClose}
+      >
+        <UserEditForm id={id} />
+      </RouteDrawer>
+      {confirmation}
+    </>
+  );
+};
+
+function UserEditForm({ id }: { id?: string }) {
+  const translate = useTranslate();
+  const close = useRouteSurfaceClose();
   const {
     refineCore: { onFinish },
     ...form
   } = useForm<UserRecord, HttpError, UserFormValues>({
     refineCoreProps: {
-      redirect: "list",
+      action: "edit",
+      resource: "users",
+      id,
+      redirect: false,
+      onMutationSuccess: () => {
+        void close({ skipBeforeClose: true });
+      },
     },
   });
-
   const aiFields = useMemo<AIFormField[]>(
     () => getAIUserFormFields(translate),
     [translate]
@@ -46,47 +86,38 @@ export const UserEdit = () => {
   });
 
   return (
-    <EditView>
-      <Card className="max-w-3xl">
-        <CardContent>
-          <Form {...form}>
-            <form
-              ref={aiFormRef}
-              onSubmit={form.handleSubmit((values) => onFinish(values))}
-              className="resource-form"
-            >
-              <UserFormFields form={form} translate={translate} />
-
-              <div className="flex flex-wrap gap-2">
-                <Button
-                  type="submit"
-                  {...form.saveButtonProps}
-                  disabled={form.formState.isSubmitting}
-                >
-                  {form.formState.isSubmitting
-                    ? translate(
-                        "users.form.edit.submitting",
-                        { ns: "app" },
-                        "Saving..."
-                      )
-                    : translate(
-                        "users.form.edit.submit",
-                        { ns: "app" },
-                        "Save changes"
-                      )}
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => navigate(-1)}
-                >
-                  {translate("users.form.cancel", { ns: "app" }, "Cancel")}
-                </Button>
-              </div>
-            </form>
-          </Form>
-        </CardContent>
-      </Card>
-    </EditView>
+    <Form {...form}>
+      <form
+        ref={aiFormRef}
+        onSubmit={form.handleSubmit((values) => onFinish(values))}
+        className="flex min-h-0 flex-1 flex-col"
+      >
+        <div className="resource-form min-h-0 flex-1 overflow-y-auto px-5 py-5">
+          <UserFormFields form={form} translate={translate} />
+        </div>
+        <RouteDrawerFooter className="flex-row justify-end">
+          <Button type="button" variant="outline" onClick={() => void close()}>
+            {translate("users.form.cancel", { ns: "app" }, "Cancel")}
+          </Button>
+          <Button
+            type="submit"
+            {...form.saveButtonProps}
+            disabled={form.formState.isSubmitting}
+          >
+            {form.formState.isSubmitting
+              ? translate(
+                  "users.form.edit.submitting",
+                  { ns: "app" },
+                  "Saving..."
+                )
+              : translate(
+                  "users.form.edit.submit",
+                  { ns: "app" },
+                  "Save changes"
+                )}
+          </Button>
+        </RouteDrawerFooter>
+      </form>
+    </Form>
   );
-};
+}

package/src/pages/users/index.ts

@@ -1,4 +1,7 @@
 export * from "./create";
 export * from "./edit";
+export * from "./layout";
 export * from "./list";
+export * from "./role-detail";
+export * from "./routes";
 export * from "./show";

package/src/pages/users/layout.tsx

@@ -0,0 +1,15 @@
+import { Outlet } from "react-router";
+
+import { ResourceAccessGuard } from "@/components/access-control/resource-access-guard";
+import { UserList } from "./list";
+
+export function UserResourceLayout() {
+  return (
+    <>
+      <ResourceAccessGuard resource="users" action="list">
+        <UserList />
+      </ResourceAccessGuard>
+      <Outlet />
+    </>
+  );
+}

package/src/pages/users/list.tsx

@@ -2,22 +2,21 @@ import { useGetLocale, useTranslate } from "@refinedev/core";
 import { useTable } from "@refinedev/react-table";
 import { createColumnHelper } from "@tanstack/react-table";
 import { Eye, Pencil, Trash2 } from "lucide-react";
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
+import { useNavigate } from "react-router";
 
 import { DataTable } from "@/components/data-table/data-table";
 import { DeleteButton } from "@/components/resources/buttons/delete";
 import { EditButton } from "@/components/resources/buttons/edit";
 import { ShowButton } from "@/components/resources/buttons/show";
 import { ListView } from "@/components/resources/views/list-view";
-import { Badge } from "@/components/ui/badge";
 import { useAIPageElementHandle } from "@/extensions/nocobase-ai";
-import { resolveTranslatableText } from "@/lib/i18n";
 import type { Role } from "@/lib/nocobase/acl";
+import { RoleBadges } from "./role-badges";
+import { resolveRoleLabel } from "./role-utils";
+import { getRolePath } from "./routes";
 import type { UserRecord } from "./types";
 
-const getRoleLabel = (role: Role) =>
-  resolveTranslatableText(role.title || role.name, { ns: "starter" });
-
 const isRootUser = (record: UserRecord) =>
   record.roles?.some((role) => role.name === "root") ?? false;
 
@@ -25,6 +24,11 @@ export const UserList = () => {
   const translate = useTranslate();
   const getLocale = useGetLocale();
   const locale = getLocale();
+  const navigate = useNavigate();
+  const showRole = useCallback(
+    (role: Role) => navigate(getRolePath(role.name)),
+    [navigate]
+  );
 
   const columns = useMemo(() => {
     const columnHelper = createColumnHelper<UserRecord>();
@@ -61,17 +65,7 @@ export const UserList = () => {
         enableSorting: false,
         cell: ({ getValue }) => {
           const roles = getValue() ?? [];
-          return roles.length ? (
-            <div className="flex flex-wrap gap-1">
-              {roles.map((role) => (
-                <Badge key={role.name} variant="secondary">
-                  {getRoleLabel(role)}
-                </Badge>
-              ))}
-            </div>
-          ) : (
-            "-"
-          );
+          return <RoleBadges roles={roles} onSelect={showRole} empty="-" />;
         },
       }),
       columnHelper.accessor("createdAt", {
@@ -97,6 +91,7 @@ export const UserList = () => {
         cell: ({ row }) => (
           <div className="flex items-center gap-1">
             <EditButton
+              resource="users"
               recordItemId={row.original.id}
               variant="ghost"
               size="icon"
@@ -114,6 +109,7 @@ export const UserList = () => {
               <Pencil />
             </EditButton>
             <ShowButton
+              resource="users"
               recordItemId={row.original.id}
               variant="ghost"
               size="icon"
@@ -132,6 +128,7 @@ export const UserList = () => {
             </ShowButton>
             {isRootUser(row.original) ? null : (
               <DeleteButton
+                resource="users"
                 recordItemId={row.original.id}
                 variant="ghost"
                 size="icon"
@@ -156,12 +153,13 @@ export const UserList = () => {
         size: 144,
       }),
     ];
-  }, [locale, translate]);
+  }, [locale, showRole, translate]);
 
   const table = useTable<UserRecord>({
     columns,
     refineCoreProps: {
-      syncWithLocation: true,
+      resource: "users",
+      syncWithLocation: false,
       meta: {
         appends: ["roles"],
       },
@@ -188,7 +186,7 @@ export const UserList = () => {
         phone: record.phone,
         roles: record.roles?.map((role) => ({
           name: role.name,
-          title: getRoleLabel(role),
+          title: resolveRoleLabel(role),
         })),
         createdAt: record.createdAt,
       })),
@@ -196,7 +194,7 @@ export const UserList = () => {
   });
 
   return (
-    <ListView>
+    <ListView resource="users">
       <div ref={tableContext.ref}>
         <DataTable table={table} />
       </div>

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

@@ -0,0 +1,43 @@
+import type { Role } from "@/lib/nocobase/acl";
+import { Badge } from "@/components/ui/badge";
+import { ChevronRight } from "lucide-react";
+import { resolveRoleLabel } from "./role-utils";
+
+export function RoleBadges({
+  roles,
+  onSelect,
+  empty,
+}: {
+  roles: Role[];
+  onSelect: (role: Role) => void;
+  empty: string;
+}) {
+  if (!roles.length) {
+    return <span className="text-sm text-muted-foreground">{empty}</span>;
+  }
+
+  return (
+    <div className="flex flex-wrap gap-1">
+      {roles.map((role) => {
+        const label = resolveRoleLabel(role);
+        return (
+          <button
+            key={role.name}
+            type="button"
+            className="rounded-full outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+            onClick={() => onSelect(role)}
+            title={label}
+          >
+            <Badge
+              variant="secondary"
+              className="cursor-pointer transition-colors hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_8%)]"
+            >
+              {label}
+              <ChevronRight data-icon="inline-end" />
+            </Badge>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

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)}`;