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

package/client/extensions/nocobase-auth-forms/password-login-form.tsx

@@ -1,3 +1,4 @@
+import { FeedbackForm } from '#components/feedback-form';
 import {
   useId,
   useState,
@@ -11,7 +12,7 @@ import { FieldGroup } from '#components/ui/field';
 import { Input } from '#components/ui/input';
 
 import { invalidProps } from './field-props.js';
-import { AuthField, AuthFormStatus, AuthFormSubmit } from './form-parts.js';
+import { AuthField, AuthFormSubmit } from './form-parts.js';
 import { PasswordInput } from './password-input.js';
 
 export interface PasswordLoginValues {
@@ -71,13 +72,21 @@ export function PasswordLoginForm({
   const [identifier, setIdentifier] = useState('');
   const [password, setPassword] = useState('');
 
-  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
+  const handleSubmit = async (
+    event: FormEvent<HTMLFormElement>,
+  ): Promise<void> => {
     event.preventDefault();
-    void onSubmit({ identifier: identifier.trim(), password });
+    await onSubmit({ identifier: identifier.trim(), password });
   };
 
   return (
-    <form className={className} onSubmit={handleSubmit}>
+    <FeedbackForm
+      submitting={submitting}
+      error={error}
+      errorContent={error}
+      className={className}
+      onSubmit={handleSubmit}
+    >
       <FieldGroup>
         <AuthField
           error={fieldErrors?.identifier}
@@ -88,6 +97,7 @@ export function PasswordLoginForm({
             autoComplete='username'
             autoFocus
             id={identifierId}
+            name='identifier'
             onChange={(event) => setIdentifier(event.target.value)}
             required
             value={identifier}
@@ -104,6 +114,7 @@ export function PasswordLoginForm({
             autoComplete='current-password'
             hideLabel={labels.hidePassword}
             id={passwordId}
+            name='password'
             onChange={(event) => setPassword(event.target.value)}
             required
             showLabel={labels.showPassword}
@@ -111,13 +122,13 @@ export function PasswordLoginForm({
             {...invalidProps(passwordId, fieldErrors?.password)}
           />
         </AuthField>
-        {error ? <AuthFormStatus type='error'>{error}</AuthFormStatus> : null}
+
         <AuthFormSubmit footer={footer}>
           <Button className='w-full' disabled={submitting} type='submit'>
             {submitting ? labels.submitting : labels.submit}
           </Button>
         </AuthFormSubmit>
       </FieldGroup>
-    </form>
+    </FeedbackForm>
   );
 }

package/client/extensions/nocobase-auth-forms/password-registration-form.tsx

@@ -1,3 +1,4 @@
+import { FeedbackForm } from '#components/feedback-form';
 import {
   useId,
   useState,
@@ -11,7 +12,7 @@ import { FieldGroup } from '#components/ui/field';
 import { Input } from '#components/ui/input';
 
 import { invalidProps } from './field-props.js';
-import { AuthField, AuthFormStatus, AuthFormSubmit } from './form-parts.js';
+import { AuthField, AuthFormSubmit } from './form-parts.js';
 
 export interface PasswordRegistrationValues {
   readonly name: string;
@@ -91,14 +92,16 @@ export function PasswordRegistrationForm({
     (event: { target: { value: string } }): void =>
       setValues((current) => ({ ...current, [field]: event.target.value }));
 
-  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
+  const handleSubmit = async (
+    event: FormEvent<HTMLFormElement>,
+  ): Promise<void> => {
     event.preventDefault();
     if (values.password !== values.confirmation) {
       setMismatch(true);
       return;
     }
     setMismatch(false);
-    void onSubmit({
+    await onSubmit({
       name: values.name.trim(),
       username: values.username.trim(),
       email: values.email.trim(),
@@ -106,16 +109,26 @@ export function PasswordRegistrationForm({
     });
   };
 
-  const confirmationError = mismatch ? labels.passwordMismatch : undefined;
+  const confirmationError =
+    mismatch && values.password !== values.confirmation
+      ? labels.passwordMismatch
+      : undefined;
 
   return (
-    <form className={className} onSubmit={handleSubmit}>
+    <FeedbackForm
+      submitting={submitting}
+      error={error}
+      errorContent={error}
+      className={className}
+      onSubmit={handleSubmit}
+    >
       <FieldGroup>
         <AuthField error={fieldErrors?.name} id={ids.name} label={labels.name}>
           <Input
             autoComplete='name'
             autoFocus
             id={ids.name}
+            name='name'
             onChange={set('name')}
             required
             value={values.name}
@@ -130,6 +143,7 @@ export function PasswordRegistrationForm({
           <Input
             autoComplete='username'
             id={ids.username}
+            name='username'
             onChange={set('username')}
             required
             value={values.username}
@@ -144,6 +158,7 @@ export function PasswordRegistrationForm({
           <Input
             autoComplete='email'
             id={ids.email}
+            name='email'
             onChange={set('email')}
             required
             type='email'
@@ -159,6 +174,7 @@ export function PasswordRegistrationForm({
           <Input
             autoComplete='new-password'
             id={ids.password}
+            name='password'
             onChange={set('password')}
             required
             type='password'
@@ -174,6 +190,7 @@ export function PasswordRegistrationForm({
           <Input
             autoComplete='new-password'
             id={ids.confirmation}
+            name='confirmation'
             onChange={set('confirmation')}
             required
             type='password'
@@ -181,13 +198,13 @@ export function PasswordRegistrationForm({
             {...invalidProps(ids.confirmation, confirmationError)}
           />
         </AuthField>
-        {error ? <AuthFormStatus type='error'>{error}</AuthFormStatus> : null}
+
         <AuthFormSubmit footer={footer}>
           <Button className='w-full' disabled={submitting} type='submit'>
             {submitting ? labels.submitting : labels.submit}
           </Button>
         </AuthFormSubmit>
       </FieldGroup>
-    </form>
+    </FeedbackForm>
   );
 }

package/client/extensions/nocobase-auth-forms/password-reset-form.tsx

@@ -1,3 +1,4 @@
+import { FeedbackForm } from '#components/feedback-form';
 import {
   useId,
   useState,
@@ -11,7 +12,7 @@ import { FieldGroup } from '#components/ui/field';
 import { Input } from '#components/ui/input';
 
 import { invalidProps } from './field-props.js';
-import { AuthField, AuthFormStatus, AuthFormSubmit } from './form-parts.js';
+import { AuthField, AuthFormSubmit } from './form-parts.js';
 
 export interface PasswordResetValues {
   readonly password: string;
@@ -66,7 +67,9 @@ export function PasswordResetForm({
   const [confirmation, setConfirmation] = useState('');
   const [mismatch, setMismatch] = useState(false);
 
-  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
+  const handleSubmit = async (
+    event: FormEvent<HTMLFormElement>,
+  ): Promise<void> => {
     event.preventDefault();
     if (disabled) return;
     if (password !== confirmation) {
@@ -74,13 +77,20 @@ export function PasswordResetForm({
       return;
     }
     setMismatch(false);
-    void onSubmit({ password });
+    await onSubmit({ password });
   };
 
-  const confirmationError = mismatch ? labels.passwordMismatch : undefined;
+  const confirmationError =
+    mismatch && password !== confirmation ? labels.passwordMismatch : undefined;
 
   return (
-    <form className={className} onSubmit={handleSubmit}>
+    <FeedbackForm
+      submitting={submitting}
+      error={error}
+      errorContent={error}
+      className={className}
+      onSubmit={handleSubmit}
+    >
       <FieldGroup>
         <AuthField
           error={fieldErrors?.password}
@@ -92,6 +102,7 @@ export function PasswordResetForm({
             autoFocus
             disabled={disabled}
             id={passwordId}
+            name='password'
             onChange={(event) => setPassword(event.target.value)}
             required
             type='password'
@@ -108,6 +119,7 @@ export function PasswordResetForm({
             autoComplete='new-password'
             disabled={disabled}
             id={confirmationId}
+            name='confirmation'
             onChange={(event) => setConfirmation(event.target.value)}
             required
             type='password'
@@ -115,7 +127,7 @@ export function PasswordResetForm({
             {...invalidProps(confirmationId, confirmationError)}
           />
         </AuthField>
-        {error ? <AuthFormStatus type='error'>{error}</AuthFormStatus> : null}
+
         <AuthFormSubmit footer={footer}>
           <Button
             className='w-full'
@@ -127,6 +139,6 @@ export function PasswordResetForm({
           </Button>
         </AuthFormSubmit>
       </FieldGroup>
-    </form>
+    </FeedbackForm>
   );
 }

package/client/extensions/nocobase-auth-forms/password-reset-request-form.tsx

@@ -1,3 +1,4 @@
+import { FeedbackForm } from '#components/feedback-form';
 import {
   useId,
   useState,
@@ -63,19 +64,28 @@ export function PasswordResetRequestForm({
   const emailId = `${useId()}-email`;
   const [email, setEmail] = useState('');
 
-  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
+  const handleSubmit = async (
+    event: FormEvent<HTMLFormElement>,
+  ): Promise<void> => {
     event.preventDefault();
-    void onSubmit({ email: email.trim() });
+    await onSubmit({ email: email.trim() });
   };
 
   return (
-    <form className={className} onSubmit={handleSubmit}>
+    <FeedbackForm
+      submitting={submitting}
+      error={error}
+      errorContent={error}
+      className={className}
+      onSubmit={handleSubmit}
+    >
       <FieldGroup>
         <AuthField error={fieldErrors?.email} id={emailId} label={labels.email}>
           <Input
             autoComplete='email'
             autoFocus
             id={emailId}
+            name='email'
             onChange={(event) => setEmail(event.target.value)}
             required
             type='email'
@@ -83,9 +93,7 @@ export function PasswordResetRequestForm({
             {...invalidProps(emailId, fieldErrors?.email)}
           />
         </AuthField>
-        {error ? (
-          <AuthFormStatus type='error'>{error}</AuthFormStatus>
-        ) : success ? (
+        {!error && success ? (
           <AuthFormStatus type='success'>{labels.success}</AuthFormStatus>
         ) : null}
         <AuthFormSubmit footer={footer}>
@@ -94,6 +102,6 @@ export function PasswordResetRequestForm({
           </Button>
         </AuthFormSubmit>
       </FieldGroup>
-    </form>
+    </FeedbackForm>
   );
 }

package/client/extensions/nocobase-device-approval/device-approval.tsx

@@ -1,3 +1,4 @@
+import { FeedbackForm } from '#components/feedback-form';
 import { useTranslation } from '@nocobase/i18n/client';
 import { CircleAlert, CircleCheck, CircleX, Clock } from 'lucide-react';
 import {
@@ -125,7 +126,10 @@ function CodeEntry({
     if (code) onSubmit(formatUserCode(code));
   };
   return (
-    <form className={cn('flex flex-col gap-6', className)} onSubmit={submit}>
+    <FeedbackForm
+      className={cn('flex flex-col gap-6', className)}
+      onSubmit={submit}
+    >
       <FieldGroup>
         <Field>
           <FieldLabel htmlFor={id}>
@@ -137,6 +141,7 @@ function CodeEntry({
             autoFocus
             className='font-mono tracking-widest uppercase'
             id={id}
+            name='userCode'
             onChange={(event) => setTyped(event.target.value)}
             placeholder='ABCD-EFGH'
             spellCheck={false}
@@ -152,7 +157,7 @@ function CodeEntry({
       <Button disabled={typed.trim() === ''} type='submit'>
         {t('deviceApproval.continue', { defaultValue: 'Continue' })}
       </Button>
-    </form>
+    </FeedbackForm>
   );
 }
 

package/client/extensions/nocobase-device-approval/locales/en-US.ts

@@ -1,5 +1,12 @@
 /** Every key the device approval looks up, so each locale is checked against the same list. */
 export interface DeviceApprovalLocale {
+  readonly formFeedback: {
+    readonly field: string;
+    readonly invalid: string;
+    readonly failed: string;
+    readonly network: string;
+    readonly denied: string;
+  };
   readonly 'deviceApproval.title': string;
   readonly 'deviceApproval.description': string;
   readonly 'deviceApproval.enterCode': string;
@@ -23,6 +30,15 @@ export interface DeviceApprovalLocale {
 }
 
 const enUS: DeviceApprovalLocale = {
+  formFeedback: {
+    field: 'This value was rejected. Check it and try again.',
+    invalid: 'Check the highlighted fields and try again.',
+    failed: 'Unable to save. Your input has been kept. Try again.',
+    network:
+      'Unable to connect. Check your connection and try again. Your input has been kept.',
+    denied:
+      'You cannot submit this form with your current access. Your input has been kept.',
+  },
   'deviceApproval.title': 'Authorize a device',
   'deviceApproval.description':
     'A command line or another device asked to sign in as you. Approve it only if you started the sign-in yourself.',

package/client/extensions/nocobase-device-approval/locales/zh-CN.ts

@@ -1,6 +1,13 @@
 import type { DeviceApprovalLocale } from './en-US.js';
 
 const zhCN: DeviceApprovalLocale = {
+  formFeedback: {
+    field: '此字段的值未通过校验，请检查并修改后重试。',
+    invalid: '请检查标记的字段后重试。',
+    failed: '保存失败，已保留您的输入，请重试。',
+    network: '无法连接，请检查网络后重试。已保留您的输入。',
+    denied: '当前权限无法提交此表单。已保留您的输入。',
+  },
   'deviceApproval.title': '授权设备',
   'deviceApproval.description':
     '一个命令行或其他设备请求以你的身份登录。只有在登录是你自己发起的时候才批准。',

package/client/extensions/nocobase-file-component-ui/components/file-preview-dialog.tsx

@@ -86,10 +86,28 @@ function OpenFilePreviewDialog(
       >
         <div className='flex items-center justify-between gap-3 pr-10'>
           <div className='min-w-0'>
-            <DialogTitle className='truncate'>{file.filename}</DialogTitle>
+            <div className='flex min-w-0 items-center gap-2'>
+              <DialogTitle className='truncate'>{file.filename}</DialogTitle>
+              {allowDownload ? (
+                <Button
+                  type='button'
+                  size='icon'
+                  className='shrink-0'
+                  variant='ghost'
+                  aria-label={`${downloadLabel}: ${file.filename}`}
+                  onClick={() =>
+                    void downloadFile(file, onDownload).catch(
+                      (error: unknown) => reportDownloadError(onError, error),
+                    )
+                  }
+                >
+                  <Download aria-hidden='true' />
+                </Button>
+              ) : null}
+            </div>
             <p className='text-sm text-muted-foreground'>{file.mimeType}</p>
           </div>
-          <div className='flex gap-1'>
+          <div className='flex shrink-0 gap-1'>
             {files.length > 1 ? (
               <>
                 <Button
@@ -122,21 +140,6 @@ function OpenFilePreviewDialog(
                 </Button>
               </>
             ) : null}
-            {allowDownload ? (
-              <Button
-                type='button'
-                size='icon'
-                variant='ghost'
-                aria-label={`${downloadLabel}: ${file.filename}`}
-                onClick={() =>
-                  void downloadFile(file, onDownload).catch((error: unknown) =>
-                    reportDownloadError(onError, error),
-                  )
-                }
-              >
-                <Download aria-hidden='true' />
-              </Button>
-            ) : null}
           </div>
         </div>
         {/* Only the preview scrolls; the title and its actions stay in view. */}

package/client/hooks/use-list-data.ts

@@ -0,0 +1,77 @@
+import { ApiClientError, useApiClient } from '@nocobase/app-client';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+/** A successful result belongs to one query and refresh generation only. */
+export function useListData<T>(
+  path: string,
+  options: boolean | { keepPreviousData?: boolean; active?: boolean } = false,
+) {
+  const { keepPreviousData = false, active = true } =
+    typeof options === 'boolean' ? { keepPreviousData: options } : options;
+  const api = useApiClient();
+  const [revision, setRevision] = useState(0);
+  const key = useMemo(
+    () => ({ path, revision, active }),
+    [path, revision, active],
+  );
+  const generationRef = useRef(0);
+  const controllerRef = useRef<AbortController | undefined>(undefined);
+  const [result, setResult] = useState<{
+    path: string;
+    key?: typeof key;
+    data?: T;
+    error?: unknown;
+  }>({ path });
+  useEffect(() => {
+    if (!active) return;
+    const request = new AbortController();
+    controllerRef.current = request;
+    const ticket = generationRef.current;
+    void api.request<T>({ path, signal: request.signal }).then(
+      (data) => {
+        if (!request.signal.aborted && ticket === generationRef.current)
+          setResult({ path, key, data });
+      },
+      (error: unknown) => {
+        if (request.signal.aborted || ticket !== generationRef.current) return;
+        setResult((old) => ({
+          ...(old.path === path &&
+          !(
+            error instanceof ApiClientError &&
+            [401, 403, 404].includes(error.status)
+          )
+            ? old
+            : {}),
+          path,
+          key,
+          error,
+        }));
+      },
+    );
+    return () => request.abort();
+  }, [api, path, key, active]);
+  const invalidate = useCallback(() => {
+    // Invalidate synchronously, before React commits the next request effect.
+    generationRef.current += 1;
+    controllerRef.current?.abort();
+  }, []);
+  return {
+    path: result.path,
+    data: result.path === path || keepPreviousData ? result.data : undefined,
+    loading: !active || result.path !== path || result.key !== key,
+    error:
+      result.path === path && result.key === key ? result.error : undefined,
+    revision,
+    reload: useCallback(() => {
+      invalidate();
+      setRevision((value) => value + 1);
+    }, [invalidate]),
+    replaceData: useCallback(
+      (data: T) => {
+        invalidate();
+        setResult({ path, key, data });
+      },
+      [path, key, invalidate],
+    ),
+  };
+}

package/client/hooks/use-list-location.ts

@@ -0,0 +1,23 @@
+import {
+  useLocation,
+  useOutlet,
+  useResolvedPath,
+  useSearchParams,
+} from 'react-router';
+import { useRouteSearches } from '../routing/route-context.js';
+
+/** Covered lists keep their own query; returning activates a fresh read. */
+export function useListLocation() {
+  const location = useLocation();
+  const listPath = useResolvedPath('.').pathname;
+  const child = useOutlet();
+  const searches = useRouteSearches();
+  const [current, setParams] = useSearchParams();
+  const active =
+    (listPath === '/' && child === null) ||
+    location.pathname.replace(/\/$/u, '') === listPath.replace(/\/$/u, '');
+  const params = active
+    ? current
+    : new URLSearchParams(searches.get(listPath) ?? '');
+  return { params, setParams, active };
+}

package/client/hooks/use-list-tabs.ts

@@ -0,0 +1,42 @@
+import { useLocation, useResolvedPath } from 'react-router';
+import { useRouteSearches } from '../routing/route-context.js';
+
+export interface ListTab {
+  readonly path: string;
+  readonly label: string;
+  /** Tabs sharing a dataset may retain its filters, sorting and pagination. */
+  readonly dataset: string;
+}
+
+/** Tabs are routes; only a list's own parameters are discarded on a dataset change. */
+export function useListTabs({
+  tabs,
+  parameterKeys,
+  pending = false,
+}: {
+  tabs: readonly ListTab[];
+  parameterKeys: readonly string[];
+  pending?: boolean;
+}) {
+  const location = useLocation();
+  const parent = useResolvedPath('.').pathname.replace(/\/+$/u, '');
+  const searches = useRouteSearches();
+  const segment = location.pathname.slice(parent.length + 1).split('/')[0];
+  const active = tabs.find((tab) => tab.path === segment);
+  const destination = (tab: ListTab) => {
+    const params = new URLSearchParams(location.search);
+    if (!active || tab.dataset !== active.dataset) {
+      for (const key of parameterKeys) params.delete(key);
+    }
+    return { pathname: `${parent}/${tab.path}`, search: params.toString() };
+  };
+  const activePath = active ? `${parent}/${active.path}` : undefined;
+  return {
+    active,
+    source: activePath
+      ? { pathname: activePath, search: searches.get(activePath) ?? '' }
+      : undefined,
+    destination,
+    fallback: !pending && !active && tabs[0] ? destination(tabs[0]) : undefined,
+  };
+}