diff --git a/frontend/src/metabase/components/VirtualizedList.tsx b/frontend/src/metabase/components/VirtualizedList.jsx
similarity index 69%
rename from frontend/src/metabase/components/VirtualizedList.tsx
rename to frontend/src/metabase/components/VirtualizedList.jsx
index acd498d2a2eafdc8c7b5dde432e9940d44a7f6c0..7f8104e36f00997a64310e03d76f5bf390d2ea27 100644
--- a/frontend/src/metabase/components/VirtualizedList.tsx
+++ b/frontend/src/metabase/components/VirtualizedList.jsx
@@ -1,20 +1,8 @@
+/* eslint-disable react/prop-types */
import React from "react";
import { List, WindowScroller, AutoSizer } from "react-virtualized";
-export interface VirtualizedListProps<Item = unknown>
- extends React.HTMLProps<HTMLUListElement> {
- items: Item[];
- rowHeight: number;
- renderItem: (props: { item: Item; index: number }) => React.ReactNode;
- scrollElement?: HTMLElement | null;
-}
-
-function VirtualizedList<Item>({
- items,
- rowHeight,
- renderItem,
- scrollElement,
-}: VirtualizedListProps<Item>) {
+function VirtualizedList({ items, rowHeight, renderItem, scrollElement }) {
const rowRenderer = React.useCallback(
({ index, key, style }) => (
<div key={key} style={style}>
@@ -27,7 +15,7 @@ function VirtualizedList<Item>({
const renderScrollComponent = React.useCallback(
({ width }) => {
return (
- <WindowScroller scrollElement={scrollElement || undefined}>
+ <WindowScroller scrollElement={scrollElement}>
{({ height, isScrolling, scrollTop }) => (
<List
autoHeight
diff --git a/frontend/src/metabase/containers/DataPicker/CardPicker/CardPicker.styled.tsx b/frontend/src/metabase/containers/DataPicker/CardPicker/CardPicker.styled.tsx
index 4c5897c86f1578db3060a45c41ca92f82dd8253f..5bb3ffb3db8ab4bdc3032ee8c2efa6fe9ff9a7fa 100644
--- a/frontend/src/metabase/containers/DataPicker/CardPicker/CardPicker.styled.tsx
+++ b/frontend/src/metabase/containers/DataPicker/CardPicker/CardPicker.styled.tsx
@@ -1,6 +1,8 @@
import styled from "@emotion/styled";
-export const ListContainer = styled.div`
+import SelectList from "metabase/components/SelectList";
+
+export const StyledSelectList = styled(SelectList)`
width: 100%;
padding-left: 1rem;
`;
diff --git a/frontend/src/metabase/containers/DataPicker/CardPicker/CardPickerView.tsx b/frontend/src/metabase/containers/DataPicker/CardPicker/CardPickerView.tsx
index cb7a60925e7ace19c3923a299c99f37241828b63..b301fd7e472bdf40d46edf8d10a00f952635af93 100644
--- a/frontend/src/metabase/containers/DataPicker/CardPicker/CardPickerView.tsx
+++ b/frontend/src/metabase/containers/DataPicker/CardPicker/CardPickerView.tsx
@@ -1,6 +1,8 @@
import React, { useCallback, useMemo } from "react";
import _ from "underscore";
+import SelectList from "metabase/components/SelectList";
+
import { canonicalCollectionId } from "metabase/collections/utils";
import type { ITreeNodeItem } from "metabase/components/tree/types";
@@ -11,10 +13,9 @@ import type { DataPickerSelectedItem, VirtualTable } from "../types";
import EmptyState from "../EmptyState";
import LoadingState from "../LoadingState";
-import VirtualizedSelectList from "../VirtualizedSelectList";
import PanePicker from "../PanePicker";
-import { ListContainer } from "./CardPicker.styled";
+import { StyledSelectList } from "./CardPicker.styled";
type TargetModel = "model" | "question";
@@ -54,7 +55,7 @@ function TableSelectListItem({
onSelect: (id: Table["id"]) => void;
}) {
return (
- <VirtualizedSelectList.Item
+ <SelectList.Item
id={table.id}
name={table.display_name}
isSelected={isSelected}
@@ -62,7 +63,7 @@ function TableSelectListItem({
onSelect={onSelect}
>
{table.display_name}
- </VirtualizedSelectList.Item>
+ </SelectList.Item>
);
}
@@ -103,7 +104,7 @@ function CardPickerView({
);
const renderVirtualTable = useCallback(
- ({ item: table }: { item: VirtualTable }) => (
+ (table: VirtualTable) => (
<TableSelectListItem
key={table.id}
table={table}
@@ -129,14 +130,9 @@ function CardPickerView({
) : isEmpty ? (
<EmptyState />
) : (
- <ListContainer>
- {Array.isArray(virtualTables) && (
- <VirtualizedSelectList<VirtualTable>
- items={virtualTables}
- renderItem={renderVirtualTable}
- />
- )}
- </ListContainer>
+ <StyledSelectList>
+ {virtualTables?.map?.(renderVirtualTable)}
+ </StyledSelectList>
)}
</PanePicker>
);
diff --git a/frontend/src/metabase/containers/DataPicker/RawDataPicker/RawDataPicker.styled.tsx b/frontend/src/metabase/containers/DataPicker/RawDataPicker/RawDataPicker.styled.tsx
index fb0f876d87113cfa399abe591eee7f75c672c76e..98464679d166be1285e4109fc3d4c94bac1ac4b8 100644
--- a/frontend/src/metabase/containers/DataPicker/RawDataPicker/RawDataPicker.styled.tsx
+++ b/frontend/src/metabase/containers/DataPicker/RawDataPicker/RawDataPicker.styled.tsx
@@ -1,6 +1,8 @@
import styled from "@emotion/styled";
-export const ListContainer = styled.div`
+import SelectList from "metabase/components/SelectList";
+
+export const StyledSelectList = styled(SelectList)`
width: 100%;
padding: 0 1rem;
`;
diff --git a/frontend/src/metabase/containers/DataPicker/RawDataPicker/RawDataPickerView.tsx b/frontend/src/metabase/containers/DataPicker/RawDataPicker/RawDataPickerView.tsx
index c741e5d92deba123e5672c2638d7c023b4a3331d..cd741fc35e5817b1cd2c7e9f18324db0faf0f849 100644
--- a/frontend/src/metabase/containers/DataPicker/RawDataPicker/RawDataPickerView.tsx
+++ b/frontend/src/metabase/containers/DataPicker/RawDataPicker/RawDataPickerView.tsx
@@ -1,6 +1,8 @@
import React, { useCallback, useMemo } from "react";
import _ from "underscore";
+import SelectList from "metabase/components/SelectList";
+
import type { ITreeNodeItem } from "metabase/components/tree/types";
import type Database from "metabase-lib/metadata/Database";
@@ -11,9 +13,8 @@ import type { DataPickerSelectedItem } from "../types";
import EmptyState from "../EmptyState";
import LoadingState from "../LoadingState";
-import VirtualizedSelectList from "../VirtualizedSelectList";
import PanePicker from "../PanePicker";
-import { ListContainer } from "./RawDataPicker.styled";
+import { StyledSelectList } from "./RawDataPicker.styled";
interface RawDataPickerViewProps {
databases: Database[];
@@ -60,7 +61,7 @@ function TableSelectListItem({
}) {
const name = table.displayName();
return (
- <VirtualizedSelectList.Item
+ <SelectList.Item
id={table.id}
name={name}
isSelected={isSelected}
@@ -68,7 +69,7 @@ function TableSelectListItem({
onSelect={onSelect}
>
{name}
- </VirtualizedSelectList.Item>
+ </SelectList.Item>
);
}
@@ -134,8 +135,9 @@ function RawDataPickerView({
);
const renderTable = useCallback(
- ({ item: table }: { item: Table }) => (
+ (table: Table) => (
<TableSelectListItem
+ key={table.id}
table={table}
isSelected={selectedTableIds.includes(table.id)}
onSelect={onSelectedTable}
@@ -160,14 +162,7 @@ function RawDataPickerView({
) : isEmpty ? (
<EmptyState />
) : (
- <ListContainer>
- {Array.isArray(tables) && (
- <VirtualizedSelectList<Table>
- items={tables}
- renderItem={renderTable}
- />
- )}
- </ListContainer>
+ <StyledSelectList>{tables?.map?.(renderTable)}</StyledSelectList>
)}
</PanePicker>
);
diff --git a/frontend/src/metabase/containers/DataPicker/VirtualizedSelectList.tsx b/frontend/src/metabase/containers/DataPicker/VirtualizedSelectList.tsx
deleted file mode 100644
index 7ad52248e1d46910e97184b24ab18b5678e42aa7..0000000000000000000000000000000000000000
--- a/frontend/src/metabase/containers/DataPicker/VirtualizedSelectList.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-
-import VirtualizedList, {
- VirtualizedListProps,
-} from "metabase/components/VirtualizedList";
-import SelectList from "metabase/components/SelectList";
-
-const SELECT_LIST_ITEM_HEIGHT = 40;
-
-type VirtualizedSelectListProps<Item> = Omit<
- VirtualizedListProps<Item>,
- "rowHeight" | "role"
->;
-
-function VirtualizedSelectList<Item>(props: VirtualizedSelectListProps<Item>) {
- return (
- <VirtualizedList<Item>
- data-testid="select-list"
- {...props}
- role="menu"
- rowHeight={SELECT_LIST_ITEM_HEIGHT}
- />
- );
-}
-
-export default Object.assign(VirtualizedSelectList, {
- Item: SelectList.Item,
-});
diff --git a/frontend/src/metabase/containers/DataPicker/tests/DataPicker-Common.unit.spec.ts b/frontend/src/metabase/containers/DataPicker/tests/DataPicker-Common.unit.spec.ts
index eb638ade81cee18fa2b40a8c2533e9c0915e5bf4..d2c6dc25d66c30a62be3517668b95730df1a1f16 100644
--- a/frontend/src/metabase/containers/DataPicker/tests/DataPicker-Common.unit.spec.ts
+++ b/frontend/src/metabase/containers/DataPicker/tests/DataPicker-Common.unit.spec.ts
@@ -1,13 +1,13 @@
import nock from "nock";
-import { screen } from "__support__/ui";
+import { screen, waitFor } from "__support__/ui";
import { SAMPLE_DATABASE } from "__support__/sample_database_fixture";
-import { setup, setupVirtualizedLists } from "./common";
+import { setup } from "./common";
describe("DataPicker", () => {
beforeAll(() => {
- setupVirtualizedLists();
+ window.HTMLElement.prototype.scrollIntoView = jest.fn();
});
afterEach(() => {
diff --git a/frontend/src/metabase/containers/DataPicker/tests/DataPicker-Models.unit.spec.ts b/frontend/src/metabase/containers/DataPicker/tests/DataPicker-Models.unit.spec.ts
index a1a7c36d4c195c691fa95a09f5db63df80c08ac0..44ac210af3e1933291f8542bef5060fc2c6ceac8 100644
--- a/frontend/src/metabase/containers/DataPicker/tests/DataPicker-Models.unit.spec.ts
+++ b/frontend/src/metabase/containers/DataPicker/tests/DataPicker-Models.unit.spec.ts
@@ -13,7 +13,6 @@ import {
import {
setup,
- setupVirtualizedLists,
EMPTY_COLLECTION,
SAMPLE_COLLECTION,
SAMPLE_MODEL,
@@ -28,7 +27,7 @@ const ROOT_COLLECTION_MODEL_VIRTUAL_SCHEMA_ID = getCollectionVirtualSchemaId(
describe("DataPicker — picking models", () => {
beforeAll(() => {
- setupVirtualizedLists();
+ window.HTMLElement.prototype.scrollIntoView = jest.fn();
});
afterEach(() => {
diff --git a/frontend/src/metabase/containers/DataPicker/tests/DataPicker-Questions.unit.spec.ts b/frontend/src/metabase/containers/DataPicker/tests/DataPicker-Questions.unit.spec.ts
index 5d38a0b09a837ee4c4749d93ca03921bcb890c52..320c707e4a18bac2b4c077bf5096a60968fb72e6 100644
--- a/frontend/src/metabase/containers/DataPicker/tests/DataPicker-Questions.unit.spec.ts
+++ b/frontend/src/metabase/containers/DataPicker/tests/DataPicker-Questions.unit.spec.ts
@@ -13,7 +13,6 @@ import {
import {
setup,
- setupVirtualizedLists,
EMPTY_COLLECTION,
SAMPLE_COLLECTION,
SAMPLE_QUESTION,
@@ -26,7 +25,7 @@ const ROOT_COLLECTION_QUESTIONS_VIRTUAL_SCHEMA_ID =
describe("DataPicker — picking questions", () => {
beforeAll(() => {
- setupVirtualizedLists();
+ window.HTMLElement.prototype.scrollIntoView = jest.fn();
});
afterEach(() => {
diff --git a/frontend/src/metabase/containers/DataPicker/tests/DataPicker-RawData.unit.spec.ts b/frontend/src/metabase/containers/DataPicker/tests/DataPicker-RawData.unit.spec.ts
index d43bb01762c6bae701a8afe2fdf16ad21c3e5745..f05e431e73e2b7ac700aaf6248a915354b0085b4 100644
--- a/frontend/src/metabase/containers/DataPicker/tests/DataPicker-RawData.unit.spec.ts
+++ b/frontend/src/metabase/containers/DataPicker/tests/DataPicker-RawData.unit.spec.ts
@@ -10,11 +10,11 @@ import {
import { generateSchemaId } from "metabase-lib/metadata/utils/schema";
-import { setup, setupVirtualizedLists } from "./common";
+import { setup } from "./common";
describe("DataPicker — picking raw data", () => {
beforeAll(() => {
- setupVirtualizedLists();
+ window.HTMLElement.prototype.scrollIntoView = jest.fn();
});
afterEach(() => {
diff --git a/frontend/src/metabase/containers/DataPicker/tests/common.tsx b/frontend/src/metabase/containers/DataPicker/tests/common.tsx
index 3bb1fdb15c47f8feebb5717a1061cfddf0f40657..7846c37c9a9deaff706a9f2b9289b5b51cda32c2 100644
--- a/frontend/src/metabase/containers/DataPicker/tests/common.tsx
+++ b/frontend/src/metabase/containers/DataPicker/tests/common.tsx
@@ -111,21 +111,6 @@ interface SetupOpts {
hasNestedQueriesEnabled?: boolean;
}
-// react-virtualized's AutoSizer uses offsetWidth and offsetHeight.
-// Jest runs in JSDom which doesn't support measurements APIs.
-export function setupVirtualizedLists() {
- Object.defineProperty(HTMLElement.prototype, "offsetHeight", {
- configurable: true,
- value: 100,
- });
- Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
- configurable: true,
- value: 100,
- });
-
- window.HTMLElement.prototype.scrollIntoView = jest.fn();
-}
-
export async function setup({
initialValue = { tableIds: [] },
filters,