feat(Help Bar): Add sub nav items to Help & Support (#4323)

* feat: add sub menu items to support

* chore: clean up

* feat: update sub menu css depending on nav status

* chore: return early inside useEffect

* feat: use two effect hooks for nav bar conditions

* fix: prettier

* chore: clean up

* chore: clean up

* chore: remove Unnecessary curly braces??

* chore: move useEffect to the top

* chore: moved conditions inside effect hook

* chore: remove more Unnecessary curlt braces

* fix: prettier

Author: blegesse-w

src/pageLayout/constants/navigationHierarchy.ts

@@ -202,16 +202,6 @@ export const generateNavItems = (): NavItem[] => {
       link: `/operator`,
       activeKeywords: ['operator'],
     },
-    {
-      id: 'support',
-      testID: 'nav-item-support',
-      icon: IconFont.QuestionMark_New,
-      label: 'Help & Support',
-      shortLabel: 'Support',
-      link: '',
-      activeKeywords: [''],
-      enabled: () => isFlagEnabled('helpBar'),
-    },
   ]
 
   navItems = navItems.filter(item => {

src/pageLayout/containers/TreeNav.tsx

@@ -1,10 +1,10 @@
 // Libraries
-import React, {FC, useContext} from 'react'
+import React, {FC, useContext, useEffect} from 'react'
 import {Link} from 'react-router-dom'
 import {useSelector} from 'react-redux'
 
 // Components
-import {Icon, TreeNav} from '@influxdata/clockface'
+import {Icon, IconFont, TreeNav} from '@influxdata/clockface'
 import UserWidget from 'src/pageLayout/components/UserWidget'
 import NavHeader from 'src/pageLayout/components/NavHeader'
 import OrgSettings from 'src/cloud/components/OrgSettings'
@@ -17,6 +17,7 @@ import {getNavItemActivation} from 'src/pageLayout/utils'
 import {getOrg} from 'src/organizations/selectors'
 import {AppSettingContext} from 'src/shared/contexts/app'
 import {event} from 'src/cloud/utils/reporting'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 // Types
 import {NavItem, NavSubItem} from 'src/pageLayout/constants/navigationHierarchy'
@@ -26,6 +27,19 @@ const TreeSidebar: FC = () => {
   const {presentationMode, navbarMode, setNavbarMode} = useContext(
     AppSettingContext
   )
+  useEffect(() => {
+    if (isFlagEnabled('helpBar')) {
+      const helpBarMenu = document.querySelectorAll<HTMLElement>(
+        '.cf-tree-nav--sub-menu-trigger'
+      )[3]
+      if (navbarMode === 'expanded') {
+        helpBarMenu.style.display = 'block'
+        helpBarMenu.style.width = '243px'
+      } else {
+        helpBarMenu.style.width = '44px'
+      }
+    }
+  }, [setNavbarMode, navbarMode])
 
   if (presentationMode || !org) {
     return null
@@ -106,6 +120,57 @@ const TreeSidebar: FC = () => {
             </TreeNav.Item>
           )
         })}
+        {isFlagEnabled('helpBar') ? (
+          <TreeNav.Item
+            id="support"
+            testID="nav-item-support"
+            icon={<Icon glyph={IconFont.QuestionMark_New} />}
+            label="Help & Support"
+            shortLabel="Support"
+          >
+            <TreeNav.SubMenu>
+              <TreeNav.SubHeading label="Support" />
+              <TreeNav.SubItem
+                id="documentation"
+                label="Documentation"
+                testID="nav-subitem-documentation"
+                linkElement={className => <Link className={className} to="" />}
+              />
+              <TreeNav.SubItem
+                id="faqs"
+                label="FAQs"
+                testID="nav-subitem-faqs"
+                linkElement={className => <Link className={className} to="" />}
+              />
+              <TreeNav.SubItem
+                id="contactSupport"
+                label="Contact Support"
+                testID="nav-subitem-contact-support"
+                linkElement={className => <Link className={className} to="" />}
+              />
+              <TreeNav.SubHeading label="Community" />
+              <TreeNav.SubItem
+                id="offcialForum"
+                label="Official Forum"
+                testID="nav-subitem-forum"
+                linkElement={className => <Link className={className} to="" />}
+              />
+              <TreeNav.SubItem
+                id="influxdbSlack"
+                label="InfluxDB Slack"
+                testID="nav-subitem-influxdb-slack"
+                linkElement={className => <Link className={className} to="" />}
+              />
+              <TreeNav.SubHeading label="Feedback" />
+              <TreeNav.SubItem
+                id="feedback"
+                label="Feedback & Questions"
+                testID="nav-subitem-feedback-questions"
+                linkElement={className => <Link className={className} to="" />}
+              />
+            </TreeNav.SubMenu>
+          </TreeNav.Item>
+        ) : null}
       </TreeNav>
     </OrgSettings>
   )