You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by mi...@apache.org on 2024/10/03 12:31:07 UTC
(superset) branch 4.0 updated: fix: Open control with Simple tab selected when there is no column selected (#30502)
This is an automated email from the ASF dual-hosted git repository.
michaelsmolina pushed a commit to branch 4.0
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/4.0 by this push:
new 0cf21e9e04 fix: Open control with Simple tab selected when there is no column selected (#30502)
0cf21e9e04 is described below
commit 0cf21e9e04c5bbc48820dff1031a5a70dfdb8538
Author: Michael S. Molina <70...@users.noreply.github.com>
AuthorDate: Thu Oct 3 08:45:39 2024 -0300
fix: Open control with Simple tab selected when there is no column selected (#30502)
(cherry picked from commit 03146b21be4616336bc22c76b367d91c415bc6eb)
---
.../ColumnSelectPopover.test.tsx | 130 ++++++++++++++-------
.../DndColumnSelectControl/ColumnSelectPopover.tsx | 8 +-
2 files changed, 93 insertions(+), 45 deletions(-)
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.test.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.test.tsx
index e7ff7cd9a7..db510436f0 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.test.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.test.tsx
@@ -24,54 +24,102 @@ import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { supersetTheme, ThemeProvider } from '@superset-ui/core';
-import ColumnSelectPopover from 'src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover';
+import ColumnSelectPopover, {
+ ColumnSelectPopoverProps,
+} from 'src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover';
const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);
-describe('ColumnSelectPopover - onTabChange function', () => {
- it('updates adhocColumn when switching to sqlExpression tab with custom label', () => {
- const mockColumns = [{ column_name: 'year' }];
- const mockOnClose = jest.fn();
- const mockOnChange = jest.fn();
- const mockGetCurrentTab = jest.fn();
- const mockSetDatasetModal = jest.fn();
- const mockSetLabel = jest.fn();
+const renderPopover = (
+ props: Pick<
+ ColumnSelectPopoverProps,
+ 'columns' | 'editedColumn' | 'getCurrentTab' | 'onChange'
+ >,
+) => {
+ const store = mockStore({ explore: { datasource: { type: 'table' } } });
- const store = mockStore({ explore: { datasource: { type: 'table' } } });
+ return render(
+ <Provider store={store}>
+ <ThemeProvider theme={supersetTheme}>
+ <ColumnSelectPopover
+ hasCustomLabel
+ isTemporal
+ label="Custom Label"
+ onClose={jest.fn()}
+ setDatasetModal={jest.fn()}
+ setLabel={jest.fn()}
+ {...props}
+ />
+ </ThemeProvider>
+ </Provider>,
+ );
+};
- const { container, getByText } = render(
- <Provider store={store}>
- <ThemeProvider theme={supersetTheme}>
- <ColumnSelectPopover
- columns={mockColumns}
- editedColumn={mockColumns[0]}
- getCurrentTab={mockGetCurrentTab}
- hasCustomLabel
- isTemporal
- label="Custom Label"
- onChange={mockOnChange}
- onClose={mockOnClose}
- setDatasetModal={mockSetDatasetModal}
- setLabel={mockSetLabel}
- />
- </ThemeProvider>
- </Provider>,
- );
+test('updates adhocColumn when switching to sqlExpression tab with custom label', () => {
+ const mockColumns = [{ column_name: 'year' }];
+ const mockOnChange = jest.fn();
+ const mockGetCurrentTab = jest.fn();
- const sqlExpressionTab = container.querySelector(
- '#adhoc-metric-edit-tabs-tab-sqlExpression',
- );
- expect(sqlExpressionTab).not.toBeNull();
- fireEvent.click(sqlExpressionTab!);
- expect(mockGetCurrentTab).toHaveBeenCalledWith('sqlExpression');
+ const { container, getByText } = renderPopover({
+ columns: mockColumns,
+ editedColumn: mockColumns[0],
+ getCurrentTab: mockGetCurrentTab,
+ onChange: mockOnChange,
+ });
+
+ const sqlExpressionTab = container.querySelector(
+ '#adhoc-metric-edit-tabs-tab-sqlExpression',
+ );
+ expect(sqlExpressionTab).not.toBeNull();
+ fireEvent.click(sqlExpressionTab!);
+ expect(mockGetCurrentTab).toHaveBeenCalledWith('sqlExpression');
+
+ const saveButton = getByText('Save');
+ fireEvent.click(saveButton);
+ expect(mockOnChange).toHaveBeenCalledWith({
+ label: 'Custom Label',
+ sqlExpression: 'year',
+ expressionType: 'SQL',
+ });
+});
+
+test('open with Simple tab selected when there is no column selected', () => {
+ const { getByText } = renderPopover({
+ columns: [{ column_name: 'year' }],
+ editedColumn: undefined,
+ getCurrentTab: jest.fn(),
+ onChange: jest.fn(),
+ });
+ expect(getByText('Saved')).toHaveAttribute('aria-selected', 'false');
+ expect(getByText('Simple')).toHaveAttribute('aria-selected', 'true');
+ expect(getByText('Custom SQL')).toHaveAttribute('aria-selected', 'false');
+});
+
+test('open with Saved tab selected when there is a saved column selected', () => {
+ const { getByText } = renderPopover({
+ columns: [{ column_name: 'year' }],
+ editedColumn: { column_name: 'year', expression: 'year - 1' },
+ getCurrentTab: jest.fn(),
+ onChange: jest.fn(),
+ });
+ expect(getByText('Saved')).toHaveAttribute('aria-selected', 'true');
+ expect(getByText('Simple')).toHaveAttribute('aria-selected', 'false');
+ expect(getByText('Custom SQL')).toHaveAttribute('aria-selected', 'false');
+});
- const saveButton = getByText('Save');
- fireEvent.click(saveButton);
- expect(mockOnChange).toHaveBeenCalledWith({
- label: 'Custom Label',
- sqlExpression: 'year',
- expressionType: 'SQL',
- });
+test('open with Custom SQL tab selected when there is a custom SQL selected', () => {
+ const { getByText } = renderPopover({
+ columns: [{ column_name: 'year' }],
+ editedColumn: {
+ column_name: 'year',
+ label: 'Custom SQL',
+ sqlExpression: 'year - 1',
+ },
+ getCurrentTab: jest.fn(),
+ onChange: jest.fn(),
});
+ expect(getByText('Saved')).toHaveAttribute('aria-selected', 'false');
+ expect(getByText('Simple')).toHaveAttribute('aria-selected', 'false');
+ expect(getByText('Custom SQL')).toHaveAttribute('aria-selected', 'true');
});
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx
index 02d5c47b02..fe3de2e55f 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx
@@ -63,7 +63,7 @@ const StyledSelect = styled(Select)`
}
`;
-interface ColumnSelectPopoverProps {
+export interface ColumnSelectPopoverProps {
columns: ColumnMeta[];
editedColumn?: ColumnMeta | AdhocColumn;
onChange: (column: ColumnMeta | AdhocColumn) => void;
@@ -185,9 +185,9 @@ const ColumnSelectPopover = ({
const defaultActiveTabKey = initialAdhocColumn
? 'sqlExpression'
- : initialSimpleColumn || calculatedColumns.length === 0
- ? 'simple'
- : 'saved';
+ : selectedCalculatedColumn
+ ? 'saved'
+ : 'simple';
useEffect(() => {
getCurrentTab(defaultActiveTabKey);