@nocobase/app-template-default 1.0.0-beta.83 → 1.0.0-beta.85

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

@@ -1,3 +1,6 @@
+import { FeedbackForm } from '#components/feedback-form';
+import { useAuthentication } from '@nocobase/app-plugin-authentication/client';
+import { useSubmission } from '@nocobase/app-client';
 import {
   useSettingsLeave,
   useSettingsData,
@@ -87,7 +90,12 @@ function RoleEditor(): ReactElement {
   const [grantsDraft, setGrantsDraft] = useState<readonly PermissionGrant[]>();
   const [dirty, setDirty] = useState(false);
   const [editingScope, setEditingScope] = useState<string>();
-  const [busy, setBusy] = useState(false);
+  const { session } = useAuthentication();
+  const submission = useSubmission({
+    scope: `${session?.user.id}:settings:role:${key}`,
+  });
+  const [requestBusy, setRequestBusy] = useState(false);
+  const busy = requestBusy || submission.submitting;
   const leave = useSettingsLeave(dirty, busy);
   const [error, setError] = useState<unknown>();
 
@@ -127,57 +135,67 @@ function RoleEditor(): ReactElement {
     pathname: useResolvedPath('..').pathname,
     search: location.search,
   };
-  const save = async (event: React.FormEvent<HTMLFormElement>) => {
+  const originalRevisionRef = useRef<string | undefined>(undefined);
+  const save = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    if (options.error || !catalog || (!creating && request.error)) return;
-    setSubmitted(true);
-    if (!name.trim() || !roleKey.trim()) {
-      event.currentTarget
-        .querySelector<HTMLInputElement>('input:invalid')
-        ?.focus();
-      return;
-    }
-    const incomplete = unconfiguredFilter(grants);
-    if (incomplete) {
-      setEditingScope(incomplete);
-      return;
-    }
-    setEditingScope(undefined);
-    setBusy(true);
-    setError(undefined);
-    setKeyConflict(false);
-    try {
-      const input = {
-        key: roleKey,
-        title:
-          !creating && initial && nameDraft === undefined
-            ? initial.title
-            : name.trim(),
-        grants,
-        ...(!creating && request.data?.data.revision
-          ? { expectedRevision: request.data.data.revision }
-          : {}),
-      };
-      if (creating) await authz.createPermissionSet(input);
-      else await authz.updatePermissionSet(key, input);
-      setDirty(false);
-      parent.reload();
-      toaster.show({ type: 'success', title: t('settings.saved', { name }) });
-      leave.allow();
-      void navigate(closeTo, { replace: true });
-    } catch (next) {
-      if (
-        creating &&
-        next instanceof Error &&
-        'status' in next &&
-        next.status === 409
-      ) {
-        setKeyConflict(true);
-        document.getElementById('role-key')?.focus();
-      } else setError(next);
-    } finally {
-      setBusy(false);
-    }
+    const form = event.currentTarget;
+    return (async () => {
+      event.preventDefault();
+      if (options.error || !catalog || (!creating && request.error)) return;
+      setSubmitted(true);
+      if (!name.trim() || !roleKey.trim()) {
+        form.querySelector<HTMLInputElement>('input:invalid')?.focus();
+        return;
+      }
+      const incomplete = unconfiguredFilter(grants);
+      if (incomplete) {
+        setEditingScope(incomplete);
+        return;
+      }
+      setEditingScope(undefined);
+      setRequestBusy(true);
+      setError(undefined);
+      setKeyConflict(false);
+      try {
+        originalRevisionRef.current ??= request.data?.data.revision;
+        const input = {
+          key: roleKey,
+          title:
+            !creating && initial && nameDraft === undefined
+              ? initial.title
+              : name.trim(),
+          grants,
+          ...(!creating && request.data?.data.revision
+            ? { expectedRevision: originalRevisionRef.current }
+            : {}),
+        };
+        const saved = await submission.run(
+          { key, creating, input },
+          (idempotencyKey) =>
+            creating
+              ? authz.createPermissionSet(input, idempotencyKey)
+              : authz.updatePermissionSet(key, input, idempotencyKey),
+        );
+        if (!saved) return;
+        setDirty(false);
+        parent.reload();
+        toaster.show({ type: 'success', title: t('settings.saved', { name }) });
+        leave.allow();
+        void navigate(closeTo, { replace: true });
+      } catch (next) {
+        if (
+          creating &&
+          next instanceof Error &&
+          'status' in next &&
+          next.status === 409
+        ) {
+          setKeyConflict(true);
+          document.getElementById('role-key')?.focus();
+        } else setError(next);
+      } finally {
+        setRequestBusy(false);
+      }
+    })();
   };
   const sections = catalog
     ? configurePermissionScopes(
@@ -215,7 +233,6 @@ function RoleEditor(): ReactElement {
         />
         <SettingsError error={request.error} retry={request.reload} />
         <SettingsError error={options.error} retry={options.reload} />
-        <SettingsError error={error} />
         {error instanceof Error &&
           'status' in error &&
           error.status === 409 && (
@@ -228,7 +245,10 @@ function RoleEditor(): ReactElement {
         ) : (
           !request.error &&
           !options.error && (
-            <form
+            <FeedbackForm
+              submitting={busy}
+              error={error}
+              errorContent={<SettingsError error={error} inline />}
               onSubmit={(event) => void save(event)}
               noValidate
               className='flex flex-col gap-6'
@@ -238,10 +258,16 @@ function RoleEditor(): ReactElement {
                   <Label htmlFor='role-key'>{t('settings.key')} *</Label>
                   <Input
                     id='role-key'
+                    name='key'
                     required
                     value={roleKey}
                     disabled={!creating || !allowed || busy}
                     aria-invalid={keyConflict || (submitted && !roleKey.trim())}
+                    aria-errormessage={
+                      keyConflict || (submitted && !roleKey.trim())
+                        ? 'role-key-error'
+                        : undefined
+                    }
                     onChange={(event) => {
                       setKeyConflict(false);
                       setKeyDraft(event.target.value);
@@ -249,7 +275,7 @@ function RoleEditor(): ReactElement {
                     }}
                   />
                   {(keyConflict || (submitted && !roleKey.trim())) && (
-                    <p className='text-xs text-destructive'>
+                    <p id='role-key-error' className='text-xs text-destructive'>
                       {t(
                         keyConflict
                           ? 'settings.keyConflict'
@@ -262,17 +288,24 @@ function RoleEditor(): ReactElement {
                   <Label htmlFor='role-name'>{t('settings.roleName')} *</Label>
                   <Input
                     id='role-name'
+                    name='title'
                     required
                     value={name}
                     disabled={!allowed || busy}
                     aria-invalid={submitted && !name.trim()}
+                    aria-errormessage={
+                      submitted && !name.trim() ? 'role-name-error' : undefined
+                    }
                     onChange={(event) => {
                       setNameDraft(event.target.value);
                       setDirty(true);
                     }}
                   />
                   {submitted && !name.trim() && (
-                    <p className='text-xs text-destructive'>
+                    <p
+                      id='role-name-error'
+                      className='text-xs text-destructive'
+                    >
                       {t('settings.required')}
                     </p>
                   )}
@@ -296,6 +329,15 @@ function RoleEditor(): ReactElement {
                   levelFor: (name) => t('settings.levelFor', { name }),
                   search: t('settings.permissionSearch'),
                   enabledOnly: t('settings.enabledOnly'),
+                  granted: t('settings.permissionGranted'),
+                  ungranted: t('settings.permissionUngranted'),
+                  selectAll: t('settings.permissionAll'),
+                  authorizationStatus: t('settings.permissionStatus'),
+                  clearSearch: t('settings.permissionClearSearch'),
+                  collapseAll: t('settings.permissionCollapseAll'),
+                  expandAll: t('settings.permissionExpandAll'),
+                  summary: (enabled, total) =>
+                    t('settings.permissionSummary', { enabled, total }),
                   clear: t('settings.clear'),
                   empty: t('settings.noPermissions'),
                   emptyDescription: t('settings.permissionEmptyHint'),
@@ -342,7 +384,7 @@ function RoleEditor(): ReactElement {
                   </Button>
                 )}
               </div>
-            </form>
+            </FeedbackForm>
           )
         )}
         {leave.dialog}

package/client/pages/settings/roles.tsx

@@ -1,33 +1,30 @@
+import { useListLocation } from '#hooks/use-list-location';
 import { useSettingsData, useRolePermission } from './hooks.js';
 import { useTranslation } from '@nocobase/i18n/client';
 import type {
   PermissionSet,
   LocalizedText,
 } from '@nocobase/app-plugin-authorization/client';
+import { resolveListState } from '@nocobase/app-client';
 import { type ReactElement } from 'react';
-import { Link, Outlet, useLocation, useSearchParams } from 'react-router';
-import { ShieldCheckIcon, PlusIcon } from 'lucide-react';
+import { Link, Outlet, useLocation } from 'react-router';
+import { PlusIcon } from 'lucide-react';
 import { PermissionManagementPage } from './permission-management-page.js';
 import { Input } from '#components/ui/input';
 import { Button } from '#components/ui/button';
+import { Spinner } from '#components/ui/spinner';
 import { useTableUrlState } from '#hooks/use-table-url-state';
 import { RoleList } from '#components/role-list';
-import {
-  Empty,
-  EmptyTitle,
-  EmptyDescription,
-  EmptyContent,
-  EmptyMedia,
-} from '#components/ui/empty';
-import { SettingsError, SettingsLoading } from './shared.js';
+import { ListFeedback, ListFeedbackActions } from '#components/list-feedback';
 
 export default function RolesPage(): ReactElement {
   const { t, i18n } = useTranslation();
-  const [params, setParams] = useSearchParams();
+  const { params, setParams, active } = useListLocation();
   const location = useLocation();
   const search = params.get('q') ?? '';
   const request = useSettingsData<{ data: readonly PermissionSet[] }>(
     'authorization/permissionSets',
+    { active },
   );
   const canCreate = useRolePermission('create');
   const text = (value: LocalizedText): string =>
@@ -50,12 +47,39 @@ export default function RolesPage(): ReactElement {
       ),
     );
   const tableState = useTableUrlState({
+    active,
+    revision: request.revision,
     sortColumns: ['title', 'key'],
     rowCount:
       request.data && !request.loading && !request.error
         ? rows.length
         : undefined,
   });
+  const listState = resolveListState(
+    {
+      data: request.data,
+      error: tableState.error ?? request.error,
+      isPending: request.loading && !request.data,
+    },
+    rows.length,
+    Boolean(search.trim()),
+  );
+  const canShowCreate =
+    canCreate &&
+    (listState === 'empty' ||
+      listState === 'ready' ||
+      listState === 'no-results' ||
+      listState === 'refresh-failed');
+  const clearSearch = () =>
+    setParams(
+      (old) => {
+        const next = new URLSearchParams(old);
+        next.delete('q');
+        next.delete('page');
+        return next;
+      },
+      { replace: true },
+    );
   const create = canCreate ? (
     <Button
       nativeButton={false}
@@ -69,7 +93,7 @@ export default function RolesPage(): ReactElement {
     <>
       <PermissionManagementPage
         tab='roles'
-        actions={rows.length || search ? create : undefined}
+        actions={canShowCreate ? create : undefined}
       >
         <div className='flex items-center gap-3'>
           <Input
@@ -90,93 +114,43 @@ export default function RolesPage(): ReactElement {
               );
             }}
           />
-          {search && (
-            <Button
-              variant='ghost'
-              onClick={() => {
-                setParams(
-                  (old) => {
-                    const next = new URLSearchParams(old);
-                    next.delete('q');
-                    next.delete('page');
-                    return next;
-                  },
-                  { replace: true },
-                );
-              }}
-            >
+          {search && listState !== 'no-results' && (
+            <Button variant='ghost' onClick={clearSearch}>
               {t('settings.clear')}
             </Button>
           )}
+          <ListFeedbackActions
+            state={listState}
+            onClear={clearSearch}
+            onRetry={request.reload}
+            busy={request.loading}
+          />
+          {active && request.loading && request.data ? (
+            <Spinner className='text-muted-foreground' />
+          ) : null}
         </div>
-        <SettingsError error={request.error} retry={request.reload} />
-        {request.loading && !request.data ? (
-          <SettingsLoading />
-        ) : (
-          !request.error &&
-          (rows.length ? (
-            <RoleList
-              tableState={tableState}
-              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={{
-                name: t('settings.roleName'),
-                key: t('settings.key'),
-                type: t('settings.roleType'),
-                protected: t('settings.protected'),
-                custom: t('settings.custom'),
-              }}
-            />
-          ) : (
-            <Empty className='min-h-48 border border-dashed'>
-              <EmptyMedia variant='icon'>
-                <ShieldCheckIcon />
-              </EmptyMedia>
-              <EmptyTitle>
-                {t(search ? 'settings.noResults' : 'settings.noRoles')}
-              </EmptyTitle>
-              <EmptyDescription>
-                {t(
-                  search
-                    ? 'settings.clearHint'
-                    : canCreate
-                      ? 'settings.rolesDescription'
-                      : 'settings.rolesReadOnlyEmpty',
-                )}
-              </EmptyDescription>
-              <EmptyContent>
-                {search ? (
-                  <Button
-                    variant='outline'
-                    onClick={() => {
-                      setParams(
-                        (old) => {
-                          const next = new URLSearchParams(old);
-                          next.delete('q');
-                          next.delete('page');
-                          return next;
-                        },
-                        { replace: true },
-                      );
-                    }}
-                  >
-                    {t('settings.clear')}
-                  </Button>
-                ) : (
-                  create
-                )}
-              </EmptyContent>
-            </Empty>
-          ))
-        )}
+        <ListFeedback state={listState}>
+          <RoleList
+            tableState={tableState}
+            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={{
+              name: t('settings.roleName'),
+              key: t('settings.key'),
+              type: t('settings.roleType'),
+              protected: t('settings.protected'),
+              custom: t('settings.custom'),
+            }}
+          />
+        </ListFeedback>
       </PermissionManagementPage>
       <Outlet context={{ reload: request.reload }} />
     </>

package/client/pages/settings/shared.tsx

@@ -1,3 +1,4 @@
+import { ListRecoveryError } from '#hooks/use-table-url-state';
 import { ApiClientError } from '@nocobase/app-client';
 import { Link } from 'react-router';
 import { useTranslation } from '@nocobase/i18n/client';
@@ -18,9 +19,11 @@ import {
 export function SettingsError({
   error,
   retry,
+  inline = false,
 }: {
   readonly error: unknown;
   readonly retry?: () => void;
+  readonly inline?: boolean;
 }): ReactElement | null {
   const { t } = useTranslation();
   if (!error) return null;
@@ -28,40 +31,47 @@ export function SettingsError({
     typeof error === 'object' && error !== null
       ? Reflect.get(error, 'status')
       : undefined;
-  return (
+  const content = (
+    <>
+      {error instanceof ListRecoveryError
+        ? error.message
+        : t(
+            status === 400
+              ? 'settings.invalidRequest'
+              : status === 401
+                ? 'settings.sessionEnded'
+                : status === 403
+                  ? 'settings.denied'
+                  : status === 404
+                    ? 'settings.missing'
+                    : status === 409
+                      ? error instanceof ApiClientError &&
+                        error.reason === 'USER_IDENTITY_CONFLICT'
+                        ? 'settings.identityConflict'
+                        : 'settings.conflict'
+                      : 'settings.failed',
+          )}
+      {status === 401 && (
+        <Button
+          variant='outline'
+          nativeButton={false}
+          render={<Link to='/login' />}
+        >
+          {t('settings.signInAgain')}
+        </Button>
+      )}
+      {retry && ![400, 401, 403, 404, 409].includes(Number(status)) && (
+        <Button variant='outline' size='sm' onClick={retry}>
+          {t('settings.retry')}
+        </Button>
+      )}
+    </>
+  );
+  return inline ? (
+    content
+  ) : (
     <Alert variant='destructive'>
-      <AlertDescription>
-        {t(
-          status === 400
-            ? 'settings.invalidRequest'
-            : status === 401
-              ? 'settings.sessionEnded'
-              : status === 403
-                ? 'settings.denied'
-                : status === 404
-                  ? 'settings.missing'
-                  : status === 409
-                    ? error instanceof ApiClientError &&
-                      error.reason === 'USER_IDENTITY_CONFLICT'
-                      ? 'settings.identityConflict'
-                      : 'settings.conflict'
-                    : 'settings.failed',
-        )}
-        {status === 401 && (
-          <Button
-            variant='outline'
-            nativeButton={false}
-            render={<Link to='/login' />}
-          >
-            {t('settings.signInAgain')}
-          </Button>
-        )}
-        {retry && ![400, 401, 403, 404, 409].includes(Number(status)) && (
-          <Button variant='outline' size='sm' onClick={retry}>
-            {t('settings.retry')}
-          </Button>
-        )}
-      </AlertDescription>
+      <AlertDescription>{content}</AlertDescription>
     </Alert>
   );
 }