@nocobase/app-template-default 1.0.0-beta.88 → 1.0.0-beta.90

package/client/pages/settings/database-explorer/index.tsx

@@ -0,0 +1,358 @@
+import { ApiClientError, useApiClient } from '@nocobase/app-client';
+import { DatabaseExplorerClient } from '@nocobase/app-plugin-database-explorer/client';
+import { useTranslation } from '@nocobase/i18n/client';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+import { Link, useSearchParams } from 'react-router';
+import { PageContainer } from '#components/page-container';
+import { PageHeader } from '#components/page-header';
+import { Button } from '#components/ui/button';
+import { Input } from '#components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '#components/ui/select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '#components/ui/table';
+
+/** A keyed read boundary prevents a late response from replacing a newer selection. */
+function Read<T>({
+  load,
+  children,
+}: {
+  load: () => Promise<T>;
+  children: (data: T) => ReactNode;
+}) {
+  const { t } = useTranslation();
+  const [attempt, setAttempt] = useState(0);
+  const [result, setResult] = useState<{ data: T } | { error: unknown }>();
+  useEffect(() => {
+    let active = true;
+    load().then(
+      (data) => {
+        if (active) setResult({ data });
+      },
+      (error: unknown) => {
+        if (active) setResult({ error });
+      },
+    );
+    return () => {
+      active = false;
+    };
+  }, [load, attempt]);
+  if (!result)
+    return (
+      <p role='status' className='p-4 text-sm text-muted-foreground'>
+        {t('databaseExplorer.loading')}
+      </p>
+    );
+  if ('error' in result) {
+    const status =
+      result.error instanceof ApiClientError ? result.error.status : undefined;
+    const key =
+      status === 401 ? 'expired' : status === 403 ? 'forbidden' : 'failed';
+    return (
+      <div role='alert' className='space-y-3 p-4'>
+        <p>{t(`databaseExplorer.${key}`)}</p>
+        {status === 401 ? (
+          <Link to='/login'>{t('databaseExplorer.signIn')}</Link>
+        ) : status !== 403 ? (
+          <Button
+            variant='outline'
+            onClick={() => {
+              setResult(undefined);
+              setAttempt((value) => value + 1);
+            }}
+          >
+            {t('databaseExplorer.retry')}
+          </Button>
+        ) : null}
+      </div>
+    );
+  }
+  return children(result.data);
+}
+
+export default function DatabaseExplorerPage() {
+  const { t } = useTranslation();
+  const api = useApiClient();
+  const client = useMemo(() => new DatabaseExplorerClient(api), [api]);
+  const load = useCallback(() => client.connections(), [client]);
+  const [params, setParams] = useSearchParams();
+  return (
+    <PageContainer className='space-y-6'>
+      <PageHeader
+        title={t('databaseExplorer.title')}
+        description={t('databaseExplorer.description')}
+      />
+      <Read load={load}>
+        {({ items, default: defaultConnection }) => {
+          if (!items.length)
+            return <p>{t('databaseExplorer.emptyConnections')}</p>;
+          const connection =
+            params.get('connection') ?? defaultConnection ?? items[0].name;
+          return (
+            <div className='space-y-6'>
+              <div className='max-w-sm space-y-2'>
+                <label
+                  htmlFor='database-connection'
+                  className='text-sm font-medium'
+                >
+                  {t('databaseExplorer.connections')}
+                </label>
+                <Select
+                  value={connection}
+                  onValueChange={(value) => {
+                    if (value) setParams({ connection: value });
+                  }}
+                >
+                  <SelectTrigger id='database-connection' className='w-full'>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {items.map((item) => (
+                      <SelectItem key={item.name} value={item.name}>
+                        {item.name} · {item.dialect}
+                        {item.isDefault
+                          ? ` · ${t('databaseExplorer.defaultConnection')}`
+                          : ''}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <ConnectionTables
+                key={connection}
+                client={client}
+                connection={connection}
+              />
+            </div>
+          );
+        }}
+      </Read>
+    </PageContainer>
+  );
+}
+
+function ConnectionTables({
+  client,
+  connection,
+}: {
+  client: DatabaseExplorerClient;
+  connection: string;
+}) {
+  const { t } = useTranslation();
+  const [params, setParams] = useSearchParams();
+  const selected = params.get('table');
+  const query = params.get('q') ?? '';
+  const load = useCallback(
+    () => client.allCollections(connection),
+    [client, connection],
+  );
+  return (
+    <div className='grid min-w-0 gap-6 lg:grid-cols-[minmax(14rem,1fr)_minmax(0,3fr)]'>
+      <section
+        aria-label={t('databaseExplorer.tables')}
+        className='min-w-0 space-y-3'
+      >
+        <h2 className='font-heading text-base font-semibold'>
+          {t('databaseExplorer.tables')}
+        </h2>
+        <Input
+          aria-label={t('databaseExplorer.searchTables')}
+          placeholder={t('databaseExplorer.searchTables')}
+          value={query}
+          onChange={(event) => {
+            setParams(
+              (previous) => {
+                const next = new URLSearchParams(previous);
+                next.set('q', event.target.value);
+                return next;
+              },
+              { replace: true },
+            );
+          }}
+        />
+        <Read load={load}>
+          {({ items, truncated }) => {
+            const matches = items.filter((item) =>
+              `${item.name} ${item.tableName} ${item.title ?? ''}`
+                .toLocaleLowerCase()
+                .includes(query.toLocaleLowerCase()),
+            );
+            return (
+              <>
+                {truncated ? (
+                  <p role='status' className='text-sm text-muted-foreground'>
+                    {t('databaseExplorer.truncated')}
+                  </p>
+                ) : null}
+                {matches.length ? (
+                  <ul className='max-h-96 space-y-1 overflow-auto rounded-lg border p-2'>
+                    {matches.map((item) => (
+                      <li key={item.name}>
+                        <Button
+                          variant={
+                            selected === item.name ? 'secondary' : 'ghost'
+                          }
+                          className='h-auto w-full justify-start whitespace-normal break-all text-left'
+                          aria-pressed={selected === item.name}
+                          onClick={() => {
+                            setParams((previous) => {
+                              const next = new URLSearchParams(previous);
+                              next.set('connection', connection);
+                              next.set('table', item.name);
+                              return next;
+                            });
+                          }}
+                        >
+                          {item.title
+                            ? `${item.title} (${item.name})`
+                            : item.name}
+                        </Button>
+                      </li>
+                    ))}
+                  </ul>
+                ) : (
+                  <p className='text-sm text-muted-foreground'>
+                    {t('databaseExplorer.emptyTables')}
+                  </p>
+                )}
+              </>
+            );
+          }}
+        </Read>
+      </section>
+      <section
+        aria-label={t('databaseExplorer.fields')}
+        className='min-w-0 space-y-3'
+      >
+        {selected ? (
+          <CollectionFields
+            key={selected}
+            client={client}
+            connection={connection}
+            collection={selected}
+          />
+        ) : (
+          <p className='rounded-lg border border-dashed p-6 text-sm text-muted-foreground'>
+            {t('databaseExplorer.selectTable')}
+          </p>
+        )}
+      </section>
+    </div>
+  );
+}
+
+function CollectionFields({
+  client,
+  connection,
+  collection,
+}: {
+  client: DatabaseExplorerClient;
+  connection: string;
+  collection: string;
+}) {
+  const { t } = useTranslation();
+  const [query, setQuery] = useState('');
+  const load = useCallback(
+    () => client.collection(connection, collection),
+    [client, connection, collection],
+  );
+  return (
+    <>
+      <h2 className='break-all font-heading text-base font-semibold'>
+        {collection}
+      </h2>
+      <Input
+        aria-label={t('databaseExplorer.searchFields')}
+        placeholder={t('databaseExplorer.searchFields')}
+        value={query}
+        onChange={(event) => setQuery(event.target.value)}
+      />
+      <Read load={load}>
+        {({ collection: artifact }) => {
+          const fields = (artifact.collection.fields ?? []).filter((field) =>
+            `${field.name} ${field.title ?? ''}`
+              .toLocaleLowerCase()
+              .includes(query.toLocaleLowerCase()),
+          );
+          return (
+            <>
+              {artifact.warnings.length ? (
+                <p role='status' className='text-sm text-muted-foreground'>
+                  {t('databaseExplorer.warnings')}
+                </p>
+              ) : null}
+              {fields.length ? (
+                <div className='overflow-hidden rounded-lg border'>
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        {[
+                          'name',
+                          'type',
+                          'nullable',
+                          'primaryKey',
+                          'target',
+                        ].map((key) => (
+                          <TableHead key={key}>
+                            {t(`databaseExplorer.${key}`)}
+                          </TableHead>
+                        ))}
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {fields.map((field) => (
+                        <TableRow key={field.name}>
+                          <TableCell className='font-medium'>
+                            {field.name}
+                            {field.title ? (
+                              <span className='block text-muted-foreground'>
+                                {field.title}
+                              </span>
+                            ) : null}
+                          </TableCell>
+                          <TableCell>{field.type}</TableCell>
+                          <TableCell>
+                            {t(
+                              `databaseExplorer.${field.nullable === undefined ? 'unknown' : field.nullable ? 'yes' : 'no'}`,
+                            )}
+                          </TableCell>
+                          <TableCell>
+                            {t(
+                              `databaseExplorer.${field.primaryKey ? 'yes' : 'no'}`,
+                            )}
+                          </TableCell>
+                          <TableCell>{field.target ?? '—'}</TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              ) : (
+                <p className='text-sm text-muted-foreground'>
+                  {t('databaseExplorer.emptyFields')}
+                </p>
+              )}
+            </>
+          );
+        }}
+      </Read>
+    </>
+  );
+}

package/client/pages/settings/database-explorer/routes.ts

@@ -0,0 +1,14 @@
+import { defineAppRoutes } from '@nocobase/app-client/plugins';
+import { DATABASE_EXPLORER_ACCESS } from '@nocobase/app-plugin-database-explorer/client';
+
+export default defineAppRoutes([
+  {
+    parent: 'settingsSystem',
+    name: 'databaseExplorer',
+    path: '/database-explorer',
+    auth: 'required',
+    authz: DATABASE_EXPLORER_ACCESS,
+    breadcrumb: { title: 'databaseExplorer.title' },
+    componentLoader: () => import('./index.js'),
+  },
+]);

package/client/pages/settings/database-explorer/zh-CN.ts

@@ -0,0 +1,30 @@
+export default {
+  title: '数据库浏览器',
+  description: '查看应用的数据库连接、数据表和字段。',
+  connections: '数据库连接',
+  defaultConnection: '默认',
+  tables: '数据表',
+  searchTables: '搜索数据表',
+  fields: '字段',
+  searchFields: '搜索字段',
+  name: '名称',
+  type: '类型',
+  nullable: '允许为空',
+  primaryKey: '主键',
+  target: '关联表',
+  yes: '是',
+  no: '否',
+  unknown: '未指定',
+  emptyConnections: '尚未配置数据库连接。',
+  emptyTables: '没有找到数据表。',
+  emptyFields: '没有找到字段。',
+  selectTable: '选择数据表以查看字段。',
+  loading: '正在加载…',
+  failed: '无法加载数据库信息。',
+  forbidden: '你没有浏览此数据库的权限。',
+  expired: '登录已过期，请重新登录后继续。',
+  signIn: '登录',
+  retry: '重试',
+  truncated: '当前仅加载了部分数据表，请缩小数据库范围后查看其余数据表。',
+  warnings: '部分字段未能完整解析，显示的结构可能不完整。',
+};

package/client/pages/settings/default-access.tsx

@@ -399,7 +399,7 @@ export default function DefaultAccessPage(): ReactElement {
           getRowId={(rule) => rule.key}
           showSelectedCount={false}
           pageSize={20}
-          loading={rules.loading || catalog.loading}
+          loading={active && (rules.loading || catalog.loading)}
           listState={listState}
           onRetry={() => {
             rules.reload();

package/client/pages/settings/roles.tsx

@@ -12,7 +12,6 @@ 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 { ListFeedback, ListFeedbackActions } from '#components/list-feedback';
@@ -123,34 +122,35 @@ export default function RolesPage(): ReactElement {
             state={listState}
             onClear={clearSearch}
             onRetry={request.reload}
-            busy={request.loading}
+            busy={active && request.loading}
           />
-          {active && request.loading && request.data ? (
-            <Spinner className='text-muted-foreground' />
-          ) : null}
         </div>
-        <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>
+        {active || listState !== 'loading' ? (
+          <ListFeedback state={listState}>
+            <RoleList
+              tableState={tableState}
+              // After a refresh failure the toolbar's retry button owns the wait.
+              loading={active && request.loading && listState === 'ready'}
+              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>
+        ) : null}
       </PermissionManagementPage>
       <Outlet context={{ reload: request.reload }} />
     </>

package/client/pages/settings/routes.ts

@@ -24,23 +24,27 @@ const systemSettingsRoutes: AppClientRouteContribution = defineAppRoutes([
     breadcrumb: { title: 'settings.users' },
     componentLoader: () => import('./users.js'),
     children: [
+      // The forms declare their presentation, so the dialog or drawer opens at once and the wait for the form's module,
+      // its authorization and its data stays inside it instead of under the list.
       {
         name: 'settingsUserCreate',
         path: 'create',
         authz: { resource: { type: 'user', id: '*' }, action: 'create' },
+        presentation: { kind: 'dialog', title: 'settings.newUser' },
         componentLoader: () => import('./user-form.js'),
       },
+      // A sibling rather than the parent of the editor, so closing the drawer returns to the list instead of to this
+      // route, which only forwards older detail links to the editor.
       {
         name: 'settingsUser',
         path: ':userId',
         componentLoader: () => import('./user-detail.js'),
-        children: [
-          {
-            name: 'settingsUserEdit',
-            path: 'edit',
-            componentLoader: () => import('./user-form.js'),
-          },
-        ],
+      },
+      {
+        name: 'settingsUserEdit',
+        path: ':userId/edit',
+        presentation: { kind: 'drawer', title: 'settings.editUser' },
+        componentLoader: () => import('./user-form.js'),
       },
     ],
   },
@@ -80,12 +84,14 @@ const systemSettingsRoutes: AppClientRouteContribution = defineAppRoutes([
               action: 'create',
             },
             breadcrumb: { title: 'settings.newRole' },
+            presentation: { kind: 'child-page' },
             componentLoader: () => import('./role-form.js'),
           },
           {
             name: 'settingsRoleEdit',
             path: ':key/edit',
             breadcrumb: { title: 'settings.editRole' },
+            presentation: { kind: 'child-page' },
             componentLoader: () => import('./role-form.js'),
           },
         ],
@@ -119,6 +125,7 @@ const systemSettingsRoutes: AppClientRouteContribution = defineAppRoutes([
               action: 'create',
             },
             breadcrumb: { title: 'settings.defaultAccess.new' },
+            presentation: { kind: 'child-page' },
             componentLoader: () => import('./default-access-form.js'),
           },
           // Read permission opens the full rule even when the viewer may not update it.
@@ -126,6 +133,7 @@ const systemSettingsRoutes: AppClientRouteContribution = defineAppRoutes([
             name: 'settingsDefaultAccessEdit',
             path: ':key/edit',
             breadcrumb: { title: 'settings.defaultAccess.edit' },
+            presentation: { kind: 'child-page' },
             componentLoader: () => import('./default-access-form.js'),
           },
         ],

package/client/pages/settings/user-detail.tsx

@@ -1,24 +1,10 @@
 import type { ReactElement } from 'react';
-import {
-  Navigate,
-  useLocation,
-  useOutlet,
-  useOutletContext,
-  useResolvedPath,
-} from 'react-router';
-import type { ManagedUser } from '@nocobase/app-plugin-users/client/user-client';
+import { Navigate, useLocation } from 'react-router';
 
-/** Keep stored route identifiers and old detail links while using one editor. */
+/** Keeps stored route identifiers and old detail links working by forwarding them to the editor. */
 export default function UserDetail(): ReactElement {
-  const parent = useOutletContext<{
-    reload: (updated?: ManagedUser) => void;
-  }>();
   const location = useLocation();
-  const listPath = useResolvedPath('..').pathname;
-  const outlet = useOutlet({ ...parent, listPath });
   return (
-    outlet ?? (
-      <Navigate to={{ pathname: 'edit', search: location.search }} replace />
-    )
+    <Navigate to={{ pathname: 'edit', search: location.search }} replace />
   );
 }

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

@@ -1,3 +1,4 @@
+import { PendingButton } from '#components/pending-button';
 import { FeedbackForm } from '#components/feedback-form';
 import { useAuthentication } from '@nocobase/app-plugin-authentication/client';
 import { useSubmission } from '@nocobase/app-client';
@@ -197,7 +198,6 @@ function UserEditor(): ReactElement {
   const location = useLocation();
   const parent = useOutletContext<{
     reload: (updated?: ManagedUser) => void;
-    listPath?: string;
   }>();
   const data = useSettingsData<{ data: ManagedUser }>(
     userId ? `users/${encodeURIComponent(userId)}` : 'users/options',
@@ -281,11 +281,8 @@ function UserEditor(): ReactElement {
   const [serverErrors, setServerErrors] = useState<Record<string, string>>({});
   const [submitted, setSubmitted] = useState(false);
 
-  const parentPath = useResolvedPath('..').pathname;
-  const closeTo = {
-    pathname: creating ? parentPath : (parent.listPath ?? parentPath),
-    search: location.search,
-  };
+  const listPath = useResolvedPath('..').pathname;
+  const closeTo = { pathname: listPath, search: location.search };
   const fieldError = (name: keyof typeof fields): string | undefined => {
     if (!submitted) return;
     if (serverErrors[name]) return serverErrors[name];
@@ -436,7 +433,9 @@ function UserEditor(): ReactElement {
         {t('settings.cancel')}
       </Button>
       {allowed && (
-        <Button
+        <PendingButton
+          busy={busy}
+          pendingLabel={t('settings.saving')}
           form={formId}
           type='submit'
           disabled={
@@ -455,14 +454,8 @@ function UserEditor(): ReactElement {
               (options.loading || Boolean(options.error) || !options.data))
           }
         >
-          {t(
-            busy
-              ? 'settings.saving'
-              : creating
-                ? 'settings.create'
-                : 'settings.save',
-          )}
-        </Button>
+          {t(creating ? 'settings.create' : 'settings.save')}
+        </PendingButton>
       )}
     </>
   );
@@ -475,6 +468,7 @@ function UserEditor(): ReactElement {
       ) : (
         !data.error && (
           <FeedbackForm
+            aria-busy={busy}
             submitting={busy}
             error={error}
             errorContent={<SettingsError error={error} inline />}