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

package/client/components/flow-layout.ts

@@ -18,6 +18,10 @@ export interface FlowDiagramNode {
   readonly visited?: boolean;
   readonly highlighted?: boolean;
   readonly className?: string;
+  /** the caller's rendered content draws the whole node, without the default box or state tint. */
+  readonly bare?: boolean;
+  readonly minimapShape?: 'pill' | 'card';
+  readonly minimapColor?: string;
 }
 
 export interface FlowDiagramEdge {
@@ -32,6 +36,10 @@ export interface FlowDiagramEdge {
   readonly visited?: boolean;
   readonly highlighted?: boolean;
   readonly dashed?: boolean;
+  /** a secondary route drawn thin and light, so the main path reads first. */
+  readonly faint?: boolean;
+  /** hover and accessible text for an edge that shows no label on the canvas. */
+  readonly title?: string;
 }
 
 export type FlowDiagramDirection = 'RIGHT' | 'DOWN';
@@ -57,6 +65,28 @@ export interface FlowDiagramLayout {
   })[];
 }
 
+/** Wrap condition labels without splitting words. */
+export function flowLabelLines(text: string): string[] {
+  const lines: string[] = [];
+  let line = '',
+    width = 0;
+  for (const token of text.match(/[a-zA-Z0-9_]+|[^a-zA-Z0-9_]/g) ?? []) {
+    const tokenWidth = [...token].reduce(
+      (n, char) => n + (char.charCodeAt(0) > 255 ? 14 : 7),
+      0,
+    );
+    if (line && width + tokenWidth > 252) {
+      lines.push(line.trim());
+      line = '';
+      width = 0;
+    }
+    line += token;
+    width += tokenWidth;
+  }
+  if (line.trim()) lines.push(line.trim());
+  return lines;
+}
+
 type ElkConstructor = new (args?: ELKConstructorArguments) => ELK;
 let elkPromise: Promise<ELK> | undefined;
 
@@ -73,6 +103,7 @@ function getElk(): Promise<ELK> {
 export async function layoutFlowDiagram(
   graph: FlowDiagramGraph,
   direction: FlowDiagramDirection = 'RIGHT',
+  compact = false,
 ): Promise<FlowDiagramLayout> {
   const ids = new Set<string>();
   for (const node of graph.nodes) {
@@ -104,16 +135,16 @@ export async function layoutFlowDiagram(
       'elk.algorithm': 'layered',
       'elk.direction': direction,
       'elk.edgeRouting': 'ORTHOGONAL',
-      'elk.spacing.nodeNode': '40',
-      'elk.layered.spacing.nodeNodeBetweenLayers': '72',
+      'elk.spacing.nodeNode': compact ? '20' : '40',
+      'elk.layered.spacing.nodeNodeBetweenLayers': compact ? '28' : '72',
       'elk.layered.nodePlacement.strategy': 'NETWORK_SIMPLEX',
       // Declared state order keeps retry edges from moving later states before the start.
       'elk.layered.cycleBreaking.strategy': 'MODEL_ORDER',
       'elk.layered.crossingMinimization.strategy': 'LAYER_SWEEP',
       'elk.layered.thoroughness': '32',
-      'elk.spacing.edgeEdge': '20',
-      'elk.layered.spacing.edgeEdgeBetweenLayers': '20',
-      'elk.layered.spacing.edgeNodeBetweenLayers': '24',
+      'elk.spacing.edgeEdge': compact ? '8' : '20',
+      'elk.layered.spacing.edgeEdgeBetweenLayers': compact ? '8' : '20',
+      'elk.layered.spacing.edgeNodeBetweenLayers': compact ? '8' : '24',
     },
     children: graph.nodes.map((node) => {
       const id = nodeIds.get(node.id)!;
@@ -166,13 +197,13 @@ export async function layoutFlowDiagram(
                 'elk.edgeLabels.inline': 'true',
               },
               width: Math.min(
-                320,
+                268,
                 [...edge.label].reduce(
                   (total, char) => total + (char.charCodeAt(0) > 255 ? 14 : 7),
                   16,
                 ),
               ),
-              height: 24,
+              height: flowLabelLines(edge.label).length * 18 + 8,
             },
           ]
         : [],
@@ -248,3 +279,82 @@ export async function layoutFlowDiagram(
     }),
   };
 }
