feat(ui): add request poc panel

influxdata · Nov 8, 2023 · 74c32ac · 74c32ac
1 parent 63139c5
commit 74c32ac
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 3 deletions.
diff --git 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
@@ -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" />