@nocobase/app-template-default 1.0.0-beta.72 → 1.0.0-beta.74

package/client/pages/settings/permission-management-page.tsx

@@ -0,0 +1,105 @@
+import { useEffect, useRef, type ReactElement, type ReactNode } from 'react';
+import { useNavigate, useResolvedPath, useLocation } from 'react-router';
+import { useCan } from '@nocobase/app-plugin-authorization/client';
+import { useTranslation } from '@nocobase/i18n/client';
+import { PageContainer } from '#components/page-container';
+import { PageHeader } from '#components/page-header';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '#components/ui/tabs';
+
+export function PermissionManagementPage({
+  tab,
+  actions,
+  children,
+}: {
+  tab: 'roles' | 'default-access';
+  actions?: ReactNode;
+  children: ReactNode;
+}): ReactElement {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const activeRef = useRef<HTMLButtonElement>(null);
+  const focusedRef = useRef(false);
+  const current = useResolvedPath('.').pathname;
+  const prefix = current.slice(0, current.lastIndexOf('/'));
+  const roles = useCan({
+    resource: { type: 'settings', id: 'authorization.permission-sets' },
+    action: 'read',
+  }).can;
+  const defaults = useCan({
+    resource: { type: 'settings', id: 'authorization.default-access' },
+    action: 'read',
+  }).can;
+  // Route changes remount each existing page; keep keyboard focus on the selected tab.
+  useEffect(() => {
+    if (
+      !focusedRef.current &&
+      location.state &&
+      typeof location.state === 'object' &&
+      Reflect.get(location.state, 'permissionTabNavigation') === true &&
+      activeRef.current
+    ) {
+      const frame = requestAnimationFrame(() => {
+        if (activeRef.current) {
+          const selected = activeRef.current;
+          if (
+            !selected
+              .closest('[role="tablist"]')
+              ?.contains(selected.ownerDocument.activeElement)
+          )
+            selected.focus();
+          focusedRef.current = true;
+        }
+      });
+      return () => cancelAnimationFrame(frame);
+    }
+  }, [location.state, roles, defaults]);
+  return (
+    <PageContainer>
+      <PageHeader
+        title={t('settings.permissionManagement')}
+        description={t(
+          tab === 'roles'
+            ? 'settings.rolesDescription'
+            : 'settings.defaultAccess.description',
+        )}
+        actions={actions}
+      />
+      <Tabs
+        className='gap-6'
+        value={tab}
+        onValueChange={(value) => {
+          if (value === 'roles' || value === 'default-access')
+            void navigate(`${prefix}/${value}`, {
+              state: { permissionTabNavigation: true },
+            });
+        }}
+      >
+        <TabsList
+          variant='line'
+          aria-label={t('settings.permissionManagement')}
+        >
+          {roles && (
+            <TabsTrigger
+              ref={tab === 'roles' ? activeRef : undefined}
+              value='roles'
+            >
+              {t('settings.roles')}
+            </TabsTrigger>
+          )}
+          {defaults && (
+            <TabsTrigger
+              ref={tab === 'default-access' ? activeRef : undefined}
+              value='default-access'
+            >
+              {t('settings.defaultAccess.title')}
+            </TabsTrigger>
+          )}
+        </TabsList>
+        <TabsContent value={tab} className='space-y-6'>
+          {children}
+        </TabsContent>
+      </Tabs>
+    </PageContainer>
+  );
+}

package/client/pages/settings/permissions-model.ts

@@ -60,19 +60,43 @@ export function setPermission(
   return next.filter((item) => item.actions.length);
 }
 
