@nocobase/app-template-default 1.0.0-beta.75 → 1.0.0-beta.77

package/client/components/record-link.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps, ReactElement } from 'react';
+import { Link } from 'react-router';
+import { cn } from 'cn';
+
+/** A record name or identifier that opens its route from a list or table. */
+export function RecordLink({
+  className,
+  ...props
+}: ComponentProps<typeof Link>): ReactElement {
+  return (
+    <Link
+      {...props}
+      data-slot='record-link'
+      className={cn(
+        'cursor-pointer font-medium text-foreground no-underline decoration-1 underline-offset-4 hover:underline focus-visible:rounded-sm focus-visible:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
+        className,
+      )}
+    />
+  );
+}

package/client/components/required-role-setup.tsx

@@ -0,0 +1,93 @@
+import { useCallback, useMemo, type ReactElement } from 'react';
+import { Link, useLocation } from 'react-router';
+import { useApiClient } from '@nocobase/app-client';
+import { useCan } from '@nocobase/app-plugin-authorization/client';
+import { UsersClient } from '@nocobase/app-plugin-users/client/user-client';
+import { useTranslation } from '@nocobase/i18n/client';
+import { Button } from '#components/ui/button';
+import { SetupReadiness } from './setup-readiness.js';
+import { useSetupReadiness } from './setup-readiness-state.js';
+import {
+  inspectRequiredRoles,
+  requiredRoleSetupId,
+  requiredRoleSetupLink,
+  type RequiredSetupRole,
+} from '../lib/required-role-setup.js';
+
+/** Mount on the dependent feature with its actual required roles, memoized by the host. */
+export function RequiredRoleSetup({
+  roles,
+  refreshKey = '',
+}: {
+  readonly roles: readonly RequiredSetupRole[];
+  readonly refreshKey?: string;
+}): ReactElement | null {
+  const { t } = useTranslation();
+  const api = useApiClient();
+  const client = useMemo(() => new UsersClient(api), [api]);
+  const location = useLocation();
+  const enabled = roles.length > 0;
+  const read = useCan(
+    { resource: { type: 'user', id: '*' }, action: 'read' },
+    { enabled },
+  );
+  const assign = useCan(
+    { resource: { type: 'user', id: '*' }, action: 'assign-role' },
+    { enabled },
+  );
+  const source = `${location.pathname}${location.search}${location.hash}`;
+  const checks = useMemo(
+    () => [
+      ...new Map(
+        roles.map((role) => [
+          requiredRoleSetupId(role),
+          {
+            id: requiredRoleSetupId(role),
+            title: role.title,
+            description: role.description,
+            action: assign.can ? (
+              <Button
+                variant='outline'
+                size='sm'
+                aria-label={t('settings.setup.manageMembersFor', {
+                  role: role.title,
+                })}
+                render={<Link to={requiredRoleSetupLink(role, source)} />}
+              >
+                {t('settings.setup.manageMembers')}
+              </Button>
+            ) : undefined,
+          },
+        ]),
+      ).values(),
+    ],
+    [roles, assign.can, source, t],
+  );
+  const inspect = useCallback(
+    () => inspectRequiredRoles(client, roles),
+    [client, roles],
+  );
+  const state = useSetupReadiness(checks, inspect, {
+    enabled: read.can,
+    refreshKey: `${location.key}:${refreshKey}`,
+  });
+  if (!read.can) return null;
+  return (
+    <SetupReadiness
+      state={state}
+      labels={{
+        title: t('settings.setup.title'),
+        checking: t('settings.setup.checking'),
+        checkAgain: t('settings.setup.checkAgain'),
+        ready: t('settings.setup.ready'),
+        missing: t('settings.setup.missing'),
+        unknown: {
+          unavailable: t('settings.setup.unavailable'),
+          signIn: t('settings.setup.signIn'),
+          forbidden: t('settings.setup.forbidden'),
+          invalid: t('settings.setup.invalid'),
+        },
+      }}
+    />
+  );
+}

package/client/components/role-list.tsx

@@ -1,7 +1,12 @@
 import { useMemo, type ReactElement } from 'react';
 import type { ColumnDef } from '@tanstack/react-table';
