fix(playground): Multiple conflicting packages applied at the same time: check for creation state before applying

Author: paveltiunov

packages/cubejs-playground/src/DashboardPage.js

@@ -37,14 +37,13 @@ class DashboardPage extends Component {
     await this.loadDashboard();
   }
 
-  async loadDashboard(createApp) {
-    const { chartLibrary, templatePackageName } = this.state;
+  async loadDashboard() {
     this.setState({
       appCode: null,
       loadError: null
     });
     try {
-      await this.dashboardSource.load(createApp, { chartLibrary, templatePackageName });
+      await this.dashboardSource.load();
       this.setState({
         dashboardStarting: false,
         appCode: !this.dashboardSource.loadError && this.dashboardSource.dashboardCreated,
@@ -56,9 +55,6 @@ class DashboardPage extends Component {
         dashboardPort: dashboardStatus.dashboardPort,
         dashboardAppPath: dashboardStatus.dashboardAppPath
       });
-      if (createApp) {
-        await this.startDashboardApp();
-      }
     } catch (e) {
       this.setState({
         dashboardStarting: false,
@@ -80,9 +76,28 @@ class DashboardPage extends Component {
     const {
       appCode, dashboardPort, loadError, dashboardRunning, dashboardStarting, dashboardAppPath
     } = this.state;
-    if (loadError) {
+    if (loadError && typeof loadError === 'string' && loadError.indexOf('Dashboard app not found') !== -1) {
       return <Redirect to="/template-gallery" />;
     }
+    if (loadError) {
+      return (
+        <Frame>
+          <h2>
+            {loadError}
+          </h2>
+          <p style={{ marginTop: 25 }}>
+            <Link to="/template-gallery">
+              <Button
+                type="primary"
+              >
+                Create dashboard app in your project directory
+              </Button>
+            </Link>
+          </p>
+          <Hint />
+        </Frame>
+      );
+    }
     if (!appCode) {
       return (
         <Frame>

packages/cubejs-playground/src/DashboardSource.js

@@ -4,14 +4,11 @@ import fetch from './playgroundFetch';
 const fetchWithRetry = (url, options, retries) => fetch(url, { ...options, retries });
 
 class DashboardSource {
-  async load(createApp, templatePackages) {
+  async load(instant) {
     this.loadError = null;
-    if (createApp) {
-      await this.applyTemplatePackages(
-        templatePackages
-      );
-    }
-    const res = await fetchWithRetry('/playground/dashboard-app-create-status', undefined, 10);
+    const res = await fetchWithRetry(
+      `/playground/dashboard-app-create-status${instant ? '?instant=true' : ''}`, undefined, 10
+    );
     const result = await res.json();
     if (result.error) {
       this.loadError = result.error;

packages/cubejs-playground/src/TemplateGallery/TemplateGalleryPage.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 import { Switch, Menu, Dropdown, Icon, Form, Row, Col, Card, Modal, Typography } from 'antd';
-import { withRouter } from "react-router-dom";
+import { withRouter, Redirect } from "react-router-dom";
 import DashboardSource from "../DashboardSource";
 import fetch from '../playgroundFetch';
 import { frameworks } from "../ChartContainer";
@@ -120,10 +120,23 @@ class TemplateGalleryPage extends Component {
 
   async componentDidMount() {
     this.dashboardSource = new DashboardSource();
+    await this.dashboardSource.load(true);
+    this.setState({
+      loadError: this.dashboardSource.loadError
+    });
   }
 
   render() {
-    const { chartLibrary, framework, templatePackageName, createOwnModalVisible, enableWebSocketTransport } = this.state;
+    const {
+      loadError
+    } = this.state;
+    if (loadError && loadError.indexOf('Dashboard app not found') === -1) {
+      return <Redirect to="/dashboard" />;
+    }
+
+    const {
+      chartLibrary, framework, templatePackageName, createOwnModalVisible, enableWebSocketTransport
+    } = this.state;
     const { history } = this.props;
     const currentLibraryItem = chartLibraries.find(m => m.value === chartLibrary);
     const frameworkItem = frameworks.find(m => m.id === framework);

packages/cubejs-server-core/core/DevServer.js

@@ -95,6 +95,10 @@ class DevServer {
       }
 
       if (this.applyTemplatePackagesPromise) {
+        if (req.query.instant) {
+          res.status(404).json({ error: 'Dashboard app creating' });
+          return;
+        }
         await this.applyTemplatePackagesPromise;
       }