feat: Move help bar nav item to bottom of nav bar (#4622)

* feat: moving help and support item to the bottom

* feat: moved helpbar to the bottom of nav bar

* feat: adjust position of helpbar popover

* fix: prettier

* chore: clean up

* chore: clean up

* chore: update clockface

* chore: clean up

Author: blegesse-w

package.json

@@ -164,7 +164,7 @@
   "dependencies": {
     "@codingame/monaco-jsonrpc": "^0.3.1",
     "@docsearch/react": "^3.0.0-alpha.37",
-    "@influxdata/clockface": "^4.0.1",
+    "@influxdata/clockface": "^4.2.0",
     "@influxdata/flux-lsp-browser": "0.8.8",
     "@influxdata/giraffe": "^2.26.0",
     "@influxdata/influxdb-templates": "0.9.0",

src/pageLayout/containers/TreeNav.scss

@@ -0,0 +1,3 @@
+.helpBarStyle {
+  margin-top: auto !important;
+}

src/pageLayout/containers/TreeNav.tsx

@@ -6,7 +6,7 @@ import {connect, ConnectedProps} from 'react-redux'
 import {withRouter, RouteComponentProps} from 'react-router-dom'
 
 // Components
-import {Icon, IconFont, TreeNav} from '@influxdata/clockface'
+import {Icon, IconFont, PopoverPosition, 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'
@@ -27,6 +27,7 @@ import {NavItem, NavSubItem} from 'src/pageLayout/constants/navigationHierarchy'
 import {AppState} from 'src/types'
 
 import {showOverlay, dismissOverlay} from 'src/overlays/actions/overlays'
+import './TreeNav.scss'
 
 type ReduxProps = ConnectedProps<typeof connector>
 
@@ -163,8 +164,9 @@ const TreeSidebar: FC<ReduxProps & RouteComponentProps> = () =>
               icon={<Icon glyph={IconFont.QuestionMark_New} />}
               label="Help & Support"
               shortLabel="Support"
+              className="helpBarStyle"
             >
-              <TreeNav.SubMenu>
+              <TreeNav.SubMenu position={PopoverPosition.ToTheRight}>
                 <TreeNav.SubHeading label="Support" />
                 <TreeNav.SubItem
                   id="documentation"

yarn.lock

@@ -1451,10 +1451,10 @@
     gud "^1.0.0"
     warning "^4.0.3"
 
-"@influxdata/clockface@^4.0.1":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@influxdata/clockface/-/clockface-4.0.1.tgz#fe9175301b3c7914bf2165e15f0a904572aadeff"
-  integrity sha512-c4tFxs1/9zR3kc7/Y77mZdo6NsThznfYz+q6O64PqOykqDClgpfCzbpVmG+Tfm06Je4jF4Om3Ssek3cC6lYodw==
+"@influxdata/clockface@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@influxdata/clockface/-/clockface-4.2.0.tgz#f41aba10b00bb21f24075bffe7b48a95507dfd24"
+  integrity sha512-DXReWwAOqMM+GqfP3pMiskPpOJRflHlymxgfaxpQkLOkXVeaK5UcQBaV1MKdgNFlPS8vAb1nE0KTnbg7/25SAw==
 
 "@influxdata/flux-lsp-browser@0.8.8":
   version "0.8.8"