From 5da9ebc3d52d3bc63400c67a5a4932802c8d1f61 Mon Sep 17 00:00:00 2001
From: Lily Kuang <lily@preset.io>
Date: Mon, 6 Feb 2023 16:04:01 -0800
Subject: [PATCH] chore: refactor SliceAdder for react 17

---
 superset-frontend/package-lock.json           | 19 +++++++++++++++++++
 superset-frontend/package.json                |  1 +
 .../src/dashboard/components/SliceAdder.jsx   | 12 +++++++-----
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
index b49df79007f89..45d3f9ad2c1b8 100644
--- a/superset-frontend/package-lock.json
+++ b/superset-frontend/package-lock.json
@@ -127,6 +127,7 @@
         "react-transition-group": "^2.5.3",
         "react-ultimate-pagination": "^1.3.0",
         "react-virtualized": "9.19.1",
+        "react-virtualized-auto-sizer": "^1.0.7",
         "react-window": "^1.8.8",
         "redux": "^4.0.5",
         "redux-localstorage": "^0.4.1",
@@ -49973,6 +49974,18 @@
         "react-dom": "^15.3.0 || ^16.0.0-alpha"
       }
     },
+    "node_modules/react-virtualized-auto-sizer": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.7.tgz",
+      "integrity": "sha512-Mxi6lwOmjwIjC1X4gABXMJcKHsOo0xWl3E3ugOgufB8GJU+MqrtY35aBuvCYv/razQ1Vbp7h1gWJjGjoNN5pmA==",
+      "engines": {
+        "node": ">8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0-rc",
+        "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0-rc"
+      }
+    },
     "node_modules/react-window": {
       "version": "1.8.8",
       "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.8.tgz",
@@ -100149,6 +100162,12 @@
         "react-lifecycles-compat": "^3.0.4"
       }
     },
+    "react-virtualized-auto-sizer": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.7.tgz",
+      "integrity": "sha512-Mxi6lwOmjwIjC1X4gABXMJcKHsOo0xWl3E3ugOgufB8GJU+MqrtY35aBuvCYv/razQ1Vbp7h1gWJjGjoNN5pmA==",
+      "requires": {}
+    },
     "react-window": {
       "version": "1.8.8",
       "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.8.tgz",
diff --git a/superset-frontend/package.json b/superset-frontend/package.json
index 37a3fc6cc9869..976b9749be26a 100644
--- a/superset-frontend/package.json
+++ b/superset-frontend/package.json
@@ -191,6 +191,7 @@
     "react-transition-group": "^2.5.3",
     "react-ultimate-pagination": "^1.3.0",
     "react-virtualized": "9.19.1",
+    "react-virtualized-auto-sizer": "^1.0.7",
     "react-window": "^1.8.8",
     "redux": "^4.0.5",
     "redux-localstorage": "^0.4.1",
diff --git a/superset-frontend/src/dashboard/components/SliceAdder.jsx b/superset-frontend/src/dashboard/components/SliceAdder.jsx
index 7f8792dcafbfc..55db08cd86ac5 100644
--- a/superset-frontend/src/dashboard/components/SliceAdder.jsx
+++ b/superset-frontend/src/dashboard/components/SliceAdder.jsx
@@ -19,7 +19,8 @@
 /* eslint-env browser */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { List, AutoSizer } from 'react-virtualized';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { FixedSizeList as List } from 'react-window';
 import { createFilter } from 'react-search-input';
 import {
   t,
@@ -333,13 +334,14 @@ class SliceAdder extends React.Component {
                 <List
                   width={width}
                   height={height}
-                  rowCount={this.state.filteredSlices.length}
-                  rowHeight={DEFAULT_CELL_HEIGHT}
-                  rowRenderer={this.rowRenderer}
+                  itemCount={this.state.filteredSlices.length}
+                  itemSize={DEFAULT_CELL_HEIGHT}
                   searchTerm={this.state.searchTerm}
                   sortBy={this.state.sortBy}
                   selectedSliceIds={this.props.selectedSliceIds}
-                />
+                >
+                  {this.rowRenderer}
+                </List>
               )}
             </AutoSizer>
           </ChartList>