feat: Renders Explore in SPA (#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>
apache · Jul 5, 2022 · 662bab1 · 662bab1
1 parent 1a80668
commit 662bab1
Show file tree

Hide file tree

Showing 36 changed files with 167 additions and 224 deletions.
diff --git a/superset-frontend/cypress-base/cypress/integration/explore/advanced_analytics.test.ts b/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', () => {

diff --git a/superset-frontend/cypress-base/cypress/support/index.ts b/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);
     });
   },

diff --git a/superset-frontend/src/addSlice/AddSliceContainer.test.tsx b/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);
 });
diff --git a/superset-frontend/src/addSlice/AddSliceContainer.tsx b/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}`;
     }

diff --git a/superset-frontend/src/dashboard/components/SliceHeader/SliceHeader.test.tsx b/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: [],

diff --git a/superset-frontend/src/dashboard/components/SliceHeaderControls/SliceHeaderControls.test.tsx b/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: {

diff --git a/superset-frontend/src/dashboard/util/filterboxMigrationHelper.test.ts b/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];

diff --git a/superset-frontend/src/explore/App.jsx b/superset-frontend/src/explore/App.jsx
diff --git a/superset-frontend/src/explore/ExplorePage.tsx b/superset-frontend/src/explore/ExplorePage.tsx
@@ -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;
diff --git a/superset-frontend/src/explore/actions/saveModalActions.js b/superset-frontend/src/explore/actions/saveModalActions.js
@@ -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({

diff --git a/superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx b/superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx
@@ -88,7 +88,7 @@ const createProps = () => ({
     ],
     slice_id: 318,
     slice_name: 'Age distribution of respondents',
-    slice_url: '/superset/explore/?form_data=%7B%22slice_id%22%3A%20318%7D',
+    slice_url: '/explore/?form_data=%7B%22slice_id%22%3A%20318%7D',
   },
   slice_name: 'Age distribution of respondents',
   actions: {

diff --git a/superset-frontend/src/explore/components/ExploreViewContainer/ExploreViewContainer.test.tsx b/superset-frontend/src/explore/components/ExploreViewContainer/ExploreViewContainer.test.tsx
@@ -81,7 +81,7 @@ fetchMock.get('glob:*/api/v1/explore/form_data*', {});
 fetchMock.get('glob:*/favstar/slice*', { count: 0 });
 
 const renderWithRouter = (withKey?: boolean) => {
-  const path = '/superset/explore/';
+  const path = '/explore/';
   const search = withKey ? `?form_data_key=${key}&dataset_id=1` : '';
   return render(
     <MemoryRouter initialEntries={[`${path}${search}`]}>

diff --git a/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx b/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
@@ -85,6 +85,7 @@ const ExploreContainer = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
+  min-height: 0;
 `;
 
 const ExplorePanelContainer = styled.div`

diff --git a/superset-frontend/src/explore/exploreUtils/exploreUtils.test.jsx b/superset-frontend/src/explore/exploreUtils/exploreUtils.test.jsx
@@ -51,7 +51,7 @@ describe('exploreUtils', () => {
         force: false,
         curUrl: 'http://superset.com',
       });
-      compareURI(URI(url), URI('/superset/explore/'));
+      compareURI(URI(url), URI('/explore/'));
     });
     it('generates proper json url', () => {
       const url = getExploreUrl({
@@ -95,7 +95,7 @@ describe('exploreUtils', () => {
       });
       compareURI(
         URI(url),
-        URI('/superset/explore/').search({
+        URI('/explore/').search({
           standalone: DashboardStandaloneMode.HIDE_NAV,
         }),
       );

diff --git a/superset-frontend/src/explore/exploreUtils/getExploreUrl.test.ts b/superset-frontend/src/explore/exploreUtils/getExploreUrl.test.ts
@@ -33,7 +33,7 @@ const createParams = () => ({
 
 test('Get ExploreUrl with default params', () => {
   const params = createParams();
-  expect(getExploreUrl(params)).toBe('http://localhost/superset/explore/');
+  expect(getExploreUrl(params)).toBe('http://localhost/explore/');
 });
 
 test('Get ExploreUrl with endpointType:full', () => {

diff --git a/superset-frontend/src/explore/exploreUtils/getParsedExploreURLParams.test.ts b/superset-frontend/src/explore/exploreUtils/getParsedExploreURLParams.test.ts
@@ -19,7 +19,7 @@
 
 import { getParsedExploreURLParams } from './getParsedExploreURLParams';
 
-const EXPLORE_BASE_URL = 'http://localhost:9000/superset/explore/';
+const EXPLORE_BASE_URL = 'http://localhost:9000/explore/';
 const setupLocation = (newUrl: string) => {
   delete (window as any).location;
   // @ts-ignore

diff --git a/superset-frontend/src/explore/exploreUtils/getURIDirectory.test.ts b/superset-frontend/src/explore/exploreUtils/getURIDirectory.test.ts
@@ -25,6 +25,6 @@ test('Cases in which the "explore_json" will be returned', () => {
 });
 
 test('Cases in which the "explore" will be returned', () => {
-  expect(getURIDirectory('any-string')).toBe('/superset/explore/');
-  expect(getURIDirectory()).toBe('/superset/explore/');
+  expect(getURIDirectory('any-string')).toBe('/explore/');
+  expect(getURIDirectory()).toBe('/explore/');
 });
diff --git a/superset-frontend/src/explore/exploreUtils/index.js b/superset-frontend/src/explore/exploreUtils/index.js
@@ -87,7 +87,7 @@ export function getURIDirectory(endpointType = 'base') {
   ) {
     return '/superset/explore_json/';
   }
-  return '/superset/explore/';
+  return '/explore/';
 }
 
 export function mountExploreUrl(endpointType, extraSearch = {}, force = false) {

diff --git a/superset-frontend/src/explore/index.jsx b/superset-frontend/src/explore/index.jsx
diff --git a/superset-frontend/src/explore/reducers/index.js b/superset-frontend/src/explore/reducers/index.js
diff --git a/superset-frontend/src/preamble.ts b/superset-frontend/src/preamble.ts
@@ -28,6 +28,7 @@ import setupExtensions from './setup/setupExtensions';
 import setupFormatters from './setup/setupFormatters';
 import setupDashboardComponents from './setup/setupDasboardComponents';
 import { BootstrapUser, User } from './types/bootstrapTypes';
+import { initFeatureFlags } from './featureFlags';
 
 if (process.env.WEBPACK_MODE === 'development') {
   setHotLoaderConfig({ logLevel: 'debug', trackTailUpdates: false });
@@ -44,6 +45,7 @@ export let bootstrapData: {
     dashboard_id: string;
   };
 } = {};
+
 // Configure translation
 if (typeof window !== 'undefined') {
   const root = document.getElementById('app');
@@ -61,6 +63,9 @@ if (typeof window !== 'undefined') {
   configure();
 }
 
+// Configure feature flags
+initFeatureFlags(bootstrapData?.common?.feature_flags);
+
 // Setup SupersetClient
 setupClient();
 

diff --git a/superset-frontend/src/utils/getDatasourceUid.ts b/superset-frontend/src/utils/getDatasourceUid.ts
@@ -19,4 +19,4 @@
 import { Dataset } from '@superset-ui/chart-controls';
 
 export const getDatasourceUid = (datasource: Dataset) =>
-  datasource.uid ?? `${datasource.id}__${datasource.type}`;
+  datasource.uid ?? `${datasource.id ?? 'None'}__${datasource.type}`;