From cfd50071104a6de49698013ccacb67ef01cb1109 Mon Sep 17 00:00:00 2001 From: Zeke Zhang <958414905@qq.com> Date: Sun, 11 Aug 2024 17:55:45 +0800 Subject: [PATCH] fix(iframe): fix the popup contained Iframe block does not work (#5039) --- .../plugin-block-iframe/src/client/Iframe.tsx | 10 +- .../src/client/__e2e__/inPopup.test.ts | 29 ++ .../src/client/__e2e__/templates.ts | 286 ++++++++++++++++++ 3 files changed, 323 insertions(+), 2 deletions(-) create mode 100644 packages/plugins/@nocobase/plugin-block-iframe/src/client/__e2e__/inPopup.test.ts create mode 100644 packages/plugins/@nocobase/plugin-block-iframe/src/client/__e2e__/templates.ts diff --git a/packages/plugins/@nocobase/plugin-block-iframe/src/client/Iframe.tsx b/packages/plugins/@nocobase/plugin-block-iframe/src/client/Iframe.tsx index b3a52ff985e..33394867d1a 100644 --- a/packages/plugins/@nocobase/plugin-block-iframe/src/client/Iframe.tsx +++ b/packages/plugins/@nocobase/plugin-block-iframe/src/client/Iframe.tsx @@ -9,13 +9,13 @@ import { observer, useField } from '@formily/react'; import { - useCompile, + getRenderContent, useBlockHeight, + useCompile, useLocalVariables, useParseURLAndParams, useRequest, useVariables, - getRenderContent, } from '@nocobase/client'; import { Card, Spin } from 'antd'; import React, { useEffect, useState } from 'react'; @@ -64,6 +64,12 @@ export const Iframe: any = observer( return data; }, ); + + // fix https://nocobase.height.app/T-4940/description + if (targetHtmlContent === undefined) { + return; + } + const encodedHtml = encodeURIComponent(targetHtmlContent); const dataUrl = 'data:text/html;charset=utf-8,' + encodedHtml; diff --git a/packages/plugins/@nocobase/plugin-block-iframe/src/client/__e2e__/inPopup.test.ts b/packages/plugins/@nocobase/plugin-block-iframe/src/client/__e2e__/inPopup.test.ts new file mode 100644 index 00000000000..3019da82cfc --- /dev/null +++ b/packages/plugins/@nocobase/plugin-block-iframe/src/client/__e2e__/inPopup.test.ts @@ -0,0 +1,29 @@ +/** + * 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 { expect, test } from '@nocobase/test/e2e'; +import { T4940 } from './templates'; + +test.describe('iframe in popup', () => { + test('open popup, then close it, that should work', async ({ page, mockPage }) => { + await mockPage(T4940).goto(); + + // open popup, then can see the iframe + await page.getByLabel('action-Action.Link-View-view-').click(); + await expect(page.getByLabel('block-item-Iframe-users-iframe')).toBeVisible(); + + // close popup + await page.getByLabel('drawer-Action.Container-users-View record-mask').click(); + await expect(page.getByLabel('block-item-Iframe-users-iframe')).not.toBeVisible(); + + // then open popup again, that should work + await page.getByLabel('action-Action.Link-View-view-').click(); + await expect(page.getByLabel('block-item-Iframe-users-iframe')).toBeVisible(); + }); +}); diff --git a/packages/plugins/@nocobase/plugin-block-iframe/src/client/__e2e__/templates.ts b/packages/plugins/@nocobase/plugin-block-iframe/src/client/__e2e__/templates.ts new file mode 100644 index 00000000000..2b793157bbf --- /dev/null +++ b/packages/plugins/@nocobase/plugin-block-iframe/src/client/__e2e__/templates.ts @@ -0,0 +1,286 @@ +/** + * 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. + */ + +export const T4940 = { + pageSchema: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Page', + properties: { + kk5d8mabc1x: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid', + 'x-initializer': 'page:addBlock', + properties: { + '7uboqd2edeo': { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Row', + 'x-app-version': '1.3.0-alpha', + properties: { + '5bxch3ga0dt': { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Col', + 'x-app-version': '1.3.0-alpha', + properties: { + ie2ur7h58nu: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-decorator': 'TableBlockProvider', + 'x-acl-action': 'users:list', + 'x-use-decorator-props': 'useTableBlockDecoratorProps', + 'x-decorator-props': { + collection: 'users', + dataSource: 'main', + action: 'list', + params: { + pageSize: 20, + }, + rowKey: 'id', + showIndex: true, + dragSort: false, + }, + 'x-toolbar': 'BlockSchemaToolbar', + 'x-settings': 'blockSettings:table', + 'x-component': 'CardItem', + 'x-filter-targets': [], + 'x-app-version': '1.3.0-alpha', + properties: { + actions: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-initializer': 'table:configureActions', + 'x-component': 'ActionBar', + 'x-component-props': { + style: { + marginBottom: 'var(--nb-spacing)', + }, + }, + 'x-app-version': '1.3.0-alpha', + 'x-uid': 'niycu4yzys2', + 'x-async': false, + 'x-index': 1, + }, + hig45cdrgo6: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'array', + 'x-initializer': 'table:configureColumns', + 'x-component': 'TableV2', + 'x-use-component-props': 'useTableBlockProps', + 'x-component-props': { + rowKey: 'id', + rowSelection: { + type: 'checkbox', + }, + }, + 'x-app-version': '1.3.0-alpha', + properties: { + actions: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + title: '{{ t("Actions") }}', + 'x-action-column': 'actions', + 'x-decorator': 'TableV2.Column.ActionBar', + 'x-component': 'TableV2.Column', + 'x-toolbar': 'TableColumnSchemaToolbar', + 'x-initializer': 'table:configureItemActions', + 'x-settings': 'fieldSettings:TableColumn', + 'x-toolbar-props': { + initializer: 'table:configureItemActions', + }, + 'x-app-version': '1.3.0-alpha', + properties: { + t15j6b9c3pj: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-decorator': 'DndContext', + 'x-component': 'Space', + 'x-component-props': { + split: '|', + }, + 'x-app-version': '1.3.0-alpha', + properties: { + gri890vew7p: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + title: '{{ t("View") }}', + 'x-action': 'view', + 'x-toolbar': 'ActionSchemaToolbar', + 'x-settings': 'actionSettings:view', + 'x-component': 'Action.Link', + 'x-component-props': { + openMode: 'drawer', + }, + 'x-action-context': { + dataSource: 'main', + collection: 'users', + }, + 'x-decorator': 'ACLActionProvider', + 'x-designer-props': { + linkageAction: true, + }, + properties: { + drawer: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + title: '{{ t("View record") }}', + 'x-component': 'Action.Container', + 'x-component-props': { + className: 'nb-action-popup', + }, + properties: { + tabs: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Tabs', + 'x-component-props': {}, + 'x-initializer': 'popup:addTab', + properties: { + tab1: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + title: '{{t("Details")}}', + 'x-component': 'Tabs.TabPane', + 'x-designer': 'Tabs.Designer', + 'x-component-props': {}, + properties: { + grid: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid', + 'x-initializer': 'popup:common:addBlock', + properties: { + nowvigi6jy2: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Row', + 'x-app-version': '1.3.0-alpha', + properties: { + '2md6uln6sop': { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Col', + 'x-app-version': '1.3.0-alpha', + properties: { + '9mk6ymk0mdd': { + 'x-uid': '0dz4iczxeam', + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-settings': 'blockSettings:iframe', + 'x-decorator': 'BlockItem', + 'x-decorator-props': { + name: 'iframe', + }, + 'x-component': 'Iframe', + 'x-component-props': { + mode: 'html', + height: '60vh', + engine: 'string', + params: [], + htmlId: 'rrlgx9hsfeg', + }, + 'x-app-version': '1.3.0-alpha', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': '8ctcnmz0wo4', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'oif086g8afi', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': '2nty9azyn50', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': '9iowj2o2g0j', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'lp0ikbtj0fl', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'byot1rzt79q', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'w92vs3sttpc', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 's9g4zgbgvzi', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'ythxzxefl0m', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'lyacejgkuls', + 'x-async': false, + 'x-index': 2, + }, + }, + 'x-uid': 'cefvw9a46do', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': '0ytw1lsisne', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'gvjlc33b9df', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'r2od8piwsl2', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'gqgddcp9tjs', + 'x-async': true, + 'x-index': 1, + }, +};