+
+type PlacedFlowNode = FlowDiagramLayout['nodes'][number];
+
+/** a transient route for an edge left out of the layout. It runs in a lane
+ * outside every node it passes, so revealing it never moves the laid-out graph.
+ * Deeper lanes keep nested routes from crossing one another; a self-transition loops
+ * beside its own node. The label sits outside the lane instead of over the nodes. */
+export function revealRoute(
+  nodes: readonly PlacedFlowNode[],
+  source: PlacedFlowNode,
+  target: PlacedFlowNode,
+  direction: FlowDiagramDirection,
+  lane = 0,
+): {
+  points: FlowDiagramPoint[];
+  labelPosition: FlowDiagramPoint;
+  labelAnchor: 'end' | 'middle';
+} {
+  // Measure along the flow (main) and across it; the lane runs before the nodes on the cross axis.
+  const down = direction === 'DOWN';
+  const main = (node: PlacedFlowNode) => (down ? node.y : node.x);
+  const cross = (node: PlacedFlowNode) => (down ? node.x : node.y);
+  const size = (node: PlacedFlowNode) => (down ? node.height : node.width);
+  const point = (along: number, across: number): FlowDiagramPoint =>
+    down ? { x: across, y: along } : { x: along, y: across };
+  const loop = source === target;
+  const start = Math.min(main(source), main(target));
+  const end = Math.max(
+    main(source) + size(source),
+    main(target) + size(target),
+  );
+  const lanePosition =
+    Math.min(
+      ...(loop
+        ? [cross(source)]
+        : nodes
+            .filter(
+              (node) => main(node) < end && main(node) + size(node) > start,
+            )
+            .map(cross)),
+    ) -
+    16 -
+    lane * 10;
+  const from = main(source) + size(source) * (loop ? 0.3 : 0.5);
+  const to = main(target) + size(target) * (loop ? 0.7 : 0.5);
+  return {
+    points: [
+      point(from, cross(source)),
+      point(from, lanePosition),
+      point(to, lanePosition),
+      point(to, cross(target)),
+    ],
+    // DOWN lanes run left of the nodes, so labels end at the lane; RIGHT lanes run above them.
+    labelPosition: point((from + to) / 2, lanePosition - (down ? 6 : 14)),
+    labelAnchor: down ? 'end' : 'middle',
+  };
+}
+
+/** Keep return and self-transitions out of the process layout. Declaration order
+ * describes forward progress; even adjacent returns can become long routes in ELK. */
+export function partitionFlowDiagramReturns(graph: FlowDiagramGraph): {
+  edges: FlowDiagramEdge[];
+  extraEdges: FlowDiagramEdge[];
+} {
+  const order = new Map(graph.nodes.map((node, index) => [node.id, index]));
+  const edges: FlowDiagramEdge[] = [],
+    extraEdges: FlowDiagramEdge[] = [];
+  for (const edge of graph.edges) {
+    const source = order.get(edge.source),
+      target = order.get(edge.target);
+    const returnRoute =
+      !edge.decorative &&
+      source !== undefined &&
+      target !== undefined &&
+      source >= target;
+    (returnRoute ? extraEdges : edges).push(edge);
+  }
+  return { edges, extraEdges };
+}

package/client/components/lifecycle-diagram.tsx

@@ -15,8 +15,18 @@ import {
   PopoverTrigger,
 } from '#components/ui/popover';
 import type { LifecycleDescription } from '@nocobase/lifecycle';
