Inspect: Use AutoSizer for managing width for content in tabs. (#21511)

* wrap content in autosizer

* replace lib

* removing react-virtualized, correct type in editor.ts

* remove caret

* remove dep from grafana/ui and remove story util

package.json

@@ -48,7 +48,6 @@
     "@types/react-select": "2.0.15",
     "@types/react-test-renderer": "16.9.0",
     "@types/react-transition-group": "2.0.16",
-    "@types/react-virtualized": "9.18.12",
     "@types/react-window": "1.7.0",
     "@types/redux-logger": "3.0.7",
     "@types/redux-mock-store": "1.0.1",
@@ -207,6 +206,7 @@
     "@reduxjs/toolkit": "1.2.1",
     "@torkelo/react-select": "2.4.1",
     "@types/react-loadable": "5.5.2",
+    "@types/react-virtualized-auto-sizer": "1.0.0",
     "angular": "1.6.9",
     "angular-bindonce": "0.3.1",
     "angular-native-dragdrop": "1.2.2",
@@ -249,7 +249,7 @@
     "react-sizeme": "2.5.2",
     "react-transition-group": "2.6.1",
     "react-use": "12.8.0",
-    "react-virtualized": "9.21.0",
+    "react-virtualized-auto-sizer": "1.0.2",
     "react-window": "1.7.1",
     "redux": "4.0.4",
     "redux-logger": "3.0.6",

packages/grafana-ui/package.json

@@ -54,7 +54,6 @@
     "react-storybook-addon-props-combinations": "1.1.0",
     "react-table": "7.0.0-rc.15",
     "react-transition-group": "2.6.1",
-    "react-virtualized": "9.21.0",
     "slate": "0.47.8",
     "tinycolor2": "1.4.1"
   },

packages/grafana-ui/src/utils/storybook/withFullSizeStory.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { AutoSizer } from 'react-virtualized';
-
-/** This will add full size with & height properties */
-export const withFullSizeStory = (component: React.ComponentType<any>, props: any) => (
-  <div
-    style={{
-      height: '100vh',
-      width: '100%',
-    }}
-  >
-    <AutoSizer>
-      {({ width, height }) => (
-        <>
-          {React.createElement(component, {
-            ...props,
-            width,
-            height,
-          })}
-        </>
-      )}
-    </AutoSizer>
-  </div>
-);

public/app/features/dashboard/components/Inspector/PanelInspector.tsx

@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
 
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
 import { JSONFormatter, Drawer, Select, Table, TabsBar, Tab, TabContent } from '@grafana/ui';
@@ -106,7 +107,7 @@ export class PanelInspector extends PureComponent<Props, State> {
     return <metaDS.components.MetadataInspector datasource={metaDS} data={data} />;
   }
 
-  renderDataTab() {
+  renderDataTab(width: number) {
     const { data, selected } = this.state;
     if (!data || !data.length) {
       return <div>No Data</div>;
@@ -140,7 +141,7 @@ export class PanelInspector extends PureComponent<Props, State> {
           </div>
         )}
 
-        <Table width={330} height={400} data={processed[selected]} />
+        <Table width={width} height={400} data={processed[selected]} />
       </div>
     );
   }
@@ -174,17 +175,28 @@ export class PanelInspector extends PureComponent<Props, State> {
           })}
         </TabsBar>
         <TabContent>
-          {tab === InspectTab.Data && this.renderDataTab()}
+          <AutoSizer disableHeight>
+            {({ width }) => {
+              if (width === 0) {
+                return null;
+              }
+              return (
+                <div style={{ width }}>
+                  {tab === InspectTab.Data && this.renderDataTab(width)}
 
-          {tab === InspectTab.Meta && this.renderMetadataInspector()}
+                  {tab === InspectTab.Meta && this.renderMetadataInspector()}
 
-          {tab === InspectTab.Issue && this.renderIssueTab()}
+                  {tab === InspectTab.Issue && this.renderIssueTab()}
 
-          {tab === InspectTab.Raw && (
+                  {tab === InspectTab.Raw && (
-            <div>
+                    <div>
-              <JSONFormatter json={last} open={2} />
+                      <JSONFormatter json={last} open={2} />
-            </div>
+                    </div>
-          )}
+                  )}
+                </div>
+              );
+            }}
+          </AutoSizer>
         </TabContent>
       </Drawer>
     );

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

