DashGrid: Fixed auto resize issue with tabel panel (#40688)

* Changing how we use the AutoSizer component in the DashGrid.

* updated snapshot.

* fixed failing test.

public/app/features/dashboard/containers/DashboardPage.test.tsx

@@ -12,6 +12,7 @@ import { notifyApp } from 'app/core/actions';
 import { selectors } from '@grafana/e2e-selectors';
 import { getRouteComponentProps } from 'app/core/navigation/__mocks__/routeProps';
 import { createTheme } from '@grafana/data';
+import { AutoSizerProps } from 'react-virtualized-auto-sizer';
 
 jest.mock('app/features/dashboard/components/DashboardSettings/GeneralSettings', () => {
   class GeneralSettings extends React.Component<{}, {}> {
@@ -37,6 +38,12 @@ jest.mock('app/core/core', () => ({
   },
 }));
 
+jest.mock('react-virtualized-auto-sizer', () => {
+  // The size of the children need to be small enough to be outside the view.
+  // So it does not trigger the query to be run by the PanelQueryRunner.
+  return ({ children }: AutoSizerProps) => children({ height: 1, width: 1 });
+});
+
 interface ScenarioContext {
   dashboard?: DashboardModel | null;
   container?: HTMLElement;

public/app/features/dashboard/dashgrid/DashboardGrid.tsx

@@ -214,49 +214,57 @@ export class DashboardGrid extends PureComponent<Props, State> {
 
   render() {
     const { dashboard } = this.props;
-
-    const autoSizerStyle: CSSProperties = {
-      width: '100%',
-      height: '100%',
-    };
-
     return (
-      <AutoSizer style={autoSizerStyle} disableHeight>
-        {({ width }) => {
-          if (width === 0) {
-            return null;
-          }
+      /**
+       * We have a parent with "flex: 1 1 0" we need to reset it to "flex: 1 1 auto" to have the AutoSizer
+       * properly working. For more information go here:
+       * https://github.com/bvaughn/react-virtualized/blob/master/docs/usingAutoSizer.md#can-i-use-autosizer-within-a-flex-container
+       */
+      <div style={{ flex: '1 1 auto' }}>
+        <AutoSizer disableHeight>
+          {({ width }) => {
+            if (width === 0) {
+              return null;
+            }
 
-          const draggable = width <= 769 ? false : dashboard.meta.canEdit;
+            const draggable = width <= 769 ? false : dashboard.meta.canEdit;
 
-          /*
+            /*
             Disable draggable if mobile device, solving an issue with unintentionally
             moving panels. https://github.com/grafana/grafana/issues/18497
             theme.breakpoints.md = 769
           */
 
-          return (
-            <ReactGridLayout
-              width={width}
-              isDraggable={draggable}
-              isResizable={dashboard.meta.canEdit}
-              containerPadding={[0, 0]}
-              useCSSTransforms={false}
-              margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]}
-              cols={GRID_COLUMN_COUNT}
-              rowHeight={GRID_CELL_HEIGHT}
-              draggableHandle=".grid-drag-handle"
-              layout={this.buildLayout()}
-              onDragStop={this.onDragStop}
-              onResize={this.onResize}
-              onResizeStop={this.onResizeStop}
-              onLayoutChange={this.onLayoutChange}
-            >
-              {this.renderPanels(width)}
-            </ReactGridLayout>
-          );
-        }}
-      </AutoSizer>
+            return (
+              /**
+               * The children is using a width of 100% so we need to guarantee that it is wrapped
+               * in an element that has the calculated size given by the AutoSizer. The AutoSizer
+               * has a width of 0 and will let its content overflow its div.
+               */
+              <div style={{ width: `${width}px`, height: '100%' }}>
+                <ReactGridLayout
+                  width={width}
+                  isDraggable={draggable}
+                  isResizable={dashboard.meta.canEdit}
+                  containerPadding={[0, 0]}
+                  useCSSTransforms={false}
+                  margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]}
+                  cols={GRID_COLUMN_COUNT}
+                  rowHeight={GRID_CELL_HEIGHT}
+                  draggableHandle=".grid-drag-handle"
+                  layout={this.buildLayout()}
+                  onDragStop={this.onDragStop}
+                  onResize={this.onResize}
+                  onResizeStop={this.onResizeStop}
+                  onLayoutChange={this.onLayoutChange}
+                >
+                  {this.renderPanels(width)}
+                </ReactGridLayout>
+              </div>
+            );
+          }}
+        </AutoSizer>
+      </div>
     );
   }
 }

public/app/features/dashboard/dashgrid/__snapshots__/DashboardGrid.test.tsx.snap

@@ -1,17 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
-<AutoSizer
-  disableHeight={true}
-  disableWidth={false}
-  onResize={[Function]}
+<div
   style={
     Object {
-      "height": "100%",
-      "width": "100%",
+      "flex": "1 1 auto",
     }
   }
 >
-  <Component />
-</AutoSizer>
+  <AutoSizer
+    disableHeight={true}
+    disableWidth={false}
+    onResize={[Function]}
+    style={Object {}}
+  >
+    <Component />
+  </AutoSizer>
+</div>
 `;