feat(playground): Static dashboard template

Author: paveltiunov

packages/cubejs-playground/src/ChartContainer.jsx

@@ -1,12 +1,12 @@
 /* global navigator */
 import React from 'react';
 import {
-  Card, Button, Menu, Dropdown, Icon, notification
+  Card, Button, Menu, Dropdown, Icon, notification, Modal
 } from 'antd';
 import { getParameters } from 'codesandbox-import-utils/lib/api/define';
 import { fetch } from 'whatwg-fetch';
 import { map } from 'ramda';
-import { Redirect } from 'react-router-dom';
+import { Redirect, withRouter } from 'react-router-dom';
 import { QueryRenderer } from '@cubejs-client/react';
 import sqlFormatter from "sql-formatter";
 import PropTypes from 'prop-types';
@@ -94,7 +94,8 @@ class ChartContainer extends React.Component {
       cubejsApi,
       chartLibrary,
       setChartLibrary,
-      chartLibraries
+      chartLibraries,
+      history
     } = this.props;
 
     if (redirectToDashboard) {
@@ -143,23 +144,42 @@ class ChartContainer extends React.Component {
       <form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank">
         <input type="hidden" name="parameters" value={parameters} />
         <Button.Group>
-          {/* TODO: implement add to static dashboard */}
-          {/*{dashboardSource && (
+          {dashboardSource && (
             <Button
               onClick={async () => {
-                playgroundAction('Add to Dashboard');
                 this.setState({ addingToDashboard: true });
-                await dashboardSource.addChart(codeExample);
-                this.setState({ redirectToDashboard: true, addingToDashboard: false });
+                const canAddChart = await dashboardSource.canAddChart();
+                if (typeof canAddChart === 'boolean' && canAddChart) {
+                  playgroundAction('Add to Dashboard');
+                  await dashboardSource.addChart(codeExample);
+                  this.setState({ redirectToDashboard: true, addingToDashboard: false });
+                } else if (!canAddChart) {
+                  this.setState({ addingToDashboard: false });
+                  Modal.error({
+                    title: 'Your dashboard app does not support adding of static charts',
+                    content: 'Please use static dashboard template'
+                  });
+                } else {
+                  this.setState({ addingToDashboard: false });
+                  Modal.error({
+                    title: 'There is an error loading your dashboard app',
+                    content: canAddChart,
+                    okText: 'Fix',
+                    okCancel: true,
+                    onOk() {
+                      history.push('/dashboard');
+                    }
+                  });
+                }
               }}
               icon="plus"
               size="small"
               loading={addingToDashboard}
               disabled={!!frameworkItem.docsLink}
             >
-              {addingToDashboard ? 'Installing modules. It may take a while. Please check console for progress...' : 'Add to Dashboard'}
+              {addingToDashboard ? 'Preparing dashboard app. It may take a while. Please check console for progress...' : 'Add to Dashboard'}
             </Button>
-          )}*/}
+          )}
           <Dropdown overlay={frameworkMenu}>
             <Button size="small">
               {frameworkItem && frameworkItem.title}
