diff --git a/src/pageLayout/containers/MainNavigation.scss b/src/pageLayout/containers/MainNavigation.scss index 067bec123d..b4e575b2da 100644 --- a/src/pageLayout/containers/MainNavigation.scss +++ b/src/pageLayout/containers/MainNavigation.scss @@ -1,3 +1,24 @@ -.helpBarStyle { +@import '@influxdata/clockface/dist/variables.scss'; + +.nav-item-support { margin-top: auto !important; } + +.nav-item-poc { + background: rgba(241, 241, 243, 0.05); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: $cf-space-s; + text-align: center; + margin-top: auto; + + .cf-button { + margin-top: $cf-space-s; + } + + + .nav-item-support { + margin-top: $cf-space-s !important; + } +} diff --git a/src/pageLayout/containers/MainNavigation.tsx b/src/pageLayout/containers/MainNavigation.tsx index d53c7333d6..a6066b3dd6 100644 --- a/src/pageLayout/containers/MainNavigation.tsx +++ b/src/pageLayout/containers/MainNavigation.tsx @@ -4,7 +4,14 @@ import {Link, useLocation} from 'react-router-dom' import {useDispatch, useSelector} from 'react-redux' // Components -import {Icon, IconFont, PopoverPosition, TreeNav} from '@influxdata/clockface' +import { + Button, + ComponentColor, + Icon, + IconFont, + PopoverPosition, + TreeNav, +} from '@influxdata/clockface' import UserWidget from 'src/pageLayout/components/UserWidget' import NavHeader from 'src/pageLayout/components/NavHeader' @@ -302,6 +309,12 @@ export const MainNavigation: FC = () => { event('helpBar.contactSupportRequest.overlay.shown') } + const handleRequestPocClick = () => { + event('nav.requestPOC.clicked') + const newTab = window.open('https://www.influxdata.com/proof-of-concept/') + newTab.focus() + } + return ( { ) })} + {accountType === 'free' && ( +
+ + This is a rate limited environment. Want to test the performance and + scalability of your workload? + +
+ )} } label="Help & Support" shortLabel="Support" - className="helpBarStyle" + className="nav-item-support" >