Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(explore): Hide non-droppable metric and column list #27717

Merged
merged 3 commits into from
Apr 5, 2024
Merged

chore(explore): Hide non-droppable metric and column list #27717

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7fb999a
chore(explore): Hide ineligible metric and column list
justinpark Mar 28, 2024
b758aea
display hidden items count
justinpark Apr 3, 2024
cceda46
text ellipsis
justinpark Apr 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 78 additions & 5 deletions superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanel.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
* under the License.
*/
import React from 'react';
import { render, screen, waitFor } from 'spec/helpers/testing-library';
import { render, screen, waitFor, within } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import DatasourcePanel, {
IDatasource,
Expand All @@ -29,6 +29,11 @@ import {
} from 'src/explore/components/DatasourcePanel/fixtures';
import { DatasourceType } from '@superset-ui/core';
import DatasourceControl from 'src/explore/components/controls/DatasourceControl';
import ExploreContainer from '../ExploreContainer';
import {
DndColumnSelect,
DndMetricSelect,
} from '../controls/DndColumnSelectControl';

jest.mock(
'react-virtualized-auto-sizer',
Expand Down Expand Up @@ -83,6 +88,12 @@ const props: DatasourcePanelProps = {
width: 300,
};

const metricProps = {
savedMetrics: [],
columns: [],
onChange: jest.fn(),
};

const search = (value: string, input: HTMLElement) => {
userEvent.clear(input);
userEvent.type(input, value);
Expand All @@ -104,7 +115,13 @@ test('should display items in controls', async () => {
});

test('should render the metrics', async () => {
render(<DatasourcePanel {...props} />, { useRedux: true, useDnd: true });
render(
<ExploreContainer>
<DatasourcePanel {...props} />
<DndMetricSelect {...metricProps} />
</ExploreContainer>,
{ useRedux: true, useDnd: true },
);
const metricsNum = metrics.length;
metrics.forEach(metric =>
expect(screen.getByText(metric.metric_name)).toBeInTheDocument(),
Expand All @@ -115,7 +132,13 @@ test('should render the metrics', async () => {
});

test('should render the columns', async () => {
render(<DatasourcePanel {...props} />, { useRedux: true, useDnd: true });
render(
<ExploreContainer>
<DatasourcePanel {...props} />
<DndMetricSelect {...metricProps} />
</ExploreContainer>,
{ useRedux: true, useDnd: true },
);
const columnsNum = columns.length;
columns.forEach(col =>
expect(screen.getByText(col.column_name)).toBeInTheDocument(),
Expand All @@ -134,7 +157,13 @@ test('should render 0 search results', async () => {
});

test('should search and render matching columns', async () => {
render(<DatasourcePanel {...props} />, { useRedux: true, useDnd: true });
render(
<ExploreContainer>
<DatasourcePanel {...props} />
<DndMetricSelect {...metricProps} />
</ExploreContainer>,
{ useRedux: true, useDnd: true },
);
const searchInput = screen.getByPlaceholderText('Search Metrics & Columns');

search(columns[0].column_name, searchInput);
Expand All @@ -146,7 +175,13 @@ test('should search and render matching columns', async () => {
});

test('should search and render matching metrics', async () => {
render(<DatasourcePanel {...props} />, { useRedux: true, useDnd: true });
render(
<ExploreContainer>
<DatasourcePanel {...props} />
<DndMetricSelect {...metricProps} />
</ExploreContainer>,
{ useRedux: true, useDnd: true },
);
const searchInput = screen.getByPlaceholderText('Search Metrics & Columns');

search(metrics[0].metric_name, searchInput);
Expand Down Expand Up @@ -211,3 +246,41 @@ test('should not render a save dataset modal when datasource is not query or dat

expect(screen.queryByText(/create a dataset/i)).toBe(null);
});

test('should render only droppable metrics and columns', async () => {
const column1FilterProps = {
type: 'DndColumnSelect' as const,
name: 'Filter',
onChange: jest.fn(),
options: [{ column_name: columns[1].column_name }],
actions: { setControlValue: jest.fn() },
};
const column2FilterProps = {
type: 'DndColumnSelect' as const,
name: 'Filter',
onChange: jest.fn(),
options: [
{ column_name: columns[1].column_name },
{ column_name: columns[2].column_name },
],
actions: { setControlValue: jest.fn() },
};
const { getByTestId } = render(
<ExploreContainer>
<DatasourcePanel {...props} />
<DndColumnSelect {...column1FilterProps} />
<DndColumnSelect {...column2FilterProps} />
</ExploreContainer>,
{ useRedux: true, useDnd: true },
);
const selections = getByTestId('fieldSelections');
expect(
within(selections).queryByText(columns[0].column_name),
).not.toBeInTheDocument();
expect(
within(selections).queryByText(columns[1].column_name),
).toBeInTheDocument();
expect(
within(selections).queryByText(columns[2].column_name),
).toBeInTheDocument();
});
31 changes: 31 additions & 0 deletions superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelItem.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ const mockData = {
onCollapseMetricsChange: jest.fn(),
collapseColumns: false,
onCollapseColumnsChange: jest.fn(),
hiddenMetricCount: 0,
hiddenColumnCount: 0,
};

test('renders each item accordingly', () => {
Expand Down Expand Up @@ -166,3 +168,32 @@ test('can collapse metrics and columns', () => {
);
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();
});
43 changes: 39 additions & 4 deletions superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,8 @@ type Props = {
onCollapseMetricsChange: (collapse: boolean) => void;
collapseColumns: boolean;
onCollapseColumnsChange: (collapse: boolean) => void;
hiddenMetricCount: number;
hiddenColumnCount: number;
};
};

Expand Down Expand Up @@ -130,6 +132,19 @@ const SectionHeader = styled.span`
`}
`;

const Box = styled.div`
${({ theme }) => `
border: 1px ${theme.colors.grayscale.light4} solid;
border-radius: ${theme.gridUnit}px;
font-size: ${theme.typography.sizes.s}px;
padding: ${theme.gridUnit}px;
color: ${theme.colors.grayscale.light1};
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
`}
`;

const DatasourcePanelItem: React.FC<Props> = ({ index, style, data }) => {
const {
metricSlice: _metricSlice,
Expand All @@ -145,6 +160,8 @@ const DatasourcePanelItem: React.FC<Props> = ({ index, style, data }) => {
onCollapseMetricsChange,
collapseColumns,
onCollapseColumnsChange,
hiddenMetricCount,
hiddenColumnCount,
} = data;
const metricSlice = collapseMetrics ? [] : _metricSlice;

Expand All @@ -169,6 +186,7 @@ const DatasourcePanelItem: React.FC<Props> = ({ index, style, data }) => {
? onShowAllColumnsChange
: onShowAllMetricsChange;
const theme = useTheme();
const hiddenCount = isColumnSection ? hiddenColumnCount : hiddenMetricCount;

return (
<div
Expand All @@ -190,10 +208,27 @@ const DatasourcePanelItem: React.FC<Props> = ({ index, style, data }) => {
</SectionHeaderButton>
)}
{index === SUBTITLE_LINE && !collapsed && (
<div className="field-length">
{isColumnSection
? t(`Showing %s of %s`, columnSlice?.length, totalColumns)
: t(`Showing %s of %s`, metricSlice?.length, totalMetrics)}
<div
css={css`
display: flex;
gap: ${theme.gridUnit * 2}px;
justify-content: space-between;
align-items: baseline;
`}
>
<div
className="field-length"
css={css`
flex-shrink: 0;
`}
>
{isColumnSection
? t(`Showing %s of %s`, columnSlice?.length, totalColumns)
: t(`Showing %s of %s`, metricSlice?.length, totalMetrics)}
</div>
{hiddenCount > 0 && (
<Box>{t(`%s ineligible item(s) are hidden`, hiddenCount)}</Box>
)}
</div>
)}
{index > SUBTITLE_LINE && index < BOTTOM_LINE && (
Expand Down
Loading
Loading