feat: Introduce docs button (#1743)

* feat: adds a new documentation button

* chore: omits old docs button position

* docs: imporves linting

* docs: removes extra spaces

* chore: improves code quality

* docs: updates a function name

* chore: further improves code quality

src/components/DocumentationButton/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons';
+import {
+  FontAwesomeIcon
+} from '@fortawesome/react-fontawesome';
+
+import SimpleButton, { SimpleButtonProps } from '@terrestris/react-geo/dist/Button/SimpleButton/SimpleButton';
+
+export type DocumentationButtonProps = SimpleButtonProps;
+
+const defaultClassName = 'documentationbutton';
+export const DocumentationButton: React.FC<DocumentationButtonProps> = ({
+  className
+}) => {
+
+  const finalClassName = className
+    ? `${defaultClassName} ${className}`
+    : defaultClassName;
+
+  return (
+    <SimpleButton
+      onClick={() => window.open('/gis-docs', '_blank')}
+      className={finalClassName}
+      icon={
+        <FontAwesomeIcon
+          icon={faCircleQuestion}
+        />
+      }
+    >
+    </SimpleButton>
+  );
+};
+
+export default DocumentationButton;

src/components/Header/index.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
 
+import ClientConfiguration from 'clientConfig';
+
+import DocumentationButton from '../../components/DocumentationButton';
 import {
   useAppSelector
 } from '../../hooks/useAppSelector';
@@ -81,8 +84,26 @@ export const Header: React.FC<HeaderProps> = ({
     return items;
   };
 
-  const getRightItems = () => {
-    const items = [
+  const getDocsButton = () => {
+    if (ClientConfiguration.documentationButtonVisible) {
+      return (
+        <div
+          key="documentation-button"
+          aria-label="documentation-button"
+        >
+          <DocumentationButton
+            key="documentation-button"
+            type="link"
+          >
+          </DocumentationButton>
+
+        </div>
+      );
+    }
+  };
+
+  const getUserMenu = () => {
+    return (
       <div
         key="user-menu"
         aria-label="user-menu"
@@ -91,10 +112,18 @@ export const Header: React.FC<HeaderProps> = ({
           key="user-menu"
         />
       </div>
-    ];
+    );
+  };
 
-    insertPlugins('right', items);
+  const getRightItems = () => {
+    const items = [
+      getDocsButton(),
+      getUserMenu()
+    ].filter((item) => {
+      return item !== undefined;
+    });
 
+    insertPlugins('right', items);
     return items;
   };
 

src/components/UserMenu/index.tsx

@@ -193,16 +193,17 @@ export const UserMenu: React.FC<UserProps> = (): JSX.Element => {
         username,
         divider,
         settings,
-        info
+        info,
+        divider,
+        logout
       ] : [
         username,
         divider,
-        info
+        info,
+        divider,
+        logout
       ];
-      if (ClientConfiguration.documentationButtonVisible) {
-        itemsForLoggedInUser.push(docs);
-      }
-      itemsForLoggedInUser.push(divider, logout);
+
       items.push(...itemsForLoggedInUser);
     }