#10660: Enhance About plugin to show/hide version/content sections (#…

…10661) (#10662)

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={<>
-                            <VersionInfo
+                            {this.props.showVersionInfo && <VersionInfo
                                 version={this.props.version}
                                 message={this.props.message}
                                 commit={this.props.commit}
                                 date={this.props.date}
                                 githubUrl={this.props.githubUrl}
-                            />
-                            <AboutContent/>
+                            />}
+                            {this.props.showAboutContent && <AboutContent/>}
                         </>
                         }
                     />
@@ -76,7 +80,7 @@ class About extends React.Component {
             return (
                 <Dialog
                     id="mapstore-about"
-                    style={{zIndex: 1992}}
+                    style={{zIndex: 1992, paddingTop: 0}}
                     modal
                     draggable
                 >
@@ -89,14 +93,14 @@ class About extends React.Component {
                         </button>
                     </span>
                     <div role="body">
-                        <VersionInfo
+                        {this.props.showVersionInfo && <VersionInfo
                             version={this.props.version}
                             message={this.props.message}
                             commit={this.props.commit}
                             date={this.props.date}
                             githubUrl={this.props.githubUrl}
-                        />
-                        <AboutContent/>
+                        />}
+                        {this.props.showAboutContent && <AboutContent/>}
                     </div>
                 </Dialog>
             );

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 (
-            <div style={{
+            <div className="about-content-section" style={{
                 backgroundImage: 'url("' + msLogo + '")',
                 backgroundRepeat: 'no-repeat',
                 backgroundPosition: 'center'
             }}>
-                <h1>MapStore</h1>
+                <h1 style={{marginTop: 0}}>MapStore</h1>
                 <p>
                     <I18N.Message msgId="about_p0-0"/> <a href="http://openlayers.org/">OpenLayers</a> <I18N.Message msgId="about_p0-1"/> <a href="http://leafletjs.com/">Leaflet</a>.
                 </p>

web/client/product/components/viewer/about/VersionInfo.jsx

@@ -31,7 +31,7 @@ class VersionInfo extends React.Component {
     render() {
         return (
             <div key="body" role="body" className="version-panel">
-                <h1><Message msgId="version.title"/></h1>
+                <h1 className="title"><Message msgId="version.title"/></h1>
 
                 <div>
                     <div className="version-info">

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 = '<div id="container"></div>';
+        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(<AboutComp enabled />, 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(<AboutComp enabled showVersionInfo={false} />, 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(<AboutComp enabled showAboutContent={false} />, 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();
+    });
+});

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
  * {

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;
+    }
 }