[dagit] Use a virtualized list in <SuggestWIP /> to fix launchpad par…

…tition picker perf (#6852)

js_modules/dagit/packages/ui/src/components/Suggest.tsx

@@ -1,8 +1,9 @@
 import {InputGroupProps2, IPopoverProps} from '@blueprintjs/core';
 // eslint-disable-next-line no-restricted-imports
-import {Suggest as BlueprintSuggest, SuggestProps} from '@blueprintjs/select';
+import {isCreateNewItem, Suggest as BlueprintSuggest, SuggestProps} from '@blueprintjs/select';
 import deepmerge from 'deepmerge';
 import * as React from 'react';
+import {List} from 'react-virtualized';
 import {createGlobalStyle} from 'styled-components/macro';
 
 import {ColorsWIP} from './Colors';
@@ -49,6 +50,11 @@ export const GlobalSuggestStyle = createGlobalStyle`
   }
 `;
 
+export const MENU_ITEM_HEIGHT = 32;
+
+const MENU_WIDTH = 250; // arbitrary, just looks nice
+const MENU_HEIGHT_MAX = MENU_ITEM_HEIGHT * 7.5;
+
 export const SuggestWIP = <T,>(props: React.PropsWithChildren<SuggestProps<T>>) => {
   const popoverProps: Partial<IPopoverProps> = {
     ...props.popoverProps,
@@ -65,5 +71,30 @@ export const SuggestWIP = <T,>(props: React.PropsWithChildren<SuggestProps<T>>)
     className: 'dagit-suggest-input',
   };
 
-  return <BlueprintSuggest {...props} inputProps={inputProps} popoverProps={popoverProps} />;
+  return (
+    <BlueprintSuggest<T>
+      {...props}
+      inputProps={inputProps}
+      itemListRenderer={(props) => (
+        <List
+          style={{outline: 'none', marginRight: -5, paddingRight: 5}}
+          rowCount={props.filteredItems.length}
+          scrollToIndex={
+            props.activeItem && !isCreateNewItem(props.activeItem)
+              ? props.filteredItems.indexOf(props.activeItem)
+              : undefined
+          }
+          rowHeight={MENU_ITEM_HEIGHT}
+          rowRenderer={(a) => (
+            <div key={a.index} style={a.style}>
+              {props.renderItem(props.filteredItems[a.index] as T, a.index)}
+            </div>
+          )}
+          width={MENU_WIDTH}
+          height={Math.min(props.filteredItems.length * MENU_ITEM_HEIGHT, MENU_HEIGHT_MAX)}
+        />
+      )}
+      popoverProps={popoverProps}
+    />
+  );
 };