feat: add help menu in tab layout

Cosmo-Tech · Oct 26, 2021 · a58a60a · a58a60a
1 parent 81c262f
commit a58a60a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/config/AppConfiguration.js b/src/config/AppConfiguration.js
@@ -19,3 +19,9 @@ export const SCENARIO_RUN_LOG_TYPE = 'CUMULATED_LOGS';
 
 // Whether to enable Application Insights events tracking
 export const ENABLE_APPLICATION_INSIGHTS = true;
+
+// Support page url
+export const SUPPORT_URL = 'http://support.cosmotech.com';
+
+// Documentation url
+export const DOCUMENTATION_URL = 'doc.pdf';
diff --git a/src/layouts/TabLayout/TabLayout.js b/src/layouts/TabLayout/TabLayout.js
@@ -6,9 +6,9 @@ import { AppBar, Tabs, Tab, Box, makeStyles } from '@material-ui/core';
 import { Switch, Route, Link, Redirect, useLocation } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { Auth } from '@cosmotech/core';
-import { PrivateRoute, UserInfo } from '@cosmotech/ui';
+import { PrivateRoute, UserInfo, HelpMenu } from '@cosmotech/ui';
 import { useTranslation } from 'react-i18next';
-import { LANGUAGES } from '../../config/AppConfiguration';
+import { LANGUAGES, SUPPORT_URL, DOCUMENTATION_URL } from '../../config/AppConfiguration';
 import theme from '../../theme/';
 import profilePlaceholder from '../../assets/profile_placeholder.png';
 
@@ -76,10 +76,14 @@ const TabLayout = (props) => {
 
   const userInfoLabels = {
     language: t('genericcomponent.userinfo.button.change.language'),
-    documentation: t('genericcomponent.userinfo.button.download.documentation'),
     logOut: t('genericcomponent.userinfo.button.logout'),
   };
 
+  const helpLabels = {
+    documentation: t('genericcomponent.helpmenu.documentation'),
+    support: t('genericcomponent.helpmenu.support'),
+  };
+
   return (
     <>
       <AppBar className={classes.bar}>
@@ -98,9 +102,11 @@ const TabLayout = (props) => {
             ))}
           </Tabs>
           <div className={classes.rightBar}>
+            <div className={classes.rightBarElement}>
+              <HelpMenu documentationUrl={DOCUMENTATION_URL} supportUrl={SUPPORT_URL} labels={helpLabels} />
+            </div>
             <div className={classes.rightBarElement}>
               <UserInfo
-                documentationUrl="doc.pdf"
                 languages={LANGUAGES}
                 changeLanguage={(lang) => i18n.changeLanguage(lang)}
                 language={i18n.language}