From 0e499bfda52bd9e5e32ca76a97993439d20ac1a6 Mon Sep 17 00:00:00 2001
From: Chitlange Sahas <chitlangesahas@gmail.com>
Date: Thu, 1 Sep 2022 09:18:07 -0700
Subject: [PATCH] feat(multi-org): render RateLimitAlert.tsx in global header
 when multiOrg flag is on (#5549)

---
 src/accounts/AccountHeader.tsx                |  3 +-
 src/alerting/components/AlertHistoryIndex.tsx |  3 +-
 src/alerting/components/AlertingIndex.tsx     |  6 ++--
 src/billing/components/BillingPage.tsx        |  5 +++-
 src/checks/components/CheckHistory.tsx        |  5 +++-
 src/cloud/components/RateLimitAlert.scss      |  8 +++++
 src/cloud/components/RateLimitAlert.tsx       |  7 +++++
 .../components/RateLimitAlertContent.tsx      |  4 ++-
 src/dashboards/components/DashboardPage.tsx   |  5 +++-
 .../dashboard_index/DashboardsIndex.tsx       |  5 +++-
 .../components/DataExplorerPage.tsx           |  6 ++--
 src/flows/components/FlowsIndex.tsx           |  2 +-
 .../containers/ArduinoWizard.tsx              |  5 +++-
 .../containers/CliWizard.tsx                  |  5 +++-
 .../containers/GoWizard.tsx                   |  5 +++-
 .../containers/HomepageContainer.tsx          |  4 ++-
 .../containers/NodejsWizard.tsx               |  5 +++-
 .../containers/PythonWizard.tsx               |  5 +++-
 .../components/GlobalHeader/GlobalHeader.tsx  | 29 ++++++++++++-------
 .../GlobalHeader/GlobalHeaderStyle.scss       |  4 +--
 .../GlobalHeader/UserPopoverStyles.scss       |  2 +-
 src/organizations/components/OrgHeader.tsx    |  3 +-
 src/settings/components/LoadDataHeader.tsx    |  3 +-
 src/settings/components/SettingsHeader.tsx    |  3 +-
 src/shared/components/cloud/CloudOnly.scss    |  6 +---
 src/tasks/components/TaskHeader.tsx           |  3 +-
 src/tasks/components/TaskRunsPage.tsx         |  5 +++-
 src/tasks/components/TasksHeader.tsx          |  4 +--
 28 files changed, 107 insertions(+), 43 deletions(-)

diff --git a/src/accounts/AccountHeader.tsx b/src/accounts/AccountHeader.tsx
index dcae358a24..e32b418b38 100644
--- 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
index fc522dc6a2..0219e30345 100644
--- 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
index 4300662848..e5e64c7ac0 100644
--- 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
index 130eaf69ed..dceb7609f5 100644
--- 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
index 6571e59d40..21209ccb55 100644
--- 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
index c4b738d7ec..3242b89d54 100644
--- 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
index ff9fa3d3f2..819a38ca34 100644
--- 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,6 +128,7 @@ const RateLimitAlert: FC<Props> = ({alertOnly, className, location}) => {
           icon={icon}
           hideMobileIcon={true}
           textColor={InfluxColors.Yeti}
+          style={bannerStyle}
         >
           <RateLimitAlertContent />
         </BannerPanel>
@@ -131,6 +136,7 @@ const RateLimitAlert: FC<Props> = ({alertOnly, className, location}) => {
     )
   }
 
+  // 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
index babd4ed0c6..2740333f02 100644
--- 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
index 00c6157d78..5805a81863 100644
--- 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
index d4e3605cb2..3cc224b7c2 100644
--- 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
index 5275cae232..9fb8e564ee 100644
--- 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
index 379f14340a..96ba1fecf8 100644
--- 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
index 4902da6c65..c47c49f2b6 100644
--- 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
index 5dca6b077b..2124e6aa86 100644
--- 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
index 3b91b28e08..ae47cced9e 100644
--- 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
index 2a3e9da51d..f9a3fcd827 100644
--- 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
index 3b561a46e5..e32a84cb7e 100644
--- 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
index 40e84cf107..72aaa48801 100644
--- 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
index 72ec2f5f55..5039011baa 100644
--- 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
 }
