@nocobase/app-template-default 1.0.0-beta.69 → 1.0.0-beta.71

package/client/components/lifecycle-diagram.tsx

@@ -0,0 +1,310 @@
+import {
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import { ChevronDownIcon, Settings2Icon } from 'lucide-react';
+import { useTranslation } from '@nocobase/i18n/client';
+import { Button } from '#components/ui/button';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTitle,
+  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 {
+  lifecycleDiagramGraph,
+  lifecycleConfigurationSelection,
+  lifecycleNodeConfigurationSelections,
+  type LifecycleConfigurationSelection,
+  type LifecycleConfigurationTarget,
+  type LifecycleDiagramConfiguration,
+  type LifecycleDiagramOptions,
+} from './lifecycle-diagram-model.js';
+
+export interface LifecycleDiagramProps
+  extends
+    LifecycleDiagramOptions,
+    Omit<
+      FlowDiagramProps,
+      | 'nodes'
+      | 'edges'
+      | 'renderNode'
+      | 'nodeActions'
+      | 'onNodeClick'
+      | 'onEdgeClick'
+    > {
+  readonly description: LifecycleDescription;
+  /** Opens the application-owned, authorized parameter editor for declared bindings. */
+  readonly configuration?: LifecycleDiagramConfiguration;
+  readonly stateActions?: (
+    state: LifecycleDescription['stateInfo'][number],
+  ) => ReactNode;
+  readonly renderState?: (
+    state: LifecycleDescription['stateInfo'][number],
+    node: FlowDiagramNode,
+  ) => ReactNode;
+  readonly onStateClick?: (
+    state: LifecycleDescription['stateInfo'][number],
+  ) => void;
+  readonly onTransitionClick?: (
+    transition: LifecycleDescription['transitions'][number],
+  ) => void;
+}
+
+/** Definitions are source-owned; clicking opens consumer-owned details, never fires a transition. */
+export function LifecycleDiagram({
+  description,
+  currentState,
+  endLabel,
+  history,
+  visitedStates,
+  availableTransitions,
+  stateLabel,
+  transitionLabel,
+  renderState,
+  stateActions,
+  configuration,
+  onStateClick,
+  onTransitionClick,
+  ...props
+}: LifecycleDiagramProps): ReactElement {
+  const sourceGraph = useMemo(
+    () =>
+      lifecycleDiagramGraph(description, {
+        currentState,
+        endLabel,
+        history,
+        visitedStates,
+        availableTransitions,
+        stateLabel,
+        transitionLabel,
+      }),
+    [
+      description,
+      currentState,
+      endLabel,
+      history,
+      visitedStates,
+      availableTransitions,
+      stateLabel,
+      transitionLabel,
+    ],
+  );
+  const graph = configuration
+    ? {
+        nodes: sourceGraph.nodes.map((node) => ({
+          ...node,
+          configurable: Boolean(
+            lifecycleNodeConfigurationSelections(
+              description,
+              node.id,
+              configuration.canConfigure,
+            ).length,
+          ),
+        })),
+        edges: sourceGraph.edges.map((edge) => ({
+          ...edge,
+          configurable:
+            !edge.decorative &&
+            Boolean(
+              lifecycleConfigurationSelection(
+                description,
+                {
+                  kind: 'transition',
+                  name: (JSON.parse(edge.id) as string[])[0],
+                },
+                configuration.canConfigure,
+              ),
+            ),
+        })),
+      }
+    : sourceGraph;
+  return (
+    <FlowDiagram
+      direction='DOWN'
+      initialMinZoom={0.7}
+      autoHeight
+      {...props}
+      {...graph}
+      nodeActions={(node) => {
+        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>
+        );
+      }}
+      renderNode={(node) => {
+        const state = description.stateInfo.find(
+          (state) => state.name === node.id,
+        );
+        return state && renderState ? renderState(state, node) : node.label;
+      }}
+      onNodeClick={(node) => {
+        const state = description.stateInfo.find(
+          (state) => state.name === node.id,
+        );
+        if (state) onStateClick?.(state);
+      }}
+      onEdgeClick={(edge) => {
+        if (edge.decorative) return;
+        const [name] = JSON.parse(edge.id) as string[];
+        const transition = description.transitions.find(
+          (item) => item.name === name,
+        );
+        if (!transition) return;
+        const selection =
+          configuration &&
+          lifecycleConfigurationSelection(
+            description,
+            { kind: 'transition', name: transition.name },
+            configuration.canConfigure,
+          );
+        if (selection && configuration) configuration.onConfigure(selection);
+        else onTransitionClick?.(transition);
+      }}
+    />
+  );
+}
+
+/** Reuse the authoritative editor; this chooser never invents or saves values. */
+function NodeConfigurationActions({
+  configuration,
+  selections,
+  state,
+  title,
+}: {
+  readonly configuration: LifecycleDiagramConfiguration;
+  readonly selections: readonly LifecycleConfigurationSelection[];
+  readonly state: LifecycleConfigurationTarget;
+  readonly title: (target: LifecycleConfigurationTarget) => string;
+}): ReactElement {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const pendingRef = useRef<LifecycleConfigurationSelection | undefined>(
+    undefined,
+  );
+  const first = selections[0];
+  const direct =
+    first.target.kind === 'state' || selections.length === 1
+      ? first
+      : undefined;
+  const choices = direct ? selections.slice(1) : selections;
+  const label = t('flowDiagram.configure', { defaultValue: 'Configure' });
+  const className =
+    'h-6 border border-primary/15 bg-primary/5 px-1.5 text-xs text-primary hover:bg-primary/10';
+  return (
+    <>
+      {direct && (
+        <Button
+          type='button'
+          variant='ghost'
+          size='sm'
+          className={className}
+          onClick={(event) => {
+            event.stopPropagation();
+            configuration.onConfigure(direct);
+          }}
+        >
+          <Settings2Icon aria-hidden />
+          {configuration.label(direct.target)}
+        </Button>
+      )}
+      {choices.length > 0 && (
+        <Popover
+          open={open}
+          onOpenChange={(nextOpen) => {
+            if (nextOpen) pendingRef.current = undefined;
+            setOpen(nextOpen);
+          }}
+          onOpenChangeComplete={(nextOpen) => {
+            // Open the editor only after the chooser has closed and restored focus.
+            // Otherwise its focus restoration can steal focus from the editor.
+            if (!nextOpen && pendingRef.current) {
+              const selection = pendingRef.current;
+              pendingRef.current = undefined;
+              configuration.onConfigure(selection);
+            }
+          }}
+        >
+          <PopoverTrigger
+            render={
+              <Button
+                type='button'
+                variant='ghost'
+                size='sm'
+                className={className}
+                aria-label={`${label}: ${title(state)}`}
+                onClick={(event) => event.stopPropagation()}
+              />
+            }
+          >
+            {!direct && (
+              <>
+                <Settings2Icon aria-hidden />
+                {label}
+              </>
+            )}
+            <ChevronDownIcon aria-hidden />
+          </PopoverTrigger>
+          <PopoverContent
+            align='end'
+            className='w-auto max-w-[min(var(--container-sm),var(--available-width))]'
+            onClick={(event) => event.stopPropagation()}
+          >
+            <PopoverTitle className='sr-only'>
+              {label}: {title(state)}
+            </PopoverTitle>
+            {choices.map((selection) => (
+              <Button
+                key={`${selection.target.kind}:${selection.target.name}`}
+                type='button'
+                variant='ghost'
+                className='h-auto justify-start whitespace-normal text-left'
+                onClick={() => {
+                  pendingRef.current = selection;
+                  setOpen(false);
+                }}
+              >
+                {configuration.label(selection.target)} ·{' '}
+                {title(selection.target)}
+              </Button>
+            ))}
+          </PopoverContent>
+        </Popover>
+      )}
+    </>
+  );
+}

