feat: Introduce docs button

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';
@@ -97,6 +100,25 @@ export const Header: React.FC<HeaderProps> = ({
 
     return items;
   };
+  const getDocsButton = () => {
+    const items = [
+      <div
+        key="documentation-button"
+        aria-label="documentation-button"
+      >
+        <DocumentationButton
+          key="documentation-button"
+          type="link"
+        >
+        </DocumentationButton>
+
+      </div>
+    ];
+    insertPlugins('right', items);
+    if (ClientConfiguration.documentationButtonVisible) {
+      return items;
+    }
+  };
 
   return (
     <div
@@ -120,6 +142,9 @@ export const Header: React.FC<HeaderProps> = ({
       <div
         className="item-container right-items"
       >
+        {
+          getDocsButton()
+        }
         {
           getRightItems()
         }

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