fix(iframe): fix the popup contained Iframe block does not work (#5039)
Some checks are pending
Build Docker Image / build-and-push (push) Waiting to run
Build Pro Image / build-and-push (push) Waiting to run
E2E / Build (push) Waiting to run
E2E / Core and plugins (push) Blocked by required conditions
E2E / plugin-workflow (push) Blocked by required conditions
E2E / plugin-workflow-approval (push) Blocked by required conditions
E2E / plugin-data-source-main (push) Blocked by required conditions
E2E / Comment on PR (push) Blocked by required conditions
NocoBase FrontEnd Test / frontend-test (18) (push) Waiting to run

This commit is contained in:
Zeke Zhang 2024-08-11 17:55:45 +08:00 committed by GitHub
parent 3ecad296e7
commit cfd5007110
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 323 additions and 2 deletions

View File

@ -9,13 +9,13 @@
import { observer, useField } from '@formily/react'; import { observer, useField } from '@formily/react';
import { import {
useCompile, getRenderContent,
useBlockHeight, useBlockHeight,
useCompile,
useLocalVariables, useLocalVariables,
useParseURLAndParams, useParseURLAndParams,
useRequest, useRequest,
useVariables, useVariables,
getRenderContent,
} from '@nocobase/client'; } from '@nocobase/client';
import { Card, Spin } from 'antd'; import { Card, Spin } from 'antd';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
@ -64,6 +64,12 @@ export const Iframe: any = observer(
return data; return data;
}, },
); );
// fix https://nocobase.height.app/T-4940/description
if (targetHtmlContent === undefined) {
return;
}
const encodedHtml = encodeURIComponent(targetHtmlContent); const encodedHtml = encodeURIComponent(targetHtmlContent);
const dataUrl = 'data:text/html;charset=utf-8,' + encodedHtml; const dataUrl = 'data:text/html;charset=utf-8,' + encodedHtml;

View File

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

View File

@ -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,
},
};