diff --git a/src/pageLayout/components/RequestPocWidget.scss b/src/pageLayout/components/RequestPocWidget.scss new file mode 100644 index 0000000000..8605c45ef3 --- /dev/null +++ b/src/pageLayout/components/RequestPocWidget.scss @@ -0,0 +1,32 @@ +@import '@influxdata/clockface/dist/variables.scss'; + +.nav-item-poc--contents { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: $cf-space-s; + text-align: center; + background: rgba(241, 241, 243, 0.05); + + .cf-button { + margin-top: $cf-space-s; + } +} + +.nav-item-poc { + margin-top: auto !important; + + + .nav-item-support { + margin-top: $cf-space-s !important; + } +} + +.cf-popover { + .nav-item-poc--contents { + background: transparent; + padding: 0; + font-weight: normal; + width: 220px; + } +} diff --git a/src/pageLayout/components/RequestPocWidget.tsx b/src/pageLayout/components/RequestPocWidget.tsx new file mode 100644 index 0000000000..b3d4387e03 --- /dev/null +++ b/src/pageLayout/components/RequestPocWidget.tsx @@ -0,0 +1,61 @@ +// Libraries +import React, {FC} from 'react' + +// Components +import { + Button, + ComponentColor, + Icon, + IconFont, + TreeNav, +} from '@influxdata/clockface' + +// Utils +import {event} from 'src/cloud/utils/reporting' +import {safeBlankLinkOpen} from 'src/utils/safeBlankLinkOpen' + +// Styles +import 'src/pageLayout/components/RequestPocWidget.scss' + +interface Props { + expanded: boolean +} + +export const RequestPocWidget: FC = ({expanded}) => { + const handleRequestPocClick = () => { + event('nav.requestPOC.clicked') + safeBlankLinkOpen('https://www.influxdata.com/proof-of-concept/') + } + + const contents = ( +
+ + This is a rate limited environment. Want to test the performance and + scalability of your workload? + +
+ ) + + if (expanded) { + return
{contents}
+ } else { + return ( + } + label="Request a POC" + shortLabel="POC" + className="nav-item-poc" + > + {contents} + + ) + } +} diff --git a/src/pageLayout/containers/MainNavigation.scss b/src/pageLayout/containers/MainNavigation.scss index 067bec123d..d50e9f99ed 100644 --- a/src/pageLayout/containers/MainNavigation.scss +++ b/src/pageLayout/containers/MainNavigation.scss @@ -1,3 +1,3 @@ -.helpBarStyle { +.nav-item-support { margin-top: auto !important; } diff --git a/src/pageLayout/containers/MainNavigation.tsx b/src/pageLayout/containers/MainNavigation.tsx index d53c7333d6..268057f324 100644 --- a/src/pageLayout/containers/MainNavigation.tsx +++ b/src/pageLayout/containers/MainNavigation.tsx @@ -7,6 +7,7 @@ import {useDispatch, useSelector} from 'react-redux' import {Icon, IconFont, PopoverPosition, TreeNav} from '@influxdata/clockface' import UserWidget from 'src/pageLayout/components/UserWidget' import NavHeader from 'src/pageLayout/components/NavHeader' +import {RequestPocWidget} from '../components/RequestPocWidget' // Constants import {CLOUD} from 'src/shared/constants' @@ -248,6 +249,8 @@ export const MainNavigation: FC = () => { const shouldShowNotebooks = useSelector(selectShouldShowNotebooks) const isNewIOxOrg = useSelector(selectIsNewIOxOrg) const isIOxOrg = useSelector(isOrgIOx) + const showPocRequest = + accountType === 'free' && isFlagEnabled('navbarPocRequest') const dispatch = useDispatch() @@ -373,13 +376,16 @@ export const MainNavigation: FC = () => { ) })} + {showPocRequest && ( + + )} } label="Help & Support" shortLabel="Support" - className="helpBarStyle" + className="nav-item-support" >