feat(playground): BI connection guides, frontend integration snippets (#6341)

Author: vasilev-alex

packages/cubejs-backend-shared/src/env.ts

@@ -393,7 +393,7 @@ const variables: Record<string, (...args: any) => any> = {
   }) => (
     process.env[keyByDataSource('CUBEJS_DB_PASS', dataSource)]
   ),
-  
+
   /**
    * Database name.
    */
@@ -416,7 +416,7 @@ const variables: Record<string, (...args: any) => any> = {
     }
     return val;
   },
-  
+
   /**
    * Database name.
    * @deprecated
@@ -447,7 +447,7 @@ const variables: Record<string, (...args: any) => any> = {
     }
     return val;
   },
-  
+
   /**
    * Database name.
    * @deprecated
@@ -625,7 +625,7 @@ const variables: Record<string, (...args: any) => any> = {
   }) => (
     process.env[keyByDataSource('CUBEJS_DB_EXPORT_BUCKET_CSV_ESCAPE_SYMBOL', dataSource)]
   ),
-  
+
   /**
    * Export bucket storage type.
    */
@@ -1514,6 +1514,14 @@ const variables: Record<string, (...args: any) => any> = {
       return port;
     }
 
+    const isDevMode = get('CUBEJS_DEV_MODE')
+      .default('false')
+      .asBoolStrict();
+
+    if (isDevMode) {
+      return 5555;
+    }
+
     return undefined;
   },
   sqlNonce: () => {

packages/cubejs-playground/index.html

@@ -17,6 +17,10 @@
       #playground-root {
         height: 100%;
       }
+
+      #playground-root .ant-menu-item:not(.ant-menu-item-selected) a {
+          color: #a9a9b6;
+      }
     </style>
     <title>Cube Playground</title>
   </head>

packages/cubejs-playground/public/cube-logo.svg

@@ -19,14 +19,6 @@ import { AppContextConsumer, PlaygroundContext } from './components/AppContext';
 import { useAppContext } from './hooks';
 import { LivePreviewContextProvider } from './components/LivePreviewContext/LivePreviewContextProvider';
 
-const selectedTab = (pathname) => {
-  if (pathname === '/template-gallery') {
-    return ['/dashboard'];
-  } else {
-    return [pathname];
-  }
-};
-
 const StyledLayoutContent = styled(Layout.Content)`
   height: 100%;
 `;
@@ -114,7 +106,7 @@ class App extends Component<RouteComponentProps, AppState> {
         <Layout>
           <GlobalStyles />
 
-          <Header selectedKeys={selectedTab(location.pathname)} />
+          <Header selectedKeys={[location.pathname]} />
 
           <StyledLayoutContent>
             {fatalError ? (

packages/cubejs-playground/public/cubejs-playground-logo.svg

@@ -2,6 +2,7 @@ import { CopyOutlined } from '@ant-design/icons';
 import { Button, Form, Input } from 'antd';
 import { InputProps } from 'antd/lib/input/Input';
 import styled from 'styled-components';
+import { copyToClipboard } from '../utils';
 
 const IconButton: typeof Button = styled(Button)`
   border: none;
@@ -10,7 +11,7 @@ const IconButton: typeof Button = styled(Button)`
 
 type CopiableInputProps = {
   label?: string;
-  onCopyClick: (value: string) => void;
+  onCopyClick?: (value: string) => void;
 } & InputProps;
 
 export function CopiableInput({
@@ -23,7 +24,15 @@ export function CopiableInput({
     <IconButton
       data-testid={`localhost-tipbox-${label?.toLowerCase()}-copy-btn`}
       icon={<CopyOutlined />}
-      onClick={() => value && onCopyClick(value.toString())}
+      onClick={async () => {
+        if (value) {
+          if (onCopyClick != null) {
+            onCopyClick(value.toString());
+          } else {
+            await copyToClipboard(value.toString());
+          }
+        }
+      }}
     />
   );
 

packages/cubejs-playground/src/App.tsx

@@ -1,4 +1,4 @@
-import Icon, {
+import {
   FileFilled,
   MenuOutlined,
   SlackOutlined,
@@ -21,7 +21,11 @@ const StyledHeader = styled(Layout.Header)`
   }
 `;
 
-export default function Header({ selectedKeys }) {
+type Props = {
+  selectedKeys: string[];
+};
+
+export default function Header({ selectedKeys }: Props) {
   const isDesktopOrLaptop = useMediaQuery({
     query: '(min-device-width: 992px)',
   });
@@ -34,7 +38,7 @@ export default function Header({ selectedKeys }) {
     <StyledHeader>
       <div style={{ float: 'left' }}>
         <img
-          src="./cubejs-playground-logo.svg"
+          src="./cube-logo.svg"
           style={{ height: 28, marginRight: 28 }}
           alt=""
         />
@@ -43,15 +47,19 @@ export default function Header({ selectedKeys }) {
       {isDesktopOrLaptop && (
         <StyledMenu theme="light" mode="horizontal" selectedKeys={selectedKeys}>
           <StyledMenuItem key="/build">
-            <Link to="/build">Build</Link>
+            <Link to="/build">Playground</Link>
           </StyledMenuItem>
 
-          <StyledMenuItem key="/dashboard">
-            <Link to="/dashboard">Dashboard App</Link>
+          <StyledMenuItem key="/schema">
+            <Link to="/schema">Data Model</Link>
           </StyledMenuItem>
 
-          <StyledMenuItem key="/schema">
-            <Link to="/schema">Schema</Link>
+          <StyledMenuItem key="/frontend-integrations">
+            <Link to="/frontend-integrations">Frontend Integrations</Link>
+          </StyledMenuItem>
+
+          <StyledMenuItem key="/connect-to-bi">
+            <Link to="/connect-to-bi">Connect to BI</Link>
           </StyledMenuItem>
 
           <StyledMenuButton
@@ -82,13 +90,11 @@ export default function Header({ selectedKeys }) {
             overlay={
               <Menu>
                 <Menu.Item key="/build">
-                  <Link to="/build">Build</Link>
-                </Menu.Item>
-                <Menu.Item key="/dashboard">
-                  <Link to="/dashboard">Dashboard App</Link>
+                  <Link to="/build">Playground</Link>
                 </Menu.Item>
+
                 <Menu.Item key="/schema">
-                  <Link to="/schema">Schema</Link>
+                  <Link to="/schema">Data Model</Link>
                 </Menu.Item>
               </Menu>
             }