-import { FlowDiagram, type FlowDiagramProps } from '#components/flow-diagram';
-import type { FlowDiagramNode } from '#components/flow-layout';
+import {
+  FlowDiagram,
+  FlowDiagramStep,
+  FlowDiagramTransitionNotes,
+  type FlowDiagramProps,
+  type FlowDiagramStepKind,
+} from '#components/flow-diagram';
+import {
+  partitionFlowDiagramReturns,
+  type FlowDiagramEdge,
+  type FlowDiagramNode,
+} from '#components/flow-layout';
 
 import {
   lifecycleDiagramGraph,
@@ -41,6 +51,13 @@ export interface LifecycleDiagramProps
       | 'onEdgeClick'
     > {
   readonly description: LifecycleDescription;
+  /** Opt into compact boundary pills and work cards; the classic presentation remains the default. */
+  readonly presentation?: 'classic' | 'process';
+  /** Business semantics belong to the caller; unknown intermediate states default to work. */
+  readonly stateKind?: (
+    state: LifecycleDescription['stateInfo'][number],
+  ) => FlowDiagramStepKind;
+
   /** Opens the application-owned, authorized parameter editor for declared bindings. */
   readonly configuration?: LifecycleDiagramConfiguration;
   readonly stateActions?: (
@@ -61,6 +78,9 @@ export interface LifecycleDiagramProps
 /** Definitions are source-owned; clicking opens consumer-owned details, never fires a transition. */
 export function LifecycleDiagram({
   description,
+  presentation = 'classic',
+  stateKind,
+  nodeDescription,
   currentState,
   endLabel,
   history,
@@ -126,51 +146,169 @@ export function LifecycleDiagram({
         })),
       }
     : sourceGraph;
+  const process = presentation === 'process';
+  const routes = process
+    ? partitionFlowDiagramReturns(graph)
+    : { edges: graph.edges, extraEdges: [] };
+  const notesForNode = (id: string) => {
+    const nodeOf = (nodeId: string) =>
+      graph.nodes.find((node) => node.id === nodeId);
+    const labelOf = (nodeId: string) => nodeOf(nodeId)?.label ?? nodeId;
+    // A transition with several sources or targets becomes one edge per pair;
+    // list it once per direction with every state at the other end.
+    const groups = new Map<
+      string,
+      { edge: FlowDiagramEdge; direction: 'out' | 'in'; peers: string[] }
+    >();
+    for (const edge of routes.extraEdges) {
+      const direction =
+        edge.source === id ? 'out' : edge.target === id ? 'in' : undefined;
+      if (!direction) continue;
+      const [name] = JSON.parse(edge.id) as string[];
+      const key = JSON.stringify([name, direction]);
+      const group = groups.get(key) ?? { edge, direction, peers: [] };
+      groups.set(key, group);
+      const peer = direction === 'out' ? edge.target : edge.source;
+      if (!group.peers.includes(peer)) group.peers.push(peer);
+    }
+    return [...groups.values()].map(({ edge, direction, peers }) => {
+      const self = labelOf(id);
+      const names = peers.map(labelOf);
+      return {
+        id: `${direction}:${edge.id}`,
+        label: edge.label,
+        direction,
+        peers: names,
+        detail:
+          direction === 'out'
+            ? `${self} · ${edge.label ?? ''} → ${names.join(', ')}`
+            : `${names.join(', ')} · ${edge.label ?? ''} → ${self}`,
+        kind: kindForNode(nodeOf(peers[0])!),
+      };
+    });
+  };
+  const kindForNode = (node: FlowDiagramNode): FlowDiagramStepKind => {
+    const state = description.stateInfo.find((state) => state.name === node.id);
+    return (
+      (state && stateKind?.(state)) ??
+      (node.kind === 'initial'
+        ? 'start'
+        : node.kind === 'final'
+          ? 'success'
+          : 'work')
+    );
+  };
+  const nodeActions = (node: FlowDiagramNode): ReactNode => {
+    const state = description.stateInfo.find((state) => state.name === node.id);
+    if (!state) return undefined;
+    const actions = stateActions?.(state);
+    const selections =
+      configuration &&
+      lifecycleNodeConfigurationSelections(
+        description,
+        state.name,
+        configuration.canConfigure,
+      );
+    if (!selections?.length || !configuration) return actions;
+    return (
+      <div className='nodrag nopan flex items-center gap-1'>
+        {actions}
+        <NodeConfigurationActions
+          configuration={configuration}
+          selections={selections}
+          state={{ kind: 'state', name: state.name }}
+          title={(target) => {
+            if (target.kind === 'state')
+              return stateLabel?.(state) ?? state.title;
+            const transition = description.transitions.find(
+              (item) => item.name === target.name,
+            )!;
+            return transitionLabel?.(transition) ?? transition.title;
+          }}
+        />
+      </div>
+    );
+  };
+  // A transition declared from several states draws one edge per source, which
+  // would repeat its label beside the target. Label only the edge from the
+  // nearest source; the others keep the action as hover text.
+  const order = new Map(graph.nodes.map((node, index) => [node.id, index]));
+  const labelledEdges = new Map<string, FlowDiagramEdge>();
+  for (const edge of routes.edges) {
+    if (edge.decorative) continue;
+    const [name] = JSON.parse(edge.id) as string[];
+    const key = JSON.stringify([name, edge.target]);
+    const current = labelledEdges.get(key);
+    if (!current || order.get(edge.source)! > order.get(current.source)!)
+      labelledEdges.set(key, edge);
+  }
+  const processEdges = routes.edges.map((edge) =>
+    edge.decorative || [...labelledEdges.values()].includes(edge)
+      ? { ...edge, title: edge.label }
+      : { ...edge, title: edge.label, label: undefined, configurable: false },
+  );
+  const displayGraph = process
+    ? {
+        ...graph,
+        nodes: graph.nodes.map((node) => {
+          if (node.decorative) return node;
+          const kind = kindForNode(node);
+          const card = kind === 'work' || kind === 'approval';
+          return {
+            ...node,
+            bare: true,
+            width: card ? 240 : 176,
+            height: card ? 80 : nodeDescription?.(node) ? 64 : 44,
+            minimapShape: card ? ('card' as const) : ('pill' as const),
+          };
+        }),
+        edges: processEdges,
+      }
+    : graph;
   return (
     <FlowDiagram
       direction='DOWN'
-      initialMinZoom={0.7}
+      initialMinZoom={process ? 0.1 : 0.7}
+      compact={process}
+      controls={process}
+      nodeDescription={nodeDescription}
       autoHeight
       {...props}
-      {...graph}
-      nodeActions={(node) => {
+      {...displayGraph}
+      revealEdges={process ? undefined : props.revealEdges}
+      auxiliaryEdges={process ? routes.extraEdges : props.auxiliaryEdges}
+      nodeActions={nodeActions}
+      renderNode={(node, { active, linked }) => {
         const state = description.stateInfo.find(
           (state) => state.name === node.id,
         );
-        if (!state) return undefined;
-        const actions = stateActions?.(state);
-        const selections =
-          configuration &&
-          lifecycleNodeConfigurationSelections(
-            description,
-            state.name,
-            configuration.canConfigure,
-          );
-        if (!selections?.length || !configuration) return actions;
+        const label =
+          state && renderState ? renderState(state, node) : node.label;
+        if (!process || node.decorative) return label;
         return (
-          <div className='nodrag nopan flex items-center gap-1'>
-            {actions}
-            <NodeConfigurationActions
-              configuration={configuration}
-              selections={selections}
-              state={{ kind: 'state', name: state.name }}
-              title={(target) => {
-                if (target.kind === 'state')
-                  return stateLabel?.(state) ?? state.title;
-                const transition = description.transitions.find(
-                  (item) => item.name === target.name,
-                )!;
-                return transitionLabel?.(transition) ?? transition.title;
-              }}
-            />
-          </div>
-        );
-      }}
-      renderNode={(node) => {
-        const state = description.stateInfo.find(
-          (state) => state.name === node.id,
+          <FlowDiagramStep
+            kind={kindForNode(node)}
+            label={label}
+            description={nodeDescription?.(node)}
+            actions={nodeActions(node)}
+            linked={linked}
+            progress={
+              node.highlighted
+                ? 'current'
+                : node.visited
+                  ? 'visited'
+                  : history !== undefined ||
+                      currentState !== undefined ||
+                      visitedStates !== undefined
+                    ? 'unreached'
+                    : 'plan'
+            }
+          >
+            {active && (
+              <FlowDiagramTransitionNotes notes={notesForNode(node.id)} />
+            )}
+          </FlowDiagramStep>
         );
-        return state && renderState ? renderState(state, node) : node.label;
       }}
       onNodeClick={(node) => {
         const state = description.stateInfo.find(

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,5 +1,12 @@
-import type { ReactElement } from 'react';
-import { Link, type To } from 'react-router';
+import { useMemo, type ReactElement } from 'react';
+import type { ColumnDef } from '@tanstack/react-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 {
@@ -12,50 +19,83 @@ export interface RoleListRole {
 export interface RoleListProps {
   readonly roles: readonly RoleListRole[];
   readonly labels: {
+    readonly name: string;
+    readonly key: string;
+    readonly type: string;
     readonly protected: string;
     readonly custom: string;
   };
   readonly ariaLabel?: string;
+  readonly tableState?: Pick<
+    DataTableProps<RoleListRole>,
+    | 'paginationState'
+    | 'onPaginationChange'
+    | 'sortingState'
+    | 'onSortingChange'
+    | 'pageSizeOptions'
+  >;
 }
 
-/** A compact content list; the host owns authorization, loading and filtering. */
+/** Standard role table; the host owns authorization, loading and filtering. */
 export function RoleList({
   roles,
   labels,
   ariaLabel,
+  tableState,
 }: RoleListProps): ReactElement {
-  return (
-    <ul
-      aria-label={ariaLabel}
-      className='@container divide-y rounded-lg border bg-card [&>li:first-child]:rounded-t-lg [&>li:last-child]:rounded-b-lg'
-    >
-      {roles.map((role) => (
-        <li
-          key={role.key}
-          className='group/role grid min-h-10 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-0.5 px-3 py-2 transition-colors hover:bg-muted/50 @xl:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)_6rem]'
-        >
-          <Link
-            to={role.to}
-            className='-my-1 w-fit max-w-full min-w-0 truncate py-1 text-sm leading-5 font-medium text-foreground underline-offset-4 group-hover/role:underline'
-            title={role.title}
+  const columns = useMemo<ColumnDef<RoleListRole>[]>(
+    () => [
+      {
+        accessorKey: 'title',
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title={labels.name} />
+        ),
+        cell: ({ row }) => (
+          <RecordLink
+            to={row.original.to}
+            className='inline-block max-w-72 truncate align-middle'
+            title={row.original.title}
           >
-            {role.title}
-          </Link>
+            {row.original.title}
+          </RecordLink>
+        ),
+      },
+      {
+        accessorKey: 'key',
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title={labels.key} />
+        ),
+        cell: ({ row }) => (
           <span
-            className='col-start-1 row-start-2 min-w-0 truncate text-xs leading-4 text-muted-foreground @xl:col-start-2 @xl:row-start-1'
-            title={role.key}
+            className='inline-block max-w-64 truncate align-middle text-muted-foreground'
+            title={row.original.key}
           >
-            {role.key}
+            {row.original.key}
           </span>
-          <Badge
-            variant='secondary'
-            data-size='sm'
-            className='col-start-2 row-span-2 row-start-1 shrink-0 justify-self-end @xl:col-start-3 @xl:row-span-1'
-          >
-            {role.protected ? labels.protected : labels.custom}
+        ),
+      },
+      {
+        accessorKey: 'protected',
+        enableSorting: false,
+        header: labels.type,
+        cell: ({ row }) => (
+          <Badge variant='secondary'>
+            {row.original.protected ? labels.protected : labels.custom}
           </Badge>
-        </li>
-      ))}
-    </ul>
+        ),
+      },
+    ],
+    [labels],
+  );
+  return (
+    <div role='region' aria-label={ariaLabel}>
+      <DataTable
+        {...tableState}
+        columns={columns}
+        data={roles}
+        getRowId={(role) => role.key}
+        showSelectedCount={false}
+      />
+    </div>
   );
 }