chore(spa refactor): refactoring dashboard to use api's instead of bo…

…otstrapdata (apache#13306)

* add hook for future async api calls

* test to see conflict

* add async middleware and update reducers

* working async dashboard load

* implement getcharts api

* add user permissions to explore and dashboard bootstrap data

* integrate api calls with getinitial state

* update namings

* accept an id or a slug in the dashboard charts api

* add permissions function

* fix merge

* update state

* get dashboard charts by id or slug

* fix undefined states

* variable names

* stop using some more bootstrap data

* fix metadata reference

* remove unused bootstrap from the template

* add errorboundry to dashboard

* refactoring, fixing

* update permissions

* add just roles

* id is supposed to be a string

* unused vars

* get datasources from api

* make onError optional

* use resource hooks, better error boundary

* add loading state for dashboardroute

* remove console

* add conditional

* more conditionals

* testing out a possible fix for cypress

* convert edit/standalone test to cypress

* remove bootstrappy assertions

* lint

* fix dashboard edit history issue

* rename stuff

* address recent native filters schema change

* remove unused getInitialState

* remove .only from test

* hooksy redux usage

* Revert "more conditionals"

This reverts commit 25c8ed6.

* cleanup

* undo unnecessary change

* actually need conditions here

* certainty

* Revert "certainty"

This reverts commit 77dea19.

* more permutations (untested yolo)

* Update superset-frontend/src/chart/chartReducer.ts

Co-authored-by: Evan Rusackas <[email protected]>

* import style

* comment

* cleaner dashboardInfo

* remove debug code

* use memo for getPermissions

* fix lint

* adjust name/location of DashboardPage

* move logic for REMOVE_SLICE_LEVEL_LABEL_COLORS to DAO

* stop using full_data()

* remove unused (and now useless) json=true query param

Co-authored-by: David Aaron Suddjian <[email protected]>
Co-authored-by: David Aaron Suddjian <[email protected]>
Co-authored-by: Evan Rusackas <[email protected]>

superset-frontend/cypress-base/cypress/integration/dashboard/load.test.ts

@@ -23,12 +23,28 @@ import {
 } from './dashboard.helper';
 
 describe('Dashboard load', () => {
-  before(() => {
+  beforeEach(() => {
     cy.login();
-    cy.visit(WORLD_HEALTH_DASHBOARD);
   });
 
   it('should load dashboard', () => {
+    cy.visit(WORLD_HEALTH_DASHBOARD);
     WORLD_HEALTH_CHARTS.forEach(waitForChartLoad);
   });
+
+  it('should load in edit mode', () => {
+    cy.visit(`${WORLD_HEALTH_DASHBOARD}?edit=true&standalone=true`);
+    cy.get('[data-test="discard-changes-button"]').should('be.visible');
+  });
+
+  it('should load in standalone mode', () => {
+    cy.visit(`${WORLD_HEALTH_DASHBOARD}?edit=true&standalone=true`);
+    cy.get('#app-menu').should('not.exist');
+  });
+
+  it('should load in edit/standalone mode', () => {
+    cy.visit(`${WORLD_HEALTH_DASHBOARD}?edit=true&standalone=true`);
+    cy.get('[data-test="discard-changes-button"]').should('be.visible');
+    cy.get('#app-menu').should('not.exist');
+  });
 });

superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts

@@ -61,9 +61,12 @@ describe('Nativefilters', () => {
       .click()
       .type('Country name');
 
-    cy.get('.ant-modal').find('[data-test="datasource-input"]').click();
+    cy.get('.ant-modal')
+      .find('[data-test="datasource-input"]')
+      .click()
+      .type('wb_health_population');
 
-    cy.get('[data-test="datasource-input"]')
+    cy.get('.ant-modal [data-test="datasource-input"] .Select__menu')
       .contains('wb_health_population')
       .click();
 
@@ -155,9 +158,12 @@ describe('Nativefilters', () => {
         .click()
         .type('Country name');
 
-      cy.get('.ant-modal').find('[data-test="datasource-input"]').click();
+      cy.get('.ant-modal')
+        .find('[data-test="datasource-input"]')
+        .click()
+        .type('wb_health_population');
 
-      cy.get('[data-test="datasource-input"]')
+      cy.get('.ant-modal [data-test="datasource-input"] .Select__menu')
         .contains('wb_health_population')
         .click();
 
@@ -187,9 +193,10 @@ describe('Nativefilters', () => {
       cy.get('.ant-modal')
         .find('[data-test="datasource-input"]')
         .last()
-        .click();
+        .click()
+        .type('wb_health_population');
 
-      cy.get('[data-test="datasource-input"]')
+      cy.get('.ant-modal [data-test="datasource-input"] .Select__menu')
         .last()
         .contains('wb_health_population')
         .click();

superset-frontend/src/chart/chartReducer.ts

@@ -18,9 +18,10 @@
  */
 /* eslint camelcase: 0 */
 import { t } from '@superset-ui/core';
+import { HYDRATE_DASHBOARD } from 'src/dashboard/actions/hydrate';
 import { ChartState } from 'src/explore/types';
 import { getFormDataFromControls } from 'src/explore/controlUtils';
-import { now } from '../modules/dates';
+import { now } from 'src/modules/dates';
 import * as actions from './chartAction';
 
 export const chart: ChartState = {
@@ -192,7 +193,9 @@ export default function chartReducer(
     delete charts[key];
     return charts;
   }
-
+  if (action.type === HYDRATE_DASHBOARD) {
+    return { ...action.data.charts };
+  }
   if (action.type in actionHandlers) {
     return {
       ...charts,

superset-frontend/src/common/hooks/apiResources/dashboards.ts

@@ -0,0 +1,41 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import Dashboard from 'src/types/Dashboard';
+import { useApiV1Resource, useTransformedResource } from './apiResources';
+
+export const useDashboard = (idOrSlug: string | number) =>
+  useTransformedResource(
+    useApiV1Resource<Dashboard>(`/api/v1/dashboard/${idOrSlug}`),
+    dashboard => ({
+      ...dashboard,
+      metadata: JSON.parse(dashboard.json_metadata),
+      position_data: JSON.parse(dashboard.position_json),
+    }),
+  );
+
+// gets the chart definitions for a dashboard
+export const useDashboardCharts = (idOrSlug: string | number) =>
+  useApiV1Resource(`/api/v1/dashboard/${idOrSlug}/charts`);
+
+// gets the datasets for a dashboard
+// important: this endpoint only returns the fields in the dataset
+// that are necessary for rendering the given dashboard
+export const useDashboardDatasets = (idOrSlug: string | number) =>
+  useApiV1Resource(`/api/v1/dashboard/${idOrSlug}/datasets`);

superset-frontend/src/common/hooks/apiResources/index.ts

@@ -26,4 +26,5 @@ export {
 // A central catalog of API Resource hooks.
 // Add new API hooks here, organized under
 // different files for different resource types.
-export { useChartOwnerNames } from './charts';
+export * from './charts';
+export * from './dashboards';

superset-frontend/src/components/ErrorBoundary/index.jsx

@@ -38,7 +38,7 @@ export default class ErrorBoundary extends React.Component {
   }
 
   componentDidCatch(error, info) {
-    this.props.onError(error, info);
+    if (this.props.onError) this.props.onError(error, info);
     this.setState({ error, info });
   }
 

superset-frontend/src/dashboard/App.jsx

@@ -25,22 +25,28 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import { DynamicPluginProvider } from 'src/components/DynamicPlugins';
 import setupApp from '../setup/setupApp';
 import setupPlugins from '../setup/setupPlugins';
-import DashboardContainer from './containers/Dashboard';
+import DashboardPage from './containers/DashboardPage';
 import { theme } from '../preamble';
 
 setupApp();
 setupPlugins();
 
-const App = ({ store }) => (
-  <Provider store={store}>
-    <DndProvider backend={HTML5Backend}>
-      <ThemeProvider theme={theme}>
-        <DynamicPluginProvider>
-          <DashboardContainer />
-        </DynamicPluginProvider>
-      </ThemeProvider>
-    </DndProvider>
-  </Provider>
-);
+const App = ({ store }) => {
+  const dashboardIdOrSlug = window.location.pathname.split('/')[3];
+  return (
+    <Provider store={store}>
+      <DndProvider backend={HTML5Backend}>
+        <ThemeProvider theme={theme}>
+          <DynamicPluginProvider>
+            <DashboardPage
+              store={store}
+              dashboardIdOrSlug={dashboardIdOrSlug}
+            />
+          </DynamicPluginProvider>
+        </ThemeProvider>
+      </DndProvider>
+    </Provider>
+  );
+};
 
 export default hot(App);