fix(@cubejs-client/playground): token refresh, Vue apiUrl (#2523)

cube-js · Apr 9, 2021 · c1085f2 · c1085f2
1 parent f23ffde
commit c1085f2
Show file tree

Hide file tree

Showing 8 changed files with 124 additions and 114 deletions.
diff --git a/packages/cubejs-playground/public/chart-renderers/vue/index.html b/packages/cubejs-playground/public/chart-renderers/vue/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=""><head><base href="/"/><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/chart-renderers/vue/favicon.ico"><title>hello-vue</title><link href="/chart-renderers/vue/js/app.9790d524.js" rel="preload" as="script"><link href="/chart-renderers/vue/js/chunk-vendors.2d3ef4da.js" rel="preload" as="script"></head><body><noscript><strong>We're sorry but hello-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/chart-renderers/vue/js/chunk-vendors.2d3ef4da.js"></script><script src="/chart-renderers/vue/js/app.9790d524.js"></script></body></html>
+<!DOCTYPE html><html lang=""><head><base href="/"/><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/chart-renderers/vue/favicon.ico"><title>hello-vue</title><link href="/chart-renderers/vue/js/app.1d158c3c.js" rel="preload" as="script"><link href="/chart-renderers/vue/js/chunk-vendors.4b99df5d.js" rel="preload" as="script"></head><body><noscript><strong>We're sorry but hello-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/chart-renderers/vue/js/chunk-vendors.4b99df5d.js"></script><script src="/chart-renderers/vue/js/app.1d158c3c.js"></script></body></html>
diff --git a/packages/cubejs-playground/public/chart-renderers/vue/js/app.1d158c3c.js b/packages/cubejs-playground/public/chart-renderers/vue/js/app.1d158c3c.js
diff --git a/packages/cubejs-playground/public/chart-renderers/vue/js/app.9790d524.js b/packages/cubejs-playground/public/chart-renderers/vue/js/app.9790d524.js
diff --git a/...enderers/vue/js/chunk-vendors.2d3ef4da.js → ...enderers/vue/js/chunk-vendors.4b99df5d.js b/...enderers/vue/js/chunk-vendors.2d3ef4da.js → ...enderers/vue/js/chunk-vendors.4b99df5d.js
diff --git a/packages/cubejs-playground/src/PlaygroundQueryBuilder.tsx b/packages/cubejs-playground/src/PlaygroundQueryBuilder.tsx
@@ -266,22 +266,22 @@ export default function PlaygroundQueryBuilder({
                     >
                       {token ? 'Edit' : 'Add'} Security Context
                     </Button>
-                    {!livePreviewContext?.livePreviewDisabled && (
+                    {livePreviewContext && !livePreviewContext.livePreviewDisabled && (
                       <Button
                         icon={<CloudOutlined />}
                         size="small"
                         type={
-                          livePreviewContext?.statusLivePreview.active
+                          livePreviewContext.statusLivePreview.active
                             ? 'primary'
                             : 'default'
                         }
                         onClick={() =>
-                          livePreviewContext?.statusLivePreview.active
-                            ? livePreviewContext?.stopLivePreview()
-                            : livePreviewContext?.startLivePreview()
+                          livePreviewContext.statusLivePreview.active
+                            ? livePreviewContext.stopLivePreview()
+                            : livePreviewContext.startLivePreview()
                         }
                       >
-                        {livePreviewContext?.statusLivePreview.active
+                        {livePreviewContext.statusLivePreview.active
                           ? 'Stop'
                           : 'Start'}{' '}
                         Live Preview

diff --git a/packages/cubejs-playground/src/pages/Explore/ExplorePage.tsx b/packages/cubejs-playground/src/pages/Explore/ExplorePage.tsx
@@ -9,10 +9,10 @@ import PlaygroundQueryBuilder from '../../PlaygroundQueryBuilder';
 import { LivePreviewContextProvider } from '../../components/LivePreviewContext/LivePreviewContextProvider';
 
 type TPlaygroundContext = {
-  apiUrl?: string;
+  apiUrl: string;
   cubejsToken: string;
-  basePath?: string;
-  livePreview?: boolean;
+  basePath: string;
+  livePreview: boolean;
 };
 
 type TLivePreviewContext = {
@@ -99,7 +99,7 @@ export default function ExplorePage() {
 
   return (
     <LivePreviewContextProvider
-      disabled={!playgroundContext?.livePreview}
+      disabled={playgroundContext?.livePreview === false}
       onChange={handleChangeLivePreview}
     >
       <CubeProvider cubejsApi={cubejsApi}>

diff --git a/packages/cubejs-playground/src/playground/PlaygroundWrapper.tsx b/packages/cubejs-playground/src/playground/PlaygroundWrapper.tsx
@@ -1,9 +1,7 @@
-import { ReactNode, useLayoutEffect } from 'react';
+import { ReactNode } from 'react';
 import { BrowserRouter } from 'react-router-dom';
-import { CubeProvider } from '@cubejs-client/react';
 import styled from 'styled-components';
 
-import { useCubejsApi } from '../hooks';
 import GlobalStyles from '../components/GlobalStyles';
 import {
   SecurityContextProvider,
@@ -13,48 +11,24 @@ import {
 const StyledWrapper = styled.div`
   background-color: #f3f3fc;
   min-height: 100vh;
-`
+`;
 
 type TPlaygroundWrapperProps = {
-  apiUrl?: string;
-  token?: string;
   tokenKey?: string;
-  children: ReactNode
-} & Pick<TSecurityContextContextProps, 'getToken'>
+  children: ReactNode;
+} & Pick<TSecurityContextContextProps, 'getToken'>;
 
 export default function PlaygroundWrapper({
-  apiUrl,
-  token,
   tokenKey,
   getToken,
   children,
 }: TPlaygroundWrapperProps) {
-  const cubejsApi = useCubejsApi(apiUrl, token);
-
-  useLayoutEffect(() => {
-    if (apiUrl && token) {
-      // @ts-ignore
-      window.__cubejsPlayground = {
-        // @ts-ignore
-        ...window.__cubejsPlayground,
-        apiUrl,
-        token,
-      };
-    }
-  }, [apiUrl, token]);
-
-  if (!cubejsApi) {
-    return null;
-  }
-
   return (
     <StyledWrapper>
       <BrowserRouter>
-        <CubeProvider cubejsApi={cubejsApi}>
-          <SecurityContextProvider tokenKey={tokenKey} getToken={getToken}>
-            {children}
-          </SecurityContextProvider>
-        </CubeProvider>
+        <SecurityContextProvider tokenKey={tokenKey} getToken={getToken}>
+          {children}
+        </SecurityContextProvider>
 
         <GlobalStyles />
       </BrowserRouter>

diff --git a/packages/cubejs-playground/src/playground/components/QueryBuilder.tsx b/packages/cubejs-playground/src/playground/components/QueryBuilder.tsx
@@ -1,8 +1,12 @@
+import { useLayoutEffect } from 'react';
+import { CubeProvider } from '@cubejs-client/react';
+
 import PlaygroundWrapper from '../PlaygroundWrapper';
 import PlaygroundQueryBuilder, {
   TPlaygroundQueryBuilderProps,
 } from '../../PlaygroundQueryBuilder';
 import { TSecurityContextContextProps } from '../../components/SecurityContext/SecurityContextProvider';
+import { useCubejsApi, useSecurityContext } from '../../hooks';
 
 type TQueryBuilderProps = {
   apiUrl: string;
@@ -20,15 +24,47 @@ type TQueryBuilderProps = {
 
 export function QueryBuilder({ apiUrl, token, ...props }: TQueryBuilderProps) {
   return (
-    <PlaygroundWrapper
-      apiUrl={apiUrl}
-      token={token}
-      tokenKey={props.tokenKey}
-      getToken={props.getToken}
-    >
+    <PlaygroundWrapper tokenKey={props.tokenKey} getToken={props.getToken}>
+      <QueryBuilderContainer apiUrl={apiUrl} token={token} {...props} />
+    </PlaygroundWrapper>
+  );
+}
+
+type TQueryBuilderContainerProps = Omit<
+  TQueryBuilderProps,
+  'tokenKey' | 'getToken'
+>;
+
+function QueryBuilderContainer({
+  apiUrl,
+  token,
+  ...props
+}: TQueryBuilderContainerProps) {
+  const { token: securityContextToken } = useSecurityContext();
+  const currentToken = securityContextToken || token;
+  const cubejsApi = useCubejsApi(apiUrl, currentToken);
+
+  useLayoutEffect(() => {
+    if (apiUrl && currentToken) {
+      // @ts-ignore
+      window.__cubejsPlayground = {
+        // @ts-ignore
+        ...window.__cubejsPlayground,
+        apiUrl,
+        token: currentToken,
+      };
+    }
+  }, [apiUrl, currentToken]);
+
+  if (!cubejsApi) {
+    return null;
+  }
+
+  return (
+    <CubeProvider cubejsApi={cubejsApi}>
       <PlaygroundQueryBuilder
         apiUrl={apiUrl}
-        cubejsToken={token}
+        cubejsToken={currentToken}
         initialVizState={{
           query: props.defaultQuery,
           ...props.initialVizState,
@@ -37,6 +73,6 @@ export function QueryBuilder({ apiUrl, token, ...props }: TQueryBuilderProps) {
         onVizStateChanged={props.onVizStateChanged}
         onSchemaChange={props.onSchemaChange}
       />
-    </PlaygroundWrapper>
+    </CubeProvider>
   );
 }