@nocobase/app-template-default 1.0.0-beta.68 → 1.0.0-beta.70

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

@@ -0,0 +1,175 @@
+import type { ReactElement, ReactNode } from 'react';
+import type {
+  CellContext,
+  ColumnMeta,
+  HeaderContext,
+} from '@tanstack/react-table';
+import { ArrowDown, ArrowUp } from 'lucide-react';
+import { Button } from '#components/ui/button';
+import { Empty, EmptyDescription } from '#components/ui/empty';
+import { DataTable } from '#components/data-table/data-table';
+
+export interface WorkflowExecutionRow {
+  id: string;
+  record: ReactNode;
+  workflow: ReactNode;
+  state: ReactNode;
+  createdAt: ReactNode;
+}
+export interface WorkflowExecutionListProps {
+  rows: readonly WorkflowExecutionRow[];
+  loaded: boolean;
+  loading: boolean;
+  filters: ReactNode;
+  status?: ReactNode;
+  empty: ReactNode;
+  labels: {
+    refresh: string;
+    record: string;
+    workflow: string;
+    state: string;
+    createdAt: string;
+    previous: string;
+    next: string;
+  };
+  order: 'newest' | 'oldest';
+  onSort: () => void;
+  onRefresh: () => void;
+  pagination: ReactNode;
+  previousDisabled: boolean;
+  nextDisabled: boolean;
+  onPrevious: () => void;
+  onNext: () => void;
+}
+
+type ExecutionDateMeta = ColumnMeta<WorkflowExecutionRow, unknown> &
+  Pick<WorkflowExecutionListProps, 'labels' | 'order' | 'onSort'>;
+
+export function WorkflowExecutionList({
+  rows,
+  loaded,
+  loading,
+  filters,
+  status,
+  empty,
+  labels,
+  order,
+  onSort,
+  onRefresh,
+  pagination,
+  previousDisabled,
+  nextDisabled,
+  onPrevious,
+  onNext,
+}: WorkflowExecutionListProps): ReactElement {
+  const activityMeta: ExecutionDateMeta = { labels, order, onSort };
+  return (
+    <section className='flex flex-col gap-4'>
+      <div className='flex flex-wrap items-center justify-between gap-3'>
+        <div className='flex flex-wrap items-center gap-2'>{filters}</div>
+        <Button variant='outline' disabled={loading} onClick={onRefresh}>
+          {labels.refresh}
+        </Button>
+      </div>
+      {status}
+      <div className='bg-card'>
+        <DataTable
+          data={rows}
+          getRowId={(row) => row.id}
+          pagination={false}
+          manualSorting
+          sortingState={[{ id: 'createdAt', desc: order === 'newest' }]}
+          loading={loading}
+          emptyMessage={
+            loaded ? (
+              <Empty>
+                <EmptyDescription>{empty}</EmptyDescription>
+              </Empty>
+            ) : (
+              ''
+            )
+          }
+          columns={[
+            {
+              id: 'record',
+              header: labels.record,
+              enableSorting: false,
+              cell: ExecutionRecordCell,
+            },
+            {
+              id: 'workflow',
+              header: labels.workflow,
+              enableSorting: false,
+              cell: ExecutionWorkflowCell,
+            },
+            {
+              id: 'state',
+              header: labels.state,
+              enableSorting: false,
+              cell: ExecutionStateCell,
+            },
+            {
+              id: 'createdAt',
+              accessorFn: (row) => row.createdAt,
+              enableSorting: true,
+              meta: activityMeta,
+              header: ExecutionDateHeader,
+              cell: ExecutionCreatedAtCell,
+            },
+          ]}
+        />
+      </div>
+      <div className='flex flex-wrap items-center justify-between gap-3 text-sm'>
+        <p>{pagination}</p>
+        <div className='flex gap-2'>
+          <Button
+            variant='outline'
+            disabled={previousDisabled}
+            onClick={onPrevious}
+          >
+            {labels.previous}
+          </Button>
+          <Button variant='outline' disabled={nextDisabled} onClick={onNext}>
+            {labels.next}
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function ExecutionRecordCell({
+  row,
+}: CellContext<WorkflowExecutionRow, unknown>) {
+  return row.original.record;
+}
+
+function ExecutionWorkflowCell({
+  row,
+}: CellContext<WorkflowExecutionRow, unknown>) {
+  return row.original.workflow;
+}
+
+function ExecutionStateCell({
+  row,
+}: CellContext<WorkflowExecutionRow, unknown>) {
+  return row.original.state;
+}
+
+function ExecutionCreatedAtCell({
+  row,
+}: CellContext<WorkflowExecutionRow, unknown>) {
+  return row.original.createdAt;
+}
+
+function ExecutionDateHeader({
+  column,
+}: HeaderContext<WorkflowExecutionRow, unknown>) {
+  const { labels, order, onSort } = column.columnDef.meta as ExecutionDateMeta;
+  return (
+    <Button variant='ghost' size='sm' onClick={onSort}>
+      {labels.createdAt}
+      {order === 'newest' ? <ArrowDown /> : <ArrowUp />}
+    </Button>
+  );
+}

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

@@ -0,0 +1,95 @@
+import type { ReactElement, ReactNode } from 'react';
+import { PageContainer } from '#components/page-container';
+import { PageHeader } from '#components/page-header';
+import { Tabs, TabsList, TabsTrigger } from '#components/ui/tabs';
+import { Card, CardContent, CardHeader, CardTitle } from '#components/ui/card';
+
+export type WorkflowTab = 'definitions' | 'executions';
+
+/** The caller owns routes, tab URLs and permissions; details replace the list chrome. */
+export interface WorkflowManagementLayoutProps {
+  title: string;
+  description?: ReactNode;
+  labels: Record<WorkflowTab, string>;
+  tab: WorkflowTab;
+  onTabChange: (tab: WorkflowTab) => void;
+  detail?: boolean;
+  children: ReactNode;
+}
+
+export function WorkflowManagementLayout({
+  title,
+  description,
+  labels,
+  tab,
+  onTabChange,
+  detail = false,
+  children,
+}: WorkflowManagementLayoutProps): ReactElement {
+  return (
+    <PageContainer>
+      {!detail && (
+        <>
+          <PageHeader title={title} description={description} />
+          <Tabs
+            value={tab}
+            onValueChange={(value) => onTabChange(value as WorkflowTab)}
+          >
+            <TabsList variant='line'>
+              <TabsTrigger value='definitions'>
+                {labels.definitions}
+              </TabsTrigger>
+              <TabsTrigger value='executions'>{labels.executions}</TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </>
+      )}
+      {children}
+    </PageContainer>
+  );
+}
+
+export interface WorkflowDefinitionDetailProps {
+  diagram: ReactNode;
+  parameters?: ReactNode;
+  diagramTitle: string;
+  parametersTitle: string;
+}
+
+export function WorkflowDefinitionDetail({
+  diagram,
+  parameters,
+  diagramTitle,
+  parametersTitle,
+}: WorkflowDefinitionDetailProps): ReactElement {
+  return (
+    <div className='flex flex-col gap-4'>
+      <div
+        className={
+          parameters == null
+            ? 'min-w-0'
+            : 'grid min-w-0 grid-cols-1 items-start gap-6 lg:grid-cols-2'
+        }
+      >
+        <Card className='min-w-0' role='region' aria-label={diagramTitle}>
+          <CardHeader>
+            <CardTitle>
+              <h2>{diagramTitle}</h2>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className='flex flex-1 flex-col'>{diagram}</CardContent>
+        </Card>
+        {parameters != null && (
+          <Card className='min-w-0' role='region' aria-label={parametersTitle}>
+            <CardHeader>
+              <CardTitle>
+                <h2>{parametersTitle}</h2>
+              </CardTitle>
+            </CardHeader>
+            <CardContent>{parameters}</CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  );
+}

package/client/layouts/components/app-sidebar.tsx

@@ -33,7 +33,7 @@ import { AppBrand } from './app-brand.js';
 
 /**
  * The shell's sidebar state: shadcn's provider, with the desktop icon mode kept in the shared sidebar preference
- * (`use-sidebar-preference.ts`) so every layout on this origin opens it the same way. Whether the phone's sheet is
+ * (`use-sidebar-preference.ts`) so every layout of this application opens it the same way. Whether the phone's sheet is
  * open stays local to the layout.
  */
 export function AppSidebarProvider({

package/client/layouts/use-sidebar-preference.ts

@@ -1,57 +1,77 @@
-import { useSyncExternalStore, type SetStateAction } from 'react';
-
-// All applications and layout surfaces on this origin share this preference.
-const storageKey = 'nocobase:sidebar:collapsed';
-const changeEvent = 'nocobase:sidebar-preference-change';
-let memoryValue = false;
-let memoryOnly = false;
-
-function getSnapshot(): boolean {
-  if (memoryOnly) return memoryValue;
-  try {
-    memoryValue = localStorage.getItem(storageKey) === 'true';
-  } catch {
-    // Storage may be unavailable; keep the current session's preference.
+import {
+  createContext,
+  useContext,
+  useSyncExternalStore,
+  type SetStateAction,
+} from 'react';
+
+// Each application shares its preference across layouts and tabs, never across scopes.
+export function createSidebarPreferenceStore(scope: string) {
+  const storageKey = `nocobase:sidebar:collapsed:${scope}`;
+  const changeEvent = `nocobase:sidebar-preference-change:${scope}`;
+  let memoryValue = false;
+  let memoryOnly = false;
+
+  function getSnapshot(): boolean {
+    if (memoryOnly) return memoryValue;
+    try {
+      memoryValue = localStorage.getItem(storageKey) === 'true';
+    } catch {
+      // Storage may be unavailable; keep this application's session preference.
+    }
+    return memoryValue;
   }
-  return memoryValue;
-}
 
-function subscribe(notify: () => void): () => void {
-  const onStorage = (event: StorageEvent) => {
-    if (event.key === storageKey || event.key === null) notify();
-  };
-  window.addEventListener('storage', onStorage);
-  window.addEventListener(changeEvent, notify);
-  return () => {
-    window.removeEventListener('storage', onStorage);
-    window.removeEventListener(changeEvent, notify);
-  };
-}
+  function subscribe(notify: () => void): () => void {
+    const onStorage = (event: StorageEvent) => {
+      if (event.key === storageKey || event.key === null) notify();
+    };
+    window.addEventListener('storage', onStorage);
+    window.addEventListener(changeEvent, notify);
+    return () => {
+      window.removeEventListener('storage', onStorage);
+      window.removeEventListener(changeEvent, notify);
+    };
+  }
 
-function setCollapsed(update: SetStateAction<boolean>): void {
-  const current = getSnapshot();
-  memoryValue = typeof update === 'function' ? update(current) : update;
-  try {
-    localStorage.setItem(storageKey, String(memoryValue));
-  } catch {
-    memoryOnly = true;
-    // The toggle remains usable when storage is blocked.
+  function setCollapsed(update: SetStateAction<boolean>): void {
+    const current = getSnapshot();
+    memoryValue = typeof update === 'function' ? update(current) : update;
+    try {
+      localStorage.setItem(storageKey, String(memoryValue));
+    } catch {
+      memoryOnly = true;
+      // The toggle remains usable when storage is blocked.
+    }
+    window.dispatchEvent(new Event(changeEvent));
   }
-  window.dispatchEvent(new Event(changeEvent));
+
+  return { getSnapshot, subscribe, setCollapsed };
 }
 
-function getServerSnapshot(): boolean {
-  return false;
+type SidebarPreferenceStore = ReturnType<typeof createSidebarPreferenceStore>;
+
+export function createAppSidebarPreferenceStore(basename: string = '') {
+  const normalizedBasename = `/${basename.replace(/^\/+|\/+$/g, '')}`;
+  return createSidebarPreferenceStore(`app:${normalizedBasename}`);
 }
 
+const SidebarPreferenceContext = createContext<SidebarPreferenceStore | null>(
+  null,
+);
+
+export const SidebarPreferenceProvider = SidebarPreferenceContext.Provider;
+
 export function useSidebarPreference(): readonly [
   boolean,
   (update: SetStateAction<boolean>) => void,
 ] {
+  const store = useContext(SidebarPreferenceContext);
+  if (!store) throw new Error('SidebarPreferenceProvider is required.');
   const collapsed = useSyncExternalStore(
-    subscribe,
-    getSnapshot,
-    getServerSnapshot,
+    store.subscribe,
+    store.getSnapshot,
+    () => false,
   );
-  return [collapsed, setCollapsed];
+  return [collapsed, store.setCollapsed];
 }

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

@@ -1,3 +1,4 @@
+import settings from './settings-en-US.js';
 import type { LocaleResource } from '@nocobase/i18n';
 import deviceApprovalEnUS from '#extensions/nocobase-device-approval/locales/en-US';
 import inboxEnUS from '#extensions/nocobase-inbox/locales/en-US';
@@ -7,6 +8,34 @@ import inboxEnUS from '#extensions/nocobase-inbox/locales/en-US';
  * upgrade replaces this file, so put the application's own copy in `../en-US.ts` rather than here.
  */
 const systemEnUS = {
+  flowDiagram: {
+    configure: 'Configure',
+    overview: 'Diagram overview',
+    actualSize: 'Actual size',
+    states: 'States',
+    transitions: 'Transitions',
+    configurable: 'Parameters',
+    current: 'Current',
+    visited: 'Visited',
+    initial: 'Initial',
+    final: 'Final',
+    state: 'State',
+    zoomOut: 'Zoom out',
+    zoomIn: 'Zoom in',
+    fit: 'Fit to view',
+
+    empty: 'No states to display.',
+    loading: 'Laying out diagram…',
+    failed: 'Unable to lay out this diagram.',
+    nodeHelp: 'Press Enter or Space to select a state.',
+    edgeHelp: 'Press Enter or Space to select a transition.',
+  },
+  settings,
+  'auth.preparingSession': 'Preparing your session…',
+  'auth.connectionFailed': 'Unable to connect',
+  'auth.connectionFailedDescription':
+    'The realtime connection could not be prepared. Retry to enter the application, or sign out.',
+
   'auth.passwordResetSuccess':
     'Your password has been reset. Sign in with your new password.',
   'auth.requestNewResetLink': 'Request a new reset link',

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

@@ -0,0 +1,142 @@
+const settings = {
+  unnamedPage: 'Unnamed page ({{path}})',
+  revokeRoles: 'Revoke roles',
+  keyConflict: 'This role key is already in use.',
+  userPermissions: 'User management',
+  readUsers: 'View users',
+  createUsers: 'Create users',
+  updateUsers: 'Edit users',
+  inviteUsers: 'Invite users',
+  deleteUsers: 'Delete users',
+  resetUserPassword: 'Reset password',
+  assignRole: 'Assign roles',
+
+  assignedRoles: 'Assigned roles',
+  actionSaved: 'Updated access for "{{name}}"',
+
+  identityConflict: 'This email or username is already in use.',
+  signInAgain: 'Sign in again',
+  passwordPolicy: 'Password does not meet the current password policy.',
+
+  reload: 'Reload role',
+  title: 'System settings',
+  users: 'Users',
+  roles: 'Roles and permissions',
+  usersDescription: 'Manage accounts, access and active sessions.',
+  rolesDescription: 'Define what each role can access and do.',
+  userSearch: 'Search names, usernames or emails',
+  roleSearch: 'Search role names',
+  newUser: 'New user',
+  editUser: 'Edit user',
+  newRole: 'New role',
+  editRole: 'Edit role',
+  name: 'Name',
+  username: 'Username',
+  email: 'Email',
+  password: 'Initial password',
+  roleName: 'Role name',
+  key: 'Key',
+  status: 'Status',
+  actions: 'Actions',
+  actionsFor: 'Actions for {{name}}',
+  all: 'All statuses',
+  enabled: 'Enabled',
+  disabled: 'Disabled',
+  clear: 'Clear filters',
+  noResults: 'No matching results',
+  clearHint: 'Try a different search or clear the filters.',
+  noUsers: 'No users yet',
+  noRoles: 'No roles yet',
+  create: 'Create',
+  edit: 'Edit',
+  save: 'Save',
+  cancel: 'Cancel',
+  saving: 'Saving…',
+  confirm: 'Confirm',
+  enable: 'Enable',
+  disable: 'Disable',
+  revokeSessions: 'Revoke sessions',
+  disableTitle: 'Disable user "{{name}}"?',
+  disableHint:
+    'This user will be unable to sign in and existing sessions will end.',
+  enableTitle: 'Enable user "{{name}}"?',
+  enableHint: 'This user will be able to sign in again.',
+  revokeTitle: 'Revoke sessions for "{{name}}"?',
+  revokeHint: 'This user will need to sign in again.',
+  revokeRoleTitle: 'Revoke roles from "{{name}}"?',
+  revokeRoleHint: 'Access granted by the listed roles will be removed.',
+  created: 'Created user "{{name}}"',
+  saved: 'Saved "{{name}}"',
+  rolesSaved: 'Updated roles for "{{name}}"',
+  required: 'Enter a value for this field',
+  invalidEmail: 'Enter a valid email address',
+  protected: 'Protected',
+  custom: 'Custom',
+  protectedHint:
+    'This role is protected. Only explicitly permitted changes are available.',
+  unsaved: 'Unsaved changes',
+  discardTitle: 'Discard changes?',
+  discardHint: 'Your unsaved changes will be lost.',
+  failed: 'Unable to complete the request. Try again.',
+  retry: 'Retry',
+  loading: 'Loading',
+  denied: 'You do not have access. Contact an administrator.',
+  missing: 'This record does not exist or has been deleted.',
+  conflict:
+    'This role has changed. Reload it and merge your changes before saving.',
+  sessionEnded: 'Your session has ended. Sign in again.',
+  previous: 'Previous',
+  next: 'Next',
+  total_one: '{{count}} user',
+  total_other: '{{count}} users',
+  access: 'Access',
+  permissionSearch: 'Search categories, groups or permissions',
+  enabledOnly: 'Enabled only',
+  noPermissions: 'No permissions to configure',
+  permissionCategories: 'Permission categories',
+  selectAllPermissions: 'All',
+  selectVisiblePermissions: 'Select visible permissions in {{name}}',
+  permissionSummary: '{{enabled}} of {{total}} enabled',
+  noRecordScope: 'No records (not authorized)',
+  permissionFilter: {
+    limit: 'Up to 20 conditions',
+    configure: 'Conditions',
+    title: 'Configure record filter',
+    description:
+      'Apply conditions to the role draft, then save the role to make them effective.',
+    all: 'Match all conditions',
+    any: 'Match any condition',
+    field: 'Field',
+    operator: 'Operator',
+    valueType: 'Value type',
+    value: 'Value',
+    text: 'Text',
+    number: 'Number',
+    boolean: 'Boolean',
+    true: 'Yes',
+    false: 'No',
+    add: 'Add condition',
+    remove: 'Remove',
+    cancel: 'Cancel',
+    apply: 'Apply',
+    invalid:
+      'Choose valid fields and complete all values. Include at least one condition.',
+    advanced:
+      'This existing filter uses advanced conditions. It will be preserved unless you explicitly reconfigure it.',
+    reconfigure: 'Reconfigure',
+    operators: {
+      $eq: 'Equals',
+      $ne: 'Does not equal',
+      $includes: 'Contains',
+      $gt: 'Greater than',
+      $gte: 'At least',
+      $lt: 'Less than',
+      $lte: 'At most',
+      $empty: 'Is empty',
+      $notEmpty: 'Is not empty',
+    },
+  },
+  recordScope: 'Record scope',
+  levelFor: 'Scope for {{name}}',
+};
+export default settings;