feat(ui): add collapsed version of widget

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,24 +1,3 @@
-@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;
-  }
-}

src/pageLayout/containers/MainNavigation.tsx

@@ -4,16 +4,10 @@ import {Link, useLocation} from 'react-router-dom'
 import {useDispatch, useSelector} from 'react-redux'
 
 // Components
-import {
-  Button,
-  ComponentColor,
-  Icon,
-  IconFont,
-  PopoverPosition,
-  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 {RequestPocWidget} from '../components/RequestPocWidget'
 
 // Constants
 import {CLOUD} from 'src/shared/constants'
@@ -25,7 +19,6 @@ import {event} from 'src/cloud/utils/reporting'
 import {SafeBlankLink} from 'src/utils/SafeBlankLink'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 import {isUserOperator} from 'src/operator/utils'
-import {safeBlankLinkOpen} from 'src/utils/safeBlankLinkOpen'
 
 // Selectors
 import {getOrg, isOrgIOx} from 'src/organizations/selectors'
@@ -310,11 +303,6 @@ export const MainNavigation: FC = () => {
     event('helpBar.contactSupportRequest.overlay.shown')
   }
 
-  const handleRequestPocClick = () => {
-    event('nav.requestPOC.clicked')
-    safeBlankLinkOpen('https://www.influxdata.com/proof-of-concept/')
-  }
-
   return (
     <TreeNav
       expanded={navbarMode === 'expanded'}
@@ -387,18 +375,7 @@ export const MainNavigation: FC = () => {
         )
       })}
       {accountType === 'free' && (
-        <div className="nav-item-poc">
-          <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>
+        <RequestPocWidget expanded={navbarMode === 'expanded'} />
       )}
       <TreeNav.Item
         id="support"