feat: add tab select with save chart to dashboard

superset-frontend/src/explore/components/SaveModal.test.jsx

@@ -41,6 +41,18 @@ jest.mock('@superset-ui/core/components/Select', () => ({
   ),
 }));
 
+jest.mock('@superset-ui/core/components/TreeSelect', () => ({
+  TreeSelect: ({ onChange, disabled }) => {
+    return (
+      <input
+        data-test="mock-tree-select"
+        disabled={disabled}
+        onChange={({ target: { value } }) => onChange(value)}
+      />
+    );
+  },
+}));
+
 const middlewares = [thunk];
 const mockStore = configureStore(middlewares);
 const initialState = {
@@ -345,3 +357,62 @@ test('removes form_data_key from URL parameters after save', () => {
   expect(result.get('slice_id')).toEqual('1');
   expect(result.get('save_action')).toEqual('overwrite');
 });
+
+test('disables tab selector when no dashboard selected', () => {
+  const { getByRole, getByTestId } = setup();
+  fireEvent.click(getByRole('radio', { name: 'Save as...' }));
+  const tabSelector = getByTestId('mock-tree-select');
+  expect(tabSelector).toBeInTheDocument();
+  expect(tabSelector).toBeDisabled();
+});
+
+test('renders tab selector when saving as', async () => {
+  const { getByRole, getByTestId } = setup();
+  fireEvent.click(getByRole('radio', { name: 'Save as...' }));
+  const selection = getByTestId('mock-async-select');
+  fireEvent.change(selection, { target: { value: '1' } });
+  const tabSelector = getByTestId('mock-tree-select');
+  expect(tabSelector).toBeInTheDocument();
+  expect(tabSelector).toBeDisabled();
+});
+
+test('onDashboardChange triggers tabs load for existing dashboard', async () => {
+  const dashboardId = mockEvent.value;
+
+  fetchMock.get(`glob:*/api/v1/dashboard/${dashboardId}/tabs`, {
+    json: {
+      result: {
+        tab_tree: [{ value: 'tab1', title: 'Main Tab' }],
+      },
+    },
+  });
+  const component = new PureSaveModal(defaultProps);
+  const loadTabsMock = jest
+    .fn()
+    .mockResolvedValue([{ value: 'tab1', title: 'Main Tab' }]);
+  component.loadTabs = loadTabsMock;
+  await component.onDashboardChange({
+    value: dashboardId,
+    label: 'Test Dashboard',
+  });
+  expect(loadTabsMock).toHaveBeenCalledWith(dashboardId);
+});
+
+test('onTabChange updates selectedTab state', () => {
+  const component = new PureSaveModal(defaultProps);
+
+  const setStateMock = jest.fn();
+  component.setState = setStateMock;
+
+  component.state.tabsData = [
+    { value: 'tab1', title: 'Main Tab', key: 'tab1' },
+    { value: 'tab2', title: 'Analytics Tab', key: 'tab2' },
+  ];
+  component.onTabChange('tab2');
+  expect(setStateMock).toHaveBeenCalledWith({
+    selectedTab: {
+      value: 'tab2',
+      label: 'Analytics Tab',
+    },
+  });
+});

superset-frontend/src/explore/components/SaveModal.tsx

@@ -32,6 +32,7 @@ import {
   Input,
   Loading,
   Divider,
+  TreeSelect,
 } from '@superset-ui/core/components';
 import {
   DatasourceType,
@@ -42,11 +43,13 @@ import {
 } from '@superset-ui/core';
 import { css, styled, Alert } from '@apache-superset/core/ui';
 import { Radio } from '@superset-ui/core/components/Radio';
+import { Layout } from 'src/dashboard/types';
 import { canUserEditDashboard } from 'src/dashboard/util/permissionUtils';
 import { setSaveChartModalVisibility } from 'src/explore/actions/saveModalActions';
 import { SaveActionType } from 'src/explore/types';
 import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
 import { Dashboard } from 'src/types/Dashboard';
+import { TabNode, TreeDataNode } from '../types';
 
 // Session storage key for recent dashboard
 const SK_DASHBOARD_ID = 'save_chart_recent_dashboard';
@@ -72,6 +75,8 @@ type SaveModalState = {
   isLoading: boolean;
   saveStatus?: string | null;
   dashboard?: { label: string; value: string | number };
+  selectedTab?: { label: string; value: string | number };
+  tabsData: Array<{ value: string; title: string; key: string }>;
 };
 
 export const StyledModal = styled(Modal)`
@@ -94,6 +99,7 @@ class SaveModal extends Component<SaveModalProps, SaveModalState> {
       action: this.canOverwriteSlice() ? 'overwrite' : 'saveas',
       isLoading: false,
       dashboard: undefined,
+      tabsData: [],
     };
     this.onDashboardChange = this.onDashboardChange.bind(this);
     this.onSliceNameChange = this.onSliceNameChange.bind(this);
@@ -152,10 +158,20 @@ class SaveModal extends Component<SaveModalProps, SaveModalState> {
     this.setState({ newSliceName: event.target.value });
   }
 
-  onDashboardChange(dashboard: { label: string; value: string | number }) {
-    this.setState({ dashboard });
-  }
+  onDashboardChange = async (dashboard: {
+    label: string;
+    value: string | number;
+  }) => {
+    this.setState({
+      dashboard,
+      tabsData: [],
+      selectedTab: undefined,
+    });
 
+    if (typeof dashboard.value === 'number') {
+      await this.loadTabs(dashboard.value);
+    }
+  };
   changeAction(action: SaveActionType) {
     this.setState({ action });
   }
@@ -210,6 +226,7 @@ class SaveModal extends Component<SaveModalProps, SaveModalState> {
       delete formData.url_params;
 
       let dashboard: DashboardGetResponse | null = null;
+      let selectedTabId: string | undefined;
       if (this.state.dashboard) {
         let validId = this.state.dashboard.value;
         if (this.isNewDashboard()) {
@@ -231,6 +248,9 @@ class SaveModal extends Component<SaveModalProps, SaveModalState> {
             ? sliceDashboards
             : [...sliceDashboards, dashboard.id];
           formData.dashboards = sliceDashboards;
+          if (this.state.action === 'saveas') {
+            selectedTabId = this.state.selectedTab?.value as string;
+          }
         }
       }
 
@@ -262,6 +282,20 @@ class SaveModal extends Component<SaveModalProps, SaveModalState> {
               }
             : null,
         );
+        if (dashboard && selectedTabId) {
+          try {
+            await this.addChartToDashboardTab(
+              dashboard.id,
+              value.id,
+              selectedTabId,
+            );
+          } catch (error) {
+            logging.error('Error adding chart to dashboard tab:', error);
+            this.props.addDangerToast(
+              t('Chart was saved but could not be added to the selected tab.'),
+            );
+          }
+        }
       }
 
       try {
@@ -276,10 +310,13 @@ class SaveModal extends Component<SaveModalProps, SaveModalState> {
 
       // Go to new dashboard url
       if (gotodash && dashboard) {
-        this.props.history.push(dashboard.url);
+        let url = dashboard.url;
+        if (this.state.selectedTab?.value) {
+          url += `#${this.state.selectedTab.value}`;
+        }
+        this.props.history.push(url);
         return;
       }
