Playground look-n-feel (#1200)

* Playground: first iteration over new design * Playground: query builder redesign * Playground: ChartRenderer redesign * Playground: header redesign and minor style fixes * Playground: style fix for disabled buttons * Playground: make ChartRenderer more responsive * Playground: design minor fixes * Playground: template gallery redesign * Playground: template gallery minor fixes, styles for disabled buttons * Playground: Schema page redesign * Playground: style alert types * Playground: FilterGroup: fix styles * Playground: QueryBuilder settings redesign * Playground: improve drag&drop in pivot settings * Playground: minor refactoring to remove LESS files * Playground: update styled-components
cube-js · Oct 14, 2020 · 835e1ef · 835e1ef
1 parent 0647d1f
commit 835e1ef
Show file tree

Hide file tree

Showing 48 changed files with 1,418 additions and 754 deletions.
diff --git a/packages/cubejs-playground/config-overrides.js b/packages/cubejs-playground/config-overrides.js
@@ -1,6 +1,15 @@
 const TerserPlugin = require('terser-webpack-plugin');
 const webpack = require('webpack');
 const { addLessLoader } = require('customize-cra');
+const VARIABLES = require('./src/raw-variables');
+
+const LESS_VARIABLES = {};
+
+// Create LESS variable map.
+Object.keys(VARIABLES)
+  .forEach((key) => {
+    LESS_VARIABLES[`@${key}`] = VARIABLES[key];
+  });
 
 module.exports = function override(config, env) {
   config.optimization = {
@@ -42,7 +51,8 @@ module.exports = function override(config, env) {
     config.devtool = false;
   }
   config = addLessLoader({
-    javascriptEnabled: true
+    javascriptEnabled: true,
+    modifyVars: LESS_VARIABLES,
   })(config);
   return config;
 };
diff --git a/packages/cubejs-playground/package.json b/packages/cubejs-playground/package.json
@@ -19,7 +19,7 @@
     "@cubejs-client/core": "^0.21.0",
     "@cubejs-client/react": "^0.21.0",
     "antd": "^4.2.0",
-    "bizcharts": "^3.4.3",
+    "bizcharts": "3.5.9",
     "chart.js": "^2.7.3",
     "codesandbox-import-utils": "^2.1.1",
     "component-cookie": "^1.1.4",
@@ -45,7 +45,7 @@
     "react-source-render": "4.0.0-1",
     "recharts": "^1.7.1",
     "sql-formatter": "^2.3.2",
-    "styled-components": "^4.4.1",
+    "styled-components": "5.2.0",
     "uuid": "^3.3.3",
     "whatwg-fetch": "^3.0.0"
   },

diff --git a/packages/cubejs-playground/public/cubejs-playground-logo.svg b/packages/cubejs-playground/public/cubejs-playground-logo.svg
diff --git a/packages/cubejs-playground/public/docs-icon.svg b/packages/cubejs-playground/public/docs-icon.svg
diff --git a/packages/cubejs-playground/public/slack-icon.svg b/packages/cubejs-playground/public/slack-icon.svg
diff --git a/packages/cubejs-playground/src/App.js b/packages/cubejs-playground/src/App.js
@@ -9,6 +9,7 @@ import { fetch } from 'whatwg-fetch';
 import { withRouter } from 'react-router';
 import Header from './components/Header';
 import { event, setAnonymousId } from './events';
+import GlobalStyles from './components/GlobalStyles';
 
 const selectedTab = (pathname) => {
   if (pathname === '/template-gallery') {
@@ -73,6 +74,7 @@ class App extends Component {
     const { location, children } = this.props;
     return (
       <Layout style={{ height: '100%' }}>
+        <GlobalStyles/>
         <Header selectedKeys={selectedTab(location.pathname)} />
         <Layout.Content style={{ height: '100%' }}>
           {fatalError ? (

diff --git a/packages/cubejs-playground/src/ChartContainer.jsx b/packages/cubejs-playground/src/ChartContainer.jsx
@@ -10,7 +10,8 @@ import {
   SyncOutlined,
   ThunderboltOutlined,
 } from '@ant-design/icons';
-import { Card, Button, Menu, Dropdown, notification, Modal } from 'antd';
+import { Dropdown, Menu, Modal, notification } from 'antd';
+import { Button, Card, SectionRow } from './components';
 import { getParameters } from 'codesandbox-import-utils/lib/api/define';
 import { fetch } from 'whatwg-fetch';
 import { map } from 'ramda';
@@ -64,9 +65,9 @@ class ChartContainer extends React.Component {
           Accept: 'application/json',
         },
         body: JSON.stringify(
-          this.codeSandboxDefinition(codeSandboxSource, dependencies)
+          this.codeSandboxDefinition(codeSandboxSource, dependencies),
         ),
-      }
+      },
     );
     const codeSandboxJson = await codeSandboxRes.json();
     this.setState({ sandboxId: codeSandboxJson.sandbox_id });
@@ -77,10 +78,10 @@ class ChartContainer extends React.Component {
       files: {
         ...(typeof codeSandboxSource === 'string'
           ? {
-              'index.js': {
-                content: codeSandboxSource,
-              },
-            }
+            'index.js': {
+              content: codeSandboxSource,
+            },
+          }
           : codeSandboxSource),
         'package.json': {
           content: {
@@ -125,7 +126,7 @@ class ChartContainer extends React.Component {
     }
 
     const parameters = getParameters(
-      this.codeSandboxDefinition(codeSandboxSource, dependencies)
+      this.codeSandboxDefinition(codeSandboxSource, dependencies),
     );
 
     const chartLibrariesMenu = (
@@ -155,7 +156,7 @@ class ChartContainer extends React.Component {
     );
 
     const currentLibraryItem = chartLibraries.find(
-      (m) => m.value === chartLibrary
+      (m) => m.value === chartLibrary,
     );
     const frameworkItem = frameworks.find((m) => m.id === framework);
     const extra = (
@@ -165,7 +166,100 @@ class ChartContainer extends React.Component {
         target="_blank"
       >
         <input type="hidden" name="parameters" value={parameters} />
-        <Button.Group>
+        <SectionRow>
+          <Button.Group>
+            <Dropdown overlay={frameworkMenu}>
+              <Button size="small">
+                {frameworkItem && frameworkItem.title}
+                <DownOutlined />
+              </Button>
+            </Dropdown>
+            <Dropdown
+              overlay={chartLibrariesMenu}
+              disabled={!!frameworkItem.docsLink}
+            >
+              <Button size="small">
+                {currentLibraryItem && currentLibraryItem.title}
+                <DownOutlined />
+              </Button>
+            </Dropdown>
+          </Button.Group>
+          <Button.Group>
+            <Button
+              onClick={() => {
+                playgroundAction('Show Chart');
+                this.setState({
+                  showCode: null,
+                });
+              }}
+              size="small"
+              type={!showCode ? 'primary' : 'default'}
+              disabled={!!frameworkItem.docsLink}
+            >
+              Chart
+            </Button>
+            <Button
+              onClick={() => {
+                playgroundAction('Show Query');
+                this.setState({
+                  showCode: 'query',
+                });
+              }}
+              icon={<ThunderboltOutlined />}
+              size="small"
+              type={showCode === 'query' ? 'primary' : 'default'}
+              disabled={!!frameworkItem.docsLink}
+            >
+              JSON Query
+            </Button>
+            <Button
+              onClick={() => {
+                playgroundAction('Show Code');
+                this.setState({ showCode: 'code' });
+              }}
+              icon={<CodeOutlined />}
+              size="small"
+              type={showCode === 'code' ? 'primary' : 'default'}
+              disabled={!!frameworkItem.docsLink}
+            >
+              Code
+            </Button>
+            <Button
+              onClick={() => {
+                playgroundAction('Show SQL');
+                this.setState({ showCode: 'sql' });
+              }}
+              icon={<QuestionCircleOutlined />}
+              size="small"
+              type={showCode === 'sql' ? 'primary' : 'default'}
+              disabled={!!frameworkItem.docsLink}
+            >
+              SQL
+            </Button>
+            <Button
+              onClick={() => {
+                playgroundAction('Show Cache');
+                this.setState({
+                  showCode: 'cache',
+                });
+              }}
+              icon={<SyncOutlined />}
+              size="small"
+              type={showCode === 'cache' ? 'primary' : 'default'}
+              disabled={!!frameworkItem.docsLink}
+            >
+              Cache
+            </Button>
+          </Button.Group>
+          <Button
+            icon={<CodeSandboxOutlined />}
+            size="small"
+            onClick={() => playgroundAction('Open Code Sandbox')}
+            htmlType="submit"
+            disabled={!!frameworkItem.docsLink}
+          >
+            Edit
+          </Button>
           {dashboardSource && (
             <Button
               onClick={async () => {
@@ -202,89 +296,14 @@ class ChartContainer extends React.Component {
               size="small"
               loading={addingToDashboard}
               disabled={!!frameworkItem.docsLink}
+              type="primary"
             >
               {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}
-              <DownOutlined />
-            </Button>
-          </Dropdown>
-          <Dropdown
-            overlay={chartLibrariesMenu}
-            disabled={!!frameworkItem.docsLink}
-          >
-            <Button size="small">
-              {currentLibraryItem && currentLibraryItem.title}
-              <DownOutlined />
-            </Button>
-          </Dropdown>
-          <Button
-            onClick={() => {
-              playgroundAction('Show Query');
-              this.setState({
-                showCode: showCode === 'query' ? null : 'query',
-              });
-            }}
-            icon={<ThunderboltOutlined />}
-            size="small"
-            type={showCode === 'query' ? 'primary' : 'default'}
-            disabled={!!frameworkItem.docsLink}
-          >
-            JSON Query
-          </Button>
-          <Button
-            onClick={() => {
-              playgroundAction('Show Code');
-              this.setState({ showCode: showCode === 'code' ? null : 'code' });
-            }}
-            icon={<CodeOutlined />}
-            size="small"
-            type={showCode === 'code' ? 'primary' : 'default'}
-            disabled={!!frameworkItem.docsLink}
-          >
-            Code
-          </Button>
-          <Button
-            onClick={() => {
-              playgroundAction('Show SQL');
-              this.setState({ showCode: showCode === 'sql' ? null : 'sql' });
-            }}
-            icon={<QuestionCircleOutlined />}
-            size="small"
-            type={showCode === 'sql' ? 'primary' : 'default'}
-            disabled={!!frameworkItem.docsLink}
-          >
-            SQL
-          </Button>
-          <Button
-            onClick={() => {
-              playgroundAction('Show Cache');
-              this.setState({
-                showCode: showCode === 'cache' ? null : 'cache',
-              });
-            }}
-            icon={<SyncOutlined />}
-            size="small"
-            type={showCode === 'cache' ? 'primary' : 'default'}
-            disabled={!!frameworkItem.docsLink}
-          >
-            Cache
-          </Button>
-          <Button
-            icon={<CodeSandboxOutlined />}
-            size="small"
-            onClick={() => playgroundAction('Open Code Sandbox')}
-            htmlType="submit"
-            disabled={!!frameworkItem.docsLink}
-          >
-            Edit
-          </Button>
-        </Button.Group>
+        </SectionRow>
       </form>
     );
 
@@ -326,7 +345,7 @@ class ChartContainer extends React.Component {
             render={({ sqlQuery }) => {
               const [query] = Array.isArray(sqlQuery) ? sqlQuery : [sqlQuery];
               // in the case of a compareDateRange query the SQL will be the same
-              return <PrismCode code={query && sqlFormatter.format(query.sql())} />
+              return <PrismCode code={query && sqlFormatter.format(query.sql())} />;
             }}
           />
         );
@@ -346,7 +365,7 @@ class ChartContainer extends React.Component {
       }
       try {
         await navigator.clipboard.writeText(
-          showCode === 'query' ? queryText : codeExample
+          showCode === 'query' ? queryText : codeExample,
         );
         notification.success({
           message: 'Copied to clipboard',
@@ -361,29 +380,37 @@ class ChartContainer extends React.Component {
 
     if (showCode === 'code') {
       title = (
-        <Button
-          icon={<CopyOutlined />}
-          onClick={() => {
-            copyCodeToClipboard();
-            playgroundAction('Copy Code to Clipboard');
-          }}
-          type="primary"
-        >
-          Copy Code to Clipboard
-        </Button>
+        <SectionRow>
+          <div>Query</div>
+          <Button
+            icon={<CopyOutlined />}
+            size="small"
+            onClick={() => {
+              copyCodeToClipboard();
+              playgroundAction('Copy Code to Clipboard');
+            }}
+            type="primary"
+          >
+            Copy to Clipboard
+          </Button>
+        </SectionRow>
       );
     } else if (showCode === 'query') {
       title = (
-        <Button
-          icon={<CopyOutlined />}
-          onClick={() => {
-            copyCodeToClipboard();
-            playgroundAction('Copy Query to Clipboard');
-          }}
-          type="primary"
-        >
-          Copy Query to Clipboard
-        </Button>
+        <SectionRow>
+          <div>Query</div>
+          <Button
+            icon={<CopyOutlined />}
+            size="small"
+            onClick={() => {
+              copyCodeToClipboard();
+              playgroundAction('Copy Query to Clipboard');
+            }}
+            type="primary"
+          >
+            Copy to Clipboard
+          </Button>
+        </SectionRow>
       );
     } else if (showCode === 'sql') {
       title = 'SQL';