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