-
       const searchParams = this.handleRedirect(window.location.search, value);
       this.props.history.replace(`/explore/?${searchParams.toString()}`);
 
@@ -289,6 +326,90 @@ class SaveModal extends Component<SaveModalProps, SaveModalState> {
       this.setState({ isLoading: false });
     }
   }
+  addChartToDashboardTab = async (
+    dashboardId: number,
+    chartId: number,
+    tabId: string,
+  ) => {
+    try {
+      const dashboardResponse = await SupersetClient.get({
+        endpoint: `/api/v1/dashboard/${dashboardId}`,
+      });
+
+      const dashboard = dashboardResponse.json.result;
+
+      let positionJson = dashboard.position_json;
+      if (typeof positionJson === 'string') {
+        positionJson = JSON.parse(positionJson);
+      }
+      positionJson = positionJson || {};
+
+      const updatedPositionJson = JSON.parse(JSON.stringify(positionJson));
+
+      const chartKey = `CHART-${chartId}`;
+      const rowIndex = this.findNextRowPosition(updatedPositionJson);
+      const rowKey = `ROW-${rowIndex}`;
+
+      updatedPositionJson[chartKey] = {
+        type: 'CHART',
+        id: chartKey,
+        children: [],
+        parents: ['ROOT_ID', 'GRID_ID', rowKey],
+        meta: {
+          width: 4,
+          height: 50,
+          chartId: chartId,
+          sliceName: `Chart ${chartId}`,
+        },
+      };
+
+      updatedPositionJson[rowKey] = {
+        type: 'ROW',
+        id: rowKey,
+        children: [chartKey],
+        parents: ['ROOT_ID', 'GRID_ID', tabId],
+        meta: {
+          background: 'BACKGROUND_TRANSPARENT',
+        },
+      };
+
+      if (updatedPositionJson[tabId]) {
+        if (!updatedPositionJson[tabId].children) {
+          updatedPositionJson[tabId].children = [];
+        }
+        updatedPositionJson[tabId].children.push(rowKey);
+      } else {
+        throw new Error(`Tab ${tabId} not found in positionJson`);
+      }
+
+      const response = await SupersetClient.put({
+        endpoint: `/api/v1/dashboard/${dashboardId}`,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          position_json: JSON.stringify(updatedPositionJson),
+        }),
+      });
+
+      return response;
+    } catch (error) {
+      throw new Error('Error adding chart to dashboard tab:', error);
+    }
+  };
+
+  findNextRowPosition = (layout: Layout): number => {
+    const rowIndices: number[] = [];
+
+    Object.keys(layout).forEach(key => {
+      if (key.startsWith('ROW-')) {
+        const rest = key.substring(4);
+        if (/^\d+$/.test(rest)) {
+          rowIndices.push(parseInt(rest, 10));
+        }
+      }
+    });
+
+    return rowIndices.length > 0 ? Math.max(...rowIndices) + 1 : 0;
+  };
 
   loadDashboard = async (id: number) => {
     const response = await SupersetClient.get({
@@ -331,6 +452,64 @@ class SaveModal extends Component<SaveModalProps, SaveModalState> {
       totalCount: count,
     };
   };
+  loadTabs = async (dashboardId: number) => {
+    try {
+      const response = await SupersetClient.get({
+        endpoint: `/api/v1/dashboard/${dashboardId}/tabs`,
+      });
+
+      const { result } = response.json;
+      const tabTree = result.tab_tree || [];
+
+      const convertToTreeData = (nodes: TabNode[]): TreeDataNode[] =>
+        nodes.map(node => ({
+          value: node.value,
+          title: node.title,
+          key: node.value,
+          children:
+            node.children && node.children.length > 0
+              ? convertToTreeData(node.children)
+              : undefined,
+        }));
+
+      const treeData = convertToTreeData(tabTree);
+      this.setState({ tabsData: treeData });
+      return treeData;
+    } catch (error) {
+      logging.error('Error loading tabs:', error);
+      this.setState({ tabsData: [] });
+      return [];
+    }
+  };
+
+  onTabChange = (value: string) => {
+    if (value) {
+      const findTabInTree = (data: TabNode[]): TabNode | null => {
+        for (const item of data) {
+          if (item.value === value) {
+            return item;
+          }
+          if (item.children) {
+            const found = findTabInTree(item.children);
+            if (found) return found;
+          }
+        }
+        return null;
+      };
+
+      const selectedTab = findTabInTree(this.state.tabsData);
+      if (selectedTab) {
+        this.setState({
+          selectedTab: {
+            value: selectedTab.value,
+            label: selectedTab.title,
+          },
+        });
+      }
+    } else {
+      this.setState({ selectedTab: undefined });
+    }
+  };
 
   renderSaveChartModal = () => {
     const info = this.info();
@@ -403,6 +582,27 @@ class SaveModal extends Component<SaveModalProps, SaveModalState> {
             }
           />
         </FormItem>
+        {this.state.action === 'saveas' && (
+          <FormItem
+            label={t('Add to tabs')}
+            data-test="save-chart-modal-select-tabs-form"
+          >
+            <TreeSelect
+              showSearch
+              allowClear
+              treeDefaultExpandAll
+              treeData={this.state.tabsData}
+              onChange={this.onTabChange}
+              value={this.state.selectedTab?.value}
+              disabled={
+                !this.state.dashboard ||
+                typeof this.state.dashboard.value === 'string' ||
+                this.state.tabsData.length === 0
+              }
+              placeholder={t('Select a tab')}
+            />
+          </FormItem>
+        )}
         {info && <Alert type="info" message={info} closable={false} />}
         {this.props.alert && (
           <Alert