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

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>
+  );
+}

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}>