feat(cubejs-playground): update query builder (#9118)

Author: tenphi

packages/cubejs-playground/package.json

@@ -33,6 +33,7 @@
     "@apollo/client": "^3.11.4",
     "@graphiql/toolkit": "^0.4.3",
     "anser": "^2.1.1",
+    "best-effort-json-parser": "^1.1.2",
     "camel-case": "^4.1.2",
     "codesandbox-import-utils": "^2.1.1",
     "cron-validator": "^1.2.1",
@@ -66,7 +67,7 @@
   "devDependencies": {
     "@ant-design/compatible": "^1.0.1",
     "@ant-design/icons": "^5.3.5",
-    "@cube-dev/ui-kit": "0.38.0",
+    "@cube-dev/ui-kit": "0.52.3",
     "@cubejs-client/core": "1.1.12",
     "@cubejs-client/react": "1.1.12",
     "@types/flexsearch": "^0.7.3",
@@ -97,7 +98,7 @@
   },
   "peerDependencies": {
     "@ant-design/icons": ">=4.7.0",
-    "@cube-dev/ui-kit": ">=0.37.2",
+    "@cube-dev/ui-kit": ">=0.52.3",
     "@cubejs-client/core": ">=0.30.0",
     "@cubejs-client/react": ">=0.30.0",
     "antd": ">=4.16.13",

packages/cubejs-playground/src/QueryBuilderV2/QueryBuilder.tsx

@@ -1,15 +1,22 @@
-import { useEffect, useMemo } from 'react';
-import cube, { Query } from '@cubejs-client/core';
 import { Alert, Block, Card, PrismCode, Title } from '@cube-dev/ui-kit';
+import cube, { Query } from '@cubejs-client/core';
+import { useEffect, useMemo } from 'react';
 
-import { useLocalStorage } from './hooks';
-import { QueryBuilderProps } from './types';
 import { QueryBuilderContext } from './context';
+import { useLocalStorage } from './hooks';
 import { useQueryBuilder } from './hooks/query-builder';
 import { QueryBuilderInternals } from './QueryBuilderInternals';
+import { QueryBuilderProps } from './types';
 import { useCommitPress } from './utils/use-commit-press';
 
-export function QueryBuilder(props: Omit<QueryBuilderProps, 'apiUrl'> & { apiUrl: string | null }) {
+export function QueryBuilder(
+  props: Omit<QueryBuilderProps, 'apiUrl'> & {
+    displayPrivateItems?: boolean;
+    apiUrl: string | null;
+    disableLimitEnforcing?: boolean;
+    children?: React.ReactNode;
+  }
+) {
   const {
     apiUrl,
     apiToken,
@@ -22,9 +29,12 @@ export function QueryBuilder(props: Omit<QueryBuilderProps, 'apiUrl'> & { apiUrl
     tracking,
     isApiBlocked,
     apiVersion,
+    memberViewType,
     VizardComponent,
     RequestStatusComponent,
     openSqlRunner,
+    displayPrivateItems,
+    disableSidebarResizing,
   } = props;
 
   const cubeApi = useMemo(() => {
@@ -45,10 +55,6 @@ export function QueryBuilder(props: Omit<QueryBuilderProps, 'apiUrl'> & { apiUrl
       queryCopy.timezone = storedTimezones[0];
     }
 
-    if (typeof queryCopy.limit !== 'number' || queryCopy.limit < 1 || queryCopy.limit > 50_000) {
-      queryCopy.limit = 5_000;
-    }
-
     return queryCopy;
   }
 
@@ -72,8 +78,10 @@ export function QueryBuilder(props: Omit<QueryBuilderProps, 'apiUrl'> & { apiUrl
     defaultPivotConfig,
     schemaVersion,
     onQueryChange,
+    memberViewType,
     tracking,
     queryValidator,
+    displayPrivateItems,
   });
 
   useEffect(() => {
@@ -86,7 +94,11 @@ export function QueryBuilder(props: Omit<QueryBuilderProps, 'apiUrl'> & { apiUrl
     return runQuery();
   }, true);
 
-  return apiToken && cubeApi && apiUrl ? (
+  if (!apiToken || !cubeApi || !apiUrl) {
+    return null;
+  }
+
+  return (
     <QueryBuilderContext.Provider
       value={{
         runQuery,
@@ -108,6 +120,7 @@ export function QueryBuilder(props: Omit<QueryBuilderProps, 'apiUrl'> & { apiUrl
         VizardComponent,
         RequestStatusComponent,
         openSqlRunner,
+        disableSidebarResizing,
         ...otherProps,
       }}
     >
@@ -122,9 +135,11 @@ export function QueryBuilder(props: Omit<QueryBuilderProps, 'apiUrl'> & { apiUrl
             </Alert>
           )}
         </Block>
+      ) : props.children ? (
+        props.children
       ) : (
         <QueryBuilderInternals />
       )}
     </QueryBuilderContext.Provider>
-  ) : null;
+  );
 }

packages/cubejs-playground/src/QueryBuilderV2/QueryBuilderChart.tsx

@@ -23,7 +23,7 @@ import { ChartType } from '@cubejs-client/core';
 import { useLocalStorage } from './hooks';
 import { useQueryBuilderContext } from './context';
 import { PivotAxes, PivotOptions } from './Pivot';
-import { ArrowIcon } from './icons/ArrowIcon';
+import { ChevronIcon } from './icons/ChevronIcon';
 import { AccordionCard } from './components/AccordionCard';
 import { OutdatedLabel } from './components/OutdatedLabel';
 import { QueryBuilderChartResults } from './QueryBuilderChartResults';
@@ -117,7 +117,7 @@ export function QueryBuilderChart(props: QueryBuilderChartProps) {
   const pivotConfigurator = useMemo(() => {
     return pivotConfig ? (
       <DialogTrigger type="popover">
-        <Button size="small" rightIcon={<ArrowIcon direction="bottom" />}>
+        <Button size="small" rightIcon={<ChevronIcon direction="bottom" />}>
           Pivot
         </Button>
         <Dialog border overflow="hidden" width="40x max-content 80x">

packages/cubejs-playground/src/QueryBuilderV2/QueryBuilderChartResults.tsx

@@ -15,7 +15,7 @@ interface QueryBuilderChartResultsProps {
   containerRef?: RefObject<HTMLDivElement>;
 }
 
-const MAX_HEIGHT = 400;
+const MAX_HEIGHT = 350;
 const MAX_SERIES_LIMIT = 25;
 
 const ChartContainer = tasty({
@@ -57,8 +57,8 @@ export function QueryBuilderChartResults({
         <ChartContainer
           ref={containerRef}
           style={{
-            maxHeight: `${MAX_HEIGHT}px`,
-            height: `${MAX_HEIGHT}px`,
+            maxHeight: MAX_HEIGHT,
+            height: MAX_HEIGHT,
             overflow,
           }}
         >
@@ -76,9 +76,9 @@ export function QueryBuilderChartResults({
     return (
       <Grid height={MAX_HEIGHT} columns="auto" placeContent="center" placeItems="center" gap="2x">
         <Title level={3} gridArea={false}>
-          No data available
+          No results available
         </Title>
-        <Paragraph>Query metrics and dimensions with results to see the chart.</Paragraph>
+        <Paragraph>Compose and run a query to see the results.</Paragraph>
       </Grid>
     );
   }