feat(frontend): update help menu (#2689)

web/src/components/Header/Header.styled.tsx

@@ -1,5 +1,5 @@
 import {QuestionCircleOutlined} from '@ant-design/icons';
-import {Layout, Menu, Typography} from 'antd';
+import {Layout, Typography} from 'antd';
 import styled from 'styled-components';
 
 export const Header = styled(Layout.Header)`
@@ -31,30 +31,10 @@ export const Logo = styled.img`
   margin-right: 24px;
 `;
 
-export const NavMenu = styled(Menu).attrs({
-  mode: 'horizontal',
-  disabledOverflow: true,
-})`
-  && {
-    align-items: center;
-  }
-
-  .ant-menu-submenu.ant-menu-submenu-horizontal {
-    padding-right: 0;
-  }
-
-  .ant-menu-item > span > a {
-    color: ${({theme}) => theme.color.primary};
-  }
-`;
-
 export const QuestionIcon = styled(QuestionCircleOutlined)`
   color: ${({theme}) => theme.color.primary};
   font-size: ${({theme}) => theme.size.lg};
-`;
-
-export const AppVersionContainer = styled.div`
-  border-top: ${({theme}) => `1px solid ${theme.color.borderLight}`};
+  margin: 0 24px;
 `;
 
 export const AppVersion = styled(Typography.Text)`

web/src/components/Header/Header.tsx

@@ -5,7 +5,7 @@ import Logo from 'assets/Logo.svg';
 import EnvironmentSelector from 'components/EnvironmentSelector';
 import NoTracingPopover from 'components/NoTracingPopover';
 import * as S from './Header.styled';
-import Menu from './Menu';
+import HelpMenu from './HelpMenu';
 
 interface IProps {
   hasLogo?: boolean;
@@ -25,7 +25,7 @@ const Header = ({hasLogo = false, isNoTracingMode}: IProps) => (
     <Space>
       {isNoTracingMode && <NoTracingPopover />}
       <EnvironmentSelector />
-      <Menu />
+      <HelpMenu />
     </Space>
   </S.Header>
 );

web/src/components/Header/HelpMenu.tsx

@@ -0,0 +1,90 @@
+import {BulbOutlined, GithubOutlined, ReadOutlined} from '@ant-design/icons';
+import {Dropdown, Menu, MenuProps, Space} from 'antd';
+import {useMemo} from 'react';
+import {useLocation} from 'react-router-dom';
+
+import discordIcon from 'assets/discord.svg';
+import {DISCORD_URL, DOCUMENTATION_URL, GITHUB_URL} from 'constants/Common.constants';
+import {useGuidedTour} from 'providers/GuidedTour/GuidedTour.provider';
+import GuidedTourService from 'services/GuidedTour.service';
+import Env from 'utils/Env';
+import * as S from './Header.styled';
+
+const appVersion = Env.get('appVersion');
+
+function getMenuItems({
+  isOnboardingActive,
+  onClickOnboarding,
+}: {
+  isOnboardingActive: boolean;
+  onClickOnboarding: () => void;
+}) {
+  const items: MenuProps['items'] = [
+    {
+      key: '1',
+      label: (
+        <a target="_blank" href={GITHUB_URL}>
+          GitHub
+        </a>
+      ),
+      icon: <GithubOutlined />,
+    },
+    {
+      key: '2',
+      label: (
+        <a target="_blank" href={DOCUMENTATION_URL}>
+          Documentation
+        </a>
+      ),
+      icon: <ReadOutlined />,
+    },
+    {
+      key: '3',
+      label: (
+        <a target="_blank" href={DISCORD_URL}>
+          Join our Discord community
+        </a>
+      ),
+      icon: <img src={discordIcon} width={12} />,
+    },
+    {
+      key: '4',
+      label: <a onClick={onClickOnboarding}>Show Onboarding</a>,
+      icon: <BulbOutlined />,
+      disabled: !isOnboardingActive,
+    },
+    {
+      type: 'divider',
+    },
+    {
+      key: '5',
+      label: <S.AppVersion>App version: {appVersion}</S.AppVersion>,
+      disabled: true,
+    },
+  ];
+
+  return items;
+}
+
+const HelpMenu = () => {
+  const pathname = useLocation().pathname;
+  const tourByPathname = GuidedTourService.getByPathName(pathname);
+  const isOnboardingActive = !!tourByPathname;
+  const {onStart} = useGuidedTour();
+  const items = useMemo(
+    () => getMenuItems({isOnboardingActive, onClickOnboarding: onStart}),
+    [isOnboardingActive, onStart]
+  );
+
+  return (
+    <Dropdown overlay={<Menu items={items} />}>
+      <a onClick={e => e.preventDefault()}>
+        <Space>
+          <S.QuestionIcon data-cy="menu-link" />
+        </Space>
+      </a>
+    </Dropdown>
+  );
+};
+
+export default HelpMenu;