feat(multi-org): render RateLimitAlert.tsx in global header when mult…

…iOrg flag is on (#5549)
influxdata · Sep 1, 2022 · 0e499bf · 0e499bf
1 parent decf176
commit 0e499bf
Show file tree

Hide file tree

Showing 28 changed files with 107 additions and 43 deletions.
diff --git a/src/accounts/AccountHeader.tsx b/src/accounts/AccountHeader.tsx
@@ -4,6 +4,7 @@ import React, {FC} from 'react'
 import {Page} from '@influxdata/clockface'
 import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
 import LimitChecker from 'src/cloud/components/LimitChecker'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 type Props = {
   testID?: string
@@ -13,7 +14,7 @@ const AccountHeader: FC<Props> = ({testID = 'member-page--header'}) => (
   <Page.Header fullWidth={true} testID={testID}>
     <Page.Title title="Account" />
     <LimitChecker>
-      <RateLimitAlert location="account" />
+      {!isFlagEnabled('multiOrg') && <RateLimitAlert location="account" />}
     </LimitChecker>
   </Page.Header>
 )

diff --git a/src/alerting/components/AlertHistoryIndex.tsx b/src/alerting/components/AlertHistoryIndex.tsx
@@ -34,6 +34,7 @@ import {ResourceIDs} from 'src/checks/reducers'
 import {ResourceType, AlertHistoryType, AppState} from 'src/types'
 import {RouteComponentProps} from 'react-router-dom'
 import TimeZoneDropdown from 'src/shared/components/TimeZoneDropdown'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 export const ResourceIDsContext = createContext<ResourceIDs>(null)
 
@@ -82,7 +83,7 @@ const AlertHistoryIndex: FC<Props> = ({
                   title="Check Statuses"
                   testID="alert-history-title"
                 />
-                <RateLimitAlert />
+                {!isFlagEnabled('multiOrg') && <RateLimitAlert />}
               </Page.Header>
               <Page.ControlBar fullWidth={true}>
                 <Page.ControlBarRight>

diff --git a/src/alerting/components/AlertingIndex.tsx b/src/alerting/components/AlertingIndex.tsx
@@ -24,7 +24,7 @@ import {
   ThresholdCheckOverlay,
   DeadmanCheckOverlay as NewDeadmanCheckEO,
 } from 'src/overlays/components'
-import {FeatureFlag} from 'src/shared/utils/featureFlag'
+import {FeatureFlag, isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 // Utils
 import {pageTitleSuffixer} from 'src/shared/utils/pageTitles'
@@ -65,7 +65,9 @@ const AlertingIndex: FunctionComponent = () => {
         <Page.Header fullWidth={true} testID="alerts-page--header">
           <Page.Title title="Alerts" />
           <ErrorBoundary>
-            <RateLimitAlert location="alerting" />
+            {!isFlagEnabled('multiOrg') && (
+              <RateLimitAlert location="alerting" />
+            )}
           </ErrorBoundary>
         </Page.Header>
         <Page.Contents

diff --git a/src/billing/components/BillingPage.tsx b/src/billing/components/BillingPage.tsx
@@ -11,6 +11,7 @@ import LimitChecker from 'src/cloud/components/LimitChecker'
 // Utils
 import {pageTitleSuffixer} from 'src/shared/utils/pageTitles'
 import AccountTabContainer from 'src/accounts/AccountTabContainer'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 const BillingPage: FC = () => {
   return (
@@ -19,7 +20,9 @@ const BillingPage: FC = () => {
         <Page.Header fullWidth={true} testID="billing-page--header">
           <Page.Title title="Account" />
           <LimitChecker>
-            <RateLimitAlert location="billing" />
+            {!isFlagEnabled('multiOrg') && (
+              <RateLimitAlert location="billing" />
+            )}
           </LimitChecker>
         </Page.Header>
         <AccountTabContainer activeTab="billing">

diff --git a/src/checks/components/CheckHistory.tsx b/src/checks/components/CheckHistory.tsx
@@ -28,6 +28,7 @@ import {pageTitleSuffixer} from 'src/shared/utils/pageTitles'
 
 // Types
 import {AppState, ResourceType} from 'src/types'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 const CheckHistory: FC = () => {
   const resourceIDs = useSelector((state: AppState) => ({
@@ -57,7 +58,9 @@ const CheckHistory: FC = () => {
                   title="Check Statuses"
                   testID="alert-history-title"
                 />
-                <RateLimitAlert location="check history" />
+                {!isFlagEnabled('multiOrg') && (
+                  <RateLimitAlert location="check history" />
+                )}
               </Page.Header>
               <Page.ControlBar fullWidth={true}>
                 <Page.ControlBarLeft>

diff --git a/src/cloud/components/RateLimitAlert.scss b/src/cloud/components/RateLimitAlert.scss
@@ -2,3 +2,11 @@
   display: flex;
   align-items: center;
 }
+
+.cf-panel--body__xs {
+  padding: 8px;
+}
+
+.cf-banner-panel .cf-panel--body__xs .cf-banner-panel--icon {
+  margin-right: 0;
+}
diff --git a/src/cloud/components/RateLimitAlert.tsx b/src/cloud/components/RateLimitAlert.tsx
@@ -56,6 +56,8 @@ interface Props {
   location?: string
 }
 
+const bannerStyle = {border: 'none', borderRadius: '6px'}
+
 const RateLimitAlert: FC<Props> = ({alertOnly, className, location}) => {
   const resources = useSelector(extractRateLimitResources)
   const status = useSelector(extractRateLimitStatus)
@@ -68,6 +70,7 @@ const RateLimitAlert: FC<Props> = ({alertOnly, className, location}) => {
     dispatch(showOverlay('write-limit', null, () => dispatch(dismissOverlay)))
   }
 
+  // notification for write limit reached
   useEffect(() => {
     if (CLOUD && status === 'exceeded' && resources.includes('write')) {
       if (showUpgrade) {
@@ -110,6 +113,7 @@ const RateLimitAlert: FC<Props> = ({alertOnly, className, location}) => {
     ? IconFont.AlertTriangle
     : IconFont.Cloud
 
+  // banner panel for cardinality limit exceeded
   if (CLOUD && status === 'exceeded' && resources.includes('cardinality')) {
     return (
       <FlexBox
@@ -124,13 +128,15 @@ const RateLimitAlert: FC<Props> = ({alertOnly, className, location}) => {
           icon={icon}
           hideMobileIcon={true}
           textColor={InfluxColors.Yeti}
+          style={bannerStyle}
         >
           <RateLimitAlertContent />
         </BannerPanel>
       </FlexBox>
     )
   }
 
+  // upgrade button
   if (CLOUD && !alertOnly) {
     return (
       <CloudUpgradeButton
@@ -155,6 +161,7 @@ const RateLimitAlert: FC<Props> = ({alertOnly, className, location}) => {
             }
           )
         }}
+        size={ComponentSize.ExtraSmall}
       />
     )
   }

diff --git a/src/cloud/components/RateLimitAlertContent.tsx b/src/cloud/components/RateLimitAlertContent.tsx
@@ -109,8 +109,9 @@ export const UpgradeContent: FC<UpgradeProps> = ({
   return (
     <div className={`${className} rate-alert--content__free`}>
       <FlexBox
-        justifyContent={JustifyContent.Center}
+        justifyContent={JustifyContent.SpaceBetween}
         className="rate-alert--button"
+        stretchToFitWidth={true}
       >
         <UpgradeMessage
           {...{isCredit250ExperienceActive, limitText, link, type}}
@@ -138,6 +139,7 @@ export const UpgradeContent: FC<UpgradeProps> = ({
               }
             )
           }}
+          size={ComponentSize.ExtraSmall}
         />
       </FlexBox>
     </div>

diff --git a/src/dashboards/components/DashboardPage.tsx b/src/dashboards/components/DashboardPage.tsx
@@ -46,6 +46,7 @@ import {
   DASHBOARD_ID,
 } from 'src/shared/constants/routes'
 import ErrorBoundary from 'src/shared/components/ErrorBoundary'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 const dashRoute = `/${ORGS}/${ORG_ID}/${DASHBOARDS}/${DASHBOARD_ID}`
 
@@ -62,7 +63,9 @@ const SingleDashboardPage: FC<ManualRefreshProps> = ({
   return (
     <>
       <DashboardHeader onManualRefresh={onManualRefresh} />
-      <RateLimitAlert alertOnly={true} location="dashboard page" />
+      {!isFlagEnabled('multiOrg') && (
+        <RateLimitAlert alertOnly={true} location="dashboard page" />
+      )}
       <VariablesControlBar />
       <ErrorBoundary>
         <DashboardComponent manualRefresh={manualRefresh} />

diff --git a/src/dashboards/components/dashboard_index/DashboardsIndex.tsx b/src/dashboards/components/dashboard_index/DashboardsIndex.tsx
@@ -44,6 +44,7 @@ import {SortTypes} from 'src/shared/utils/sort'
 import {DashboardSortKey} from 'src/shared/components/resource_sort_dropdown/generateSortItems'
 
 import ErrorBoundary from 'src/shared/components/ErrorBoundary'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 type ReduxProps = ConnectedProps<typeof connector>
 type Props = ReduxProps & RouteComponentProps<{orgID: string}>
@@ -120,7 +121,9 @@ class DashboardIndex extends PureComponent<Props, State> {
         >
           <Page.Header fullWidth={true}>
             <Page.Title title="Dashboards" />
-            <RateLimitAlert location="dashboards" />
+            {!isFlagEnabled('multiOrg') && (
+              <RateLimitAlert location="dashboards" />
+            )}
           </Page.Header>
           <Page.ControlBar fullWidth={true}>
             <ErrorBoundary>

diff --git a/src/dataExplorer/components/DataExplorerPage.tsx b/src/dataExplorer/components/DataExplorerPage.tsx
@@ -29,7 +29,7 @@ import RenamablePageTitle from 'src/pageLayout/components/RenamablePageTitle'
 // Utils
 import {pageTitleSuffixer} from 'src/shared/utils/pageTitles'
 import {event, useLoadTimeReporting} from 'src/cloud/utils/reporting'
-import {FeatureFlag} from 'src/shared/utils/featureFlag'
+import {FeatureFlag, isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 // Types
 import {ResourceType} from 'src/types'
@@ -98,7 +98,9 @@ const DataExplorerPageHeader: FC = () => {
             />
           </FlexBox>
         </FeatureFlag>
-        <RateLimitAlert location="data explorer" />
+        {!isFlagEnabled('multiOrg') && (
+          <RateLimitAlert location="data explorer" />
+        )}
       </FlexBox>
     </Page.Header>
   )

diff --git a/src/flows/components/FlowsIndex.tsx b/src/flows/components/FlowsIndex.tsx
@@ -149,7 +149,7 @@ const FlowsIndex = () => {
             stretchToFitWidth
           >
             <Page.Title title={PROJECT_NAME_PLURAL} />
-            <RateLimitAlert location="flows" />
+            {!isFlagEnabled('multiOrg') && <RateLimitAlert location="flows" />}
           </FlexBox>
         )}
         {showButtonMode &&

diff --git a/src/homepageExperience/containers/ArduinoWizard.tsx b/src/homepageExperience/containers/ArduinoWizard.tsx
@@ -29,6 +29,7 @@ import {event} from 'src/cloud/utils/reporting'
 import {HOMEPAGE_NAVIGATION_STEPS_ARDUINO} from 'src/homepageExperience/utils'
 import {normalizeEventName} from 'src/cloud/utils/reporting'
 import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 interface State {
   currentStep: number
@@ -173,7 +174,9 @@ export class ArduinoWizard extends PureComponent<{}, State> {
         <Page.Header fullWidth={false}>
           {/* Need an empty div so the upgrade button aligns to the right. (Because clockface uses space-between to justifyContent)*/}
           <div />
-          <RateLimitAlert location="firstMile.arduinoWizard" />
+          {!isFlagEnabled('multiOrg') && (
+            <RateLimitAlert location="firstMile.arduinoWizard" />
+          )}
         </Page.Header>
         <Page.Contents scrollable={true}>
           <div className="homepage-wizard-container">

diff --git a/src/homepageExperience/containers/CliWizard.tsx b/src/homepageExperience/containers/CliWizard.tsx
@@ -28,6 +28,7 @@ import {event} from 'src/cloud/utils/reporting'
 import {HOMEPAGE_NAVIGATION_STEPS_SHORT} from 'src/homepageExperience/utils'
 import {normalizeEventName} from 'src/cloud/utils/reporting'
 import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 interface State {
   currentStep: number
@@ -169,7 +170,9 @@ export class CliWizard extends PureComponent<{}, State> {
         <Page.Header fullWidth={false}>
           {/* Need an empty div so the upgrade button aligns to the right. (Because clockface uses space-between to justifyContent)*/}
           <div />
-          <RateLimitAlert location="firstMile.cliWizard" />
+          {!isFlagEnabled('multiOrg') && (
+            <RateLimitAlert location="firstMile.cliWizard" />
+          )}
         </Page.Header>
         <Page.Contents scrollable={true}>
           <div className="homepage-wizard-container">

diff --git a/src/homepageExperience/containers/GoWizard.tsx b/src/homepageExperience/containers/GoWizard.tsx
@@ -28,6 +28,7 @@ import {HOMEPAGE_NAVIGATION_STEPS} from 'src/homepageExperience/utils'
 // Utils
 import {event} from 'src/cloud/utils/reporting'
 import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 interface State {
   currentStep: number
@@ -172,7 +173,9 @@ export class GoWizard extends PureComponent<null, State> {
         <Page.Header fullWidth={false}>
           {/* Need an empty div so the upgrade button aligns to the right. (Because clockface uses space-between to justifyContent)*/}
           <div />
-          <RateLimitAlert location="firstMile.homepage" />
+          {!isFlagEnabled('multiOrg') && (
+            <RateLimitAlert location="firstMile.homepage" />
+          )}
         </Page.Header>
         <Page.Contents scrollable={true}>
           <div className="homepage-wizard-container">

diff --git a/src/homepageExperience/containers/HomepageContainer.tsx b/src/homepageExperience/containers/HomepageContainer.tsx
@@ -123,7 +123,9 @@ export const HomepageContainer: FC = () => {
           >
             Get Started
           </Heading>
-          <RateLimitAlert location="firstMile.homepage" />
+          {!isFlagEnabled('multiOrg') && (
+            <RateLimitAlert location="firstMile.homepage" />
+          )}
         </Page.Header>
         <Page.Contents scrollable={true} fullWidth={true}>
           <Grid>

diff --git a/src/homepageExperience/containers/NodejsWizard.tsx b/src/homepageExperience/containers/NodejsWizard.tsx
@@ -28,6 +28,7 @@ import {HOMEPAGE_NAVIGATION_STEPS} from 'src/homepageExperience/utils'
 // Utils
 import {event} from 'src/cloud/utils/reporting'
 import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 interface State {
   currentStep: number
@@ -172,7 +173,9 @@ export class NodejsWizard extends PureComponent<null, State> {
         <Page.Header fullWidth={false}>
           {/* Need an empty div so the upgrade button aligns to the right. (Because clockface uses space-between to justifyContent)*/}
           <div />
-          <RateLimitAlert location="firstMile.homepage" />
+          {!isFlagEnabled('multiOrg') && (
+            <RateLimitAlert location="firstMile.homepage" />
+          )}
         </Page.Header>
 
         <Page.Contents scrollable={true}>

diff --git a/src/homepageExperience/containers/PythonWizard.tsx b/src/homepageExperience/containers/PythonWizard.tsx
@@ -29,6 +29,7 @@ import {HOMEPAGE_NAVIGATION_STEPS} from 'src/homepageExperience/utils'
 // Utils
 import {event} from 'src/cloud/utils/reporting'
 import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 interface State {
   currentStep: number
@@ -175,7 +176,9 @@ export class PythonWizard extends PureComponent<null, State> {
         <Page.Header fullWidth={false}>
           {/* Need an empty div so the upgrade button aligns to the right. (Because clockface uses space-between to justifyContent)*/}
           <div />
-          <RateLimitAlert location="firstMile.homepage" />
+          {!isFlagEnabled('multiOrg') && (
+            <RateLimitAlert location="firstMile.homepage" />
+          )}
         </Page.Header>
         <Page.Contents scrollable={true}>
           <div className="homepage-wizard-container">

diff --git a/src/identity/components/GlobalHeader/GlobalHeader.tsx b/src/identity/components/GlobalHeader/GlobalHeader.tsx
@@ -31,6 +31,10 @@ import {
 } from 'src/identity/components/GlobalHeader/DefaultEntities'
 import {alphaSortSelectedFirst} from 'src/identity/utils/alphaSortSelectedFirst'
 import IdentityUserAvatar from 'src/identity/components/GlobalHeader/IdentityUserAvatar'
+import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
+
+const caretStyle = {fontSize: '18px', color: InfluxColors.Grey65}
+const rightHandContainerStyle = {width: '700px', marginLeft: 'auto'}
 
 export const GlobalHeader: FC = () => {
   const dispatch = useDispatch()
@@ -89,8 +93,6 @@ export const GlobalHeader: FC = () => {
     shouldLoadDropdowns || shouldLoadAvatar
   )
 
-  const caretStyle = {fontSize: '18px', color: InfluxColors.Grey65}
-
   return shouldLoadGlobalHeader ? (
     <FlexBox
       className="multiaccountorg--header"
@@ -110,14 +112,21 @@ export const GlobalHeader: FC = () => {
         </FlexBox>
       )}
 
-      {shouldLoadAvatar && (
-        <IdentityUserAvatar
-          email={user.email}
-          firstName={avatarFirstName}
-          lastName={avatarLastName}
-          orgId={org.id}
-        />
-      )}
+      <FlexBox
+        margin={ComponentSize.Large}
+        style={rightHandContainerStyle}
+        justifyContent={JustifyContent.FlexEnd}
+      >
+        <RateLimitAlert location="global header" />
+        {shouldLoadAvatar && (
+          <IdentityUserAvatar
+            email={user.email}
+            firstName={avatarFirstName}
+            lastName={avatarLastName}
+            orgId={org.id}
+          />
+        )}
+      </FlexBox>
     </FlexBox>
   ) : null
 }