diff --git a/packages/form-js-editor/assets/form-js-editor-base.css b/packages/form-js-editor/assets/form-js-editor-base.css index 704f9528d..c848099db 100644 --- a/packages/form-js-editor/assets/form-js-editor-base.css +++ b/packages/form-js-editor/assets/form-js-editor-base.css @@ -741,6 +741,10 @@ transform: scale(1.3); } +.fjs-properties-container .fjs-properties-panel .fjs-properties-panel-detached-description { + margin: 0px 12px 6px +} + /** * Editor Form Fields */ diff --git a/packages/form-js-editor/src/features/properties-panel/groups/SecurityAttributesGroup.js b/packages/form-js-editor/src/features/properties-panel/groups/SecurityAttributesGroup.js index fe952534e..5532becb8 100644 --- a/packages/form-js-editor/src/features/properties-panel/groups/SecurityAttributesGroup.js +++ b/packages/form-js-editor/src/features/properties-panel/groups/SecurityAttributesGroup.js @@ -7,6 +7,14 @@ import { SECURITY_ATTRIBUTES_DEFINITIONS } from '@bpmn-io/form-js-viewer'; export function SecurityAttributesGroup(field, editField) { + const { + type + } = field; + + if (type !== 'iframe') { + return null; + } + const entries = createEntries({ field, editField }); if (!entries.length) { @@ -27,7 +35,7 @@ function createEntries(props) { field } = props; - return SECURITY_ATTRIBUTES_DEFINITIONS.map((definition) => { + const securityEntries = SECURITY_ATTRIBUTES_DEFINITIONS.map((definition) => { const { label, property @@ -46,13 +54,22 @@ function createEntries(props) { } }); }); + + return [ + { component: Advisory }, + ...securityEntries + ]; + } +const Advisory = (props) => { + return
Allow the iframe to access more functionality of your browser, details regarding the various options can be found in the MDN iFrame documentation.
-Be cautious when embedding content from external sources. Ensure you trust the source and are aware of the potential security risks.
>; } \ No newline at end of file diff --git a/packages/form-js-editor/test/spec/features/properties-panel/groups/SecurityAttributesGroup.spec.js b/packages/form-js-editor/test/spec/features/properties-panel/groups/SecurityAttributesGroup.spec.js index 4c26512c1..14342fec5 100644 --- a/packages/form-js-editor/test/spec/features/properties-panel/groups/SecurityAttributesGroup.spec.js +++ b/packages/form-js-editor/test/spec/features/properties-panel/groups/SecurityAttributesGroup.spec.js @@ -24,7 +24,7 @@ describe('SecurityAttributesGroup', function() { renderSecurityAttributesGroup({ field }); // then - expect(findGroup('appearance', document.body)).to.not.exist; + expect(findGroup('securityAttributes', document.body)).to.not.exist; }); SECURITY_ATTRIBUTES_DEFINITIONS.forEach(({ property }) => { @@ -108,7 +108,7 @@ function renderSecurityAttributesGroup(options) { services } = options; - const groups = [ SecurityAttributesGroup(field, editField) ]; + const groups = [ SecurityAttributesGroup(field, editField) ].filter(group => group); return render(