+const sectionDescriptions: Readonly<Record<string, string>> = {
+  pages: 'pageAccessHint',
+  business: 'businessOperationsHint',
+  users: 'userAccountsHint',
+  administration: 'systemToolsHint',
+};
+
 export function permissionSections(
   catalog: AuthorizationOptionsResponse,
   grants: readonly PermissionGrant[],
   text: (value: LocalizedText) => string,
 ): readonly PermissionEditorSection[] {
+  const sharedActionHint = (resource: CatalogResource): string | undefined => {
+    const first = resource.actions[0]?.description;
+    if (!first) return undefined;
+    const hint = text(first);
+    return resource.actions.every(
+      (action) => action.description && text(action.description) === hint,
+    )
+      ? hint
+      : undefined;
+  };
   return catalog.sections
     .map((section) => ({
       id: section.name,
       title: text(section.title),
+      description: sectionDescriptions[section.name]
+        ? text({ key: `settings.${sectionDescriptions[section.name]}` })
+        : undefined,
       groups: section.subsections.flatMap((subsection) =>
         subsection.resources.map((resource) => ({
           id: JSON.stringify([subsection.name, resource.type, resource.id]),
           title: text(resource.title),
+          actionHint:
+            resource.actions.length > 1
+              ? sharedActionHint(resource)
+              : undefined,
           accessOnly:
             resource.type === 'page' &&
             resource.actions.length === 1 &&
@@ -89,6 +113,11 @@ export function permissionSections(
             const row = {
               id: permissionRowId(resource, action.name),
               label: text(action.title),
+              hint:
+                action.description &&
+                !(resource.actions.length > 1 && sharedActionHint(resource))
+                  ? text(action.description)
+                  : undefined,
               actionKey: action.name,
               enabled: Boolean(granted),
             };
@@ -143,6 +172,10 @@ export function permissionSections(
                         })),
                       ],
                       level: value,
+                      hint:
+                        value === ''
+                          ? text({ key: 'settings.noAdditionalScopeHint' })
+                          : undefined,
                     };
                   })
                 : [],
@@ -203,7 +236,10 @@ export function setPermissions(
     const [type, resourceId, action, scope] = JSON.parse(id) as string[];
     if (scope) return current;
     const resource = resources.find(
-      (item) => item.type === type && item.id === resourceId,
+      (item) =>
+        item.type === type &&
+        item.id === resourceId &&
+        item.actions.some((entry) => entry.name === action),
     );
     if (
       !resource ||

package/client/pages/settings/role-form.tsx

@@ -11,6 +11,7 @@ import {
 import { useTranslation } from '@nocobase/i18n/client';
 import {
   useAuthorizationClient,
+  useCan,
   type AuthorizationOptionsResponse,
   type LocalizedText,
   type PermissionGrant,
@@ -20,6 +21,7 @@ import { pagePermissionResources } from './page-permissions.js';
 import { pagePermissionTitles } from './page-permission-titles.js';
 import { useEffect, useMemo, useRef, useState, type ReactElement } from 'react';
 import {
+  Link,
   useLocation,
   useNavigate,
   useOutletContext,
@@ -72,6 +74,10 @@ function RoleEditor(): ReactElement {
   const options = useSettingsData<{ data: AuthorizationOptionsResponse }>(
     'authorization/permissionSets/options',
   );
+  const canReadDefaults = useCan({
+    resource: { type: 'settings', id: 'authorization.default-access' },
+    action: 'read',
+  }).can;
   const canCreate = useRolePermission('create');
   const canUpdate = useRolePermission('update');
   const [nameDraft, setNameDraft] = useState<string>();
@@ -113,14 +119,35 @@ function RoleEditor(): ReactElement {
           title: { key: 'settings.userPermissions' },
           order: 0,
           subsections: [
-            {
-              name: 'users.accounts',
-              title: { key: 'settings.users' },
+            ...[
+              {
+                name: 'users.information',
+                title: 'userInformation',
+                actions: ['read', 'create', 'update', 'invite', 'delete'],
+              },
+              {
+                name: 'users.security',
+                title: 'accountSecurity',
+                actions: [
+                  'reset-password',
+                  'disable',
+                  'enable',
+                  'revoke-sessions',
+                ],
+              },
+              {
+                name: 'users.roles',
+                title: 'roleAssignment',
+                actions: ['assign-role'],
+              },
+            ].map((group) => ({
+              name: group.name,
+              title: { key: `settings.${group.title}` },
               resources: [
                 {
                   type: 'user',
                   id: '*',
-                  title: { key: 'settings.users' },
+                  title: { key: `settings.${group.title}` },
                   actions: [
                     { name: 'read', title: { key: 'settings.readUsers' } },
                     { name: 'create', title: { key: 'settings.createUsers' } },
@@ -141,10 +168,10 @@ function RoleEditor(): ReactElement {
                       name: 'revoke-sessions',
                       title: { key: 'settings.revokeSessions' },
                     },
-                  ],
+                  ].filter((action) => group.actions.includes(action.name)),
                 },
               ],
-            },
+            })),
           ],
         },
         ...source.sections.map((section) => ({
@@ -316,13 +343,23 @@ function RoleEditor(): ReactElement {
                   {t('settings.protectedHint')}
                 </p>
               )}
+              {canReadDefaults && (
+                <div>
+                  <Link
+                    to='/default-access'
+                    className='text-sm text-foreground underline-offset-4 hover:underline'
+                  >
+                    {t('settings.defaultAccess.manage')}
+                  </Link>
+                </div>
+              )}
               <PermissionEditor
                 sections={sections}
                 readOnly={!allowed || busy}
                 labels={{
-                  selectAll: t('settings.selectAllPermissions'),
-                  selectVisible: (name) =>
-                    t('settings.selectVisiblePermissions', { name }),
+                  dataRanges: (count) => t('settings.dataRanges', { count }),
+                  scopeExplanation: t('settings.scopeExplanation'),
+                  scopeHintFor: (name) => t('settings.scopeHintFor', { name }),
                   levelFor: (name) => t('settings.levelFor', { name }),
                   search: t('settings.permissionSearch'),
                   enabledOnly: t('settings.enabledOnly'),
@@ -330,8 +367,6 @@ function RoleEditor(): ReactElement {
                   empty: t('settings.noPermissions'),
                   noResults: t('settings.noResults'),
                   navigation: t('settings.permissionCategories'),
-                  summary: (enabled, total) =>
-                    t('settings.permissionSummary', { enabled, total }),
                 }}
                 onEnabledChange={(id, enabled) => {
                   if (!catalog) return;
@@ -342,13 +377,6 @@ function RoleEditor(): ReactElement {
                   );
                   setDirty(true);
                 }}
-                onEnabledBatchChange={(changes) => {
-                  if (!catalog) return;
-                  setGrantsDraft((current) =>
-                    setPermissions(current ?? grants, catalog, changes),
-                  );
-                  setDirty(true);
-                }}
                 onLevelChange={(id, value) => {
                   if (value === 'customFilter') {
                     setEditingScope(id);

package/client/pages/settings/roles.tsx

@@ -7,11 +7,10 @@ import type {
 import { type ReactElement } from 'react';
 import { Link, Outlet, useLocation, useSearchParams } from 'react-router';
 import { ShieldCheckIcon, PlusIcon } from 'lucide-react';
-import { PageContainer } from '#components/page-container';
-import { PageHeader } from '#components/page-header';
+import { PermissionManagementPage } from './permission-management-page.js';
 import { Input } from '#components/ui/input';
 import { Button } from '#components/ui/button';
-import { Badge } from '#components/ui/badge';
+import { RoleList } from '#components/role-list';
 import {
   Empty,
   EmptyTitle,
@@ -60,12 +59,10 @@ export default function RolesPage(): ReactElement {
   ) : null;
   return (
     <>
-      <PageContainer>
-        <PageHeader
-          title={t('settings.roles')}
-          description={t('settings.rolesDescription')}
-          actions={rows.length || search ? create : undefined}
-        />
+      <PermissionManagementPage
+        tab='roles'
+        actions={rows.length || search ? create : undefined}
+      >
         <div className='flex items-center gap-3'>
           <Input
             className='sm:max-w-xs'
@@ -95,39 +92,22 @@ export default function RolesPage(): ReactElement {
         ) : (
           !request.error &&
           (rows.length ? (
-            <div className='divide-y overflow-hidden rounded-xl border bg-card'>
-              {rows.map((role) => (
-                <Link
-                  key={role.key}
-                  to={{
-                    pathname: `${encodeURIComponent(role.key)}/edit`,
-                    search: location.search,
-                  }}
-                  className='flex items-center justify-between gap-4 p-4 transition-colors hover:bg-muted/30 focus-visible:ring-2 focus-visible:ring-ring'
-                >
-                  <div className='flex min-w-0 items-center gap-3'>
-                    <div className='rounded-lg bg-primary/10 p-2 text-primary'>
-                      <ShieldCheckIcon className='size-4' />
-                    </div>
-                    <div className='min-w-0'>
-                      <p className='font-medium'>
-                        {text(role.title ?? role.key)}
-                      </p>
-                      <p className='text-xs text-muted-foreground'>
-                        {role.key}
-                      </p>
-                    </div>
-                  </div>
-                  <Badge variant='secondary'>
-                    {t(
-                      role.protection
-                        ? 'settings.protected'
-                        : 'settings.custom',
-                    )}
-                  </Badge>
-                </Link>
-              ))}
-            </div>
+            <RoleList
+              ariaLabel={t('settings.roles')}
+              roles={rows.map((role) => ({
+                key: role.key,
+                title: text(role.title ?? role.key),
+                to: {
+                  pathname: `${encodeURIComponent(role.key)}/edit`,
+                  search: location.search,
+                },
+                protected: Boolean(role.protection),
+              }))}
+              labels={{
+                protected: t('settings.protected'),
+                custom: t('settings.custom'),
+              }}
+            />
           ) : (
             <Empty className='min-h-48 border border-dashed'>
               <EmptyMedia variant='icon'>
@@ -156,7 +136,7 @@ export default function RolesPage(): ReactElement {
             </Empty>
           ))
         )}
-      </PageContainer>
+      </PermissionManagementPage>
       <Outlet context={{ reload: request.reload }} />
     </>
   );

package/client/pages/settings/routes.ts

@@ -1,4 +1,10 @@
-import { Settings, Users, ShieldCheck } from 'lucide-react';
+import {
+  Settings,
+  Users,
+  ShieldCheck,
+  KeyRound,
+  ListFilter,
+} from 'lucide-react';
 import {
   defineAppRoutes,
   type AppClientRouteContribution,
@@ -41,35 +47,88 @@ const systemSettingsRoutes: AppClientRouteContribution = defineAppRoutes([
         ],
       },
       {
-        name: 'settingsRoles',
-        path: '/roles',
-        auth: 'required',
-        authz: {
-          resource: { type: 'settings', id: 'authorization.permission-sets' },
-          action: 'read',
+        name: 'permissionManagement',
+        navigation: {
+          title: 'settings.permissionManagement',
+          icon: ShieldCheck,
         },
-        navigation: { title: 'settings.roles', icon: ShieldCheck },
-        breadcrumb: { title: 'settings.roles' },
-        componentLoader: () => import('./roles.js'),
+        breadcrumb: { title: 'settings.permissionManagement' },
         children: [
           {
-            name: 'settingsRoleCreate',
-            path: 'create',
+            name: 'settingsRoles',
+            path: '/roles',
+            auth: 'required',
             authz: {
               resource: {
                 type: 'settings',
                 id: 'authorization.permission-sets',
               },
-              action: 'create',
+              action: 'read',
             },
-            breadcrumb: { title: 'settings.newRole' },
-            componentLoader: () => import('./role-form.js'),
+            navigation: { title: 'settings.roles', icon: KeyRound },
+            breadcrumb: { title: 'settings.roles' },
+            componentLoader: () => import('./roles.js'),
+            children: [
+              {
+                name: 'settingsRoleCreate',
+                path: 'create',
+                authz: {
+                  resource: {
+                    type: 'settings',
+                    id: 'authorization.permission-sets',
+                  },
+                  action: 'create',
+                },
+                breadcrumb: { title: 'settings.newRole' },
+                componentLoader: () => import('./role-form.js'),
+              },
+              {
+                name: 'settingsRoleEdit',
+                path: ':key/edit',
+                breadcrumb: { title: 'settings.editRole' },
+                componentLoader: () => import('./role-form.js'),
+              },
+            ],
           },
           {
-            name: 'settingsRoleEdit',
-            path: ':key/edit',
-            breadcrumb: { title: 'settings.editRole' },
-            componentLoader: () => import('./role-form.js'),
+            name: 'settingsDefaultAccess',
+            path: '/default-access',
+            auth: 'required',
+            authz: {
+              resource: {
+                type: 'settings',
+                id: 'authorization.default-access',
+              },
+              action: 'read',
+            },
+            navigation: {
+              title: 'settings.defaultAccess.title',
+              icon: ListFilter,
+            },
+            breadcrumb: { title: 'settings.defaultAccess.title' },
+            componentLoader: () => import('./default-access.js'),
+            children: [
+              {
+                name: 'settingsDefaultAccessCreate',
+                path: 'create',
+                authz: {
+                  resource: {
+                    type: 'settings',
+                    id: 'authorization.default-access',
+                  },
+                  action: 'create',
+                },
+                breadcrumb: { title: 'settings.defaultAccess.new' },
+                componentLoader: () => import('./default-access-form.js'),
+              },
+              // Read permission opens the full rule even when the viewer may not update it.
+              {
+                name: 'settingsDefaultAccessEdit',
+                path: ':key/edit',
+                breadcrumb: { title: 'settings.defaultAccess.edit' },
+                componentLoader: () => import('./default-access-form.js'),
+              },
+            ],
           },
         ],
       },

package/client/pages/settings/shared.tsx

@@ -78,6 +78,7 @@ export function ConfirmAction({
   title,
   description,
   confirmLabel,
+  error,
   busy,
   onCancel,
   onConfirm,
@@ -86,6 +87,7 @@ export function ConfirmAction({
   readonly title: string;
   readonly description: ReactNode;
   readonly confirmLabel?: string;
+  readonly error?: ReactNode;
   readonly busy: boolean;
   readonly onCancel: () => void;
   readonly onConfirm: () => void;
@@ -102,6 +104,7 @@ export function ConfirmAction({
         <AlertDialogHeader>
           <AlertDialogTitle>{title}</AlertDialogTitle>
           <AlertDialogDescription>{description}</AlertDialogDescription>
+          {error}
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel disabled={busy}>

package/client/pages/settings/users.tsx

@@ -250,7 +250,7 @@ export default function UsersPage(): ReactElement {
         enableHiding: false,
         cell: ({ row }) => (
           <Link
-            className='font-medium text-primary hover:underline'
+            className='font-medium text-foreground underline-offset-4 hover:underline'
             to={{
               pathname: row.original.id,
               search: location.search,

package/client/routing/route-navigation.ts

@@ -11,6 +11,8 @@ import { EMPTY_ARRAY } from '#lib/constants';
 import { transformNavigation } from '#lib/navigation-transform';
 
 export interface RouteNavigationItem {
+  /** Route keys represented by a single sidebar entry whose content uses tabs. */
+  readonly activeRouteKeys?: readonly string[];
   readonly section?: boolean;
   readonly route: AppClientRegisteredRoute;
   readonly children: readonly RouteNavigationItem[];
@@ -45,7 +47,25 @@ export function selectedNavigationId(
   denied: ReadonlySet<string> = new Set(),
 ): string | undefined {
   const matches = matchRouteTree(routes, pathname);
-  const pages = navigationPages(buildRouteNavigation(routes, denied));
+  const items = buildRouteNavigation(routes, denied);
+  const represented = (
+    nodes: readonly RouteNavigationItem[],
+  ): AppClientRegisteredRoute | undefined => {
+    for (const item of nodes) {
+      if (
+        item.activeRouteKeys?.some((key) =>
+          matches?.some(({ route }) => routeKey(route) === key),
+        )
+      )
+        return item.route;
+      const child = represented(item.children);
+      if (child) return child;
+    }
+    return undefined;
+  };
+  const active = represented(items);
+  if (active) return routeKey(active);
+  const pages = navigationPages(items);
   const visible = new Set(pages.map(routeKey));
   const selected =
     matches