fix(ui/asset-alert): fix asset-alert clipping dashboard contents

ui/src/buckets/components/BucketsTab.tsx

@@ -112,7 +112,7 @@ class BucketsTab extends PureComponent<Props, State> {
             titleText={this.createButtonTitleText}
           />
         </Tabs.TabContentsHeader>
-        <AssetLimitAlert resourceName="buckets" limitStatus={limitStatus}>
+        <AssetLimitAlert resourceName="buckets" limitStatus={limitStatus} />
         <FilterList<PrettyBucket>
           searchTerm={searchTerm}
           searchKeys={['name', 'ruleString', 'labels[].name']}
@@ -132,7 +132,6 @@ class BucketsTab extends PureComponent<Props, State> {
             />
           )}
         </FilterList>
-        </AssetLimitAlert>
         <Overlay visible={overlayState === OverlayState.Open}>
           <CreateBucketOverlay
             org={org}

ui/src/cloud/components/AssetLimitAlert.tsx

@@ -23,17 +23,21 @@ import CheckoutButton from 'src/cloud/components/CheckoutButton'
 interface Props {
   resourceName: string
   limitStatus: LimitStatus
+  className?: string
 }
 
 export default class AssetLimitAlert extends PureComponent<Props> {
   public render() {
-    const {limitStatus, resourceName} = this.props
+    const {limitStatus, resourceName, className} = this.props
+
     if (CLOUD && limitStatus === LimitStatus.EXCEEDED) {
       return (
         <ComponentSpacer
           direction={FlexDirection.Column}
           alignItems={AlignItems.Center}
           margin={ComponentSize.Large}
+          stretchToFitWidth={true}
+          className={className}
         >
           <Alert icon={IconFont.Cloud} color={ComponentColor.Primary}>
             <ComponentSpacer
@@ -50,10 +54,10 @@ export default class AssetLimitAlert extends PureComponent<Props> {
               <CheckoutButton />
             </ComponentSpacer>
           </Alert>
-          {this.props.children}
         </ComponentSpacer>
       )
     }
-    return this.props.children
+
+    return null
   }
 }

ui/src/dashboards/components/DashboardPage.tsx

@@ -186,10 +186,6 @@ class DashboardPage extends Component<Props, State> {
     return (
       <Page titleTag={this.pageTitle}>
         <LimitChecker>
-          <AssetLimitAlert
-            resourceName={resourceName}
-            limitStatus={limitStatus}
-          >
           <HoverTimeProvider>
             <DashboardHeader
               org={org}
@@ -213,6 +209,11 @@ class DashboardPage extends Component<Props, State> {
             {showVariablesControls && !!dashboard && (
               <VariablesControlBar dashboardID={dashboard.id} />
             )}
+            <AssetLimitAlert
+              resourceName={resourceName}
+              limitStatus={limitStatus}
+              className="dashboard--asset-alert"
+            />
             {!!dashboard && (
               <DashboardComponent
                 inView={this.inView}
@@ -231,7 +232,6 @@ class DashboardPage extends Component<Props, State> {
             )}
             {children}
           </HoverTimeProvider>
-          </AssetLimitAlert>
         </LimitChecker>
       </Page>
     )

ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx

@@ -99,7 +99,7 @@ class DashboardIndex extends PureComponent<Props, State> {
                     <AssetLimitAlert
                       resourceName="dashboards"
                       limitStatus={limitStatus}
-                    >
+                    />
                     <DashboardsIndexContents
                       filterComponent={() => (
                         <SearchWidget
@@ -116,7 +116,6 @@ class DashboardIndex extends PureComponent<Props, State> {
                       onFilterChange={this.handleFilterDashboards}
                       onImportDashboard={this.summonImportOverlay}
                     />
-                    </AssetLimitAlert>
                   </GetAssetLimits>
                 </GetResources>
               </GetResources>

ui/src/dataExplorer/components/DataExplorer.tsx

@@ -45,18 +45,17 @@ class DataExplorer extends PureComponent<Props, {}> {
     const {resourceName, limitStatus} = this.props
 
     return (
-      <div className="data-explorer">
       <LimitChecker>
         <AssetLimitAlert
           resourceName={resourceName}
           limitStatus={limitStatus}
-          >
+        />
+        <div className="data-explorer">
           <HoverTimeProvider>
             <TimeMachine />
           </HoverTimeProvider>
-          </AssetLimitAlert>
-        </LimitChecker>
         </div>
+      </LimitChecker>
     )
   }
 }

ui/src/shared/components/cloud/CloudOnly.scss

@@ -0,0 +1,4 @@
+.dashboard--asset-alert {
+    padding: 0 $page-gutter;
+    width: 100%
+}

ui/src/style/chronograf.scss

@@ -109,7 +109,11 @@
 @import 'src/onboarding/components/SigninForm.scss';
 @import 'src/shared/components/ThresholdsSettings.scss';
 @import 'src/shared/components/ThresholdMarkers.scss';
+<<<<<<< HEAD
 @import 'src/shared/components/DeleteDataForm/DeleteDataForm.scss';
+=======
+@import 'src/shared/components/cloud/CloudOnly.scss';
+>>>>>>> fix(ui/asset-alert): fix asset-alert clipping dashboard contents
 
 
 // External

ui/src/tasks/containers/TasksPage.tsx

@@ -134,7 +134,7 @@ class TasksPage extends PureComponent<Props, State> {
                     <AssetLimitAlert
                       resourceName="tasks"
                       limitStatus={limitStatus}
-                    >
+                    />
                     <FilterList<Task>
                       list={this.filteredTasks}
                       searchTerm={searchTerm}
@@ -169,7 +169,6 @@ class TasksPage extends PureComponent<Props, State> {
                       )}
                     </FilterList>
                     {this.hiddenTaskAlert}
-                    </AssetLimitAlert>
                   </GetAssetLimits>
                 </GetResources>
               </GetResources>