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

package/client/components/ui/combobox.tsx

@@ -0,0 +1,300 @@
+'use client';
+
+import * as React from 'react';
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+import { cn } from 'cn';
+
+import { Button } from '#components/ui/button';
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from '#components/ui/input-group';
+import { ChevronDownIcon, XIcon, CheckIcon } from 'lucide-react';
+
+const Combobox = ComboboxPrimitive.Root;
+
+function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
+  return <ComboboxPrimitive.Value data-slot='combobox-value' {...props} />;
+}
+
+function ComboboxTrigger({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Trigger.Props) {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot='combobox-trigger'
+      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className='pointer-events-none size-4 text-muted-foreground' />
+    </ComboboxPrimitive.Trigger>
+  );
+}
+
+function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
+  return (
+    <ComboboxPrimitive.Clear
+      data-slot='combobox-clear'
+      render={<InputGroupButton variant='ghost' size='icon-xs' />}
+      className={cn(className)}
+      {...props}
+    >
+      <XIcon className='pointer-events-none' />
+    </ComboboxPrimitive.Clear>
+  );
+}
+
+function ComboboxInput({
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+}: ComboboxPrimitive.Input.Props & {
+  showTrigger?: boolean;
+  showClear?: boolean;
+}) {
+  return (
+    <InputGroup className={cn('w-auto', className)}>
+      <ComboboxPrimitive.Input
+        render={<InputGroupInput disabled={disabled} />}
+        {...props}
+      />
+      <InputGroupAddon align='inline-end'>
+        {showTrigger && (
+          <InputGroupButton
+            size='icon-xs'
+            variant='ghost'
+            render={<ComboboxTrigger />}
+            data-slot='input-group-button'
+            className='group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent'
+            disabled={disabled}
+          />
+        )}
+        {showClear && <ComboboxClear disabled={disabled} />}
+      </InputGroupAddon>
+      {children}
+    </InputGroup>
+  );
+}
+
+function ComboboxContent({
+  className,
+  side = 'bottom',
+  sideOffset = 6,
+  align = 'start',
+  alignOffset = 0,
+  anchor,
+  ...props
+}: ComboboxPrimitive.Popup.Props &
+  Pick<
+    ComboboxPrimitive.Positioner.Props,
+    'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'
+  >) {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className='isolate z-50'
+      >
+        <ComboboxPrimitive.Popup
+          data-slot='combobox-content'
+          data-chips={!!anchor}
+          className={cn(
+            'group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+            className,
+          )}
+          {...props}
+        />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  );
+}
+
+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot='combobox-list'
+      className={cn(
+        'no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ComboboxItem({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Item.Props) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot='combobox-item'
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ComboboxPrimitive.ItemIndicator
+        render={
+          <span className='pointer-events-none absolute right-2 flex size-4 items-center justify-center' />
+        }
+      >
+        <CheckIcon className='pointer-events-none' />
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
+  );
+}
+
+function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
+  return (
+    <ComboboxPrimitive.Group
+      data-slot='combobox-group'
+      className={cn(className)}
+      {...props}
+    />
+  );
+}
+
+function ComboboxLabel({
+  className,
+  ...props
+}: ComboboxPrimitive.GroupLabel.Props) {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot='combobox-label'
+      className={cn('px-2 py-1.5 text-xs text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
+  return (
+    <ComboboxPrimitive.Collection data-slot='combobox-collection' {...props} />
+  );
+}
+
+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot='combobox-empty'
+      className={cn(
+        'hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ComboboxSeparator({
+  className,
+  ...props
+}: ComboboxPrimitive.Separator.Props) {
+  return (
+    <ComboboxPrimitive.Separator
+      data-slot='combobox-separator'
+      className={cn('-mx-1 my-1 h-px bg-border', className)}
+      {...props}
+    />
+  );
+}
+
+function ComboboxChips({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
+  ComboboxPrimitive.Chips.Props) {
+  return (
+    <ComboboxPrimitive.Chips
+      data-slot='combobox-chips'
+      className={cn(
+        'flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ComboboxChip({
+  className,
+  children,
+  showRemove = true,
+  ...props
+}: ComboboxPrimitive.Chip.Props & {
+  showRemove?: boolean;
+}) {
+  return (
+    <ComboboxPrimitive.Chip
+      data-slot='combobox-chip'
+      className={cn(
+        'flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <ComboboxPrimitive.ChipRemove
+          render={<Button variant='ghost' size='icon-xs' />}
+          className='-ml-1 opacity-50 hover:opacity-100'
+          data-slot='combobox-chip-remove'
+        >
+          <XIcon className='pointer-events-none' />
+        </ComboboxPrimitive.ChipRemove>
+      )}
+    </ComboboxPrimitive.Chip>
+  );
+}
+
+function ComboboxChipsInput({
+  className,
+  ...props
+}: ComboboxPrimitive.Input.Props) {
+  return (
+    <ComboboxPrimitive.Input
+      data-slot='combobox-chip-input'
+      className={cn('min-w-16 flex-1 outline-none', className)}
+      {...props}
+    />
+  );
+}
+
+function useComboboxAnchor() {
+  return React.useRef<HTMLDivElement | null>(null);
+}
+
+export {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxCollection,
+  ComboboxEmpty,
+  ComboboxSeparator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+};

package/client/extensions/nocobase-workflow-management/README.md

@@ -63,8 +63,10 @@ The application owns authentication, initial administrator grants, navigation an
 
 ## Standard diagram and contextual configuration
 
-Current application templates already contain these parts and the standard React Flow/ELK components. Reuse the installed `LifecycleDiagram` and preserve its default visuals unless the user explicitly asks to customize them. UI Library entries are shadcn registry source, not npm packages; use `shadcn view/add`, never an npm 404 as a fallback decision.
+Current application templates already contain these parts and the standard React Flow/ELK components. Reuse the installed `LifecycleDiagram`; the installable demo opts into `presentation="process"` for compact boundary pills and work cards in both definitions and executions. Supply application-owned `stateKind` semantics and keep configuration and history callbacks intact. Omit `presentation` to retain the classic visuals. UI Library entries are shadcn registry source, not npm packages; use `shadcn view/add`, never an npm 404 as a fallback decision.
 
 Connect `LifecycleDiagram.configuration` to the application's existing authorized parameter editor. Native `parameterConfiguration` bindings supply the exact state/transition fields; the component automatically renders bound state controls and sends bound transition selections to `onConfigure`. `canConfigure` is mandatory and controls the affordance only, never server security. The application editor reads current values/revision, preserves other group fields, validates and saves the complete authorized group with CAS, and refreshes the diagram summary from persisted data. Avoid replacing a group with the callback's filtered field subset. Keep historical snapshots read-only.
 
 Omit `WorkflowDefinitionDetail.parameters` when the editor opens contextually so the diagram spans the available width; keep the slot when the same editor is visible beside the diagram. No editor, API, sample business registration or menu is installed by this block. Definition and execution lists use the same TanStack DataTable as the templates, with no second local pagination over a server page.
+
+Ordering is optional: omit `onSort` when activity ordering is not supported so the header stays plain text. Omit a row's optional `name` when its linked `title` already supplies the complete display name. Hosts own filtering, pagination and their URL state; keep that state when opening and returning from a definition or execution.

package/client/extensions/nocobase-workflow-management/definition-list.tsx

@@ -11,7 +11,7 @@ import { DataTable } from '#components/data-table/data-table';
 
 export interface WorkflowDefinitionRow {
   id: string;
-  name: string;
+  name?: string;
   title: ReactNode;
   activity: ReactNode;
 }
@@ -30,7 +30,7 @@ export interface WorkflowDefinitionListProps {
     executionActivity: string;
   };
   sort?: { ascending: boolean };
-  onSort: () => void;
+  onSort?: () => void;
   onRefresh: () => void;
 }
 
@@ -91,7 +91,7 @@ export function WorkflowDefinitionList({
                 {
                   id: 'activity',
                   accessorFn: (row) => row.activity,
-                  enableSorting: true,
+                  enableSorting: Boolean(onSort),
                   meta: activityMeta,
                   header: DefinitionActivityHeader,
                   cell: DefinitionActivityCell,
@@ -118,7 +118,9 @@ function DefinitionTitleCell({
   return (
     <>
       {row.original.title}
-      <p className='text-xs text-muted-foreground'>{row.original.name}</p>
+      {row.original.name && row.original.name !== row.original.title && (
+        <p className='text-xs text-muted-foreground'>{row.original.name}</p>
+      )}
     </>
   );
 }
@@ -134,15 +136,19 @@ function DefinitionActivityHeader({
     .meta as DefinitionActivityMeta;
   return (
     <div className='text-right'>
-      <Button
-        variant='ghost'
-        size='sm'
-        title={labels.executionCount}
-        onClick={onSort}
-      >
-        {labels.executionActivity}
-        {sort && (sort.ascending ? <ArrowUp /> : <ArrowDown />)}
-      </Button>
+      {onSort ? (
+        <Button
+          variant='ghost'
+          size='sm'
+          title={labels.executionCount}
+          onClick={onSort}
+        >
+          {labels.executionActivity}
+          {sort && (sort.ascending ? <ArrowUp /> : <ArrowDown />)}
+        </Button>
+      ) : (
+        <span>{labels.executionActivity}</span>
+      )}
     </div>
   );
 }

package/client/extensions/nocobase-workflow-management/layout.tsx

@@ -68,7 +68,7 @@ export function WorkflowDefinitionDetail({
         className={
           parameters == null
             ? 'min-w-0'
-            : 'grid min-w-0 grid-cols-1 items-start gap-6 lg:grid-cols-2'
+            : 'grid min-w-0 grid-cols-1 items-start gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]'
         }
       >
         <Card className='min-w-0' role='region' aria-label={diagramTitle}>

package/client/hooks/use-table-url-state.ts

@@ -0,0 +1,93 @@
+import { useEffect } from 'react';
+import { useSearchParams } from 'react-router';
+import type {
+  OnChangeFn,
+  PaginationState,
+  SortingState,
+} from '@tanstack/react-table';
+
+const sizes = [10, 20, 50, 100] as const;
+
+/** Keep list position shareable across overlays, refresh and browser history. */
+export function useTableUrlState({
+  defaultPageSize = 10,
+  pageSizeOptions = sizes,
+  sortColumns,
+  rowCount,
+}: {
+  defaultPageSize?: number;
+  pageSizeOptions?: readonly number[];
+  sortColumns: readonly string[];
+  rowCount?: number;
+}) {
+  const [params, setParams] = useSearchParams();
+  const requestedPage = Number(params.get('page'));
+  const pageIndex =
+    Number.isSafeInteger(requestedPage) && requestedPage > 0
+      ? requestedPage - 1
+      : 0;
+  const requestedSize = Number(params.get('pageSize'));
+  const pageSize = pageSizeOptions.includes(requestedSize)
+    ? requestedSize
+    : defaultPageSize;
+  const paginationState = { pageIndex, pageSize };
+  const sort = params.get('sort') ?? sortColumns[0];
+  const order = params.get('order');
+  const sortingState: SortingState =
+    sort && sortColumns.includes(sort) && (order === 'asc' || order === 'desc')
+      ? [{ id: sort, desc: order === 'desc' }]
+      : [];
+  const onPaginationChange: OnChangeFn<PaginationState> = (updater) => {
+    const next =
+      typeof updater === 'function' ? updater(paginationState) : updater;
+    setParams(
+      (old) => {
+        const result = new URLSearchParams(old);
+        result.set('page', String(next.pageIndex + 1));
+        result.set('pageSize', String(next.pageSize));
+        return result;
+      },
+      { replace: false },
+    );
+  };
+  const onSortingChange: OnChangeFn<SortingState> = (updater) => {
+    const next =
+      typeof updater === 'function' ? updater(sortingState) : updater;
+    setParams(
+      (old) => {
+        const result = new URLSearchParams(old);
+        result.delete('page');
+        if (next[0] && sortColumns.includes(next[0].id)) {
+          result.set('sort', next[0].id);
+          result.set('order', next[0].desc ? 'desc' : 'asc');
+        } else {
+          result.delete('sort');
+          result.delete('order');
+        }
+        return result;
+      },
+      { replace: true },
+    );
+  };
+  // Only pass a count for the current, successfully loaded query.
+  useEffect(() => {
+    if (rowCount === undefined) return;
+    const lastPage = Math.max(0, Math.ceil(rowCount / pageSize) - 1);
+    if (pageIndex <= lastPage) return;
+    setParams(
+      (old) => {
+        const result = new URLSearchParams(old);
+        result.set('page', String(lastPage + 1));
+        return result;
+      },
+      { replace: true },
+    );
+  }, [rowCount, pageSize, pageIndex, setParams]);
+  return {
+    paginationState,
+    onPaginationChange,
+    sortingState,
+    onSortingChange,
+    pageSizeOptions,
+  };
+}

package/client/lib/required-role-setup.ts

@@ -0,0 +1,98 @@
+import type { UsersClient } from '@nocobase/app-plugin-users/client/user-client';
+import {
+  setupInspectionFailure,
+  type SetupInspection,
+  type SetupInspections,
+} from '../components/setup-readiness-state.js';
+import { safeReturnTo } from './return-to.js';
+
+function isReadonlyArray<T>(
+  value: readonly T[] | undefined,
+): value is readonly T[] {
+  return Array.isArray(value);
+}
+
+export interface RequiredSetupRole {
+  readonly scope: string;
+  readonly role: string;
+  /** A localized business label; never render the role key as a title. */
+  readonly title: string;
+  readonly description: string;
+}
+export function requiredRoleSetupId(
+  role: Pick<RequiredSetupRole, 'scope' | 'role'>,
+): string {
+  return JSON.stringify([role.scope, role.role]);
+}
+export function requiredRoleSetupLink(
+  role: Pick<RequiredSetupRole, 'scope' | 'role'>,
+  returnTo: string,
+): string {
+  const query = new URLSearchParams({
+    roleScope: role.scope,
+    role: role.role,
+    status: 'enabled',
+  });
+  const source = safeReturnTo(returnTo);
+  if (source) query.set('returnTo', source);
+  return `/settings/users?${query}`;
+}
+
+/** One metadata read and one bounded read per distinct required role. No writes. */
+export async function inspectRequiredRoles(
+  client: Pick<UsersClient, 'options' | 'list'>,
+  requirements: readonly RequiredSetupRole[],
+): Promise<SetupInspections> {
+  const unique = [
+    ...new Map(
+      requirements.map((role) => [requiredRoleSetupId(role), role]),
+    ).values(),
+  ];
+  if (unique.length === 0) return {};
+  const options = await client.options();
+  const roleScopes = options?.roleScopes;
+  if (!isReadonlyArray(roleScopes))
+    return Object.fromEntries(
+      unique.map((role) => [
+        requiredRoleSetupId(role),
+        { status: 'unknown', reason: 'invalid' },
+      ]),
+    );
+  const entries = await Promise.all(
+    unique.map(
+      async (requirement): Promise<readonly [string, SetupInspection]> => {
+        const id = requiredRoleSetupId(requirement);
+        const scope = roleScopes.find(
+          (scope) => scope?.key === requirement.scope,
+        );
+        const role = isReadonlyArray(scope?.options)
+          ? scope.options.find((role) => role?.value === requirement.role)
+          : undefined;
+        // Metadata offers direct selectable roles; authenticated defaults apply separately.
+        if (!scope || !role)
+          return [id, { status: 'unknown', reason: 'invalid' }];
+        try {
+          const page = await client.list({
+            roleScope: requirement.scope,
+            role: requirement.role,
+            status: 'enabled',
+            page: 1,
+            pageSize: 1,
+          });
+          if (!Number.isSafeInteger(page?.total) || page.total < 0)
+            return [id, { status: 'unknown', reason: 'invalid' }];
+          return [
+            id,
+            {
+              status: page.total > 0 ? 'ready' : 'missing',
+              canConfigure: role.assignable !== false,
+            },
+          ];
+        } catch (error: unknown) {
+          return [id, setupInspectionFailure(error)];
+        }
+      },
+    ),
+  );
+  return Object.fromEntries(entries);
+}

package/client/lib/return-to.ts

@@ -0,0 +1,19 @@
+/** Accept only an application-relative destination, resolved by the app router's basename. */
+export function safeReturnTo(value: string | null): string | undefined {
+  if (
+    !value ||
+    !value.startsWith('/') ||
+    value.startsWith('//') ||
+    [...value].some(
+      (character) =>
+        character === '\\' ||
+        character.charCodeAt(0) <= 32 ||
+        character.charCodeAt(0) === 127,
+    )
+  )
+    return;
+  const base = 'https://app.invalid';
+  const url = new URL(value, base);
+  if (url.origin !== base || url.pathname.startsWith('//')) return;
+  return `${url.pathname}${url.search}${url.hash}`;
+}

package/client/locales/system/en-US.ts

@@ -9,6 +9,16 @@ import inboxEnUS from '#extensions/nocobase-inbox/locales/en-US';
  */
 const systemEnUS = {
   flowDiagram: {
+    controls: 'Diagram controls',
+    fitView: 'Fit to view',
+    fullscreen: 'Fullscreen',
+    exitFullscreen: 'Exit fullscreen',
+    escapeHint: 'Press Escape to exit',
+    leavesTo: 'Leaves to',
+    arrivesFrom: 'Arrives from',
+    otherRoutes: 'Other routes',
+    minimap: 'Diagram overview',
+
     configure: 'Configure',
     overview: 'Diagram overview',
     actualSize: 'Actual size',