@nocobase/client-v2 2.1.0-beta.44 → 2.1.0-beta.46

package/src/flow/components/filter/__tests__/metaTreeAssociationDepth.test.ts

@@ -0,0 +1,60 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { describe, expect, it } from 'vitest';
+import type { MetaTreeNode } from '@nocobase/flow-engine';
+import { limitAssociationMetaTree } from '../metaTreeAssociationDepth';
+
+describe('limitAssociationMetaTree', () => {
+  it('keeps relation / relation / normal field and removes deeper relation fields', async () => {
+    const tree: MetaTreeNode[] = [
+      {
+        name: 'user',
+        title: 'User',
+        type: 'object',
+        interface: 'm2o',
+        options: { target: 'users' },
+        paths: ['collection', 'user'],
+        children: async () => [
+          {
+            name: 'department',
+            title: 'Department',
+            type: 'object',
+            interface: 'm2o',
+            options: { target: 'departments' },
+            paths: ['collection', 'user', 'department'],
+            children: async () => [
+              {
+                name: 'name',
+                title: 'Name',
+                type: 'string',
+                interface: 'input',
+                paths: ['collection', 'user', 'department', 'name'],
+              },
+              {
+                name: 'company',
+                title: 'Company',
+                type: 'object',
+                interface: 'm2o',
+                options: { target: 'companies' },
+                paths: ['collection', 'user', 'department', 'company'],
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    const limited = limitAssociationMetaTree(tree);
+    const userChildren = await (limited[0].children as () => Promise<MetaTreeNode[]>)();
+    const departmentChildren = await (userChildren[0].children as () => Promise<MetaTreeNode[]>)();
+
+    expect(departmentChildren.map((node) => node.name)).toEqual(['name']);
+  });
+});

package/src/flow/components/filter/fieldsToOptions.ts

@@ -59,10 +59,15 @@ const field2option = (field: CollectionField, depth, nonfilterable, t) => {
     option['children'] = children;
   }
   if (nested) {
-    const targetFields = field.getFields().filter((f) => {
-      // 过滤掉附件字段，因为会报错：Target collection attachments not found for field xxx
-      return f.target !== 'attachments' && f.interface !== 'formula';
-    });
+    let targetFields: CollectionField[] = [];
+    try {
+      targetFields = field.getFields().filter((f) => {
+        // 过滤掉附件字段，因为会报错：Target collection attachments not found for field xxx
+        return f.target !== 'attachments' && f.interface !== 'formula';
+      });
+    } catch {
+      targetFields = [];
+    }
     const options = fieldsToOptions(targetFields, depth + 1, nonfilterable, t).filter(Boolean);
     option['children'] = option['children'] || [];
     option['children'].push(...options);

package/src/flow/components/filter/metaTreeAssociationDepth.ts

@@ -0,0 +1,69 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { MetaTreeNode } from '@nocobase/flow-engine';
+
+const ASSOCIATION_FIELD_INTERFACES = new Set(['m2o', 'o2o', 'oho', 'obo', 'o2m', 'm2m', 'linkTo']);
+
+function isAssociationMetaNode(node: MetaTreeNode) {
+  const options = (node as any)?.options || {};
+  return Boolean(
+    options.target ||
+      options.targetCollection ||
+      options.foreignKey ||
+      options.through ||
+      ASSOCIATION_FIELD_INTERFACES.has(String(node?.interface || '')),
+  );
+}
+
+function limitNodeAssociationDepth(node: MetaTreeNode, associationDepth: number, maxAssociationDepth: number) {
+  const isAssociation = isAssociationMetaNode(node);
+  const nextAssociationDepth = associationDepth + (isAssociation ? 1 : 0);
+
+  if (isAssociation && nextAssociationDepth > maxAssociationDepth) {
+    return null;
+  }
+
+  const wrapChildren = (children: MetaTreeNode[] | (() => Promise<MetaTreeNode[]>)) => {
+    if (Array.isArray(children)) {
+      return limitAssociationMetaTree(children, {
+        associationDepth: nextAssociationDepth,
+        maxAssociationDepth,
+      });
+    }
+
+    return async () => {
+      const loaded = await children();
+      return limitAssociationMetaTree(Array.isArray(loaded) ? loaded : [], {
+        associationDepth: nextAssociationDepth,
+        maxAssociationDepth,
+      });
+    };
+  };
+
+  return {
+    ...node,
+    children: node.children ? wrapChildren(node.children as any) : undefined,
+  } as MetaTreeNode;
+}
+
+export function limitAssociationMetaTree(
+  nodes: MetaTreeNode[] | undefined,
+  options: {
+    associationDepth?: number;
+    maxAssociationDepth?: number;
+  } = {},
+): MetaTreeNode[] {
+  const { associationDepth = 0, maxAssociationDepth = 2 } = options;
+  if (!Array.isArray(nodes)) return [];
+
+  return nodes
+    .map((node) => limitNodeAssociationDepth(node, associationDepth, maxAssociationDepth))
+    .filter(Boolean) as MetaTreeNode[];
+}

package/src/flow/components/placeholders/BlockPlaceholder.tsx

@@ -15,19 +15,66 @@ import { useTranslation } from 'react-i18next';
 import { BlockItemCard } from '../BlockItemCard';
 import { BlockModel } from '../../models/base/BlockModel';
 
+function getResourceSettingsInitParams(model: any) {
+  if (typeof model?.getResourceSettingsInitParams === 'function') {
+    return model.getResourceSettingsInitParams();
+  }
+  if (typeof model?.getStepParams === 'function') {
+    return model.getStepParams('resourceSettings', 'init');
+  }
+  return undefined;
+}
+
+function getBlockResourceInfo(model: any, t: (key: string) => string) {
+  const blockModel = model?.context?.blockModel || model;
+  const params = getResourceSettingsInitParams(blockModel) || {};
+  const collection = blockModel?.context?.collection || blockModel?.collection || model?.context?.collection;
+  const dataSource =
+    collection?.dataSource || blockModel?.context?.dataSource || blockModel?.dataSource || model?.dataSource;
+  const dataSourceKey = dataSource?.key || collection?.dataSourceKey || params.dataSourceKey;
+  const collectionName =
+    collection?.title ||
+    collection?.name ||
+    collection?.tableName ||
+    model?.resource?.resourceName ||
+    model?.resource?.getResourceName?.() ||
+    params.associationName ||
+    params.collectionName;
+  const dataSourceName = dataSource ? t(dataSource.displayName || dataSource.key) : dataSourceKey;
+  const collectionLabel = collectionName ? `${t(collectionName) || collectionName}` : '';
+  const dataSourceLabel = dataSourceName ? `${t(dataSourceName)} > ` : '';
+
+  return {
+    dataSourceName,
+    nameValue: `${dataSourceLabel}${collectionLabel}`,
+    isDataSourceUnavailable: Boolean(dataSourceKey && !dataSource),
+  };
+}
+
+function DataSourceUnavailablePlaceholder({ dataSourceName }: { dataSourceName?: string }) {
+  const { t } = useTranslation();
+  const subTitle = dataSourceName
+    ? t(
+        'The data source "{{name}}" used by this block is disabled or unavailable. Enable the data source to display this block.',
+        { name: dataSourceName },
+      )
+    : t('The data source used by this block is disabled or unavailable. Enable the data source to display this block.');
+
+  return (
+    <BlockItemCard>
+      <Result status="403" subTitle={subTitle}></Result>
+    </BlockItemCard>
+  );
+}
+
 export const BlockPlaceholder = () => {
   const { t } = useTranslation();
   const model: BlockModel = useFlowModel();
-  const blockModel = model.context.blockModel;
-  const collection = blockModel.collection;
-  const dataSource = collection.dataSource;
-  const nameValue = useMemo(() => {
-    const dataSourcePrefix = `${t(dataSource.displayName || dataSource.key)} > `;
-    const collectionPrefix = collection ? `${t(collection.title) || collection.name || collection.tableName} ` : '';
-    return `${dataSourcePrefix}${collectionPrefix}`;
-  }, []);
+  const { dataSourceName, isDataSourceUnavailable, nameValue } = useMemo(() => {
+    return getBlockResourceInfo(model, t);
+  }, [model, t]);
 
-  const { actionName } = model.forbidden;
+  const { actionName } = model.forbidden || {};
   const messageValue = useMemo(() => {
     return t(
       `The current user only has the UI configuration permission, but don't have "{{actionName}}" permission for collection "{{name}}"`,
@@ -37,6 +84,14 @@ export const BlockPlaceholder = () => {
       },
     ).replaceAll('&gt;', '>');
   }, [actionName, nameValue, t]);
+
+  if (isDataSourceUnavailable) {
+    if (!model.context.flowSettingsEnabled) {
+      return null;
+    }
+    return <DataSourceUnavailablePlaceholder dataSourceName={dataSourceName} />;
+  }
+
   return (
     <BlockItemCard>
       <Result status="403" subTitle={messageValue}></Result>
@@ -47,12 +102,10 @@ export const BlockPlaceholder = () => {
 export function BlockDeletePlaceholder() {
   const { t } = useTranslation();
   const model: any = useFlowModel();
-  const dataSource = model.dataSource;
-  const nameValue = useMemo(() => {
-    const dataSourcePrefix = `${t(dataSource.displayName || dataSource.key)} > `;
-    const collectionPrefix = model.resource.resourceName;
-    return `${dataSourcePrefix}${collectionPrefix}`;
-  }, []);
+  const { dataSourceName, isDataSourceUnavailable, nameValue } = useMemo(() => {
+    return getBlockResourceInfo(model, t);
+  }, [model, t]);
+
   const messageValue = useMemo(() => {
     return t(`The {{type}} "{{name}}" may have been deleted. Please remove this {{blockType}}.`, {
       type: t('Collection'),
@@ -60,6 +113,14 @@ export function BlockDeletePlaceholder() {
       blockType: t('Block'),
     }).replaceAll('&gt;', '>');
   }, [nameValue, t]);
+
+  if (isDataSourceUnavailable) {
+    if (!model.context.flowSettingsEnabled) {
+      return null;
+    }
+    return <DataSourceUnavailablePlaceholder dataSourceName={dataSourceName} />;
+  }
+
   return (
     <BlockItemCard>
       <Result status="404" subTitle={messageValue}></Result>

package/src/flow/components/placeholders/__tests__/BlockPlaceholder.test.tsx

@@ -0,0 +1,105 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { FlowModelProvider } from '@nocobase/flow-engine';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { BlockDeletePlaceholder } from '../BlockPlaceholder';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, values?: Record<string, string>) => {
+      return key.replace(/\{\{(\w+)\}\}/g, (_, name) => values?.[name] ?? '');
+    },
+  }),
+}));
+
+function createModel(options: {
+  dataSourceKey?: string;
+  collectionName?: string;
+  dataSource?: { key: string; displayName?: string };
+  flowSettingsEnabled?: boolean;
+}) {
+  const model: any = {
+    context: {
+      flowSettingsEnabled: options.flowSettingsEnabled,
+    },
+    dataSource: options.dataSource,
+    resource: {
+      resourceName: options.collectionName,
+    },
+    getResourceSettingsInitParams: () => ({
+      dataSourceKey: options.dataSourceKey,
+      collectionName: options.collectionName,
+    }),
+  };
+  model.context.blockModel = model;
+  return model;
+}
+
+describe('BlockPlaceholder', () => {
+  it('should render data source unavailable placeholder in configuration mode when the configured data source is missing', () => {
+    const model = createModel({
+      dataSourceKey: 'external-mysql',
+      collectionName: 'orders',
+      flowSettingsEnabled: true,
+    });
+
+    render(
+      <FlowModelProvider model={model}>
+        <BlockDeletePlaceholder />
+      </FlowModelProvider>,
+    );
+
+    expect(
+      screen.getByText(
+        'The data source "external-mysql" used by this block is disabled or unavailable. Enable the data source to display this block.',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('should hide data source unavailable block outside configuration mode', () => {
+    const model = createModel({
+      dataSourceKey: 'external-mysql',
+      collectionName: 'orders',
+      flowSettingsEnabled: false,
+    });
+
+    const { container } = render(
+      <FlowModelProvider model={model}>
+        <BlockDeletePlaceholder />
+      </FlowModelProvider>,
+    );
+
+    expect(
+      screen.queryByText(
+        'The data source "external-mysql" used by this block is disabled or unavailable. Enable the data source to display this block.',
+      ),
+    ).not.toBeInTheDocument();
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('should keep collection deleted placeholder when the data source is available', () => {
+    const model = createModel({
+      dataSourceKey: 'external-mysql',
+      collectionName: 'orders',
+      dataSource: { key: 'external-mysql', displayName: 'External MySQL' },
+    });
+
+    render(
+      <FlowModelProvider model={model}>
+        <BlockDeletePlaceholder />
+      </FlowModelProvider>,
+    );
+
+    expect(
+      screen.getByText('The Collection "External MySQL > orders" may have been deleted. Please remove this Block.'),
+    ).toBeInTheDocument();
+  });
+});

package/src/flow/internal/utils/operatorSchemaHelper.ts

@@ -7,24 +7,131 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import React, { type ComponentType, type CSSProperties, type ReactNode } from 'react';
 import { DateFilterDynamicComponent } from '../../models/blocks/filter-form/fields/date-time/components/DateFilterDynamicComponent';
 
+type OperatorMeta = {
+  value?: string;
+  schema?: {
+    'x-component'?: string;
+    'x-component-props'?: Record<string, unknown>;
+  };
+};
+
+type ComponentRegistry = {
+  getComponent?: (name: string) => ComponentType<Record<string, unknown>> | undefined;
+};
+
+type OperatorComponentFieldModel = {
+  props?: Record<string, unknown>;
+  render?: () => ReactNode;
+  __originalRender?: () => ReactNode;
+};
+
+type OperatorComponentRenderOptions = {
+  app?: ComponentRegistry;
+  fieldModel: unknown;
+  operator: string;
+  operators?: OperatorMeta[];
+  propsPriority?: 'field' | 'operator';
+  style?: CSSProperties;
+};
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+
+export function pickOperatorStyle(value: unknown): CSSProperties | undefined {
+  return isRecord(value) ? (value as CSSProperties) : undefined;
+}
+
+function getFieldModel(fieldModel: unknown) {
+  return fieldModel as OperatorComponentFieldModel & {
+    _reactiveWrapperCache?: unknown;
+    setupReactiveRender?: () => void;
+  };
+}
+
+function rewrapReactiveRender(fieldModel: unknown) {
+  const mutableFieldModel = getFieldModel(fieldModel);
+  mutableFieldModel._reactiveWrapperCache = undefined;
+  mutableFieldModel.setupReactiveRender?.();
+}
+
 /**
  * 根据操作符的 schema 定位组件及其 props。
  */
-export function resolveOperatorComponent(app: any, operator: string, operators?: Array<any>) {
+export function resolveOperatorComponent(
+  app: ComponentRegistry | undefined,
+  operator: string,
+  operators?: OperatorMeta[],
+) {
   if (!operators || !Array.isArray(operators)) return null;
   const op = operators.find((item) => item?.value === operator);
   const schema = op?.schema;
   const xComp = schema?.['x-component'];
   if (!xComp) return null;
-  let Comp;
+  let Comp: ComponentType<Record<string, unknown>> | undefined;
   if (xComp === 'DateFilterDynamicComponent') {
-    Comp = DateFilterDynamicComponent;
+    Comp = DateFilterDynamicComponent as ComponentType<Record<string, unknown>>;
   } else {
-    Comp = app?.getComponent?.(xComp as any);
+    Comp = app?.getComponent?.(xComp);
   }
   if (!Comp) return null;
-  const props = (schema?.['x-component-props'] as Record<string, any>) || {};
+  const props = isRecord(schema?.['x-component-props']) ? schema['x-component-props'] : {};
   return { Comp, props };
 }
+
+export function restoreOperatorComponentRender(fieldModel?: unknown) {
+  const mutableFieldModel = getFieldModel(fieldModel);
+  if (!mutableFieldModel || typeof mutableFieldModel.__originalRender !== 'function') {
+    return false;
+  }
+
+  mutableFieldModel.render = mutableFieldModel.__originalRender;
+  rewrapReactiveRender(mutableFieldModel);
+  return true;
+}
+
+export function applyOperatorComponentRender({
+  app,
+  fieldModel,
+  operator,
+  operators,
+  propsPriority = 'field',
+  style,
+}: OperatorComponentRenderOptions) {
+  const mutableFieldModel = getFieldModel(fieldModel);
+  const resolved = resolveOperatorComponent(app, operator, operators);
+  if (!resolved) {
+    restoreOperatorComponentRender(mutableFieldModel);
+    return false;
+  }
+
+  if (!mutableFieldModel.__originalRender && typeof mutableFieldModel.render === 'function') {
+    mutableFieldModel.__originalRender = mutableFieldModel.render;
+  }
+
+  const { Comp, props: operatorProps } = resolved;
+  const operatorStyle = pickOperatorStyle(operatorProps.style);
+
+  mutableFieldModel.render = () => {
+    const fieldProps = mutableFieldModel.props || {};
+    const fieldStyle = pickOperatorStyle(fieldProps.style);
+    const componentProps =
+      propsPriority === 'operator' ? { ...fieldProps, ...operatorProps } : { ...operatorProps, ...fieldProps };
+    const componentStyle =
+      propsPriority === 'operator' ? { ...fieldStyle, ...operatorStyle } : { ...operatorStyle, ...fieldStyle };
+    const mergedStyle = { ...(style || {}), ...componentStyle };
+
+    return React.createElement(Comp, {
+      ...componentProps,
+      ...(Object.keys(mergedStyle).length > 0 ? { style: mergedStyle } : {}),
+      onCompositionStart: null,
+      onCompositionEnd: null,
+    });
+  };
+
+  rewrapReactiveRender(mutableFieldModel);
+  return true;
+}

package/src/flow/models/actions/FilterActionModel.tsx

@@ -75,7 +75,12 @@ export class FilterActionModel extends ActionModel {
                 value={this.props.filterValue || this.props.defaultFilterValue}
                 ctx={this.context}
                 FilterItem={(props) => (
-                  <VariableFilterItem {...props} model={this} ignoreFieldNames={this.getIgnoreFieldNames()} />
+                  <VariableFilterItem
+                    {...props}
+                    model={this}
+                    ignoreFieldNames={this.getIgnoreFieldNames()}
+                    maxAssociationFieldDepth={2}
+                  />
                 )}
               />
               <div style={{ height: 150 }}></div>
@@ -94,7 +99,12 @@ export class FilterActionModel extends ActionModel {
             value={this.props.filterValue || this.props.defaultFilterValue}
             ctx={this.context}
             FilterItem={(props) => (
-              <VariableFilterItem {...props} model={this} ignoreFieldNames={this.getIgnoreFieldNames()} />
+              <VariableFilterItem
+                {...props}
+                model={this}
+                ignoreFieldNames={this.getIgnoreFieldNames()}
+                maxAssociationFieldDepth={2}
+              />
             )}
           />
         }
@@ -187,7 +197,9 @@ FilterActionModel.registerFlow({
             return (
               <FilterGroup
                 value={props.value || {}}
-                FilterItem={(props) => <VariableFilterItem {...props} model={modelInstance} />}
+                FilterItem={(props) => (
+                  <VariableFilterItem {...props} model={modelInstance} maxAssociationFieldDepth={2} />
+                )}
               />
             );
           },

package/src/flow/models/base/AssociationFieldGroupModel.tsx

@@ -11,13 +11,20 @@ import { Collection, DisplayItemModel, FlowModel, FlowModelContext } from '@noco
 
 export class AssociationFieldGroupModel extends FlowModel {
   static itemModelName = 'DetailsItemModel';
+  static maxAssociationFieldDepth = 2;
   static defineChildren(ctx: FlowModelContext) {
     const itemModel = this.itemModelName;
-    const displayAssociationFields = (targetCollection: Collection, fieldPath = '') => {
+    const maxAssociationFieldDepth = this.maxAssociationFieldDepth ?? 2;
+    const displayAssociationFields = (targetCollection: Collection, fieldPath = '', associationDepth = 0) => {
+      if (associationDepth >= maxAssociationFieldDepth) {
+        return [];
+      }
+
       return targetCollection
         .getToOneAssociationFields()
         .map((field) => {
           const fPath = fieldPath ? `${fieldPath}.${field.name}` : field.name;
+          const nextAssociationDepth = associationDepth + 1;
           if (!field.targetCollection) {
             console.error(
               `AssociationFieldGroupModel: target collection ${field.target} not found for field ${field.name}`,
@@ -37,6 +44,12 @@ export class AssociationFieldGroupModel extends FlowModel {
                   children: field.targetCollection
                     .getFields()
                     .map((f) => {
+                      if (
+                        nextAssociationDepth >= maxAssociationFieldDepth &&
+                        (f.isAssociationField?.() || f.target || f.targetCollection)
+                      ) {
+                        return;
+                      }
                       const fp = `${fPath}.${f.name}`;
                       const binding = DisplayItemModel.getDefaultBindingByField(ctx, f, {
                         fallbackToTargetTitleField: true,
@@ -81,9 +94,13 @@ export class AssociationFieldGroupModel extends FlowModel {
                   key: `${fPath}-children-associationField`,
                   label: 'Display association fields',
                   type: 'group',
-                  children: (displayAssociationFields(field.targetCollection, fPath) || []).filter(Boolean),
+                  children: (
+                    displayAssociationFields(field.targetCollection, fPath, nextAssociationDepth) || []
+                  ).filter(Boolean),
                 },
-              ];
+              ].filter((item) => {
+                return item.key !== `${fPath}-children-associationField` || (item.children as any[])?.length > 0;
+              });
             },
           };
         })

package/src/flow/models/base/CollectionBlockModel.tsx

@@ -541,19 +541,23 @@ export class CollectionBlockModel<T = DefaultStructure> extends DataBlockModel<T
 
   protected defaultBlockTitle() {
     const blockLabel = this.translate(this.constructor['meta']?.label || this.constructor.name);
-    const dsName = this.dataSource?.displayName || this.dataSource?.key;
+    const params = this.getResourceSettingsInitParams();
+    const dataSource = this.dataSource;
+    const collection = this.collection;
+    const dsName = dataSource?.displayName || dataSource?.key || params?.dataSourceKey;
     const dsCount = this.context?.dataSourceManager?.getDataSources?.().length || 0;
-    const colTitle = this.collection?.title;
-    if (this.association) {
+    const colTitle = collection?.title || collection?.name || params?.collectionName || '';
+    const association = dataSource ? this.association : undefined;
+    if (association) {
       const resourceName = this.resource.getResourceName();
-      const sourceCollection = this.dataSource.getCollection(resourceName.split('.')[0]);
+      const sourceCollection = dataSource.getCollection(resourceName.split('.')[0]);
       return createDefaultCollectionBlockTitle({
         blockLabel,
         dsName,
         dsCount,
         collectionTitle: colTitle,
-        sourceCollectionTitle: sourceCollection.title,
-        associationTitle: this.association.title,
+        sourceCollectionTitle: sourceCollection?.title,
+        associationTitle: association.title,
       });
     }
     return createDefaultCollectionBlockTitle({ blockLabel, dsName, dsCount, collectionTitle: colTitle });