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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.1.0-beta.45",
+  "version": "2.1.0-beta.47",
   "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.47",
+    "@nocobase/flow-engine": "2.1.0-beta.47",
+    "@nocobase/sdk": "2.1.0-beta.47",
+    "@nocobase/shared": "2.1.0-beta.47",
+    "@nocobase/utils": "2.1.0-beta.47",
     "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": "bf8fc3790e3494c901b4d22861c5471a0d27c464"
 }

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/components/form/DrawerFormLayout.tsx

@@ -64,7 +64,7 @@ export function DrawerFormLayout(props: DrawerFormLayoutProps) {
   }, [props, view]);
 
   return (
-    <div>
+    <div style={{ height: '100%', minHeight: 0, display: 'flex', flexDirection: 'column' }}>
       {view.Header ? <view.Header title={props.title} /> : null}
       {props.children}
       {view.Footer ? (

package/src/components/form/filter/CollectionFilter.tsx

@@ -19,6 +19,8 @@ const identity = (s: string) => s;
 export interface CollectionFilterProps {
   /** Collection whose fields drive the filter row's field picker. */
   collection: Collection | undefined;
+  /** Previously compiled filter param used to seed the editable filter group. */
+  initialValue?: CompiledFilter;
   /** Called on Submit or Reset with the compiled NocoBase filter param (`undefined` when cleared). */
   onChange: (filter: CompiledFilter) => void;
   /** Translator. Defaults to identity. */
@@ -55,6 +57,7 @@ export interface CollectionFilterProps {
 export const CollectionFilter: FC<CollectionFilterProps> = (props) => {
   const {
     collection,
+    initialValue,
     onChange,
     t = identity,
     filterableFieldNames,
@@ -71,6 +74,7 @@ export const CollectionFilter: FC<CollectionFilterProps> = (props) => {
 
   const filterAction = useFilterActionProps({
     collection,
+    initialValue,
     filterableFieldNames,
     nonfilterableFieldNames,
     noIgnore,

package/src/components/form/filter/CollectionFilterPanel.tsx

@@ -0,0 +1,97 @@
+/**
+ * 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 { Collection } from '@nocobase/flow-engine';
+import { Empty } from 'antd';
+import React, { forwardRef, useImperativeHandle } from 'react';
+import { FilterGroup } from '../../../flow/components/filter';
+import {
+  compileFilterGroup,
+  type CompiledFilter,
+  type FilterApplyAction,
+  useFilterActionProps,
+} from './useFilterActionProps';
+
+const identity = (s: string) => s;
+
+export interface CollectionFilterPanelRef {
+  getFilter: () => CompiledFilter;
+  reset: () => void;
+}
+
+export interface CollectionFilterPanelProps {
+  /** Collection whose fields drive the filter row's field picker. */
+  collection: Collection | undefined;
+  /** Previously compiled filter param used to seed the editable filter group. */
+  initialValue?: CompiledFilter;
+  /** Called when the condition group structure changes or `reset()` is invoked. */
+  onChange?: (filter: CompiledFilter) => void;
+  /** Translator. Defaults to identity. */
+  t?: (key: string, options?: Record<string, unknown>) => string;
+  /** Whitelist of root-level field names to expose. */
+  filterableFieldNames?: string[];
+  /**
+   * Blacklist of root-level field names to drop. Mirrors v1's `nonfilterable: [...]` on `Filter.Action`.
+   */
+  nonfilterableFieldNames?: string[];
+  /** Bypass the `filterableFieldNames` whitelist. */
+  noIgnore?: boolean;
+}
+
+/**
+ * Inline collection filter editor for forms and drawers. Unlike `CollectionFilter`, this does not render a trigger button, popover, or nested `<form>`, so it can safely live inside an antd form and be submitted by the outer drawer action.
+ */
+export const CollectionFilterPanel = forwardRef<CollectionFilterPanelRef, CollectionFilterPanelProps>((props, ref) => {
+  const {
+    collection,
+    initialValue,
+    onChange,
+    t = identity,
+    filterableFieldNames,
+    nonfilterableFieldNames,
+    noIgnore,
+  } = props;
+
+  const filterAction = useFilterActionProps({
+    collection,
+    initialValue,
+    filterableFieldNames,
+    nonfilterableFieldNames,
+    noIgnore,
+    t,
+    onApply: (filter: CompiledFilter, _action: FilterApplyAction) => {
+      onChange?.(filter);
+    },
+  });
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getFilter: () => compileFilterGroup(filterAction.value),
+      reset: filterAction.onReset,
+    }),
+    [filterAction.onReset, filterAction.value],
+  );
+
+  if (!collection || !filterAction.FilterItem) {
+    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('No data')} />;
+  }
+
+  return (
+    <FilterGroup
+      value={filterAction.value}
+      FilterItem={filterAction.FilterItem}
+      onChange={() => onChange?.(compileFilterGroup(filterAction.value))}
+    />
+  );
+});
+
+CollectionFilterPanel.displayName = 'CollectionFilterPanel';
+
+export default CollectionFilterPanel;

package/src/components/form/filter/__tests__/compileFilterGroup.test.ts

@@ -8,7 +8,7 @@
  */
 
 import { describe, expect, it } from 'vitest';
-import { compileFilterGroup } from '../useFilterActionProps';
+import { compileFilterGroup, decompileFilterGroup } from '../useFilterActionProps';
 
 describe('compileFilterGroup', () => {
   it('returns undefined for an empty group so callers can drop the filter param', () => {
@@ -144,3 +144,78 @@ describe('compileFilterGroup', () => {
     });
   });
 });
+
+describe('decompileFilterGroup', () => {
+  it('returns undefined for an empty compiled filter', () => {
+    expect(decompileFilterGroup(undefined)).toBeUndefined();
+    expect(decompileFilterGroup({})).toBeUndefined();
+  });
+
+  it('restores a compiled condition into an editable filter row', () => {
+    expect(decompileFilterGroup({ $and: [{ lockReason: { $includes: 'abuse' } }] })).toEqual({
+      logic: '$and',
+      items: [{ path: 'lockReason', operator: '$includes', value: 'abuse' }],
+    });
+  });
+
+  it('restores a direct condition object into an editable filter row', () => {
+    expect(decompileFilterGroup({ title: { $includes: 'test' } })).toEqual({
+      logic: '$and',
+      items: [{ path: 'title', operator: '$includes', value: 'test' }],
+    });
+  });
+
+  it('restores legacy direct field values as equality rows', () => {
+    expect(decompileFilterGroup({ createdById: '{{ ctx.state.currentUser.id }}' })).toEqual({
+      logic: '$and',
+      items: [{ path: 'createdById', operator: '$eq', value: '{{ ctx.state.currentUser.id }}' }],
+    });
+  });
+
+  it('restores multiple direct condition fields', () => {
+    expect(
+      decompileFilterGroup({
+        title: { $includes: 'test' },
+        status: 'published',
+      }),
+    ).toEqual({
+      logic: '$and',
+      items: [
+        { path: 'title', operator: '$includes', value: 'test' },
+        { path: 'status', operator: '$eq', value: 'published' },
+      ],
+    });
+  });
+
+  it('restores nested association paths', () => {
+    expect(decompileFilterGroup({ $and: [{ user: { createdBy: { password: { $includes: '123' } } } }] })).toEqual({
+      logic: '$and',
+      items: [{ path: 'user.createdBy.password', operator: '$includes', value: '123' }],
+    });
+  });
+
+  it('restores nested filter groups', () => {
+    expect(
+      decompileFilterGroup({
+        $and: [
+          { lockReason: { $eq: 'abuse' } },
+          {
+            $or: [{ lockedTs: { $dateAfter: '2026-01-01' } }, { lockedTs: { $dateBefore: '2026-12-31' } }],
+          },
+        ],
+      }),
+    ).toEqual({
+      logic: '$and',
+      items: [
+        { path: 'lockReason', operator: '$eq', value: 'abuse' },
+        {
+          logic: '$or',
+          items: [
+            { path: 'lockedTs', operator: '$dateAfter', value: '2026-01-01' },
+            { path: 'lockedTs', operator: '$dateBefore', value: '2026-12-31' },
+          ],
+        },
+      ],
+    });
+  });
+});

package/src/components/form/filter/index.ts

@@ -10,4 +10,6 @@
 // Higher-level filter compositions for non-schema surfaces (settings pages, panels, side drawers). The low-level primitives — `FilterContainer`, `FilterGroup`, `FilterItem`, `fieldsToOptions`, `useFilterOptions` — live under `src/flow/components/filter/`; this layer composes them with a `Collection` binding and exposes the hook/component pair callers actually reach for. The dependency direction is form/filter → flow/components/filter only.
 export { CollectionFilter } from './CollectionFilter';
 export type { CollectionFilterProps } from './CollectionFilter';
+export { CollectionFilterPanel } from './CollectionFilterPanel';
+export type { CollectionFilterPanelProps, CollectionFilterPanelRef } from './CollectionFilterPanel';
 export type { CompiledFilter } from './useFilterActionProps';

package/src/components/form/filter/useFilterActionProps.ts

@@ -68,6 +68,68 @@ const nestPath = (path: string, leaf: unknown): Record<string, unknown> => {
   return result as Record<string, unknown>;
 };
 
+const decompileConditions = (value: unknown, path: string[] = []): CollectionFilterItemValue[] => {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    return path.length ? [{ path: path.join('.'), operator: '$eq', value }] : [];
+  }
+
+  const entries = Object.entries(value as Record<string, unknown>);
+  const operatorEntries = entries.filter(([key]) => key.startsWith('$'));
+  if (operatorEntries.length) {
+    if (!path.length) {
+      return [];
+    }
+    return operatorEntries.map(([operator, operatorValue]) => ({
+      path: path.join('.'),
+      operator,
+      value: operatorValue,
+    }));
+  }
+
+  return entries.flatMap(([fieldName, nextValue]) => decompileConditions(nextValue, [...path, fieldName]));
+};
+
+const getGroupLogic = (record: Record<string, unknown>): FilterGroupValue['logic'] | undefined => {
+  if (Array.isArray(record.$or)) {
+    return '$or';
+  }
+  if (Array.isArray(record.$and)) {
+    return '$and';
+  }
+  return undefined;
+};
+
+const decompileFilterItem = (item: unknown): FilterGroupItem[] => {
+  if (!item || typeof item !== 'object' || Array.isArray(item)) {
+    return [];
+  }
+  const record = item as Record<string, unknown>;
+  if (getGroupLogic(record)) {
+    const group = decompileFilterGroup(record);
+    return group ? [group] : [];
+  }
+  return decompileConditions(record);
+};
+
+export function decompileFilterGroup(filter: CompiledFilter): FilterGroupValue | undefined {
+  if (!filter || typeof filter !== 'object' || Array.isArray(filter)) {
+    return undefined;
+  }
+
+  const record = filter as Record<string, unknown>;
+  const logic = getGroupLogic(record);
+  if (!logic) {
+    const items = decompileConditions(record);
+    return items.length ? { logic: '$and', items } : undefined;
+  }
+  const sourceItems = record[logic] as unknown[];
+  const items = sourceItems
+    .flatMap((item) => decompileFilterItem(item))
+    .filter((item): item is FilterGroupItem => Boolean(item));
+
+  return items.length ? { logic, items } : undefined;
+}
+
 /**
  * Compile a reactive filter group into the `{ $and: [{ path: { op: val } }] }` envelope accepted by NocoBase's resource `list` filter param. Returns `undefined` when the group is empty so callers can drop the param.
  *
@@ -100,6 +162,8 @@ export type FilterApplyAction = 'submit' | 'reset';
 export interface UseFilterActionPropsArgs extends UseFilterOptionsArgs {
   /** Collection whose fields populate the filter row's field picker. */
   collection: Collection | undefined;
+  /** Previously compiled filter param used to seed the editable filter group. */
+  initialValue?: CompiledFilter;
   /**
    * Called when the user submits or resets the filter popover. Receives the compiled filter param (`undefined` when cleared) and which footer button triggered the call. Typical implementation: `(filter, action) => { listRequest.run(filter); if (action === 'submit') closePopover(); }`.
    */
@@ -152,12 +216,12 @@ export interface UseFilterActionPropsResult {
  * ```
  */
 export function useFilterActionProps(args: UseFilterActionPropsArgs): UseFilterActionPropsResult {
-  const { collection, onApply, filterableFieldNames, nonfilterableFieldNames, noIgnore, t } = args;
+  const { collection, initialValue, onApply, filterableFieldNames, nonfilterableFieldNames, noIgnore, t } = args;
 
   // Held in a ref so the group object identity is stable for the lifetime of the host component — `<FilterContent>` mutates this object directly (push/splice on `items`, swap `logic`), and a fresh observable on every render would reset that internal state.
   const valueRef = useRef<FilterGroupValue>();
   if (!valueRef.current) {
-    valueRef.current = observable(createEmptyGroup()) as FilterGroupValue;
+    valueRef.current = observable(decompileFilterGroup(initialValue) || createEmptyGroup()) as FilterGroupValue;
   }
   const value = valueRef.current;
 

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/linkageRules.tsx

@@ -46,7 +46,7 @@ import { useAssociationTitleFieldSync } from '../components/useAssociationTitleF
 import _ from 'lodash';
 import { SubFormFieldModel, SubFormListFieldModel } from '../models';
 import { coerceForToOneField } from '../internal/utils/associationValueCoercion';
-import { enumToOptions } from '../internal/utils/enumOptionsUtils';
+import { enumToOptions, translateOptionLabel } from '../internal/utils/enumOptionsUtils';
 import {
   findFormItemModelByFieldPath,
   getCollectionFromModel,
@@ -156,7 +156,7 @@ const getFieldModelOptions = (fieldModel: any, t: (s: string) => string) => {
   if (originalOptions) {
     return originalOptions.map((option: any) =>
       option && typeof option === 'object' && typeof option.label === 'string'
-        ? { ...option, label: t(option.label) }
+        ? { ...option, label: translateOptionLabel(option.label, t) }
         : option,
     );
   }

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();
+  });
+});