QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-06-09 01:29:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(explore): Integrate dataset panel with Folders feature (#33104)

Browse Source 
Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
This commit is contained in:
Elizabeth Thompson
2025-04-14 09:40:31 -07:00
committed by GitHub
parent a5a91d5e48
commit 7b9ebbe735
31 changed files with 1156 additions and 444 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,178 +20,89 @@ import {
columns,
metrics,
} from 'src/explore/components/DatasourcePanel/fixtures';
import { fireEvent, render, within } from 'spec/helpers/testing-library';
import DatasourcePanelItem from './DatasourcePanelItem';
import { screen, userEvent, render } from 'spec/helpers/testing-library';
import DatasourcePanelItem, {
DatasourcePanelItemProps,
} from './DatasourcePanelItem';
const mockData = {
metricSlice: metrics,
columnSlice: columns,
totalMetrics: Math.max(metrics.length, 10),
totalColumns: Math.max(columns.length, 13),
const mockData: DatasourcePanelItemProps['data'] = {
flattenedItems: [
{ type: 'header', depth: 0, folderId: '1', height: 50 },
...metrics.map((m, idx) => ({
type: 'item' as const,
depth: 0,
folderId: '1',
height: 32,
index: idx,
item: { ...m, type: 'metric' as const },
})),
{ type: 'divider', depth: 0, folderId: '1', height: 16 },
{ type: 'header', depth: 0, folderId: '2', height: 50 },
...columns.map((m, idx) => ({
type: 'item' as const,
depth: 0,
folderId: '2',
height: 32,
index: idx,
item: { ...m, type: 'column' as const },
})),
],
folderMap: new Map([
[
'1',
{
id: '1',
isCollapsed: false,
name: 'Metrics',
items: metrics.map(m => ({ ...m, type: 'metric' })),
totalItems: metrics.length,
showingItems: metrics.length,
},
],
[
'2',
{
id: '2',
isCollapsed: false,
name: 'Columns',
items: columns.map(c => ({ ...c, type: 'column' })),
totalItems: columns.length,
showingItems: columns.length,
},
],
]),
width: 300,
showAllMetrics: false,
onShowAllMetricsChange: jest.fn(),
showAllColumns: false,
onShowAllColumnsChange: jest.fn(),
collapseMetrics: false,
onCollapseMetricsChange: jest.fn(),
collapseColumns: false,
onCollapseColumnsChange: jest.fn(),
hiddenMetricCount: 0,
hiddenColumnCount: 0,
onToggleCollapse: jest.fn(),
collapsedFolderIds: new Set(),
};
test('renders each item accordingly', () => {
const { getByText, getByTestId, rerender, container } = render(
<DatasourcePanelItem index={0} data={mockData} style={{}} />,
const setup = (data: DatasourcePanelItemProps['data'] = mockData) =>
render(
<>
{data.flattenedItems.map((_, index) => (
<DatasourcePanelItem index={index} data={data} 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('');
test('renders each item accordingly', () => {
setup();
expect(screen.getByText('Metrics')).toBeInTheDocument();
expect(screen.getByText('metric_end_certified')).toBeInTheDocument();
expect(screen.getByText('metric_end')).toBeInTheDocument();
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();
});
expect(screen.getByText('Columns')).toBeInTheDocument();
expect(screen.getByText('bootcamp_attend')).toBeInTheDocument();
expect(screen.getByText('calc_first_time_dev')).toBeInTheDocument();
expect(screen.getByText('aaaaaaaaaaa')).toBeInTheDocument();
expect(screen.getByTestId('datasource-panel-divider')).toBeInTheDocument();
expect(screen.getAllByTestId('DatasourcePanelDragOption').length).toEqual(5);
});
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).toHaveBeenCalled();
expect(mockData.onCollapseColumnsChange).not.toHaveBeenCalled();
const startIndexOfColumnSection = mockData.metricSlice.length + 3;
rerender(
<DatasourcePanelItem
index={startIndexOfColumnSection}
data={mockData}
style={{}}
/>,
);
fireEvent.click(getByRole('button'));
expect(mockData.onCollapseColumnsChange).toHaveBeenCalled();
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();
});
test('shows ineligible items count', () => {
const hiddenColumnCount = 3;
const hiddenMetricCount = 1;
const dataWithHiddenItems = {
...mockData,
hiddenColumnCount,
hiddenMetricCount,
};
const { getByText, rerender } = render(
<DatasourcePanelItem index={1} data={dataWithHiddenItems} style={{}} />,
{ useDnd: true },
);
expect(
getByText(`${hiddenMetricCount} ineligible item(s) are hidden`),
).toBeInTheDocument();
const startIndexOfColumnSection = mockData.metricSlice.length + 3;
rerender(
<DatasourcePanelItem
index={startIndexOfColumnSection + 1}
data={dataWithHiddenItems}
style={{}}
/>,
);
expect(
getByText(`${hiddenColumnCount} ineligible item(s) are hidden`),
).toBeInTheDocument();
setup();
userEvent.click(screen.getAllByRole('button')[0]);
expect(mockData.onToggleCollapse).toHaveBeenCalled();
});