feat: Renders Explore in SPA (apache#20572)

* feat: Renders Explore in SPA

* Adds permalink support

* Replaces navigation from Welcome page

* Fix initializing feature flags

* Remove redundant import

* Adds saveSlice workaround

* Fixes paths

* Fixes lint error

* Fixes tests

* Fix url to explore from Datasets view

* Fix explore page height

Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>

Author: michael-s-molina

superset-frontend/cypress-base/cypress/integration/explore/advanced_analytics.test.ts

@@ -22,7 +22,7 @@ describe('Advanced analytics', () => {
     cy.intercept('POST', '/superset/explore_json/**').as('postJson');
     cy.intercept('GET', '/superset/explore_json/**').as('getJson');
     cy.intercept('PUT', '/api/v1/explore/**').as('putExplore');
-    cy.intercept('GET', '/superset/explore/**').as('getExplore');
+    cy.intercept('GET', '/explore/**').as('getExplore');
   });
 
   it('Create custom time compare', () => {

superset-frontend/cypress-base/cypress/support/index.ts

@@ -19,7 +19,7 @@
 import '@cypress/code-coverage/support';
 import '@applitools/eyes-cypress/commands';
 
-const BASE_EXPLORE_URL = '/superset/explore/?form_data=';
+const BASE_EXPLORE_URL = '/explore/?form_data=';
 const TokenName = Cypress.env('TOKEN_NAME');
 
 require('cy-verify-downloads').addCustomCommand();
@@ -90,7 +90,7 @@ Cypress.Commands.add(
       },
     }).then(response => {
       const formDataKey = response.body.key;
-      const url = `/superset/explore/?form_data_key=${formDataKey}`;
+      const url = `/explore/?form_data_key=${formDataKey}`;
       cy.visit(url);
     });
   },

superset-frontend/src/addSlice/AddSliceContainer.test.tsx

@@ -138,6 +138,6 @@ test('formats Explore url', async () => {
     datasource,
     vizType: 'table',
   });
-  const formattedUrl = '/superset/explore/?viz_type=table&datasource=1';
+  const formattedUrl = '/explore/?viz_type=table&datasource=1';
   expect(wrapper.instance().exploreUrl()).toBe(formattedUrl);
 });

superset-frontend/src/addSlice/AddSliceContainer.tsx

@@ -226,7 +226,7 @@ export default class AddSliceContainer extends React.PureComponent<
 
   exploreUrl() {
     const dashboardId = getUrlParam(URL_PARAMS.dashboardId);
-    let url = `/superset/explore/?viz_type=${this.state.vizType}&datasource=${this.state.datasource?.value}`;
+    let url = `/explore/?viz_type=${this.state.vizType}&datasource=${this.state.datasource?.value}`;
     if (!isNullish(dashboardId)) {
       url += `&dashboard_id=${dashboardId}`;
     }

superset-frontend/src/dashboard/components/SliceHeader/SliceHeader.test.tsx

@@ -115,7 +115,7 @@ const createProps = (overrides: any = {}) => ({
   sliceCanEdit: false,
   slice: {
     slice_id: 312,
-    slice_url: '/superset/explore/?form_data=%7B%22slice_id%22%3A%20312%7D',
+    slice_url: '/explore/?form_data=%7B%22slice_id%22%3A%20312%7D',
     slice_name: 'Vaccine Candidates per Phase',
     form_data: {
       adhoc_filters: [],

superset-frontend/src/dashboard/components/SliceHeaderControls/SliceHeaderControls.test.tsx

@@ -48,7 +48,7 @@ const createProps = (viz_type = 'sunburst') => ({
   onExploreChart: jest.fn(),
   slice: {
     slice_id: 371,
-    slice_url: '/superset/explore/?form_data=%7B%22slice_id%22%3A%20371%7D',
+    slice_url: '/explore/?form_data=%7B%22slice_id%22%3A%20371%7D',
     slice_name: 'Vaccine Candidates per Country & Stage',
     slice_description: 'Table of vaccine candidates for 100 countries',
     form_data: {

superset-frontend/src/dashboard/util/filterboxMigrationHelper.test.ts

@@ -61,7 +61,7 @@ const regionFilter = {
   },
   modified: '<bound method AuditMixinNullable.modified of Region Filter>',
   slice_name: 'Region Filter',
-  slice_url: '/superset/explore/?form_data=%7B%22slice_id%22%3A%2032%7D',
+  slice_url: '/explore/?form_data=%7B%22slice_id%22%3A%2032%7D',
   slice_id: 32,
 };
 const chart1 = {
@@ -88,7 +88,7 @@ const chart1 = {
   },
   modified: "<bound method AuditMixinNullable.modified of World's Population>",
   slice_name: "World's Population",
-  slice_url: '/superset/explore/?form_data=%7B%22slice_id%22%3A%2033%7D',
+  slice_url: '/explore/?form_data=%7B%22slice_id%22%3A%2033%7D',
   slice_id: 33,
 };
 const chartData = [regionFilter, chart1];

superset-frontend/src/explore/App.jsx

@@ -38,7 +38,7 @@ const fetchExploreData = () => {
   })(exploreUrlParams);
 };
 
-export const ExplorePage = () => {
+const ExplorePage = () => {
   const [isLoaded, setIsLoaded] = useState(false);
   const dispatch = useDispatch();
 
@@ -66,3 +66,5 @@ export const ExplorePage = () => {
   }
   return <ExploreViewContainer />;
 };
+
+export default ExplorePage;

superset-frontend/src/explore/ExplorePage.tsx

@@ -62,14 +62,17 @@ export function removeSaveModalAlert() {
 
 export function saveSlice(formData, requestParams) {
   return dispatch => {
-    const url = getExploreUrl({
+    let url = getExploreUrl({
       formData,
       endpointType: 'base',
       force: false,
       curUrl: null,
       requestParams,
     });
 
+    // TODO: This will be removed in the next PR that will change the logic to save a slice
+    url = url.replace('/explore', '/superset/explore');
+
     // Save the query context so we can re-generate the data from Python
     // for alerts and reports
     const queryContext = buildV1ChartDataPayload({