fix: Open control with Simple tab selected when there is no column se…

…lected (#30502)

(cherry picked from commit 03146b2)

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(
+    <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');
 });

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);