-import { Link, type To } from 'react-router';
-import { DataTable, DataTableColumnHeader } from '#components/data-table';
+import type { To } from 'react-router';
+import { RecordLink } from '#components/record-link';
+import {
+  DataTable,
+  DataTableColumnHeader,
+  type DataTableProps,
+} from '#components/data-table';
 import { Badge } from '#components/ui/badge';
 
 export interface RoleListRole {
@@ -21,6 +26,14 @@ export interface RoleListProps {
     readonly custom: string;
   };
   readonly ariaLabel?: string;
+  readonly tableState?: Pick<
+    DataTableProps<RoleListRole>,
+    | 'paginationState'
+    | 'onPaginationChange'
+    | 'sortingState'
+    | 'onSortingChange'
+    | 'pageSizeOptions'
+  >;
 }
 
 /** Standard role table; the host owns authorization, loading and filtering. */
@@ -28,6 +41,7 @@ export function RoleList({
   roles,
   labels,
   ariaLabel,
+  tableState,
 }: RoleListProps): ReactElement {
   const columns = useMemo<ColumnDef<RoleListRole>[]>(
     () => [
@@ -37,13 +51,13 @@ export function RoleList({
           <DataTableColumnHeader column={column} title={labels.name} />
         ),
         cell: ({ row }) => (
-          <Link
+          <RecordLink
             to={row.original.to}
-            className='inline-block max-w-72 truncate align-middle font-medium text-foreground'
+            className='inline-block max-w-72 truncate align-middle'
             title={row.original.title}
           >
             {row.original.title}
-          </Link>
+          </RecordLink>
         ),
       },
       {
@@ -62,6 +76,7 @@ export function RoleList({
       },
       {
         accessorKey: 'protected',
+        enableSorting: false,
         header: labels.type,
         cell: ({ row }) => (
           <Badge variant='secondary'>
@@ -75,6 +90,7 @@ export function RoleList({
   return (
     <div role='region' aria-label={ariaLabel}>
       <DataTable
+        {...tableState}
         columns={columns}
         data={roles}
         getRowId={(role) => role.key}

package/client/components/setup-readiness-state.ts

@@ -0,0 +1,135 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+
+export type SetupUnknownReason =
+  'unavailable' | 'signIn' | 'forbidden' | 'invalid';
+export interface SetupInspection {
+  readonly status: 'ready' | 'missing' | 'unknown';
+  readonly reason?: SetupUnknownReason;
+  readonly canConfigure?: boolean;
+}
+export interface SetupCheck {
+  readonly id: string;
+  readonly title: ReactNode;
+  readonly description: ReactNode;
+  readonly action?: ReactNode;
+}
+export type SetupInspections = Readonly<Record<string, SetupInspection>>;
+export interface SetupReadinessState {
+  readonly active: boolean;
+  readonly items: readonly (SetupCheck & SetupInspection)[];
+  readonly loading: boolean;
+  readonly refresh: () => void;
+}
+
+/** Keep transport errors out of UI copy and never call a failed read missing. */
+export function setupInspectionFailure(error: unknown): SetupInspection {
+  const status =
+    typeof error === 'object' && error !== null && 'status' in error
+      ? Number(error.status)
+      : undefined;
+  return {
+    status: 'unknown',
+    reason:
+      status === 401
+        ? 'signIn'
+        : status === 403
+          ? 'forbidden'
+          : status === 400 || status === 404
+            ? 'invalid'
+            : 'unavailable',
+  };
+}
+
+/** Memoize checks and inspect. The owning feature supplies a real authorized read. */
+export function useSetupReadiness(
+  checks: readonly SetupCheck[],
+  inspect: () => Promise<SetupInspections>,
+  {
+    enabled = true,
+    refreshKey = '',
+  }: { enabled?: boolean; refreshKey?: string } = {},
+): SetupReadinessState {
+  const [revision, setRevision] = useState(0);
+  const active = enabled && checks.length > 0;
+  const request = useMemo(
+    () => ({ checks, inspect, refreshKey, revision, active }),
+    [checks, inspect, refreshKey, revision, active],
+  );
+  const [snapshot, setSnapshot] = useState<{
+    request: typeof request;
+    values: SetupInspections;
+  }>();
+  const busyRef = useRef(false);
+  const refresh = useCallback(() => setRevision((value) => value + 1), []);
+  useEffect(() => {
+    const { active, checks, inspect } = request;
+    if (!active) return;
+    let current = true;
+    busyRef.current = true;
+    const finish = (values: SetupInspections) => {
+      if (!current) return;
+      busyRef.current = false;
+      setSnapshot({ request, values });
+    };
+    void Promise.resolve()
+      .then(() => (current ? inspect() : {}))
+      .then(finish, (error: unknown) =>
+        finish(
+          Object.fromEntries(
+            checks.map(({ id }) => [id, setupInspectionFailure(error)]),
+          ),
+        ),
+      );
+    return () => {
+      current = false;
+      busyRef.current = false;
+    };
+  }, [request]);
+  useEffect(() => {
+    if (!active) return;
+    const onFocus = () => {
+      if (!busyRef.current) refresh();
+    };
+    window.addEventListener('focus', onFocus);
+    return () => window.removeEventListener('focus', onFocus);
+  }, [active, refresh]);
+  const loading = active && snapshot?.request !== request;
+  return {
+    active,
+    items:
+      !active || loading
+        ? []
+        : checks.map((check) => {
+            const values = snapshot?.values;
+            const value =
+              values && Object.hasOwn(values, check.id)
+                ? values[check.id]
+                : undefined;
+            if (
+              !value ||
+              !['ready', 'missing', 'unknown'].includes(value.status)
+            )
+              return {
+                ...check,
+                status: 'unknown' as const,
+                reason: 'invalid' as const,
+              };
+            const reason =
+              value.reason &&
+              ['unavailable', 'signIn', 'forbidden', 'invalid'].includes(
+                value.reason,
+              )
+                ? value.reason
+                : 'invalid';
+            return {
+              ...check,
+              status: value.status,
+              reason,
+              canConfigure: value.canConfigure !== false,
+            };
+          }),
+    loading,
+    refresh,
+  };
+}

package/client/components/setup-readiness.tsx

@@ -0,0 +1,91 @@
+import { useId, useState, type ReactElement } from 'react';
+import { Button } from '#components/ui/button';
+import type {
+  SetupReadinessState,
+  SetupUnknownReason,
+} from './setup-readiness-state.js';
+
+export interface SetupReadinessLabels {
+  readonly title: string;
+  readonly checking: string;
+  readonly checkAgain: string;
+  readonly ready: string;
+  readonly missing: string;
+  readonly unknown: Readonly<Record<SetupUnknownReason, string>>;
+}
+
+/** A feature mounts this only for its actual prerequisites, never every plugin. */
+export function SetupReadiness({
+  state,
+  labels,
+}: {
+  readonly state: SetupReadinessState;
+  readonly labels: SetupReadinessLabels;
+}): ReactElement | null {
+  const id = useId();
+  const [keepConfirmation, setKeepConfirmation] = useState(false);
+  const pending = state.items.filter(({ status }) => status !== 'ready');
+  if (!state.active) return null;
+  if (!state.loading && pending.length === 0 && !keepConfirmation) return null;
+  const canRefresh =
+    state.loading ||
+    state.items.some(
+      ({ status, reason }) => status !== 'unknown' || reason === 'unavailable',
+    );
+  return (
+    <section
+      aria-labelledby={id}
+      aria-busy={state.loading}
+      className='flex flex-col gap-4 rounded-lg border bg-card p-4 text-card-foreground'
+    >
+      <div className='flex flex-wrap items-center justify-between gap-2'>
+        <h2 id={id} className='text-base font-medium'>
+          {labels.title}
+        </h2>
+        {(canRefresh || keepConfirmation) && (
+          <Button
+            type='button'
+            variant='outline'
+            size='sm'
+            disabled={state.loading || !canRefresh}
+            onClick={() => {
+              setKeepConfirmation(true);
+              state.refresh();
+            }}
+          >
+            {labels.checkAgain}
+          </Button>
+        )}
+      </div>
+      <p role='status' className='text-sm text-muted-foreground'>
+        {state.loading
+          ? labels.checking
+          : pending.length
+            ? labels.missing
+            : labels.ready}
+      </p>
+      {!state.loading && pending.length > 0 && (
+        <ul className='divide-y'>
+          {pending.map((item) => (
+            <li
+              key={item.id}
+              className='flex flex-wrap items-center justify-between gap-3 py-2 first:pt-0 last:pb-0'
+            >
+              <div className='min-w-0 flex-1 basis-48 break-words'>
+                <p className='text-sm font-medium'>{item.title}</p>
+                <p className='text-sm text-muted-foreground'>
+                  {item.status === 'missing'
+                    ? item.description
+                    : labels.unknown[item.reason ?? 'invalid']}
+                </p>
+              </div>
+              {item.status === 'missing' &&
+                item.canConfigure !== false &&
+                item.action}
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}