@nocobase/client-v2 2.2.0-beta.17 → 2.2.0-beta.18

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

@@ -8,12 +8,13 @@
  */
 
 import { useFlowModel } from '@nocobase/flow-engine';
-import { Result } from 'antd';
+import { useMemoizedFn } from 'ahooks';
+import { Button, Result } from 'antd';
 import _ from 'lodash';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BlockItemCard } from '../BlockItemCard';
-import { BlockModel } from '../../models/base/BlockModel';
+import type { BlockModel } from '../../models/base/BlockModel';
 
 function getResourceSettingsInitParams(model: any) {
   if (typeof model?.getResourceSettingsInitParams === 'function') {
@@ -43,26 +44,46 @@ function getBlockResourceInfo(model: any, t: (key: string) => string) {
   const dataSourceName = dataSource ? t(dataSource.displayName || dataSource.key) : dataSourceKey;
   const collectionLabel = collectionName ? `${t(collectionName) || collectionName}` : '';
   const dataSourceLabel = dataSourceName ? `${t(dataSourceName)} > ` : '';
+  const isDataSourceLoadFailed = ['loading-failed', 'reloading-failed'].includes(dataSource?.status);
 
   return {
     dataSourceName,
     nameValue: `${dataSourceLabel}${collectionLabel}`,
-    isDataSourceUnavailable: Boolean(dataSourceKey && !dataSource),
+    isDataSourceLoadFailed,
+    isDataSourceUnavailable: Boolean(dataSourceKey && (!dataSource || isDataSourceLoadFailed)),
   };
 }
 
-function DataSourceUnavailablePlaceholder({ dataSourceName }: { dataSourceName?: string }) {
+function getTemporarilyUnavailableMessage(t: (key: string, options?: Record<string, string>) => string, name?: string) {
+  return name
+    ? t('The data source "{{name}}" is temporarily unavailable. Please try again later or contact an administrator.', {
+        name,
+      })
+    : t('The data source is temporarily unavailable. Please try again later or contact an administrator.');
+}
+
+function DataSourceUnavailablePlaceholder({
+  dataSourceName,
+  isLoadFailed,
+}: {
+  dataSourceName?: string;
+  isLoadFailed?: boolean;
+}) {
   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.');
+  const subTitle = isLoadFailed
+    ? getTemporarilyUnavailableMessage(t, dataSourceName)
+    : 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 role="alert" aria-live="polite">
+      <Result status={isLoadFailed ? 'warning' : '403'} subTitle={subTitle}></Result>
     </BlockItemCard>
   );
 }
@@ -70,7 +91,7 @@ function DataSourceUnavailablePlaceholder({ dataSourceName }: { dataSourceName?:
 export const BlockPlaceholder = () => {
   const { t } = useTranslation();
   const model: BlockModel = useFlowModel();
-  const { dataSourceName, isDataSourceUnavailable, nameValue } = useMemo(() => {
+  const { dataSourceName, isDataSourceLoadFailed, isDataSourceUnavailable, nameValue } = useMemo(() => {
     return getBlockResourceInfo(model, t);
   }, [model, t]);
 
@@ -86,10 +107,7 @@ export const BlockPlaceholder = () => {
   }, [actionName, nameValue, t]);
 
   if (isDataSourceUnavailable) {
-    if (!model.context.flowSettingsEnabled) {
-      return null;
-    }
-    return <DataSourceUnavailablePlaceholder dataSourceName={dataSourceName} />;
+    return <DataSourceUnavailablePlaceholder dataSourceName={dataSourceName} isLoadFailed={isDataSourceLoadFailed} />;
   }
 
   return (
@@ -101,8 +119,8 @@ export const BlockPlaceholder = () => {
 
 export function BlockDeletePlaceholder() {
   const { t } = useTranslation();
-  const model: any = useFlowModel();
-  const { dataSourceName, isDataSourceUnavailable, nameValue } = useMemo(() => {
+  const model: BlockModel = useFlowModel();
+  const { dataSourceName, isDataSourceLoadFailed, isDataSourceUnavailable, nameValue } = useMemo(() => {
     return getBlockResourceInfo(model, t);
   }, [model, t]);
 
@@ -115,10 +133,7 @@ export function BlockDeletePlaceholder() {
   }, [nameValue, t]);
 
   if (isDataSourceUnavailable) {
-    if (!model.context.flowSettingsEnabled) {
-      return null;
-    }
-    return <DataSourceUnavailablePlaceholder dataSourceName={dataSourceName} />;
+    return <DataSourceUnavailablePlaceholder dataSourceName={dataSourceName} isLoadFailed={isDataSourceLoadFailed} />;
   }
 
   return (
@@ -127,3 +142,35 @@ export function BlockDeletePlaceholder() {
     </BlockItemCard>
   );
 }
+
+type RefreshableBlockModel = BlockModel & {
+  refresh?: () => Promise<unknown> | unknown;
+};
+
+export function BlockResourceErrorPlaceholder() {
+  const { t } = useTranslation();
+  const model = useFlowModel() as RefreshableBlockModel;
+  const { dataSourceName } = useMemo(() => getBlockResourceInfo(model, t), [model, t]);
+  const handleRetry = useMemoizedFn(async () => {
+    try {
+      await model.refresh?.();
+    } catch {
+      // The resource retains the latest error and keeps this placeholder visible.
+    }
+  });
+
+  return (
+    <BlockItemCard ref={model.context.ref} {...model.decoratorProps} role="alert" aria-live="polite">
+      <Result
+        status="warning"
+        title={t('Data loading failed')}
+        subTitle={getTemporarilyUnavailableMessage(t, dataSourceName)}
+        extra={
+          <Button type="primary" onClick={handleRetry}>
+            {t('Try again')}
+          </Button>
+        }
+      />
+    </BlockItemCard>
+  );
+}

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

@@ -8,9 +8,9 @@
  */
 
 import { FlowModelProvider } from '@nocobase/flow-engine';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
-import { BlockDeletePlaceholder } from '../BlockPlaceholder';
+import { BlockDeletePlaceholder, BlockResourceErrorPlaceholder } from '../BlockPlaceholder';
 
 vi.mock('react-i18next', () => ({
   useTranslation: () => ({
@@ -23,8 +23,9 @@ vi.mock('react-i18next', () => ({
 function createModel(options: {
   dataSourceKey?: string;
   collectionName?: string;
-  dataSource?: { key: string; displayName?: string };
+  dataSource?: { key: string; displayName?: string; status?: string };
   flowSettingsEnabled?: boolean;
+  refresh?: () => Promise<unknown>;
 }) {
   const model: any = {
     context: {
@@ -38,6 +39,7 @@ function createModel(options: {
       dataSourceKey: options.dataSourceKey,
       collectionName: options.collectionName,
     }),
+    refresh: options.refresh,
   };
   model.context.blockModel = model;
   return model;
@@ -64,25 +66,47 @@ describe('BlockPlaceholder', () => {
     ).toBeInTheDocument();
   });
 
-  it('should hide data source unavailable block outside configuration mode', () => {
+  it('should render data source unavailable placeholder outside configuration mode', () => {
     const model = createModel({
       dataSourceKey: 'external-mysql',
       collectionName: 'orders',
       flowSettingsEnabled: false,
     });
 
-    const { container } = render(
+    render(
       <FlowModelProvider model={model}>
         <BlockDeletePlaceholder />
       </FlowModelProvider>,
     );
 
     expect(
-      screen.queryByText(
+      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 treat a failed data source as unavailable', () => {
+    const model = createModel({
+      dataSourceKey: 'external-mysql',
+      collectionName: 'orders',
+      dataSource: { key: 'external-mysql', displayName: 'External MySQL', status: 'loading-failed' },
+    });
+
+    render(
+      <FlowModelProvider model={model}>
+        <BlockDeletePlaceholder />
+      </FlowModelProvider>,
+    );
+
+    expect(
+      screen.getByText(
+        'The data source "External MySQL" is temporarily unavailable. Please try again later or contact an administrator.',
+      ),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText('The Collection "External MySQL > orders" may have been deleted. Please remove this Block.'),
     ).not.toBeInTheDocument();
-    expect(container).toBeEmptyDOMElement();
   });
 
   it('should keep collection deleted placeholder when the data source is available', () => {
@@ -102,4 +126,30 @@ describe('BlockPlaceholder', () => {
       screen.getByText('The Collection "External MySQL > orders" may have been deleted. Please remove this Block.'),
     ).toBeInTheDocument();
   });
+
+  it('should render a retryable resource error placeholder', async () => {
+    const refresh = vi.fn().mockRejectedValue(new Error('still unavailable'));
+    const model = createModel({
+      dataSourceKey: 'external-mysql',
+      collectionName: 'orders',
+      dataSource: { key: 'external-mysql', displayName: 'External MySQL' },
+      refresh,
+    });
+
+    render(
+      <FlowModelProvider model={model}>
+        <BlockResourceErrorPlaceholder />
+      </FlowModelProvider>,
+    );
+
+    expect(screen.getByText('Data loading failed')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'The data source "External MySQL" is temporarily unavailable. Please try again later or contact an administrator.',
+      ),
+    ).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Try again' }));
+    await waitFor(() => expect(refresh).toHaveBeenCalledTimes(1));
+  });
 });

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

@@ -20,7 +20,7 @@ type OperatorMeta = {
 };
 
 type ComponentRegistry = {
-  getComponent?: (name: string) => ComponentType<Record<string, unknown>> | undefined;
+  getComponent?: (name: string, isShowError?: boolean) => ComponentType<Record<string, unknown>> | undefined;
 };
 
 type OperatorComponentFieldModel = {
@@ -67,6 +67,7 @@ export function resolveOperatorComponent(
   app: ComponentRegistry | undefined,
   operator: string,
   operators?: OperatorMeta[],
+  isShowError = true,
 ) {
   if (!operators || !Array.isArray(operators)) return null;
   const op = operators.find((item) => item?.value === operator);
@@ -77,7 +78,7 @@ export function resolveOperatorComponent(
   if (xComp === 'DateFilterDynamicComponent') {
     Comp = DateFilterDynamicComponent as ComponentType<Record<string, unknown>>;
   } else {
-    Comp = app?.getComponent?.(xComp);
+    Comp = isShowError ? app?.getComponent?.(xComp) : app?.getComponent?.(xComp, false);
   }
   if (!Comp) return null;
   const props = isRecord(schema?.['x-component-props']) ? schema['x-component-props'] : {};

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

@@ -16,10 +16,13 @@ import {
   tExpr,
   FlowModelContext,
   MultiRecordResource,
+  ResourceError,
   SingleRecordResource,
 } from '@nocobase/flow-engine';
 import type { FlowEngine } from '@nocobase/flow-engine';
 import _ from 'lodash';
+import React from 'react';
+import { BlockResourceErrorPlaceholder } from '../../components/placeholders/BlockPlaceholder';
 import { createDefaultCollectionBlockTitle } from '../../utils/blockUtils';
 import { areCapabilitiesSupported, getBlockCapabilityNamesFromModelClass } from '../../utils/actionCapability';
 import { FilterManager } from '../blocks/filter-manager/FilterManager';
@@ -548,6 +551,18 @@ export class CollectionBlockModel<T = DefaultStructure> extends DataBlockModel<T
     return this.resource.refresh();
   }
 
+  isExternalDataSource() {
+    const dataSourceKey = this.getResourceSettingsInitParams()?.dataSourceKey;
+    return Boolean(dataSourceKey && dataSourceKey !== 'main');
+  }
+
+  render() {
+    if (this.isExternalDataSource() && this.collection && this.resource?.getError()) {
+      return <BlockResourceErrorPlaceholder />;
+    }
+    return super.render();
+  }
+
   protected defaultBlockTitle() {
     const blockLabel = this.translate(this.constructor['meta']?.label || this.constructor.name);
     const params = this.getResourceSettingsInitParams();
@@ -706,7 +721,14 @@ CollectionBlockModel.registerFlow({
         if (ctx.model.isManualRefresh) {
           ctx.model.resource.loading = false;
         } else {
-          await ctx.model.resource.refresh();
+          try {
+            await resource.refresh();
+          } catch (error) {
+            if (blockModel.isExternalDataSource() && error instanceof ResourceError && resource.getError() === error) {
+              return;
+            }
+            throw error;
+          }
         }
       },
     },

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

@@ -7,9 +7,10 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { FlowEngine, MultiRecordResource } from '@nocobase/flow-engine';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { FlowEngine, FlowRuntimeContext, MultiRecordResource, ResourceError } from '@nocobase/flow-engine';
 import '../../../index';
+import { BlockResourceErrorPlaceholder } from '../../../components/placeholders/BlockPlaceholder';
 import { CollectionBlockModel } from '../CollectionBlockModel';
 import { dataLoadingMode } from '../../../actions/dataLoadingMode';
 
@@ -19,13 +20,16 @@ class InitialBeforeRenderTestBlockModel extends CollectionBlockModel {
   }
 }
 
-function setupModel() {
+function setupModel(dataSourceKey = 'main') {
   const engine = new FlowEngine();
   engine.context.defineProperty('location', { value: { search: '' } as any });
   engine.registerActions({ dataLoadingMode });
   engine.registerModels({ InitialBeforeRenderTestBlockModel });
 
-  const ds = engine.dataSourceManager.getDataSource('main');
+  if (!engine.dataSourceManager.getDataSource(dataSourceKey)) {
+    engine.dataSourceManager.addDataSource({ key: dataSourceKey });
+  }
+  const ds = engine.dataSourceManager.getDataSource(dataSourceKey);
   ds.addCollection({
     name: 'users',
     filterTargetKey: 'id',
@@ -41,7 +45,7 @@ function setupModel() {
     stepParams: {
       resourceSettings: {
         init: {
-          dataSourceKey: 'main',
+          dataSourceKey,
           collectionName: 'users',
         },
       },
@@ -88,16 +92,21 @@ function setupModelWithManualMode() {
   return { model, resource: model.resource as MultiRecordResource };
 }
 
-describe('CollectionBlockModel initial beforeRender refresh', () => {
-  beforeEach(() => {
-    vi.useFakeTimers();
-  });
+async function runRefreshStep(model: InitialBeforeRenderTestBlockModel) {
+  const handler = model.getFlow('refreshSettings')?.getStep('refresh')?.serialize().handler;
+  if (!handler) {
+    throw new Error('refreshSettings.refresh handler is not registered');
+  }
+  await handler(new FlowRuntimeContext(model, 'refreshSettings'), {});
+}
 
+describe('CollectionBlockModel initial beforeRender refresh', () => {
   afterEach(() => {
     vi.useRealTimers();
   });
 
   it('only performs one actual data request on first beforeRender', async () => {
+    vi.useFakeTimers();
     const { model, resource } = setupModel();
     const runActionSpy = vi.spyOn(resource, 'runAction').mockResolvedValue({
       data: [{ id: 1, name: 'Alice' }],
@@ -112,7 +121,54 @@ describe('CollectionBlockModel initial beforeRender refresh', () => {
     expect(runActionSpy).toHaveBeenCalledTimes(1);
   });
 
+  it('keeps resource request failures in the block error state', async () => {
+    const { model, resource } = setupModel('external');
+    const resourceError = new ResourceError({
+      response: {
+        data: {
+          errors: [{ code: 'DATA_SOURCE_UNAVAILABLE', message: 'Data source unavailable' }],
+        },
+      },
+    });
+    vi.spyOn(resource, 'refresh').mockImplementation(async () => {
+      resource.setError(resourceError);
+      throw resourceError;
+    });
+
+    await runRefreshStep(model);
+
+    expect(resource.getError()).toBe(resourceError);
+    expect(CollectionBlockModel.prototype.render.call(model)).toMatchObject({
+      type: BlockResourceErrorPlaceholder,
+    });
+  });
+
+  it('continues to throw resource request failures from the main data source', async () => {
+    const { model, resource } = setupModel();
+    const resourceError = new ResourceError({
+      response: {
+        data: {
+          errors: [{ code: 'UNKNOWN_ERROR', message: 'Main data source failed' }],
+        },
+      },
+    });
+    vi.spyOn(resource, 'refresh').mockImplementation(async () => {
+      resource.setError(resourceError);
+      throw resourceError;
+    });
+
+    await expect(runRefreshStep(model)).rejects.toBe(resourceError);
+  });
+
+  it('continues to throw non-resource errors from beforeRender', async () => {
+    const { model, resource } = setupModel('external');
+    vi.spyOn(resource, 'refresh').mockRejectedValue(new Error('beforeRender bug'));
+
+    await expect(runRefreshStep(model)).rejects.toThrow('beforeRender bug');
+  });
+
   it('respects saved manual mode and skips initial request when filters are empty', async () => {
+    vi.useFakeTimers();
     const { model, resource } = setupModelWithManualMode();
     const runActionSpy = vi.spyOn(resource, 'runAction').mockResolvedValue({
       data: [{ id: 1, name: 'Alice' }],

package/src/flow/models/blocks/details/DetailsBlockModel.tsx

@@ -20,6 +20,7 @@ import {
   SingleRecordResource,
   createCurrentRecordMetaFactory,
   createRecordResolveOnServerWithLocal,
+  observer,
   tExpr,
 } from '@nocobase/flow-engine';
 import { Pagination, Space } from 'antd';
@@ -154,8 +155,8 @@ export class DetailsBlockModel extends CollectionBlockModel<{
           simple
           pageSize={1}
           showSizeChanger={false}
-          defaultCurrent={resource.getPage()}
-          total={resource.getTotalPage()}
+          current={resource.getPage()}
+          total={resource.getCount()}
           onChange={this.handlePageChange}
           style={{ display: 'inline-block' }}
         />
@@ -226,6 +227,8 @@ export class DetailsBlockModel extends CollectionBlockModel<{
   }
 }
 
+export const DetailsPagination = observer(({ model }: { model: DetailsBlockModel }) => model.renderPagination());
+
 const DetailsBlockContent = ({
   model,
   gridModel,
@@ -297,7 +300,9 @@ const DetailsBlockContent = ({
           model={gridModel}
           showFlowSettings={false}
         />
-        <div ref={paginationRef}>{model.renderPagination()}</div>
+        <div ref={paginationRef}>
+          <DetailsPagination model={model} />
+        </div>
       </div>
     </FormComponent>
   );

package/src/flow/models/blocks/details/__tests__/DetailsBlockModel.initialPaginationChangeRefresh.test.ts

@@ -7,10 +7,12 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import { act, render, screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { FlowEngine, MultiRecordResource, SingleRecordResource } from '@nocobase/flow-engine';
+import React from 'react';
 import '../../../../index';
-import { DetailsBlockModel } from '../DetailsBlockModel';
+import { DetailsBlockModel, DetailsPagination } from '../DetailsBlockModel';
 import { DetailsGridModel } from '../DetailsGridModel';
 
 function setupDetailsBlockModel(options?: { filterByTk?: string | number }) {
@@ -93,6 +95,35 @@ describe('DetailsBlockModel initial pagination refresh', () => {
     expect(dispatchSpy.mock.calls.filter(([eventName]) => eventName === 'paginationChange')).toHaveLength(1);
   });
 
+  it('renders pagination from the current count and page after filtering', () => {
+    const { model, resource } = setupDetailsBlockModel();
+    resource.setData([{ id: 3, name: 'CC', title: 'filtered' }] as any);
+    resource.setMeta({ count: 7, page: 3, pageSize: 1, totalPage: 20 });
+
+    const paginationContainer = model.renderPagination() as any;
+    const pagination = paginationContainer.props.children;
+
+    expect(pagination.props.total).toBe(7);
+    expect(pagination.props.current).toBe(3);
+    expect(pagination.props.defaultCurrent).toBeUndefined();
+  });
+
+  it('updates the rendered pagination when filtering changes only resource metadata', () => {
+    const { model, resource } = setupDetailsBlockModel();
+    resource.setData([{ id: 1, name: 'AA', title: 'foo' }] as any);
+    resource.setMeta({ count: 7, page: 1, pageSize: 1, totalPage: 7 });
+
+    render(React.createElement(DetailsPagination, { model }));
+
+    expect(screen.getByRole('list')).toBeInTheDocument();
+
+    act(() => {
+      resource.setMeta({ count: 1, page: 1, pageSize: 1, totalPage: 1 });
+    });
+
+    expect(screen.queryByRole('list')).not.toBeInTheDocument();
+  });
+
   it('uses a real single-record details model and does not emit root paginationChange on initial render', async () => {
     const { model, resource } = setupDetailsBlockModel({ filterByTk: 1 });
     expect(resource).toBeInstanceOf(SingleRecordResource);

package/src/flow/models/blocks/filter-form/FilterFormGridModel.tsx

@@ -59,11 +59,42 @@ export class FilterFormGridModel extends GridModel {
 
   readonly loading = observable.ref(false);
 
-  private getAssociationFilterTargetKey(field: any) {
-    const filterTargetKey = field?.targetCollection?.filterTargetKey;
+  private isRecordSelectFilterField(subModel: FilterFormItemModel) {
+    const fieldModel = subModel.subModels?.field;
+    if (!fieldModel) {
+      return true;
+    }
+
+    const RecordSelectModel = this.flowEngine.getModelClass('FilterFormRecordSelectFieldModel');
+    if (!RecordSelectModel) {
+      return fieldModel.constructor?.name === 'FilterFormRecordSelectFieldModel';
+    }
+
+    return fieldModel instanceof RecordSelectModel;
+  }
+
+  private getAssociationFilterTargetKey(field: any, subModel: FilterFormItemModel) {
+    const normalizeKey = (key: any) => {
+      if (Array.isArray(key)) {
+        return key[0];
+      }
+      return key;
+    };
+
+    const fieldModelValueKey = normalizeKey(subModel.subModels?.field?.props?.fieldNames?.value);
+    if (fieldModelValueKey) {
+      return fieldModelValueKey;
+    }
+
+    const filterTargetKey = normalizeKey(field?.targetCollection?.filterTargetKey);
+    const fieldTargetKey = normalizeKey(field?.targetKey);
+
+    if (filterTargetKey && filterTargetKey !== 'id') {
+      return filterTargetKey;
+    }
 
-    if (Array.isArray(filterTargetKey)) {
-      return filterTargetKey[0] || 'id';
+    if (!this.isRecordSelectFilterField(subModel) && fieldTargetKey) {
+      return fieldTargetKey;
     }
 
     return filterTargetKey || 'id';
@@ -370,7 +401,7 @@ export class FilterFormGridModel extends GridModel {
           if (field?.target) {
             return {
               targetId: model.uid,
-              filterPaths: [`${fieldPath}.${this.getAssociationFilterTargetKey(field)}`],
+              filterPaths: [`${fieldPath}.${this.getAssociationFilterTargetKey(field, subModel)}`],
             };
           }
         }