feat: Restructure Dashboard scaffolding to make it more user friendly…

… and reliable

packages/cubejs-playground/src/DashboardPage.js

@@ -227,11 +227,11 @@ class DashboardPage extends Component {
               Dev server is running at 
               <a href={devServerUrl} target="_blank" rel="noopener noreferrer">{devServerUrl}</a>
               .
-              Learn more how to customize and deploy it at
+              Learn more how to customize and deploy it at&nbsp;
               <a href="https://cube.dev/docs/dashboard-app">Cube.js&nbsp;docs</a>
               .&nbsp;
               <a onClick={() => window.location.reload()} style={{ cursor: 'pointer' }}>Refresh page</a>
-              if it is empty.
+              &nbsp;if it is empty.
             </span>
           )}
           type="info"

packages/cubejs-playground/src/DashboardSource.js

@@ -147,25 +147,22 @@ class DashboardSource {
     let merged = false;
     if (!dashboardAdded && headerElement) {
       this.appLayoutAdded = true;
-      const appSnippet = new AppSnippet();
-      appSnippet.mergeTo(this.appTargetSource);
-      this.mergeSnippetToFile(new IndexSnippet(this.playgroundContext), '/src/index.js');
-      this.mergeSnippetToFile(new ExploreSnippet(), '/src/ExplorePage.js');
-      this.mergeSnippetToFile(new ChartRendererSnippet(chartLibrary), '/src/ChartRenderer.js');
-      this.mergeSnippetToFile(new DashboardStoreSnippet(), '/src/DashboardStore.js');
-      this.mergeSnippetToFile(new SourceSnippet(ScaffoldingSources['react/DashboardPage.js']), '/src/DashboardPage.js');
-      merged = true;
-    }
-    if (!this.sourceFiles.find(f => f.fileName === '/src/QueryBuilder/ExploreQueryBuilder.js')) {
-      const queryBuilderFileNames = Object.keys(ScaffoldingSources)
-        .filter(fileName => fileName.indexOf('react/QueryBuilder/') === 0)
-        .map(MergeScaffolding.targetSourceName);
-      this.filesToPersist = this.filesToPersist.concat(queryBuilderFileNames.map(f => ({
-        fileName: f,
-        content: new MergeScaffolding(
-          f, this.sourceFiles.find(sourceFile => sourceFile.fileName === sourceFile)
-        ).formattedMergeResult()
-      })));
+      const scaffoldingFileToSnippet = {
+        'react/App.js': new AppSnippet(),
+        'react/index.js': new IndexSnippet(this.playgroundContext),
+        'react/pages/ExplorePage.js': new ExploreSnippet(),
+        'react/components/ChartRenderer.js': new ChartRendererSnippet(chartLibrary)
+      };
+
+      const scaffoldingFileNames = Object.keys(ScaffoldingSources)
+        .filter(fileName => fileName.indexOf('react/') === 0);
+
+      scaffoldingFileNames.forEach(scaffoldingFile => {
+        this.mergeSnippetToFile(
+          scaffoldingFileToSnippet[scaffoldingFile] || new SourceSnippet(ScaffoldingSources[scaffoldingFile]),
+          MergeScaffolding.targetSourceName(scaffoldingFile)
+        );
+      });
       merged = true;
     }
     return merged;

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/QueryBuilder/MemberGroup';
-import FilterGroup from './scaffolding/react/QueryBuilder/FilterGroup';
-import TimeGroup from './scaffolding/react/QueryBuilder/TimeGroup';
-import SelectChartType from './scaffolding/react/QueryBuilder/SelectChartType';
+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';
 
 const playgroundActionUpdateMethods = (updateMethods, memberName) => (
   Object.keys(updateMethods).map(method => ({

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

@@ -1,67 +1,28 @@
 import React from "react";
-import { Link } from "react-router-dom";
-import { withRouter } from "react-router";
 import { ApolloProvider } from '@apollo/react-hooks';
 import "antd/dist/antd.css";
 import "./index.css";
-import { Layout, Menu } from "antd";
-import { client } from "./DashboardStore";
+import { Layout } from "antd";
+import client from "./graphql/client";
+import Header from "./components/Header";
 
-const AppLayout = ({ location, children }) => (
+const AppLayout = ({ children }) => (
   <Layout
     style={{
       height: "100%"
     }}
   >
-    <Layout.Header
-      style={{
-        padding: "0 32px"
-      }}
-    >
-      <div
-        style={{
-          float: "left"
-        }}
-      >
-        <h2
-          style={{
-            color: "#fff",
-            margin: 0,
-            marginRight: "1em",
-            display: "inline",
-            width: 100,
-            lineHeight: "54px"
-          }}
-        >
-          My Dashboard
-        </h2>
-      </div>
-      <Menu
-        theme="dark"
-        mode="horizontal"
-        selectedKeys={[location.pathname]}
-        style={{
-          lineHeight: "64px"
-        }}
-      >
-        <Menu.Item key="/explore">
-          <Link to="/explore">Explore</Link>
-        </Menu.Item>
-        <Menu.Item key="/">
-          <Link to="/">Dashboard</Link>
-        </Menu.Item>
-      </Menu>
-    </Layout.Header>
+    <Header/>
     <Layout.Content>{children}</Layout.Content>
   </Layout>
 );
 
-const App = withRouter(({ location, children }) => (
+const App = ({ children }) => (
   <ApolloProvider client={client}>
-    <AppLayout location={location}>
+    <AppLayout>
       {children}
     </AppLayout>
   </ApolloProvider>
-));
+);
 
 export default App;

packages/cubejs-playground/src/scaffolding/react/ChartRenderer.js → packages/cubejs-playground/src/scaffolding/react/components/ChartRenderer.js

@@ -16,8 +16,8 @@ const ChartRenderer = ({ vizState, cubejsApi }) => vizState && (
     query={vizState.query}
     cubejsApi={cubejsApi}
     render={
-      TypeToChartComponent[vizState.chartType] &&
-      renderChart(TypeToChartComponent[vizState.chartType])
+      TypeToChartComponent[vizState.chartType]
+      && renderChart(TypeToChartComponent[vizState.chartType])
     }
   />
 );

packages/cubejs-playground/src/scaffolding/react/components/Header.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { withRouter } from "react-router";
+import { Layout, Menu } from "antd";
+
+const Header = ({ location }) => (
+  <Layout.Header
+    style={{
+      padding: "0 32px"
+    }}
+  >
+    <div
+      style={{
+        float: "left"
+      }}
+    >
+      <h2
+        style={{
+          color: "#fff",
+          margin: 0,
+          marginRight: "1em",
+          display: "inline",
+          width: 100,
+          lineHeight: "54px"
+        }}
+      >
+        My Dashboard
+      </h2>
+    </div>
+    <Menu
+      theme="dark"
+      mode="horizontal"
+      selectedKeys={[location.pathname]}
+      style={{
+        lineHeight: "64px"
+      }}
+    >
+      <Menu.Item key="/explore">
+        <Link to="/explore">Explore</Link>
+      </Menu.Item>
+      <Menu.Item key="/">
+        <Link to="/">Dashboard</Link>
+      </Menu.Item>
+    </Menu>
+  </Layout.Header>
+);
+
+export default withRouter(Header);