package/client/components/permission-editor.tsx

@@ -126,7 +126,7 @@ function LevelControl({
   if (levels.length === 0) return null;
   if (levels.length === 1)
     return (
-      <span className='block truncate px-2.5 text-sm text-muted-foreground'>
+      <span className='flex min-h-7 min-w-0 items-center px-2 text-xs text-muted-foreground'>
         {levels[0]?.label}
       </span>
     );
@@ -141,7 +141,7 @@ function LevelControl({
     >
       <SelectTrigger
         size='sm'
-        className='h-6 w-auto max-w-48 gap-1 border-0 bg-muted/50 px-2 text-xs shadow-none'
+        className='h-7 w-full min-w-0 max-w-full flex-1 gap-1 border-0 bg-muted/50 px-2 text-xs shadow-none'
         aria-label={label}
       >
         <SelectValue />
@@ -162,6 +162,7 @@ function LevelControl({
 function PermissionRow({
   row,
   controlId,
+  showScopeLabels = false,
   readOnly,
   labels,
   onEnabledChange,
@@ -169,6 +170,7 @@ function PermissionRow({
 }: {
   readonly row: PermissionEditorRow;
   readonly controlId: string;
+  readonly showScopeLabels?: boolean;
   readonly readOnly: boolean;
   readonly labels: PermissionEditorLabels;
   readonly onEnabledChange: (rowId: string, enabled: boolean) => void;
@@ -179,7 +181,7 @@ function PermissionRow({
       data-slot='permission-row'
       className='flex min-w-0 flex-col gap-1 rounded-md px-2 py-1.5'
     >
-      <div className='flex min-h-6 min-w-0 flex-wrap items-center gap-2'>
+      <div className='grid min-h-6 min-w-0 grid-cols-[auto_auto_minmax(0,1fr)] items-center gap-x-2 @2xl:grid-cols-[auto_minmax(0,1fr)] gap-y-1'>
         <Checkbox
           id={controlId}
           checked={row.enabled}
@@ -189,35 +191,45 @@ function PermissionRow({
         />
         <label
           htmlFor={controlId}
-          className='min-w-0 cursor-pointer text-sm leading-5 font-medium break-words'
+          className='min-h-6 min-w-0 max-w-36 cursor-pointer text-sm leading-6 font-medium break-words @2xl:max-w-none'
         >
           {row.label}
         </label>
         {row.enabled && row.levels ? (
-          <LevelControl
-            label={labels.levelFor(row.label)}
-            levels={row.levels}
-            value={row.level ?? ''}
-            disabled={readOnly}
-            onChange={(level) => onLevelChange(row.id, level)}
-          />
+          <div className='col-start-3 min-w-0 @2xl:col-start-2'>
+            <LevelControl
+              label={labels.levelFor(row.label)}
+              levels={row.levels}
+              value={row.level ?? ''}
+              disabled={readOnly}
+              onChange={(level) => onLevelChange(row.id, level)}
+            />
+          </div>
         ) : null}
         {row.enabled &&
           row.scopes?.map((scope) => (
-            <div key={scope.id} className='flex min-w-0 items-center gap-1'>
-              {row.scopes && row.scopes.length > 1 && (
-                <span className='text-xs text-muted-foreground'>
+            <div
+              key={scope.id}
+              className={cn(
+                'col-start-3 grid min-w-0 gap-1 @2xl:col-start-2',
+                showScopeLabels && 'col-span-2 col-start-2 @2xl:col-span-1',
+              )}
+            >
+              {(showScopeLabels || (row.scopes && row.scopes.length > 1)) && (
+                <span className='text-xs leading-5 text-muted-foreground'>
                   {scope.label}
                 </span>
               )}
-              <LevelControl
-                label={labels.levelFor(`${row.label} · ${scope.label}`)}
-                levels={scope.levels}
-                value={scope.level ?? ''}
-                disabled={readOnly}
-                onChange={(level) => onLevelChange(scope.id, level)}
-              />
-              {scope.configuration}
+              <div className='flex min-h-7 min-w-0 items-center gap-1'>
+                <LevelControl
+                  label={labels.levelFor(`${row.label} · ${scope.label}`)}
+                  levels={scope.levels}
+                  value={scope.level ?? ''}
+                  disabled={readOnly}
+                  onChange={(level) => onLevelChange(scope.id, level)}
+                />
+                {scope.configuration}
+              </div>
             </div>
           ))}
       </div>
@@ -280,7 +292,7 @@ export function PermissionEditor({
   return (
     <div className='@container flex min-w-0 flex-col overflow-hidden rounded-xl border bg-card'>
       <div className='flex flex-wrap items-center gap-3 border-b p-3'>
-        <div className='relative min-w-0 flex-1'>
+        <div className='relative min-w-48 flex-1'>
           <SearchIcon
             aria-hidden
             className='pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground'
@@ -296,7 +308,7 @@ export function PermissionEditor({
         </div>
         <label
           htmlFor={`${id}-enabled`}
-          className='flex items-center gap-2 text-sm'
+          className='flex shrink-0 items-center gap-2 text-sm whitespace-nowrap'
         >
           <Switch
             id={`${id}-enabled`}
@@ -322,7 +334,7 @@ export function PermissionEditor({
       <div className='flex max-h-128 min-w-0 flex-col overflow-auto @2xl:flex-row'>
         <nav
           aria-label={words.navigation}
-          className='flex shrink-0 gap-1 overflow-x-auto border-b bg-muted/25 p-2 @2xl:sticky @2xl:top-0 @2xl:max-h-128 @2xl:w-48 @2xl:self-start @2xl:flex-col @2xl:border-r @2xl:border-b-0'
+          className='flex shrink-0 gap-1 overflow-x-auto border-b bg-muted/25 p-2 @2xl:sticky @2xl:top-0 @2xl:max-h-128 @2xl:w-64 @2xl:self-start @2xl:flex-col @2xl:border-r @2xl:border-b-0'
         >
           {sections.map((section) => {
             const rows = section.groups.flatMap((group) => group.rows);
@@ -338,13 +350,18 @@ export function PermissionEditor({
                   setEnabledOnly(false);
                 }}
                 className={cn(
-                  'h-auto shrink-0 justify-between gap-4 px-3 py-2.5 text-left whitespace-normal',
+                  'h-auto shrink-0 justify-between gap-3 px-3 py-2 text-left whitespace-nowrap @2xl:w-full @2xl:min-w-0',
                   section.id === active &&
                     'bg-primary/10 text-primary hover:bg-primary/15',
                 )}
               >
-                <span>{section.title}</span>
-                <span className='rounded-md bg-background px-1.5 py-0.5 text-xs tabular-nums'>
+                <span
+                  className='min-w-0 @2xl:flex-1 @2xl:truncate'
+                  title={section.title}
+                >
+                  {section.title}
+                </span>
+                <span className='shrink-0 rounded-md bg-background px-1.5 py-0.5 text-xs tabular-nums'>
                   {rows.filter((row) => row.enabled).length}/{rows.length}
                 </span>
               </Button>
@@ -357,6 +374,9 @@ export function PermissionEditor({
               const original =
                 sections.find((item) => item.id === section.id) ?? section;
               const singleResource = original.groups.length === 1;
+              const showScopeLabels = original.groups.some((group) =>
+                group.rows.some((row) => (row.scopes?.length ?? 0) > 1),
+              );
               const keys = [
                 ...new Set(
                   original.groups
@@ -369,16 +389,30 @@ export function PermissionEditor({
                 ...common.filter((key) => keys.includes(key)),
                 ...keys.filter((key) => !common.includes(key)),
               ];
-              // Dense or unclassified catalogs keep the wrapping layout instead of hiding actions.
               const aligned =
                 columns.length > 0 &&
-                columns.length <= 7 &&
+                columns.length <= 4 &&
                 original.groups.every(
                   (group) =>
                     group.rows.every((row) => row.actionKey) &&
                     new Set(group.rows.map((row) => row.actionKey)).size ===
                       group.rows.length,
                 );
+              // Keep action columns only when each has room for its label and scope.
+              const alignment = [
+                '',
+                '@3xl:grid-cols-(--permission-columns)',
+                '@3xl:grid-cols-(--permission-columns)',
+                '@5xl:grid-cols-(--permission-columns)',
+                '@7xl:grid-cols-(--permission-columns)',
+              ][columns.length];
+              const placement = [
+                '',
+                '@3xl:col-start-(--permission-column) @3xl:row-start-1',
+                '@3xl:col-start-(--permission-column) @3xl:row-start-1',
+                '@5xl:col-start-(--permission-column) @5xl:row-start-1',
+                '@7xl:col-start-(--permission-column) @7xl:row-start-1',
+              ][columns.length];
               return (
                 <section
                   key={section.id}
@@ -430,11 +464,11 @@ export function PermissionEditor({
                       return (
                         <div
                           key={group.id}
-                          className='grid min-w-0 gap-2 p-3 @xl:grid-cols-[minmax(8rem,1fr)_minmax(0,4fr)]'
+                          className='grid min-w-0 gap-2 p-3 @3xl:grid-cols-[9rem_minmax(0,1fr)]'
                           data-slot='permission-resource'
                         >
-                          <div className='flex min-w-0 flex-col justify-center gap-1'>
-                            <h3 className='text-sm font-medium break-words'>
+                          <div className='flex min-w-0 flex-col gap-1 py-1.5'>
+                            <h3 className='min-h-6 text-sm leading-6 font-medium break-words'>
                               {group.title ?? section.title}
                             </h3>
                             {group.hint && (
@@ -442,7 +476,12 @@ export function PermissionEditor({
                                 {group.hint}
                               </p>
                             )}
-                            <div className='flex items-center gap-2 text-xs text-muted-foreground'>
+                            <div
+                              className={cn(
+                                'flex min-h-7 items-center gap-2 text-xs text-muted-foreground',
+                                showScopeLabels && '@3xl:mt-6',
+                              )}
+                            >
                               {onEnabledBatchChange &&
                                 totalRows.length > 1 &&
                                 selectable.length > 0 && (
@@ -514,9 +553,8 @@ export function PermissionEditor({
                           </div>
                           <div
                             className={cn(
-                              'flex min-w-0 flex-wrap items-start gap-x-3 gap-y-1',
-                              aligned &&
-                                '@4xl:grid @4xl:grid-cols-(--permission-columns) @4xl:gap-x-1',
+                              'grid min-w-0 grid-cols-[repeat(auto-fill,minmax(min(100%,14rem),1fr))] items-start gap-x-2 gap-y-1',
+                              aligned && alignment,
                             )}
                             style={
                               {
@@ -524,42 +562,42 @@ export function PermissionEditor({
                               } as CSSProperties
                             }
                           >
-                            {(aligned
-                              ? [...group.rows].sort(
-                                  (a, b) =>
-                                    columns.indexOf(a.actionKey ?? '') -
-                                    columns.indexOf(b.actionKey ?? ''),
-                                )
-                              : group.rows
-                            ).map((row) => (
-                              <div
-                                key={row.id}
-                                className={cn(
-                                  'min-w-0',
-                                  aligned &&
-                                    '@4xl:col-start-(--permission-column) @4xl:row-start-1',
-                                )}
-                                style={
-                                  {
-                                    '--permission-column':
-                                      columns.indexOf(row.actionKey ?? '') + 1,
-                                  } as CSSProperties
-                                }
-                              >
-                                <PermissionRow
-                                  controlId={`${id}-${row.id}`}
-                                  row={row}
-                                  readOnly={readOnly}
-                                  labels={words}
-                                  onEnabledChange={(rowId, on) => {
-                                    if (enabledOnly && !on)
-                                      searchRef.current?.focus();
-                                    onEnabledChange(rowId, on);
-                                  }}
-                                  onLevelChange={onLevelChange}
-                                />
-                              </div>
-                            ))}
+                            {[...group.rows]
+                              .sort(
+                                (a, b) =>
+                                  columns.indexOf(a.actionKey ?? '') -
+                                  columns.indexOf(b.actionKey ?? ''),
+                              )
+                              .map((row) => (
+                                <div
+                                  key={row.id}
+                                  className={cn(
+                                    'min-w-0',
+                                    aligned && placement,
+                                  )}
+                                  style={
+                                    {
+                                      '--permission-column':
+                                        columns.indexOf(row.actionKey ?? '') +
+                                        1,
+                                    } as CSSProperties
+                                  }
+                                >
+                                  <PermissionRow
+                                    controlId={`${id}-${row.id}`}
+                                    row={row}
+                                    showScopeLabels={showScopeLabels}
+                                    readOnly={readOnly}
+                                    labels={words}
+                                    onEnabledChange={(rowId, on) => {
+                                      if (enabledOnly && !on)
+                                        searchRef.current?.focus();
+                                      onEnabledChange(rowId, on);
+                                    }}
+                                    onLevelChange={onLevelChange}
+                                  />
+                                </div>
+                              ))}
                           </div>
                         </div>
                       );