From 74c32ac0c004b12cd161bcd083fe42e08c58053a Mon Sep 17 00:00:00 2001
From: Daniel Campbell <metalwhirlwind@gmail.com>
Date: Wed, 8 Nov 2023 14:08:53 -0800
Subject: [PATCH 1/4] feat(ui): add request poc panel

---
 src/pageLayout/containers/MainNavigation.scss | 23 +++++++++++++-
 src/pageLayout/containers/MainNavigation.tsx  | 31 +++++++++++++++++--
 2 files changed, 51 insertions(+), 3 deletions(-)

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 (
     <TreeNav
       expanded={navbarMode === 'expanded'}
@@ -373,13 +386,27 @@ export const MainNavigation: FC = () => {
           </TreeNav.Item>
         )
       })}
+      {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>
+      )}
       <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" />

From 23521d48d54f5621a94457b699fd158dd19092e1 Mon Sep 17 00:00:00 2001
From: Daniel Campbell <metalwhirlwind@gmail.com>
Date: Thu, 9 Nov 2023 09:42:34 -0800
Subject: [PATCH 2/4] feat(ui): use safeBlankLinkOpen

---
 src/pageLayout/containers/MainNavigation.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pageLayout/containers/MainNavigation.tsx b/src/pageLayout/containers/MainNavigation.tsx
index a6066b3dd6..01abd5f669 100644
--- a/src/pageLayout/containers/MainNavigation.tsx
+++ b/src/pageLayout/containers/MainNavigation.tsx
@@ -25,6 +25,7 @@ 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'
@@ -311,8 +312,7 @@ export const MainNavigation: FC = () => {
 
   const handleRequestPocClick = () => {
     event('nav.requestPOC.clicked')
-    const newTab = window.open('https://www.influxdata.com/proof-of-concept/')
-    newTab.focus()
+    safeBlankLinkOpen('https://www.influxdata.com/proof-of-concept/')
   }
 
   return (

From 2269c839555e384b716af11c4362a751f93917cb Mon Sep 17 00:00:00 2001
From: Daniel Campbell <metalwhirlwind@gmail.com>
Date: Fri, 10 Nov 2023 11:16:34 -0800
Subject: [PATCH 3/4] feat(ui): add collapsed version of widget

---
 .../components/RequestPocWidget.scss          | 32 ++++++++++
 .../components/RequestPocWidget.tsx           | 61 +++++++++++++++++++
 src/pageLayout/containers/MainNavigation.scss | 21 -------
 src/pageLayout/containers/MainNavigation.tsx  | 29 +--------
 4 files changed, 96 insertions(+), 47 deletions(-)
 create mode 100644 src/pageLayout/components/RequestPocWidget.scss
 create mode 100644 src/pageLayout/components/RequestPocWidget.tsx

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<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>
+    )
+  }
+}
diff --git a/src/pageLayout/containers/MainNavigation.scss b/src/pageLayout/containers/MainNavigation.scss
index b4e575b2da..d50e9f99ed 100644
--- a/src/pageLayout/containers/MainNavigation.scss
+++ b/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;
-  }
-}
diff --git a/src/pageLayout/containers/MainNavigation.tsx b/src/pageLayout/containers/MainNavigation.tsx
index 01abd5f669..1f08beef80 100644
--- a/src/pageLayout/containers/MainNavigation.tsx
+++ b/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"

From 00d7d1eeb8fd35b314713a3955bc0e27d427254e Mon Sep 17 00:00:00 2001
From: Daniel Campbell <metalwhirlwind@gmail.com>
Date: Thu, 11 Jan 2024 10:30:32 -0800
Subject: [PATCH 4/4] chore: add feature flag

---
 src/pageLayout/containers/MainNavigation.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pageLayout/containers/MainNavigation.tsx b/src/pageLayout/containers/MainNavigation.tsx
index 1f08beef80..268057f324 100644
--- a/src/pageLayout/containers/MainNavigation.tsx
+++ b/src/pageLayout/containers/MainNavigation.tsx
@@ -249,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()
 
@@ -374,7 +376,7 @@ export const MainNavigation: FC = () => {
           </TreeNav.Item>
         )
       })}
-      {accountType === 'free' && (
+      {showPocRequest && (
         <RequestPocWidget expanded={navbarMode === 'expanded'} />
       )}
       <TreeNav.Item