diff --git a/src/identity/components/GlobalHeader/GlobalHeaderStyle.scss b/src/identity/components/GlobalHeader/GlobalHeaderStyle.scss
index e633e95ebc..5e46340a0c 100644
--- a/src/identity/components/GlobalHeader/GlobalHeaderStyle.scss
+++ b/src/identity/components/GlobalHeader/GlobalHeaderStyle.scss
@@ -1,10 +1,10 @@
 .multiaccountorg--header {
   height: 60px;
-  padding-top: 12px;
+  padding-top: 0px;
   padding-right: 32px;
   padding-bottom: 12px;
   padding-left: 22px;
-  margin-top: 0px;
+  margin-top: 12px;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
diff --git a/src/identity/components/GlobalHeader/UserPopoverStyles.scss b/src/identity/components/GlobalHeader/UserPopoverStyles.scss
index b4cca2642b..59ed81617d 100644
--- a/src/identity/components/GlobalHeader/UserPopoverStyles.scss
+++ b/src/identity/components/GlobalHeader/UserPopoverStyles.scss
@@ -18,7 +18,7 @@
 .user-popover {
   visibility: hidden;
   position: absolute;
-  top: 60px;
+  top: 75px;
   right: 32px;
   z-index: 9999;
   min-width: 250px;
diff --git a/src/organizations/components/OrgHeader.tsx b/src/organizations/components/OrgHeader.tsx
index 509446d36b..3b52f24c00 100644
--- a/src/organizations/components/OrgHeader.tsx
+++ b/src/organizations/components/OrgHeader.tsx
@@ -3,6 +3,7 @@ import React, {FC} from 'react'
 // Components
 import {Page} from '@influxdata/clockface'
 import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 type Props = {
   testID?: string
@@ -11,7 +12,7 @@ type Props = {
 const OrgHeader: FC<Props> = ({testID = 'member-page--header'}) => (
   <Page.Header fullWidth={true} testID={testID}>
     <Page.Title title="Organization" />
-    <RateLimitAlert location="organization" />
+    {!isFlagEnabled('multiOrg') && <RateLimitAlert location="organization" />}
   </Page.Header>
 )
 
diff --git a/src/settings/components/LoadDataHeader.tsx b/src/settings/components/LoadDataHeader.tsx
index 9119dc14c6..59cd8b27a7 100644
--- a/src/settings/components/LoadDataHeader.tsx
+++ b/src/settings/components/LoadDataHeader.tsx
@@ -3,12 +3,13 @@ import React, {FC} from 'react'
 // Components
 import {Page} from '@influxdata/clockface'
 import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 const LoadDataHeader: FC = () => {
   return (
     <Page.Header fullWidth={true} testID="load-data--header">
       <Page.Title title="Load Data" />
-      <RateLimitAlert location="load data" />
+      {!isFlagEnabled('multiOrg') && <RateLimitAlert location="load data" />}
     </Page.Header>
   )
 }
diff --git a/src/settings/components/SettingsHeader.tsx b/src/settings/components/SettingsHeader.tsx
index 18a21659c5..0b190c9373 100644
--- a/src/settings/components/SettingsHeader.tsx
+++ b/src/settings/components/SettingsHeader.tsx
@@ -3,13 +3,14 @@ import React, {Component} from 'react'
 // Components
 import {Page} from '@influxdata/clockface'
 import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 class SettingsHeader extends Component {
   public render() {
     return (
       <Page.Header fullWidth={true}>
         <Page.Title title="Settings" testID="settings-page--header" />
-        <RateLimitAlert location="settings" />
+        {!isFlagEnabled('multiOrg') && <RateLimitAlert location="settings" />}
       </Page.Header>
     )
   }
diff --git a/src/shared/components/cloud/CloudOnly.scss b/src/shared/components/cloud/CloudOnly.scss
index 9fcf647fe7..21ae3b4ec7 100644
--- a/src/shared/components/cloud/CloudOnly.scss
+++ b/src/shared/components/cloud/CloudOnly.scss
@@ -12,10 +12,6 @@
   display: inline-flex;
   flex-direction: column;
   font-weight: 500;
-
-  .rate-alert--button {
-    margin-top: $cf-space-2xs;
-  }
 }
 
 .flex-upgrade-content.rate-alert--content__free {
@@ -23,7 +19,7 @@
 }
 
 .upgrade-message {
-  padding: $cf-marg-b;
+  padding-right: $cf-marg-c;
 }
 
 .cf-page--title {
diff --git a/src/tasks/components/TaskHeader.tsx b/src/tasks/components/TaskHeader.tsx
index a20701e76e..94bfe42eba 100644
--- a/src/tasks/components/TaskHeader.tsx
+++ b/src/tasks/components/TaskHeader.tsx
@@ -9,6 +9,7 @@ import {
   Page,
 } from '@influxdata/clockface'
 import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 interface Props {
   title: string
@@ -24,7 +25,7 @@ export default class TaskHeader extends PureComponent<Props> {
       <>
         <Page.Header fullWidth={true}>
           <Page.Title title={title} />
-          <RateLimitAlert location="tasks" />
+          {!isFlagEnabled('multiOrg') && <RateLimitAlert location="tasks" />}
         </Page.Header>
         <Page.ControlBar fullWidth={true}>
           <Page.ControlBarRight>
diff --git a/src/tasks/components/TaskRunsPage.tsx b/src/tasks/components/TaskRunsPage.tsx
index edf79356d3..d1c4f49304 100644
--- a/src/tasks/components/TaskRunsPage.tsx
+++ b/src/tasks/components/TaskRunsPage.tsx
@@ -24,6 +24,7 @@ import {pageTitleSuffixer} from 'src/shared/utils/pageTitles'
 import {SortTypes} from 'src/shared/utils/sort'
 import TimeZoneDropdown from 'src/shared/components/TimeZoneDropdown'
 import {getAll} from 'src/resources/selectors'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 type ReduxProps = ConnectedProps<typeof connector>
 type Props = ReduxProps & RouteComponentProps<{id: string; orgID: string}>
@@ -68,7 +69,9 @@ class TaskRunsPage extends PureComponent<Props, State> {
                 },
               ]}
             />
-            <RateLimitAlert location="task runs" />
+            {!isFlagEnabled('multiOrg') && (
+              <RateLimitAlert location="task runs" />
+            )}
           </Page.Header>
           <Page.ControlBar fullWidth={true}>
             <TaskRunsCard task={currentTask} isTaskEditable={isTaskEditable} />
diff --git a/src/tasks/components/TasksHeader.tsx b/src/tasks/components/TasksHeader.tsx
index e30fec0a8f..941469a6de 100644
--- a/src/tasks/components/TasksHeader.tsx
+++ b/src/tasks/components/TasksHeader.tsx
@@ -21,7 +21,7 @@ import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
 
 // Utils
 import {event} from 'src/cloud/utils/reporting'
-import {FeatureFlag} from 'src/shared/utils/featureFlag'
+import {FeatureFlag, isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 // Types
 import {setSearchTerm as setSearchTermAction} from 'src/tasks/actions/creators'
@@ -83,7 +83,7 @@ const TasksHeader: FC<Props> = ({
     <>
       <Page.Header fullWidth={true} testID="tasks-page--header">
         <Page.Title title="Tasks" />
-        <RateLimitAlert location="task list" />
+        {!isFlagEnabled('multiOrg') && <RateLimitAlert location="task list" />}
       </Page.Header>
       {flowsCTA.tasks && (
         <FeatureFlag name="flowsCTA">