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 395b943dc61cf..2657e5429531a 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.test.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.test.tsx
@@ -23,54 +23,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(
+
+
+
+
+ ,
+ );
+};
- const { container, getByText } = render(
-
-
-
-
- ,
- );
+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 fd50f038a6f04..711cad392de2f 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx
@@ -65,7 +65,7 @@ const StyledSelect = styled(Select)`
}
`;
-interface ColumnSelectPopoverProps {
+export interface ColumnSelectPopoverProps {
columns: ColumnMeta[];
editedColumn?: ColumnMeta | AdhocColumn;
onChange: (column: ColumnMeta | AdhocColumn) => void;
@@ -189,9 +189,9 @@ const ColumnSelectPopover = ({
const defaultActiveTabKey = initialAdhocColumn
? 'sqlExpression'
- : initialSimpleColumn || calculatedColumns.length === 0
- ? 'simple'
- : 'saved';
+ : selectedCalculatedColumn
+ ? 'saved'
+ : 'simple';
useEffect(() => {
getCurrentTab(defaultActiveTabKey);