From df81e22dc1738c640429cb12398241b78952260d Mon Sep 17 00:00:00 2001 From: mahmoudadel54 Date: Tue, 7 Jan 2025 11:38:35 +0200 Subject: [PATCH 1/2] #10719: enable upload images within Text widgets Description: - add 'prop' called 'enableUploadImg' passing it to 'CompactRichTextEditor' component to enable upload image - add unit test --- .../settings/CompactRichTextEditor.jsx | 2 +- .../__tests__/CompactRichTextEditor-test.jsx | 50 +++++++++++++++++++ .../builder/wizard/text/TextOptions.jsx | 1 + 3 files changed, 52 insertions(+), 1 deletion(-) create mode 100644 web/client/components/mapviews/settings/__tests__/CompactRichTextEditor-test.jsx diff --git a/web/client/components/mapviews/settings/CompactRichTextEditor.jsx b/web/client/components/mapviews/settings/CompactRichTextEditor.jsx index 5f3acd59bd..55a34a374b 100644 --- a/web/client/components/mapviews/settings/CompactRichTextEditor.jsx +++ b/web/client/components/mapviews/settings/CompactRichTextEditor.jsx @@ -57,7 +57,7 @@ function CompactRichTextEditor({ image: { urlEnabled: true, // upload controlled via props, disabled by default - uploadEnabled: props.uploadEnabled || false, + uploadEnabled: props.enableUploadImg || false, alignmentEnabled: false, uploadCallback: (file) => new Promise((resolve, reject) => { const reader = new FileReader(); diff --git a/web/client/components/mapviews/settings/__tests__/CompactRichTextEditor-test.jsx b/web/client/components/mapviews/settings/__tests__/CompactRichTextEditor-test.jsx new file mode 100644 index 0000000000..9f97409bfa --- /dev/null +++ b/web/client/components/mapviews/settings/__tests__/CompactRichTextEditor-test.jsx @@ -0,0 +1,50 @@ +/* + * Copyright 2025, GeoSolutions Sas. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; +import ReactDOM from 'react-dom'; +import CompactRichTextEditor from '../CompactRichTextEditor'; +import expect from 'expect'; +import TestUtils from 'react-dom/test-utils'; + +describe('CompactRichTextEditor component', () => { + beforeEach((done) => { + document.body.innerHTML = '
'; + setTimeout(done); + }); + + afterEach((done) => { + ReactDOM.unmountComponentAtNode(document.getElementById("container")); + document.body.innerHTML = ''; + setTimeout(done); + }); + + it('should render with default which does not include image upload', () => { + ReactDOM.render(, document.getElementById("container")); + const textEditorContainer = document.querySelector(".ms-compact-text-editor.rdw-editor-wrapper"); + expect(textEditorContainer).toBeTruthy(); + // check img upload btn + const imageWidget = document.querySelector(".rdw-image-wrapper .rdw-option-wrapper"); + TestUtils.act(() => { + TestUtils.Simulate.click(imageWidget); + }); + const uploadImgInput = document.querySelector(".rdw-image-modal-upload-option"); + expect(uploadImgInput).toBeFalsy(); + }); + it('test rendering TextEditor with enabling image upload [enableUploadImg]', () => { + ReactDOM.render(, document.getElementById("container")); + const textEditorContainer = document.querySelector(".ms-compact-text-editor.rdw-editor-wrapper"); + expect(textEditorContainer).toBeTruthy(); + const imageWidget = document.querySelector(".rdw-image-wrapper .rdw-option-wrapper"); + TestUtils.act(() => { + TestUtils.Simulate.click(imageWidget); + }); + const uploadImgInput = document.querySelector(".rdw-image-modal-upload-option"); + expect(uploadImgInput).toBeTruthy(); + }); +}); diff --git a/web/client/components/widgets/builder/wizard/text/TextOptions.jsx b/web/client/components/widgets/builder/wizard/text/TextOptions.jsx index fca9d10700..95d2e820ae 100644 --- a/web/client/components/widgets/builder/wizard/text/TextOptions.jsx +++ b/web/client/components/widgets/builder/wizard/text/TextOptions.jsx @@ -48,6 +48,7 @@ function TextOptions({ data = {}, onChange = () => {} }) { { const previousHTML = draftJSEditorStateToHtml(editorState); From ca8607f14983993e5cde159723df507243732c1a Mon Sep 17 00:00:00 2001 From: mahmoudadel54 Date: Tue, 14 Jan 2025 00:00:02 +0200 Subject: [PATCH 2/2] #10719: revert naming enableUploadImg to be uploadEnabled --- .../components/mapviews/settings/CompactRichTextEditor.jsx | 2 +- .../settings/__tests__/CompactRichTextEditor-test.jsx | 4 ++-- .../components/widgets/builder/wizard/text/TextOptions.jsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/web/client/components/mapviews/settings/CompactRichTextEditor.jsx b/web/client/components/mapviews/settings/CompactRichTextEditor.jsx index 55a34a374b..5f3acd59bd 100644 --- a/web/client/components/mapviews/settings/CompactRichTextEditor.jsx +++ b/web/client/components/mapviews/settings/CompactRichTextEditor.jsx @@ -57,7 +57,7 @@ function CompactRichTextEditor({ image: { urlEnabled: true, // upload controlled via props, disabled by default - uploadEnabled: props.enableUploadImg || false, + uploadEnabled: props.uploadEnabled || false, alignmentEnabled: false, uploadCallback: (file) => new Promise((resolve, reject) => { const reader = new FileReader(); diff --git a/web/client/components/mapviews/settings/__tests__/CompactRichTextEditor-test.jsx b/web/client/components/mapviews/settings/__tests__/CompactRichTextEditor-test.jsx index 9f97409bfa..440824b58f 100644 --- a/web/client/components/mapviews/settings/__tests__/CompactRichTextEditor-test.jsx +++ b/web/client/components/mapviews/settings/__tests__/CompactRichTextEditor-test.jsx @@ -36,8 +36,8 @@ describe('CompactRichTextEditor component', () => { const uploadImgInput = document.querySelector(".rdw-image-modal-upload-option"); expect(uploadImgInput).toBeFalsy(); }); - it('test rendering TextEditor with enabling image upload [enableUploadImg]', () => { - ReactDOM.render(, document.getElementById("container")); + it('test rendering TextEditor with enabling image upload [uploadEnabled]', () => { + ReactDOM.render(, document.getElementById("container")); const textEditorContainer = document.querySelector(".ms-compact-text-editor.rdw-editor-wrapper"); expect(textEditorContainer).toBeTruthy(); const imageWidget = document.querySelector(".rdw-image-wrapper .rdw-option-wrapper"); diff --git a/web/client/components/widgets/builder/wizard/text/TextOptions.jsx b/web/client/components/widgets/builder/wizard/text/TextOptions.jsx index 95d2e820ae..9e3cbe0c4b 100644 --- a/web/client/components/widgets/builder/wizard/text/TextOptions.jsx +++ b/web/client/components/widgets/builder/wizard/text/TextOptions.jsx @@ -48,7 +48,7 @@ function TextOptions({ data = {}, onChange = () => {} }) { { const previousHTML = draftJSEditorStateToHtml(editorState);