fix(sqllab): Fix CSV export button href in SQL Lab when application root is defined (#35118)

superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.tsx

@@ -30,6 +30,7 @@ import thunk from 'redux-thunk';
 import fetchMock from 'fetch-mock';
 import { setupAGGridModules } from '@superset-ui/core/components/ThemedAgGridReact';
 import ResultSet from 'src/SqlLab/components/ResultSet';
+import * as getBootstrapData from 'src/utils/getBootstrapData';
 import {
   cachedQuery,
   failedQueryWithErrors,
@@ -52,6 +53,7 @@ jest.mock(
     ({ children }: { children: (params: { height: number }) => ReactChild }) =>
       children({ height: 500 }),
 );
+const applicationRootMock = jest.spyOn(getBootstrapData, 'applicationRoot');
 
 const mockedProps = {
   cache: true,
@@ -156,6 +158,10 @@ describe('ResultSet', () => {
     setupAGGridModules();
   });
 
+  beforeEach(() => {
+    applicationRootMock.mockReturnValue('');
+  });
+
   // Add cleanup after each test
   afterEach(async () => {
     fetchMock.resetHistory();
@@ -484,27 +490,38 @@ describe('ResultSet', () => {
     ).not.toBeInTheDocument();
   });
 
-  test('should allow download as CSV when user has permission to export data', async () => {
-    const { queryByTestId } = setup(
-      mockedProps,
-      mockStore({
-        ...initialState,
-        user: {
-          ...user,
-          roles: {
-            sql_lab: [['can_export_csv', 'SQLLab']],
+  test.each(['', '/myapp'])(
+    'should allow download as CSV when user has permission to export data with app_root=%s',
+    async app_root => {
+      applicationRootMock.mockReturnValue(app_root);
+      const { queryByTestId } = setup(
+        mockedProps,
+        mockStore({
+          ...initialState,
+          user: {
+            ...user,
+            roles: {
+              sql_lab: [['can_export_csv', 'SQLLab']],
+            },
           },
-        },
-        sqlLab: {
-          ...initialState.sqlLab,
-          queries: {
-            [queries[0].id]: queries[0],
+          sqlLab: {
+            ...initialState.sqlLab,
+            queries: {
+              [queries[0].id]: queries[0],
+            },
           },
-        },
-      }),
-    );
-    expect(queryByTestId('export-csv-button')).toBeInTheDocument();
-  });
+        }),
+      );
+      expect(queryByTestId('export-csv-button')).toBeInTheDocument();
+      const export_csv_button = screen.getByTestId('export-csv-button');
+      expect(export_csv_button).toHaveAttribute(
+        'href',
+        expect.stringMatching(
+          new RegExp(`^${app_root}/api/v1/sqllab/export/[a-zA-Z0-9]+/$`),
+        ),
+      );
+    },
+  );
 
   test('should display a popup message when the CSV content is limited to the dropdown limit', async () => {
     const queryLimit = 2;

superset-frontend/src/SqlLab/components/ResultSet/index.tsx

@@ -86,6 +86,7 @@ import {
 } from 'src/logger/LogUtils';
 import { Icons } from '@superset-ui/core/components/Icons';
 import { findPermission } from 'src/utils/findPermission';
+import { ensureAppRoot } from 'src/utils/pathUtils';
 import { useConfirmModal } from 'src/hooks/useConfirmModal';
 import ExploreCtasResultsButton from '../ExploreCtasResultsButton';
 import ExploreResultsButton from '../ExploreResultsButton';
@@ -303,7 +304,7 @@ const ResultSet = ({
   };
 
   const getExportCsvUrl = (clientId: string) =>
-    `/api/v1/sqllab/export/${clientId}/`;
+    ensureAppRoot(`/api/v1/sqllab/export/${clientId}/`);
 
   const renderControls = () => {
     if (search || visualize || csv) {