perf(explore): virtualized datasource field sections (#27625)

superset-frontend/package.json

@@ -266,6 +266,7 @@
     "@types/react-table": "^7.7.19",
     "@types/react-transition-group": "^4.4.10",
     "@types/react-ultimate-pagination": "^1.2.0",
+    "@types/react-virtualized-auto-sizer": "^1.0.4",
     "@types/react-window": "^1.8.5",
     "@types/redux-localstorage": "^1.0.8",
     "@types/redux-mock-store": "^1.0.2",

superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanel.test.tsx

@@ -30,6 +30,17 @@ import {
 import { DatasourceType } from '@superset-ui/core';
 import DatasourceControl from 'src/explore/components/controls/DatasourceControl';
 
+jest.mock(
+  'react-virtualized-auto-sizer',
+  () =>
+    ({
+      children,
+    }: {
+      children: (params: { height: number }) => React.ReactChild;
+    }) =>
+      children({ height: 500 }),
+);
+
 const datasource: IDatasource = {
   id: 1,
   type: DatasourceType.Table,
@@ -69,6 +80,7 @@ const props: DatasourcePanelProps = {
   actions: {
     setControlValue: jest.fn(),
   },
+  width: 300,
 };
 
 const search = (value: string, input: HTMLElement) => {

superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelItem.test.tsx

@@ -0,0 +1,168 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+
+import {
+  columns,
+  metrics,
+} from 'src/explore/components/DatasourcePanel/fixtures';
+import { fireEvent, render, within } from 'spec/helpers/testing-library';
+import DatasourcePanelItem from './DatasourcePanelItem';
+
+const mockData = {
+  metricSlice: metrics,
+  columnSlice: columns,
+  totalMetrics: Math.max(metrics.length, 10),
+  totalColumns: Math.max(columns.length, 13),
+  width: 300,
+  showAllMetrics: false,
+  onShowAllMetricsChange: jest.fn(),
+  showAllColumns: false,
+  onShowAllColumnsChange: jest.fn(),
+  collapseMetrics: false,
+  onCollapseMetricsChange: jest.fn(),
+  collapseColumns: false,
+  onCollapseColumnsChange: jest.fn(),
+};
+
+test('renders each item accordingly', () => {
+  const { getByText, getByTestId, rerender, container } = render(
+    <DatasourcePanelItem index={0} data={mockData} style={{}} />,
+    { useDnd: true },
+  );
+
+  expect(getByText('Metrics')).toBeInTheDocument();
+  rerender(<DatasourcePanelItem index={1} data={mockData} style={{}} />);
+  expect(
+    getByText(
+      `Showing ${mockData.metricSlice.length} of ${mockData.totalMetrics}`,
+    ),
+  ).toBeInTheDocument();
+  mockData.metricSlice.forEach((metric, metricIndex) => {
+    rerender(
+      <DatasourcePanelItem
+        index={metricIndex + 2}
+        data={mockData}
+        style={{}}
+      />,
+    );
+    expect(getByTestId('DatasourcePanelDragOption')).toBeInTheDocument();
+    expect(
+      within(getByTestId('DatasourcePanelDragOption')).getByText(
+        metric.metric_name,
+      ),
+    ).toBeInTheDocument();
+  });
+  rerender(
+    <DatasourcePanelItem
+      index={2 + mockData.metricSlice.length}
+      data={mockData}
+      style={{}}
+    />,
+  );
+  expect(container).toHaveTextContent('');
+
+  const startIndexOfColumnSection = mockData.metricSlice.length + 3;
+  rerender(
+    <DatasourcePanelItem
+      index={startIndexOfColumnSection}
+      data={mockData}
+      style={{}}
+    />,
+  );
+  expect(getByText('Columns')).toBeInTheDocument();
+  rerender(
+    <DatasourcePanelItem
+      index={startIndexOfColumnSection + 1}
+      data={mockData}
+      style={{}}
+    />,
+  );
+  expect(
+    getByText(
+      `Showing ${mockData.columnSlice.length} of ${mockData.totalColumns}`,
+    ),
+  ).toBeInTheDocument();
+  mockData.columnSlice.forEach((column, columnIndex) => {
+    rerender(
+      <DatasourcePanelItem
+        index={startIndexOfColumnSection + columnIndex + 2}
+        data={mockData}
+        style={{}}
+      />,
+    );
+    expect(getByTestId('DatasourcePanelDragOption')).toBeInTheDocument();
+    expect(
+      within(getByTestId('DatasourcePanelDragOption')).getByText(
+        column.column_name,
+      ),
+    ).toBeInTheDocument();
+  });
+});
+
+test('can collapse metrics and columns', () => {
+  mockData.onCollapseMetricsChange.mockClear();
+  mockData.onCollapseColumnsChange.mockClear();
+  const { queryByText, getByRole, rerender } = render(
+    <DatasourcePanelItem index={0} data={mockData} style={{}} />,
+    { useDnd: true },
+  );
+  fireEvent.click(getByRole('button'));
+  expect(mockData.onCollapseMetricsChange).toBeCalled();
+  expect(mockData.onCollapseColumnsChange).not.toBeCalled();
+
+  const startIndexOfColumnSection = mockData.metricSlice.length + 3;
+  rerender(
+    <DatasourcePanelItem
+      index={startIndexOfColumnSection}
+      data={mockData}
+      style={{}}
+    />,
+  );
+  fireEvent.click(getByRole('button'));
+  expect(mockData.onCollapseColumnsChange).toBeCalled();
+
+  rerender(
+    <DatasourcePanelItem
+      index={1}
+      data={{
+        ...mockData,
+        collapseMetrics: true,
+      }}
+      style={{}}
+    />,
+  );
+  expect(
+    queryByText(
+      `Showing ${mockData.metricSlice.length} of ${mockData.totalMetrics}`,
+    ),
+  ).not.toBeInTheDocument();
+
+  rerender(
+    <DatasourcePanelItem
+      index={2}
+      data={{
+        ...mockData,
+        collapseMetrics: true,
+      }}
+      style={{}}
+    />,
+  );
+  expect(queryByText('Columns')).toBeInTheDocument();
+});