feat(ui): add request poc panel (#6838)

* feat(ui): add request poc panel

* feat(ui): use safeBlankLinkOpen

* feat(ui): add collapsed version of widget

* chore: add feature flag

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;
+  }
+}

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<Props> = ({expanded}) => {
+  const handleRequestPocClick = () => {
+    event('nav.requestPOC.clicked')
+    safeBlankLinkOpen('https://www.influxdata.com/proof-of-concept/')
+  }
+
+  const contents = (
+    <div className="nav-item-poc--contents">
+      <span>
+        This is a rate limited environment. Want to test the performance and
+        scalability of your workload?
+      </span>
+      <Button
+        icon={IconFont.Flask}
+        text="Request a POC"
+        color={ComponentColor.Primary}
+        onClick={handleRequestPocClick}
+      />
+    </div>
+  )
+
+  if (expanded) {
+    return <div className="nav-item-poc">{contents}</div>
+  } else {
+    return (
+      <TreeNav.Item
+        id="nav-item-poc"
+        testID="nav-item-poc"
+        icon={<Icon glyph={IconFont.Flask} />}
+        label="Request a POC"
+        shortLabel="POC"
+        className="nav-item-poc"
+      >
+        <TreeNav.SubMenu>{contents}</TreeNav.SubMenu>
+      </TreeNav.Item>
+    )
+  }
+}

src/pageLayout/containers/MainNavigation.scss

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

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 = () => {
           </TreeNav.Item>
         )
       })}
+      {showPocRequest && (
+        <RequestPocWidget expanded={navbarMode === 'expanded'} />
+      )}
       <TreeNav.Item
         id="support"
         testID="nav-item-support"
         icon={<Icon glyph={IconFont.QuestionMark_Outline} />}
         label="Help &amp; Support"
         shortLabel="Support"
-        className="helpBarStyle"
+        className="nav-item-support"
       >
         <TreeNav.SubMenu position={PopoverPosition.ToTheRight}>
           <TreeNav.SubHeading label="Support" />