@@ -1,6 +1,7 @@
 // Libraries
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
+import AutoSizer from 'react-virtualized-auto-sizer';
 
 // Utils & Services
 import { getAngularLoader, AngularComponent } from '@grafana/runtime';
@@ -16,7 +17,6 @@ import { PanelResizer } from './PanelResizer';
 // Types
 import { PanelModel, DashboardModel } from '../state';
 import { PanelPluginMeta, PanelPlugin } from '@grafana/data';
-import { AutoSizer } from 'react-virtualized';
 
 export interface Props {
   panel: PanelModel;

public/app/features/explore/Explore.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { hot } from 'react-hot-loader';
 import { css } from 'emotion';
 import { connect } from 'react-redux';
-import { AutoSizer } from 'react-virtualized';
+import AutoSizer from 'react-virtualized-auto-sizer';
 import memoizeOne from 'memoize-one';
 
 // Services & Utils

public/app/plugins/panel/table/editor.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import { transformers } from './transformers';
-import { Column } from 'react-virtualized';
+import { ColumnStyle } from './types';
 
 export class TablePanelEditorCtrl {
   panel: any;
@@ -79,7 +79,7 @@ export class TablePanelEditorCtrl {
     this.panelCtrl.render();
   }
 
-  removeColumn(column: Column) {
+  removeColumn(column: ColumnStyle) {
     this.panel.columns = _.without(this.panel.columns, column);
     this.panelCtrl.render();
   }

yarn.lock

@@ -4288,12 +4288,11 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-virtualized@9.18.12":
+"@types/react-virtualized-auto-sizer@1.0.0", "@types/react-virtualized-auto-sizer@^1.0.0":
-  version "9.18.12"
+  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@types/react-virtualized/-/react-virtualized-9.18.12.tgz#541e65c5e0b4629d6a1c6f339171c7943e016ecb"
+  resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.0.tgz#fc32f30a8dab527b5816f3a757e1e1d040c8f272"
-  integrity sha512-Msdpt9zvYlb5Ul4PA339QUkJ0/z2O+gaFxed1rG+2rZjbe6XdYo7jWfJe206KBnjj84DwPPIbPFQCtoGuNwNTQ==
+  integrity sha512-NMErdIdSnm2j/7IqMteRiRvRulpjoELnXWUwdbucYCz84xG9PHcoOrr7QfXwB/ku7wd6egiKFrzt/+QK4Imeeg==
   dependencies:
-    "@types/prop-types" "*"
     "@types/react" "*"
 
 "@types/react-wait@^0.3.0":
@@ -6760,7 +6759,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@2.2.6, classnames@2.x, classnames@^2.2.3, classnames@^2.2.5, classnames@^2.2.6:
+classnames@2.2.6, classnames@2.x, classnames@^2.2.5, classnames@^2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
@@ -8684,7 +8683,7 @@ dom-css@^2.0.0:
     prefix-style "2.0.1"
     to-camel-case "1.0.0"
 
-"dom-helpers@^2.4.0 || ^3.0.0", dom-helpers@^3.3.1, dom-helpers@^3.4.0:
+dom-helpers@^3.3.1, dom-helpers@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
   integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
@@ -13815,7 +13814,7 @@ longest@^1.0.1:
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
   integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -17973,17 +17972,10 @@ react-use@12.8.0:
     ts-easing "^0.2.0"
     tslib "^1.10.0"
 
-react-virtualized@9.21.0:
+react-virtualized-auto-sizer@1.0.2:
-  version "9.21.0"
+  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.21.0.tgz#8267c40ffb48db35b242a36dea85edcf280a6506"
+  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"
-  integrity sha512-duKD2HvO33mqld4EtQKm9H9H0p+xce1c++2D5xn59Ma7P8VT7CprfAe5hwjd1OGkyhqzOZiTMlTal7LxjH5yBQ==
+  integrity sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg==
-  dependencies:
-    babel-runtime "^6.26.0"
-    classnames "^2.2.3"
-    dom-helpers "^2.4.0 || ^3.0.0"
-    loose-envify "^1.3.0"
-    prop-types "^15.6.0"
-    react-lifecycles-compat "^3.0.4"
 
 react-wait@^0.3.0:
   version "0.3.0"