@nocobase/client-v2 2.3.0-alpha.1 → 2.3.0-beta.11

package/src/flow/components/filter/VariableFilterItem.tsx

@@ -34,6 +34,8 @@ const { DateFilterDynamicComponent: DateFilterDynamicComponentLazy } = lazy(
   'DateFilterDynamicComponent',
 );
 
+const fallbackInputComponents = new Set(['Input', 'Input.URL', 'NanoIDInput', 'DatePicker']);
+
 // 简化的本地辅助：按需获取 ctx.collection 的字段树（MetaTreeNode[]）
 async function buildCollectionLeftMetaTreeLocal(ctx: any): Promise<MetaTreeNode[]> {
   const resolve = async (sub: any): Promise<MetaTreeNode[]> => {
@@ -137,9 +139,16 @@ export interface VariableFilterItemProps {
   rightVariableConverters?: Pick<Converters, 'resolvePathFromValue' | 'resolveValueFromPath'>;
   ignoreFieldNames?: string[];
   maxAssociationFieldDepth?: number;
+  /**
+   * 右侧变量树的关联层级上限，默认与 `maxAssociationFieldDepth` 一致。
+   * 传 `null` 表示不限制：右侧是变量树而非集合字段树，其深度可能已由调用方约束
+   * （例如工作流的变量树由触发器的「预加载关系数据」决定），此时再按左侧的层级上限裁剪
+   * 会让已配置好的深层变量选不到。
+   */
+  rightMaxAssociationFieldDepth?: number | null;
 }
 
-function limitMetaTreeIfNeeded(nodes: MetaTreeNode[], maxAssociationFieldDepth?: number) {
+function limitMetaTreeIfNeeded(nodes: MetaTreeNode[], maxAssociationFieldDepth?: number | null) {
   if (typeof maxAssociationFieldDepth !== 'number') {
     return nodes;
   }
@@ -276,9 +285,9 @@ function createStaticInputRenderer(
           onChange={(v: unknown) => onChange?.(v as VariableFilterItemValue['value'])}
         />
       );
-    // 未内置的 x-component：尝试从 app 解析组件
+    // 未直接处理的 x-component：尝试从 app 解析组件，可由筛选器接管的过渡组件查找失败时静默回退到 Input
     if (xComp && app?.getComponent) {
-      const Comp = app.getComponent(xComp as any);
+      const Comp = app.getComponent(xComp, !fallbackInputComponents.has(xComp));
       if (Comp) {
         return (
           <Comp
@@ -365,6 +374,7 @@ export const VariableFilterItem: React.FC<VariableFilterItemProps> = observer(
     rightVariableConverters,
     ignoreFieldNames,
     maxAssociationFieldDepth,
+    rightMaxAssociationFieldDepth = maxAssociationFieldDepth,
   }) => {
     // 使用 View 上下文，确保可访问 ctx.view 的异步子树
     const ctx = useFlowViewContext();
@@ -595,8 +605,14 @@ export const VariableFilterItem: React.FC<VariableFilterItemProps> = observer(
 
     const renderRightValueComponent = useCallback(() => {
       // 文本类多关键词：优先使用操作符 schema 声明的组件
-      const resolved = resolveOperatorComponent(model.context.app, operator, operatorMetaList);
       const supportKeyword = operator === '$in' || operator === '$notIn';
+      const operatorComponent = currentOpMeta?.schema?.['x-component'] as string | undefined;
+      const isLocallyRenderedComponent =
+        operatorComponent === 'Select' ||
+        (typeof operatorComponent === 'string' && fallbackInputComponents.has(operatorComponent));
+      const resolved = supportKeyword
+        ? resolveOperatorComponent(model.context.app, operator, operatorMetaList, !isLocallyRenderedComponent)
+        : null;
       if (resolved && supportKeyword) {
         const { Comp, props: xProps } = resolved;
         const nextProps = { ...xProps };
@@ -642,6 +658,7 @@ export const VariableFilterItem: React.FC<VariableFilterItemProps> = observer(
       disabled,
       operator,
       operatorMetaList,
+      currentOpMeta,
       rightValue,
       staticInputRenderer,
       model.context.app,
@@ -676,10 +693,10 @@ export const VariableFilterItem: React.FC<VariableFilterItemProps> = observer(
             { title: t('Null'), name: 'null', type: 'object', paths: ['null'], render: NullComponent },
             ...nodes,
           ],
-          maxAssociationFieldDepth,
+          rightMaxAssociationFieldDepth,
         );
       };
-    }, [rightMetaTree, ctx, staticInputRenderer, NullComponent, t, maxAssociationFieldDepth]);
+    }, [rightMetaTree, ctx, staticInputRenderer, NullComponent, t, rightMaxAssociationFieldDepth]);
 
     // 当启用右侧变量输入时，构造 VariableInput 的 converters：
     // - 变量模式：返回 null 让 VariableInput 渲染 VariableTag

package/src/flow/components/filter/__tests__/VariableFilterItem.rightMetaTree.test.tsx

@@ -0,0 +1,158 @@
+/**
+ * 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 React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import type { MetaTreeNode } from '@nocobase/flow-engine';
+import { FlowEngine, FlowModel } from '@nocobase/flow-engine';
+import { VariableFilterItem } from '../VariableFilterItem';
+import { createMockFlowApp, TestCollectionFieldInterface } from '../../../__tests__/helpers/mockFlowApp';
+
+const captured = vi.hoisted(() => ({ metaTrees: [] as any[] }));
+
+vi.mock('@nocobase/flow-engine', async () => {
+  const actual = await vi.importActual<any>('@nocobase/flow-engine');
+  const MockVariableInput = ({ onChange, metaTree }: any) => {
+    if (metaTree) {
+      captured.metaTrees.push(metaTree);
+    }
+    return (
+      <button
+        type="button"
+        data-testid="variable-input"
+        onClick={() =>
+          onChange?.('title', {
+            interface: 'input',
+            uiSchema: { 'x-component': 'Input' },
+            paths: ['collection', 'title'],
+          })
+        }
+      >
+        mock-variable-input
+      </button>
+    );
+  };
+  return { ...actual, VariableInput: MockVariableInput };
+});
+
+// $context.data (not an association) -> category (m2o) -> book (m2o) -> createdBy (not counted) -> departments (m2m).
+// Mirrors a workflow collection-event trigger that preloads `category.book.createdBy.departments`.
+function buildRightMetaTree(): MetaTreeNode[] {
+  const departments: MetaTreeNode = {
+    name: 'departments',
+    title: 'Departments',
+    type: 'object',
+    interface: 'm2m',
+    paths: ['$context', 'data', 'category', 'book', 'createdBy', 'departments'],
+  };
+  const createdBy: MetaTreeNode = {
+    name: 'createdBy',
+    title: 'Created by',
+    type: 'object',
+    interface: 'createdBy',
+    paths: ['$context', 'data', 'category', 'book', 'createdBy'],
+    children: async () => [departments],
+  };
+  const book: MetaTreeNode = {
+    name: 'book',
+    title: 'Book',
+    type: 'object',
+    interface: 'obo',
+    paths: ['$context', 'data', 'category', 'book'],
+    children: async () => [createdBy],
+  };
+  const category: MetaTreeNode = {
+    name: 'category',
+    title: 'Category',
+    type: 'object',
+    interface: 'm2o',
+    paths: ['$context', 'data', 'category'],
+    children: async () => [book],
+  };
+  const data: MetaTreeNode = {
+    name: 'data',
+    title: 'Trigger data',
+    type: 'object',
+    paths: ['$context', 'data'],
+    children: async () => [category],
+  };
+  return [{ name: '$context', title: 'Trigger variables', type: '', paths: ['$context'], children: [data] }];
+}
+
+async function resolveChildren(node: MetaTreeNode | undefined) {
+  const children = node?.children;
+  if (typeof children === 'function') {
+    return (await (children as () => Promise<MetaTreeNode[]>)()) ?? [];
+  }
+  return Array.isArray(children) ? children : [];
+}
+
+async function walkToCreatedByChildren(metaTree: any) {
+  const roots: MetaTreeNode[] = typeof metaTree === 'function' ? await metaTree() : metaTree;
+  const context = roots.find((node) => node.name === '$context');
+  const data = (await resolveChildren(context)).find((node) => node.name === 'data');
+  const category = (await resolveChildren(data)).find((node) => node.name === 'category');
+  const book = (await resolveChildren(category)).find((node) => node.name === 'book');
+  const createdBy = (await resolveChildren(book)).find((node) => node.name === 'createdBy');
+  return (await resolveChildren(createdBy)).map((node) => node.name);
+}
+
+function createModel() {
+  const engine = new FlowEngine();
+  const model = new FlowModel({ uid: 'm-variable-filter-right', flowEngine: engine });
+  const app = createMockFlowApp();
+  model.context.defineProperty('app', { value: app });
+
+  class InputInterface extends TestCollectionFieldInterface {
+    name = 'input';
+    group = 'basic';
+    filterable = { operators: [{ value: '$eq', label: 'Equals' }] };
+  }
+  app.addFieldInterfaces([InputInterface]);
+
+  const ds = engine.dataSourceManager.getDataSource('main');
+  ds.addCollection({
+    name: 'posts',
+    fields: [{ name: 'title', type: 'string', interface: 'input', uiSchema: { 'x-component': 'Input' } }],
+  });
+  model.context.defineProperty('collection', { get: () => ds.getCollection('posts') });
+
+  return model as any;
+}
+
+function renderItem(props: Record<string, unknown>) {
+  const value = { path: 'title', operator: '$eq', value: '' } as any;
+  const model = createModel();
+  render(
+    <VariableFilterItem value={value} model={model} rightAsVariable rightMetaTree={buildRightMetaTree()} {...props} />,
+  );
+  fireEvent.click(screen.getAllByTestId('variable-input')[0]);
+  return captured.metaTrees.at(-1);
+}
+
+describe('VariableFilterItem right-side association depth', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+    captured.metaTrees = [];
+  });
+
+  it('applies maxAssociationFieldDepth to the right tree by default', async () => {
+    const metaTree = renderItem({ maxAssociationFieldDepth: 2 });
+    // `departments` is the third association down the path, so the default cap removes it.
+    expect(await walkToCreatedByChildren(metaTree)).toEqual([]);
+  });
+
+  // The right side is a variable tree whose depth is decided by its provider (in workflow, by the trigger's
+  // "Preload associations" config). Capping it by the left-side field-picker limit hid preloaded variables.
+  it('leaves the right tree untouched when rightMaxAssociationFieldDepth is null', async () => {
+    const metaTree = renderItem({ maxAssociationFieldDepth: 2, rightMaxAssociationFieldDepth: null });
+    expect(await walkToCreatedByChildren(metaTree)).toEqual(['departments']);
+  });
+});

package/src/flow/components/filter/__tests__/VariableFilterItem.test.tsx

@@ -47,6 +47,10 @@ vi.mock('@nocobase/flow-engine', async () => {
   return { ...actual, VariableInput: MockVariableInput };
 });
 
+vi.mock('../../../models/blocks/filter-form/fields/date-time/components/DateFilterDynamicComponent', () => ({
+  DateFilterDynamicComponent: () => <div data-testid="date-filter-dynamic-component" />,
+}));
+
 const getRenderedSelectTexts = (root: ParentNode = document.body) =>
   Array.from(root.querySelectorAll('.ant-select-selection-item')).map((node) => (node.textContent || '').trim());
 
@@ -158,6 +162,127 @@ describe('VariableFilterItem', () => {
     expect(value.value).toBe('abc');
   });
 
+  it.each([
+    { operator: '$includes', xComponent: 'Input' },
+    { operator: '$eq', xComponent: 'Select' },
+    { operator: '$in', xComponent: 'Select' },
+  ])('uses a silent app registry lookup for the local $xComponent control', async ({ operator, xComponent }) => {
+    const value = observable({ path: '', operator: '', value: '' }) as VariableFilterItemValue;
+    const model = CreateModel();
+    const app = model.context.app as unknown as ReturnType<typeof createMockFlowApp>;
+    const getComponent = vi.spyOn(app, 'getComponent');
+
+    (globalThis as { __TEST_PATH__?: string }).__TEST_PATH__ = 'status';
+    (globalThis as { __TEST_META__?: MetaTreeNode }).__TEST_META__ = {
+      interface: 'input',
+      uiSchema: {
+        'x-component': xComponent,
+        enum: [{ label: 'Draft', value: 'draft' }],
+        'x-filter-operators': [
+          {
+            value: operator,
+            label: 'Operator',
+            selected: true,
+            schema: {
+              'x-component': xComponent,
+              'x-component-props': xComponent === 'Select' ? { mode: operator === '$in' ? 'tags' : null } : {},
+            },
+          },
+        ],
+      },
+      paths: ['collection', 'status'],
+      name: 'status',
+      title: 'Status',
+      type: 'string',
+    };
+
+    render(<VariableFilterItem value={value} model={model} rightAsVariable={false} />);
+    fireEvent.click(screen.getByTestId('variable-input'));
+
+    await waitFor(() => {
+      expect(value.operator).toBe(operator);
+    });
+    if (xComponent === 'Select' && operator === '$eq') {
+      expect(getComponent).not.toHaveBeenCalled();
+    } else {
+      expect(getComponent).toHaveBeenCalledWith(xComponent, false);
+    }
+  });
+
+  it('silently handles the DatePicker field schema before the date operator component takes over', async () => {
+    const value = observable({ path: '', operator: '', value: '' }) as VariableFilterItemValue;
+    const model = CreateModel();
+    const app = model.context.app as unknown as ReturnType<typeof createMockFlowApp>;
+    const getComponent = vi.spyOn(app, 'getComponent');
+
+    (globalThis as { __TEST_PATH__?: string }).__TEST_PATH__ = 'createdAt';
+    (globalThis as { __TEST_META__?: MetaTreeNode }).__TEST_META__ = {
+      interface: 'createdAt',
+      uiSchema: {
+        'x-component': 'DatePicker',
+        'x-filter-operators': [
+          {
+            value: '$dateOn',
+            label: 'Is',
+            selected: true,
+            schema: {
+              'x-component': 'DateFilterDynamicComponent',
+              'x-component-props': { isRange: false },
+            },
+          },
+        ],
+      },
+      paths: ['collection', 'createdAt'],
+      name: 'createdAt',
+      title: 'Created at',
+      type: 'date',
+    };
+
+    render(<VariableFilterItem value={value} model={model} rightAsVariable={false} />);
+    fireEvent.click(screen.getByTestId('variable-input'));
+
+    await waitFor(() => {
+      expect(value.operator).toBe('$dateOn');
+    });
+    expect(getComponent).toHaveBeenCalledWith('DatePicker', false);
+    expect(await screen.findByTestId('date-filter-dynamic-component')).toBeInTheDocument();
+  });
+
+  it('continues resolving plugin-provided keyword controls from the app registry', async () => {
+    const value = observable({ path: '', operator: '', value: '' }) as VariableFilterItemValue;
+    const model = CreateModel();
+    const app = model.context.app as unknown as ReturnType<typeof createMockFlowApp>;
+    const MultipleKeywordsInput: React.FC = () => <div data-testid="multiple-keywords-input" />;
+    app.addComponents({ MultipleKeywordsInput });
+    const getComponent = vi.spyOn(app, 'getComponent');
+
+    (globalThis as { __TEST_PATH__?: string }).__TEST_PATH__ = 'name';
+    (globalThis as { __TEST_META__?: MetaTreeNode }).__TEST_META__ = {
+      interface: 'input',
+      uiSchema: {
+        'x-component': 'Input',
+        'x-filter-operators': [
+          {
+            value: '$in',
+            label: 'Is any of',
+            selected: true,
+            schema: { 'x-component': 'MultipleKeywordsInput' },
+          },
+        ],
+      },
+      paths: ['collection', 'name'],
+      name: 'name',
+      title: 'Name',
+      type: 'string',
+    };
+
+    render(<VariableFilterItem value={value} model={model} rightAsVariable={false} />);
+    fireEvent.click(screen.getByTestId('variable-input'));
+
+    expect(await screen.findByTestId('multiple-keywords-input')).toBeTruthy();
+    expect(getComponent).toHaveBeenCalledWith('MultipleKeywordsInput');
+  });
+
   it('passes disabled through to the left selector, operator select, and right variable input', async () => {
     const value: VariableFilterItemValue = { path: '', operator: '', value: '' };
     const model = CreateModel();

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/index.ts

@@ -22,12 +22,14 @@ import { Markdown } from './common/Markdown/Markdown';
 import { LiquidEngine } from './common/Liquid';
 import type { PreviewRunJSResult } from './components/code-editor/runjsDiagnostics';
 import { TextAreaWithContextSelector } from './components/TextAreaWithContextSelector';
+import { registerDeviceTypeContext } from './internal/registerDeviceTypeContext';
 
 export class PluginFlowEngine<TApp extends BaseApplication<any> = BaseApplication<any>> extends Plugin<
   PluginOptions<any>,
   TApp
 > {
   async load() {
+    registerDeviceTypeContext(this.flowEngine);
     this.app.addComponents({ FlowRoute });
     this.app.flowEngine.setModelRepository(new FlowModelRepository(this.app));
     const filteredModels = Object.fromEntries(