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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.1.0-beta.45",
+  "version": "2.1.0-beta.46",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -27,11 +27,11 @@
     "@formily/antd-v5": "1.2.3",
     "@formily/react": "^2.2.27",
     "@formily/shared": "^2.2.27",
-    "@nocobase/evaluators": "2.1.0-beta.45",
-    "@nocobase/flow-engine": "2.1.0-beta.45",
-    "@nocobase/sdk": "2.1.0-beta.45",
-    "@nocobase/shared": "2.1.0-beta.45",
-    "@nocobase/utils": "2.1.0-beta.45",
+    "@nocobase/evaluators": "2.1.0-beta.46",
+    "@nocobase/flow-engine": "2.1.0-beta.46",
+    "@nocobase/sdk": "2.1.0-beta.46",
+    "@nocobase/shared": "2.1.0-beta.46",
+    "@nocobase/utils": "2.1.0-beta.46",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
     "antd-style": "3.7.1",
@@ -45,5 +45,5 @@
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "42587115fc34c3eb01ef2b2549f1c998e5708318"
+  "gitHead": "91fd3ab238a5ff58735bbfca04a8cb05d233b0af"
 }

package/src/__tests__/browserChecker.test.ts

@@ -100,4 +100,13 @@ describe.each(browserCheckerCases)('$label', ({ scriptPath }) => {
 
     expect(replace).not.toHaveBeenCalled();
   });
+
+  it('does not redirect the root path when the normalized basename is also root', () => {
+    const replace = executeBrowserChecker(scriptPath, {
+      pathname: '/',
+      publicPath: '/',
+    });
+
+    expect(replace).not.toHaveBeenCalled();
+  });
 });

package/src/flow/actions/__tests__/sortingRules.test.ts

@@ -0,0 +1,22 @@
+/**
+ * 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 { sortingRule } from '../sortingRules';
+
+describe('sortingRule', () => {
+  it('should not throw when the block collection is unavailable', () => {
+    const schema = sortingRule.uiSchema({
+      blockModel: {
+        collection: undefined,
+      },
+    } as any);
+
+    expect(schema.sort.items.properties.space.properties.field.enum).toEqual([]);
+  });
+});

package/src/flow/actions/sortingRules.tsx

@@ -33,9 +33,8 @@ export const sortingRule = defineAction({
   name: 'sortingRule',
   title: tExpr('Default sorting'),
   uiSchema: (ctx) => {
-    const fields = ctx.collectionField?.targetCollection
-      ? ctx.collectionField.targetCollection.getFields()
-      : ctx.blockModel.collection.getFields();
+    const collection = ctx.collectionField?.targetCollection || ctx.blockModel?.collection;
+    const fields = typeof collection?.getFields === 'function' ? collection.getFields() : [];
     const sortFields = getSortFields(fields);
     return {
       sort: {
@@ -109,7 +108,7 @@ export const sortingRule = defineAction({
     };
   },
   async handler(ctx, params) {
-    const sortArr = params.sort.map((item) => {
+    const sortArr = (params.sort || []).map((item) => {
       return item.direction === 'desc' ? `-${item.field}` : item.field;
     });
     // @ts-ignore

package/src/flow/admin-shell/admin-layout/AdminLayoutMenuFlowUtils.ts

@@ -25,6 +25,7 @@ const buildLinkSettingSchema = (t: (title: any) => any) => ({
     'x-decorator': 'FormItem',
     'x-component': 'FlowSettingsVariableTextArea',
     'x-component-props': {
+      placeholder: t('https://www.example.com'),
       rows: 1,
       maxRows: 1,
     },

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

package/src/flow/models/base/__tests__/CollectionBlockModel.title.test.ts

@@ -7,8 +7,17 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { DataSource, FlowEngine } from '@nocobase/flow-engine';
+import { DataSource, FlowEngine, MultiRecordResource } from '@nocobase/flow-engine';
 import { createDefaultCollectionBlockTitle } from '../../../utils/blockUtils';
+import { CollectionBlockModel } from '../CollectionBlockModel';
+
+class MissingCollectionTitleBlockModel extends CollectionBlockModel {
+  static meta = { label: 'Table' };
+
+  createResource(ctx: any, _params: any) {
+    return ctx.createResource(MultiRecordResource);
+  }
+}
 
 function normalizeTitle(s: string) {
   return (s || '').replace(/\s+/g, ' ').trim();
@@ -92,4 +101,27 @@ describe('CollectionBlockModel default title rule', () => {
     expect(t).toContain('Table:');
     expect(t).toContain('Main > Users > Tags (Tags)');
   });
+
+  it('uses resource settings as title fallback when the configured data source is unavailable', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ MissingCollectionTitleBlockModel });
+    const model = engine.createModel<MissingCollectionTitleBlockModel>({
+      uid: 'missing-data-source-title-block',
+      use: 'MissingCollectionTitleBlockModel',
+      stepParams: {
+        resourceSettings: {
+          init: {
+            dataSourceKey: 'mysql',
+            collectionName: 'orders',
+          },
+        },
+      },
+    });
+
+    const title = normalizeTitle(model.title);
+
+    expect(title).toContain('Table:');
+    expect(title).toContain('orders');
+    expect(title).not.toContain('undefined');
+  });
 });