From b8d5cee512c19f41590761ecc360e17a79606910 Mon Sep 17 00:00:00 2001 From: mahmoudadel54 Date: Fri, 8 Nov 2024 17:01:25 +0200 Subject: [PATCH] #10660: Enhance About plugin to show/hide version/content sections --- .../product/components/viewer/about/About.jsx | 22 +++++--- .../components/viewer/about/AboutContent.jsx | 4 +- .../components/viewer/about/VersionInfo.jsx | 2 +- .../viewer/about/__tests__/About-test.js | 56 +++++++++++++++++++ web/client/product/plugins/About.jsx | 2 + web/client/themes/default/less/version.less | 5 +- 6 files changed, 78 insertions(+), 13 deletions(-) create mode 100644 web/client/product/components/viewer/about/__tests__/About-test.js diff --git a/web/client/product/components/viewer/about/About.jsx b/web/client/product/components/viewer/about/About.jsx index a2880fe999..93366bb81a 100644 --- a/web/client/product/components/viewer/about/About.jsx +++ b/web/client/product/components/viewer/about/About.jsx @@ -29,7 +29,9 @@ class About extends React.Component { commit: PropTypes.string, message: PropTypes.string, date: PropTypes.string, - onClose: PropTypes.func + onClose: PropTypes.func, + showAboutContent: PropTypes.bool, + showVersionInfo: PropTypes.bool }; static defaultProps = { @@ -45,7 +47,9 @@ class About extends React.Component { }, withButton: true, enabled: false, - onClose: () => {} + onClose: () => {}, + showAboutContent: true, + showVersionInfo: true }; render() { @@ -60,14 +64,14 @@ class About extends React.Component { btnType="image" className="map-logo" body={<> - - + />} + {this.props.showAboutContent && } } /> @@ -76,7 +80,7 @@ class About extends React.Component { return ( @@ -89,14 +93,14 @@ class About extends React.Component {
- - + />} + {this.props.showAboutContent && }
); diff --git a/web/client/product/components/viewer/about/AboutContent.jsx b/web/client/product/components/viewer/about/AboutContent.jsx index e7f00d7fec..af2a661c20 100644 --- a/web/client/product/components/viewer/about/AboutContent.jsx +++ b/web/client/product/components/viewer/about/AboutContent.jsx @@ -14,12 +14,12 @@ import msLogo from '../../../assets/img/mapstore-logo-0.20.png'; class About extends React.Component { render() { return ( -
-

MapStore

+

MapStore

OpenLayers Leaflet.

diff --git a/web/client/product/components/viewer/about/VersionInfo.jsx b/web/client/product/components/viewer/about/VersionInfo.jsx index 96d587e385..573c485672 100644 --- a/web/client/product/components/viewer/about/VersionInfo.jsx +++ b/web/client/product/components/viewer/about/VersionInfo.jsx @@ -31,7 +31,7 @@ class VersionInfo extends React.Component { render() { return (
-

+

diff --git a/web/client/product/components/viewer/about/__tests__/About-test.js b/web/client/product/components/viewer/about/__tests__/About-test.js new file mode 100644 index 0000000000..b6dd44e1db --- /dev/null +++ b/web/client/product/components/viewer/about/__tests__/About-test.js @@ -0,0 +1,56 @@ +/** + * Copyright 2022, 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 expect from 'expect'; +import React from 'react'; +import ReactDOM from 'react-dom'; +import AboutComp from '../About'; + +describe("The About component", () => { + beforeEach((done) => { + document.body.innerHTML = '
'; + setTimeout(done); + }); + + afterEach((done) => { + ReactDOM.unmountComponentAtNode(document.getElementById("container")); + document.body.innerHTML = ''; + setTimeout(done); + }); + + it('test about plugin content/version info', () => { + const cmp = ReactDOM.render(, document.getElementById("container")); + expect(cmp).toBeTruthy(); + const aboutComNodes = document.querySelector("#mapstore-about .modal-body div").childNodes; + expect(aboutComNodes.length).toEqual(2); + const versionInfoCmp = document.querySelector("#mapstore-about .version-panel"); + expect(versionInfoCmp).toBeTruthy(); + const aboutContentCmp = document.querySelector("#mapstore-about .about-content-section"); + expect(aboutContentCmp).toBeTruthy(); + }); + it('test hide version info in about plugin and showing only content section', () => { + const cmp = ReactDOM.render(, document.getElementById("container")); + expect(cmp).toBeTruthy(); + const aboutComNodes = document.querySelector("#mapstore-about .modal-body div").childNodes; + expect(aboutComNodes.length).toEqual(1); + const versionInfoCmp = document.querySelector("#mapstore-about .version-panel"); + expect(versionInfoCmp).toBeFalsy(); + const aboutContentCmp = document.querySelector("#mapstore-about .about-content-section"); + expect(aboutContentCmp).toBeTruthy(); + }); + it('test hide content section in about plugin and showing only version info section', () => { + const cmp = ReactDOM.render(, document.getElementById("container")); + expect(cmp).toBeTruthy(); + const aboutComNodes = document.querySelector("#mapstore-about .modal-body div").childNodes; + expect(aboutComNodes.length).toEqual(1); + const versionInfoCmp = document.querySelector("#mapstore-about .version-panel"); + expect(versionInfoCmp).toBeTruthy(); + const aboutContentCmp = document.querySelector("#mapstore-about .about-content-section"); + expect(aboutContentCmp).toBeFalsy(); + }); +}); diff --git a/web/client/product/plugins/About.jsx b/web/client/product/plugins/About.jsx index 690dab8a4e..5b4e4394aa 100644 --- a/web/client/product/plugins/About.jsx +++ b/web/client/product/plugins/About.jsx @@ -41,6 +41,8 @@ const About = connect((state) => ({ * @class * @memberof plugins * @prop {string} cfg.githubUrl base url to the github tree project, default is "". It will generate a url like "https://github.com/GITHUB_USER/REPO_NAME/tree/COMMIT_SHA" + * @prop {boolean} cfg.showVersionInfo a flag that resposible for show/hide the version section in About plugin + * @prop {boolean} cfg.showAboutContent a flag that resposible for show/hide the content section of About plugin * * @example * { diff --git a/web/client/themes/default/less/version.less b/web/client/themes/default/less/version.less index 09c8fd99b4..3052f68f93 100644 --- a/web/client/themes/default/less/version.less +++ b/web/client/themes/default/less/version.less @@ -26,7 +26,7 @@ } } .version-panel { - margin-top: -30px; + margin-bottom: 25px; .application-version-label { font-weight: bold; @@ -42,4 +42,7 @@ .info-label { font-weight: bold; } + .title{ + margin-top: 0; + } }