Upgrade Ant Design to v4

client/app/components/queries/editor-components/databricks/DatabricksSchemaBrowser.jsx

@@ -1,9 +1,9 @@
 import React, { useState, useMemo, useEffect, useCallback } from "react";
-import { slice, without, filter, includes, get, find } from "lodash";
+import { filter, includes, get, find } from "lodash";
 import PropTypes from "prop-types";
 import { useDebouncedCallback } from "use-debounce";
 import Button from "antd/lib/button";
-import Icon from "antd/lib/icon";
+import SyncOutlinedIcon from "@ant-design/icons/SyncOutlined";
 import Input from "antd/lib/input";
 import Select from "antd/lib/select";
 import Tooltip from "antd/lib/tooltip";
@@ -13,13 +13,6 @@ import useDatabricksSchema from "./useDatabricksSchema";
 
 import "./DatabricksSchemaBrowser.less";
 
-// Limit number of rendered options to improve performance until Antd v4
-function getLimitedDatabases(databases, currentDatabaseName, limit = 1000) {
-  const limitedDatabases = slice(without(databases, currentDatabaseName), 0, limit);
-
-  return currentDatabaseName ? [...limitedDatabases, currentDatabaseName].sort() : limitedDatabases;
-}
-
 export default function DatabricksSchemaBrowser({
   dataSource,
   options,
@@ -63,10 +56,6 @@ export default function DatabricksSchemaBrowser({
     () => filter(databases, database => includes(database.toLowerCase(), databaseFilterString.toLowerCase())),
     [databases, databaseFilterString]
   );
-  const limitedDatabases = useMemo(() => getLimitedDatabases(filteredDatabases, currentDatabaseName), [
-    filteredDatabases,
-    currentDatabaseName,
-  ]);
 
   const handleSchemaUpdate = useImmutableCallback(onSchemaUpdate);
 
@@ -116,17 +105,12 @@ export default function DatabricksSchemaBrowser({
                   <i className="fa fa-database m-r-5" /> Database
                 </>
               }>
-              {limitedDatabases.map(database => (
+              {filteredDatabases.map(database => (
                 <Select.Option key={database}>
                   <i className="fa fa-database m-r-5" />
                   {database}
                 </Select.Option>
               ))}
-              {limitedDatabases.length < filteredDatabases.length && (
-                <Select.Option key="hidden_options" value={-1} disabled>
-                  Some databases were hidden due to a large set, search to limit results.
-                </Select.Option>
-              )}
             </Select>
           }
         />
@@ -143,7 +127,7 @@ export default function DatabricksSchemaBrowser({
           <div className="load-button">
             <Tooltip title={!refreshing ? "Refresh Databases and Current Schema" : null}>
               <Button type="link" onClick={refreshAll} disabled={refreshing}>
-                <Icon type="sync" spin={refreshing} />
+                <SyncOutlinedIcon spin={refreshing} />
               </Button>
             </Tooltip>
           </div>

client/app/components/queries/editor-components/databricks/DatabricksSchemaBrowser.less

@@ -5,7 +5,7 @@
     .database-select-open .ant-input-group-addon {
       background-color: #fff;
 
-      .ant-select-selection-selected-value {
+      .ant-select-selection-item {
         visibility: hidden;
       }
     }
@@ -21,7 +21,11 @@
         .ant-select {
           width: 100%;
 
-          &.ant-select-focused .ant-select-selection {
+          .ant-select-selection-item {
+            text-align: left;
+          }
+
+          &.ant-select-focused .ant-select-selector {
             color: inherit;
           }
         }
@@ -58,6 +62,5 @@
 }
 
 .databricks-schema-browser-db-dropdown {
-  width: auto !important;
-  max-width: 50vw;
+  width: 50vw !important;
 }