@@ -342,6 +362,7 @@ ChartContainer.propTypes = {
   hideActions: PropTypes.array,
   query: PropTypes.object,
   cubejsApi: PropTypes.object,
+  history: PropTypes.object.isRequired,
   chartLibrary: PropTypes.string.isRequired,
   setChartLibrary: PropTypes.func.isRequired,
   chartLibraries: PropTypes.array.isRequired
@@ -358,4 +379,4 @@ ChartContainer.defaultProps = {
   resultSet: null
 };
 
-export default ChartContainer;
+export default withRouter(ChartContainer);

packages/cubejs-playground/src/DashboardPage.js

@@ -26,7 +26,8 @@ class DashboardPage extends Component {
     super(props);
     this.state = {
       chartLibrary: chartLibraries[0].value,
-      framework: 'react'
+      framework: 'react',
+      templatePackageName: 'react-antd-dynamic'
     };
   }
 
@@ -36,13 +37,13 @@ class DashboardPage extends Component {
   }
 
   async loadDashboard(createApp) {
-    const { chartLibrary } = this.state;
+    const { chartLibrary, templatePackageName } = this.state;
     this.setState({
       appCode: null,
       loadError: null
     });
     try {
-      await this.dashboardSource.load(createApp, { chartLibrary });
+      await this.dashboardSource.load(createApp, { chartLibrary, templatePackageName });
       this.setState({
         dashboardStarting: false,
         appCode: !this.dashboardSource.loadError && this.dashboardSource.dashboardAppCode(),
@@ -75,9 +76,11 @@ class DashboardPage extends Component {
   }
 
   render() {
-    const { chartLibrary, framework } = this.state;
+    const { chartLibrary, framework, templatePackageName } = this.state;
     const currentLibraryItem = chartLibraries.find(m => m.value === chartLibrary);
     const frameworkItem = frameworks.find(m => m.id === framework);
+    const templatePackage = this.dashboardSource && this.dashboardSource.templatePackages
+      .find(m => m.name === templatePackageName);
 
     const chartLibrariesMenu = (
       <Menu
@@ -113,6 +116,23 @@ class DashboardPage extends Component {
       </Menu>
     );
 
+    const templatePackagesMenu = (
+      <Menu
+        onClick={(e) => {
+          playgroundAction('Set Template Package', { templatePackageName: e.key });
+          this.setState({ templatePackageName: e.key });
+        }}
+      >
+        {
+          (this.dashboardSource && this.dashboardSource.templatePackages || []).map(f => (
+            <Menu.Item key={f.name}>
+              {f.description}
+            </Menu.Item>
+          ))
+        }
+      </Menu>
+    );
+
     const {
       appCode, dashboardPort, loadError, dashboardRunning, dashboardStarting, dashboardAppPath
     } = this.state;
@@ -131,6 +151,17 @@ class DashboardPage extends Component {
                 </Button>
               </Dropdown>
             </Form.Item>
+            <Form.Item>
+              <Dropdown
+                overlay={templatePackagesMenu}
+                disabled={!!frameworkItem.docsLink}
+              >
+                <Button>
+                  {templatePackage && templatePackage.description}
+                  <Icon type="down" />
+                </Button>
+              </Dropdown>
+            </Form.Item>
             <Form.Item>
               <Dropdown
                 overlay={chartLibrariesMenu}

packages/cubejs-playground/src/DashboardSource.js

@@ -1,15 +1,15 @@
 /* globals window */
 import traverse from "@babel/traverse";
+import { uniq } from 'ramda';
 import fetch from './playgroundFetch';
-import AppSnippet from './source/AppSnippet';
 import TargetSource from './source/TargetSource';
 import ScaffoldingSources from "./codegen/ScaffoldingSources";
-import MergeScaffolding from "./source/MergeScaffolding";
-import IndexSnippet from "./source/IndexSnippet";
-import ExploreSnippet from "./source/ExploreSnippet";
-import ChartRendererSnippet from "./source/ChartRendererSnippet";
-import DashboardStoreSnippet from "./source/DashboardStoreSnippet";
 import SourceSnippet from "./source/SourceSnippet";
+import ReactAntdDynamicTemplate from "./source/ReactAntdDynamicTemplate";
+import ReactAntdStaticTemplate from "./source/ReactAntdStaticTemplate";
+import AppCredentialsTemplate from "./source/AppCredentialsTemplate";
+import ChartRendererTemplate from "./source/ChartRendererTemplate";
+import StaticChartTemplate from "./source/StaticChartTemplate";
 
 const indexCss = `
 @import '~antd/dist/antd.css';
@@ -21,7 +21,7 @@ body {
 const fetchWithRetry = (url, options, retries) => fetch(url, { ...options, retries });
 
 class DashboardSource {
-  async load(createApp, { chartLibrary }) {
+  async load(createApp, { chartLibrary, templatePackageName } = {}) {
     this.loadError = null;
     if (createApp) {
       await fetchWithRetry('/playground/ensure-dashboard-app', undefined, 10);
@@ -37,8 +37,10 @@ class DashboardSource {
       this.filesToPersist = [];
       this.parse(result.fileContents);
     }
-    if (!result.error && this.ensureDashboardIsInApp({ chartLibrary })) {
-      await this.persist();
+    if (chartLibrary && templatePackageName) {
+      if (!result.error && this.ensureDashboardIsInApp({ chartLibrary, templatePackageName })) {
+        await this.persist();
+      }
     }
     if (!result.error) {
       await this.ensureDependencies({});
@@ -132,7 +134,14 @@ class DashboardSource {
     this.appTargetSource = this.targetSourceByFile('/src/App.js');
   }
 
-  ensureDashboardIsInApp({ chartLibrary }) {
+  get templatePackages() {
+    return [
+      new ReactAntdDynamicTemplate(),
+      new ReactAntdStaticTemplate()
+    ];
+  }
+
+  ensureDashboardIsInApp({ chartLibrary, templatePackageName }) {
     let dashboardAdded = false;
     let headerElement = null;
     traverse(this.appTargetSource.ast, {
@@ -155,55 +164,73 @@ class DashboardSource {
     let merged = false;
     if (!dashboardAdded && headerElement) {
       this.appLayoutAdded = true;
-      const scaffoldingFileToSnippet = {
-        'react/App.js': new AppSnippet(this.playgroundContext),
-        'react/index.js': new IndexSnippet(),
-        'react/pages/ExplorePage.js': new ExploreSnippet(),
-        'react/components/ChartRenderer.js': new ChartRendererSnippet(chartLibrary)
-      };
 
-      const scaffoldingFileNames = Object.keys(ScaffoldingSources)
-        .filter(fileName => fileName.indexOf('react/') === 0);
+      const templatesToApply = [this.templatePackages.find(t => t.name === templatePackageName)].concat([
+        new AppCredentialsTemplate(this.playgroundContext),
+        new ChartRendererTemplate(chartLibrary)
+      ]);
+
+      this.applyTemplatePackages(templatesToApply);
 
-      scaffoldingFileNames.forEach(scaffoldingFile => {
-        this.mergeSnippetToFile(
-          scaffoldingFileToSnippet[scaffoldingFile] || new SourceSnippet(ScaffoldingSources[scaffoldingFile]),
-          MergeScaffolding.targetSourceName(scaffoldingFile)
-        );
-      });
       merged = true;
     }
     return merged;
   }
 
-  targetSourceByFile(fileName) {
+  applyTemplatePackages(templatesToApply) {
+    templatesToApply.forEach(template => {
+      template.initSources(ScaffoldingSources);
+
+      uniq(
+        Object.keys(template.templateSources).concat(Object.keys(template.fileToSnippet))
+      ).forEach(scaffoldingFile => {
+        this.mergeSnippetToFile(
+          template.fileToSnippet[scaffoldingFile] || new SourceSnippet(template.templateSources[scaffoldingFile]),
+          scaffoldingFile,
+          template.templateSources[scaffoldingFile]
+        );
+      });
+    });
+  }
+
+  targetSourceByFile(fileName, content) {
     let file = this.sourceFiles.find(f => f.fileName === fileName);
     if (!file) {
-      file = { fileName, content: ScaffoldingSources[MergeScaffolding.scaffoldingSourceName(fileName)] };
+      file = { fileName, content };
     }
     if (!this.fileToTargetSource[fileName]) {
       this.fileToTargetSource[fileName] = new TargetSource(file.fileName, file.content);
     }
     return this.fileToTargetSource[fileName];
   }
 
-  mergeSnippetToFile(snippet, fileName) {
-    const targetSource = this.targetSourceByFile(fileName);
+  mergeSnippetToFile(snippet, fileName, content) {
+    const targetSource = this.targetSourceByFile(fileName, content);
     snippet.mergeTo(targetSource);
   }
 
-  /*
+  async canAddChart() {
+    await this.load();
+    if (this.loadError) {
+      return this.loadError;
+    }
+    const dashboardPage = this.targetSourceByFile('/src/pages/DashboardPage.js', '');
+    const dashboardItemsArray = dashboardPage.definitions.find(
+      d => d.get('id').node.type === 'Identifier'
+        && d.get('id').node.name === 'DashboardItems'
+    );
+    return !!dashboardItemsArray;
+  }
+
   async addChart(chartCode) {
     await this.load(true);
     if (this.loadError) {
       return;
     }
-    this.ensureDashboardIsInApp();
-    const chartSnippet = new ChartSnippet(chartCode);
-    this.mergeSnippetToFile(chartSnippet, '/src/DashboardPage.js');
+    const staticChartTemplate = new StaticChartTemplate(chartCode);
+    this.applyTemplatePackages([staticChartTemplate]);
     await this.persist();
   }
-  */
 
   dashboardAppCode() {
     return this.appTargetSource.code();

packages/cubejs-playground/src/PlaygroundQueryBuilder.js

@@ -6,10 +6,10 @@ import {
 import { QueryBuilder } from '@cubejs-client/react';
 import { ChartRenderer } from './ChartRenderer';
 import { playgroundAction } from './events';
-import MemberGroup from './scaffolding/react/components/QueryBuilder/MemberGroup';
-import FilterGroup from './scaffolding/react/components/QueryBuilder/FilterGroup';
-import TimeGroup from './scaffolding/react/components/QueryBuilder/TimeGroup';
-import SelectChartType from './scaffolding/react/components/QueryBuilder/SelectChartType';
+import MemberGroup from './scaffolding/react-antd-dynamic/src/components/QueryBuilder/MemberGroup';
+import FilterGroup from './scaffolding/react-antd-dynamic/src/components/QueryBuilder/FilterGroup';
+import TimeGroup from './scaffolding/react-antd-dynamic/src/components/QueryBuilder/TimeGroup';
+import SelectChartType from './scaffolding/react-antd-dynamic/src/components/QueryBuilder/SelectChartType';
 
 const playgroundActionUpdateMethods = (updateMethods, memberName) => (
   Object.keys(updateMethods).map(method => ({

packages/cubejs-playground/src/scaffolding/chart-renderer/src/components/ChartRenderer.js

@@ -0,0 +1 @@
+const TypeToChartComponent = {};

packages/cubejs-playground/src/scaffolding/credentials/src/App.js

@@ -0,0 +1,3 @@
+const API_URL = undefined;
+
+const CUBEJS_TOKEN = undefined;