fix: use correct resource card height when AssetLimitAlert is first in a row (#4631)

Author: TCL735

src/cloud/components/AssetLimitAlert.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {FC} from 'react'
+import React, {CSSProperties, FC} from 'react'
 
 // Components
 import {
@@ -34,15 +34,22 @@ interface Props {
   limitStatus: LimitStatus['status']
   resourceName: string
   className?: string
+  style?: CSSProperties
 }
 
-const AssetLimitAlert: FC<Props> = ({limitStatus, resourceName, className}) => {
+const AssetLimitAlert: FC<Props> = ({
+  limitStatus,
+  resourceName,
+  className,
+  style = {},
+}) => {
   if (CLOUD && limitStatus === 'exceeded') {
     return (
       <GradientBox
         borderGradient={Gradients.MiyazakiSky}
         borderColor={InfluxColors.Grey5}
         className={className}
+        style={{...style}}
       >
         <Panel backgroundColor={InfluxColors.Grey5} className="asset-alert">
           <Panel.Header>

src/dashboards/components/dashboard_index/DashboardCards.tsx

@@ -5,7 +5,7 @@ import memoizeOne from 'memoize-one'
 
 // Components
 import DashboardCard from 'src/dashboards/components/dashboard_index/DashboardCard'
-import {TechnoSpinner} from '@influxdata/clockface'
+import {ResourceCard, TechnoSpinner} from '@influxdata/clockface'
 import AssetLimitAlert from 'src/cloud/components/AssetLimitAlert'
 
 // Selectors
@@ -60,6 +60,9 @@ class DashboardCards extends PureComponent<Props> {
   private _observer
   private _isMounted = true
   private _spinner
+  private _assetLimitAlertStyle = {
+    height: 'inherit',
+  }
 
   private memGetSortedResources = memoizeOne<typeof getSortedResources>(
     getSortedResources
@@ -69,6 +72,7 @@ class DashboardCards extends PureComponent<Props> {
     pages: 1,
     windowSize: 0,
     pinnedItems: [],
+    dashboardCardHeight: 'inherit',
   }
 
   public componentDidMount() {
@@ -78,6 +82,17 @@ class DashboardCards extends PureComponent<Props> {
     this.setState(prev => ({...prev, windowSize: 15}))
   }
 
+  public componentDidUpdate() {
+    const card = document.querySelector<HTMLElement>(
+      '.dashboards-card-grid > .cf-resource-card'
+    )
+    if (card?.offsetHeight) {
+      this.setState({
+        dashboardCardHeight: `${card.offsetHeight}px`,
+      })
+    }
+  }
+
   public componentWillUnmount() {
     this._isMounted = false
   }
@@ -205,11 +220,16 @@ class DashboardCards extends PureComponent<Props> {
                 }
               />
             ))}
-          <AssetLimitAlert
-            className="dashboards--asset-alert"
-            resourceName="dashboards"
-            limitStatus={this.props.limitStatus}
-          />
+          {this.props.limitStatus === 'exceeded' && (
+            <ResourceCard style={{height: this.state.dashboardCardHeight}}>
+              <AssetLimitAlert
+                className="dashboards--asset-alert"
+                resourceName="dashboards"
+                limitStatus={this.props.limitStatus}
+                style={this._assetLimitAlertStyle}
+              />
+            </ResourceCard>
+          )}
         </div>
         {windowSize * pages < dashboards.length && (
           <div

src/dashboards/components/dashboard_index/DashboardCardsPaginated.tsx

@@ -5,6 +5,7 @@ import {connect, ConnectedProps} from 'react-redux'
 // Components
 import DashboardCard from 'src/dashboards/components/dashboard_index/DashboardCard'
 import AssetLimitAlert from 'src/cloud/components/AssetLimitAlert'
+import {ResourceCard} from '@influxdata/clockface'
 
 // Types
 import {AppState, Dashboard} from 'src/types'
@@ -51,9 +52,13 @@ type Props = OwnProps & StateProps & ReduxProps
 
 class DashboardCards extends PureComponent<Props> {
   private _isMounted = true
+  private _assetLimitAlertStyle = {
+    height: 'inherit',
+  }
 
   state = {
     pinnedItems: [],
+    dashboardCardHeight: 'inherit',
   }
 
   public componentDidMount() {
@@ -62,6 +67,17 @@ class DashboardCards extends PureComponent<Props> {
     }
   }
 
+  public componentDidUpdate() {
+    const card = document.querySelector<HTMLElement>(
+      '.dashboards-card-grid > .cf-resource-card'
+    )
+    if (card?.offsetHeight) {
+      this.setState({
+        dashboardCardHeight: `${card.offsetHeight}px`,
+      })
+    }
+  }
+
   public componentWillUnmount() {
     this._isMounted = false
   }
@@ -72,30 +88,33 @@ class DashboardCards extends PureComponent<Props> {
     const {pinnedItems} = this.state
 
     return (
-      <div>
-        <div className="dashboards-card-grid">
-          {dashboards.map(({id, name, description, labels, meta}) => (
-            <DashboardCard
-              key={id}
-              id={id}
-              name={name}
-              labels={labels}
-              updatedAt={meta.updatedAt}
-              description={description}
-              onFilterChange={onFilterChange}
-              onPinDashboard={this.handlePinDashboard}
-              onUnpinDashboard={this.handleUnpinDashboard}
-              isPinned={
-                !!pinnedItems.find(item => item?.metadata.dashboardID === id)
-              }
-            />
-          ))}
-          <AssetLimitAlert
-            className="dashboards--asset-alert"
-            resourceName="dashboards"
-            limitStatus={this.props.limitStatus}
+      <div className="dashboards-card-grid">
+        {dashboards.map(({id, name, description, labels, meta}) => (
+          <DashboardCard
+            key={id}
+            id={id}
+            name={name}
+            labels={labels}
+            updatedAt={meta.updatedAt}
+            description={description}
+            onFilterChange={onFilterChange}
+            onPinDashboard={this.handlePinDashboard}
+            onUnpinDashboard={this.handleUnpinDashboard}
+            isPinned={
+              !!pinnedItems.find(item => item?.metadata.dashboardID === id)
+            }
           />
-        </div>
+        ))}
+        {this.props.limitStatus === 'exceeded' && (
+          <ResourceCard style={{height: this.state.dashboardCardHeight}}>
+            <AssetLimitAlert
+              className="dashboards--asset-alert"
+              resourceName="dashboards"
+              limitStatus={this.props.limitStatus}
+              style={this._assetLimitAlertStyle}
+            />
+          </ResourceCard>
+        )}
       </div>
     )
   }