fix(cubejs-playground): update query builder (#9175)

Author: tenphi

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

@@ -27,6 +27,7 @@ import { TCubeMemberType } from '@cubejs-client/core';
 
 import { useStoredTimezones, useEvent } from './hooks';
 import { MemberLabel } from './components/MemberLabel';
+import { InfoIconButton } from './components/InfoIconButton';
 import { useQueryBuilderContext } from './context';
 import { ORDER_LABEL_BY_TYPE } from './utils/labels';
 import { formatNumber } from './utils/formatters';
@@ -42,7 +43,7 @@ const ALL_TIMEZONES: {
 }[] = [
   {
     tzCode: '',
-    label: 'UTC (Default)',
+    label: 'UTC (default)',
     name: 'Coordinated Universal Time',
     utc: '+00:00',
   },
@@ -53,8 +54,8 @@ const AVAILABLE_TIMEZONES = ALL_TIMEZONES.map((tz) => tz.tzCode);
 const LIMIT_OPTIONS: { key: number; label: string }[] = [
   { key: 100, label: '100' },
   { key: 1000, label: '1,000' },
-  { key: 5000, label: '5,000 (Default)' },
-  { key: 0, label: 'Max Row Limit' },
+  { key: 5000, label: '5,000' },
+  { key: 0, label: 'Default limit' },
 ];
 const LIMIT_OPTION_VALUES = LIMIT_OPTIONS.map((option) => option.key) as number[];
 
@@ -369,23 +370,15 @@ export function QueryBuilderExtras() {
           <Dialog width="36x">
             <Content padding="1x 1.5x" gap="1.5x">
               <Flow gap="1x">
-                <Space gap=".75x">
+                <Space gap=".25x">
                   <Title level={4} preset="h6">
                     Query
                   </Title>
-                  <TooltipProvider
-                    title="Click to learn more about query format"
-                    width="max-content"
-                  >
-                    <Button
-                      to="!https://cube.dev/docs/product/apis-integrations/rest-api/query-format#query-properties"
-                      aria-label="Query format"
-                      width="3x"
-                      height="3x"
-                      type="clear"
-                      icon={<InfoCircleIcon />}
-                    />
-                  </TooltipProvider>
+                  <InfoIconButton
+                    tooltip="Click to learn more about the query format"
+                    tooltipSuffix=""
+                    to="!https://cube.dev/docs/product/apis-integrations/rest-api/query-format#query-properties"
+                  />
                 </Space>
                 <Checkbox
                   aria-label="Ungrouped"
@@ -398,14 +391,14 @@ export function QueryBuilderExtras() {
                   Ungrouped
                 </Checkbox>
                 <Checkbox
-                  aria-label="Show total rows"
+                  aria-label="Show total number of rows"
                   isSelected={query.total ?? false}
                   onChange={(total) => {
                     updateQuery({ total: total || undefined });
                     close();
                   }}
                 >
-                  Show total rows
+                  Show total number of rows
                 </Checkbox>
               </Flow>
               <ComboBox
@@ -602,6 +595,13 @@ export function QueryBuilderLimitSelect() {
           </Link>
         ) : null
       }
+      labelSuffix={
+        <InfoIconButton
+          tooltip="Click to learn more about the row limit"
+          tooltipSuffix=""
+          to="!https://cube.dev/docs/product/apis-integrations/queries#row-limit"
+        />
+      }
       selectedKey={query.limit == null ? '0' : String(query.limit)}
       onSelectionChange={(val: Key) => {
         updateQuery(() => ({ limit: val === '0' ? undefined : Number(val as string) }));

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

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { Button, Flex, Flow, Space, tasty } from '@cube-dev/ui-kit';
+import { Button, ClearIcon, Flex, Flow, Space, tasty } from '@cube-dev/ui-kit';
 import { TCubeDimension, TCubeMeasure } from '@cubejs-client/core';
 
 import { useQueryBuilderContext } from './context';
@@ -112,7 +112,7 @@ export function QueryBuilderFilters({ onToggle }: { onToggle?: (isExpanded: bool
       }
       extra={
         timeCounter || dimensionCounter || measureCounter || segmentsCounter ? (
-          <Button size="small" theme="danger" onPress={onClearAction}>
+          <Button icon={<ClearIcon />} size="small" theme="danger" onPress={onClearAction}>
             Remove All
           </Button>
         ) : null

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

@@ -13,6 +13,7 @@ import {
   CloseIcon,
   TooltipProvider,
   ResizablePanel,
+  ClearIcon,
 } from '@cube-dev/ui-kit';
 import {
   ReactNode,
@@ -434,7 +435,7 @@ export function QueryBuilderSidePanel({
               size="small"
               type="secondary"
               theme="danger"
-              icon={<CloseIcon />}
+              icon={<ClearIcon />}
               onPress={() => {
                 clearQuery();
                 setOpenCubes(

packages/cubejs-playground/src/QueryBuilderV2/components/AddFilterInput.tsx

@@ -205,7 +205,7 @@ export function AddFilterInput(props: AddFilterInputProps) {
     items.push({ value: 'and', label: 'AND Branch' }, { value: 'or', label: 'OR Branch' });
 
     return items;
-  }, [onDateRangeAdd]);
+  }, [onDateRangeAdd, onSegmentAdd]);
 
   const disabledKeys = useMemo(() => {
     const disabledKeys: string[] = [];

packages/cubejs-playground/src/QueryBuilderV2/components/CopyButton.tsx

@@ -1,5 +1,11 @@
-import { Button, useToastsApi, copy, tasty, CubeButtonProps } from '@cube-dev/ui-kit';
-import { CopyOutlined } from '@ant-design/icons';
+import {
+  Button,
+  useToastsApi,
+  copy,
+  tasty,
+  CubeButtonProps,
+  CopyIcon as CopyIconUIKit,
+} from '@cube-dev/ui-kit';
 import { useState } from 'react';
 import { unstable_batchedUpdates } from 'react-dom';
 
@@ -18,7 +24,7 @@ const CopyButtonElement = tasty(Button, {
   label: 'Copy value to clipboard',
   type: 'clear',
   size: 'small',
-  icon: <CopyOutlined />,
+  icon: <CopyIconUIKit />,
 });
 
 export function CopyButton(props: CopyButtonProps) {

packages/cubejs-playground/src/QueryBuilderV2/components/CopyIcon.tsx

@@ -1,5 +1,5 @@
-import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
-import { Styles, tasty } from '@cube-dev/ui-kit';
+import { CheckOutlined } from '@ant-design/icons';
+import { Styles, tasty, CopyIcon as CopyIconUIKit } from '@cube-dev/ui-kit';
 import { memo, useRef } from 'react';
 
 import { useDebouncedCallback } from '../hooks';
@@ -45,7 +45,7 @@ const CopyIconElement = tasty({
       copied: '0.1s',
     },
   },
-  children: <CopyOutlined />,
+  children: <CopyIconUIKit />,
 });
 
 const CopiedIconElement = tasty({

packages/cubejs-playground/src/QueryBuilderV2/components/FilterOptionsButton.tsx

@@ -24,7 +24,7 @@ export interface FilterOptionsButtonProps {
 
 export function FilterOptionsButton({ type, disableKeys, onAction }: FilterOptionsButtonProps) {
   const items = useMemo(() => {
-    const items: { key: string, label: string, color?: string }[] = [];
+    const items: { key: string; label: string; color?: string }[] = [];
 
     if (type === 'or' || type === 'and') {
       if (type === 'and') {

packages/cubejs-playground/src/QueryBuilderV2/components/InfoIconButton.tsx

@@ -0,0 +1,43 @@
+import { Action, CubeActionProps, TooltipProvider, tasty, InfoCircleIcon } from '@cube-dev/ui-kit';
+
+export type InfoTooltipButtonProps = {
+  tooltipSuffix?: string;
+  tooltip: string;
+} & CubeActionProps;
+
+const TooltipButton = tasty(Action, {
+  styles: {
+    display: 'inline-grid',
+    placeItems: 'center',
+    radius: '1r',
+    width: '2.5x',
+    height: '2.5x',
+    color: {
+      '': '#purple-text',
+      pressed: '#purple',
+    },
+    verticalAlign: 'middle',
+    preset: 't3',
+  },
+});
+
+const DEFAULT_TOOLTIP_SUFFIX = 'Click the icon to learn more.';
+
+export function InfoIconButton(props: InfoTooltipButtonProps) {
+  const { tooltipSuffix = DEFAULT_TOOLTIP_SUFFIX, tooltip, ...rest } = props;
+
+  return (
+    <TooltipProvider
+      title={
+        <>
+          {tooltip} {DEFAULT_TOOLTIP_SUFFIX !== tooltipSuffix || rest.to ? tooltipSuffix : ''}
+        </>
+      }
+      width="initial max-content 40x"
+    >
+      <TooltipButton {...rest}>
+        <InfoCircleIcon />
+      </TooltipButton>
+    </TooltipProvider>
+  );
+}

packages/cubejs-playground/src/QueryBuilderV2/components/ValuesInput.tsx

@@ -144,8 +144,10 @@ export function ValuesInput(props: ValuesInputProps) {
   }, [isOpen]);
 
   useEffect(() => {
-    focusOnInput();
-  }, [suggestions]);
+    if (!isSuggestionLoading) {
+      focusOnInput();
+    }
+  }, [isSuggestionLoading]);
 
   // Add current value to the value list and clear the input value
   const addValue = useEvent(() => {
@@ -219,17 +221,17 @@ export function ValuesInput(props: ValuesInputProps) {
 
   const input =
     type === 'string' ? (
-      memberType === 'dimension' && allowSuggestions && showSuggestions && suggestions.length ? (
+      memberType === 'dimension' && allowSuggestions && showSuggestions ? (
         <ComboBox
           allowsCustomValue
           aria-label="Text value input"
           inputRef={inputRef}
           size="small"
           inputValue={textValue}
           placeholder={
-            isSuggestionLoading && !suggestions.length
+            isSuggestionLoading
               ? 'Loading values...'
-              : (placeholder ?? 'Type value to add...')
+              : (placeholder ?? `Type ${suggestions.length ? 'or select ' : ''}value to add...`)
           }
           validationState={hasError ? 'invalid' : undefined}
           suffix={
@@ -243,6 +245,7 @@ export function ValuesInput(props: ValuesInputProps) {
           width="30x"
           menuTrigger="focus"
           isLoading={isSuggestionLoading && !suggestions.length}
+          disabledKeys={suggestions.length ? undefined : ['no-suggestions']}
           onSelectionChange={(key: Key | null) => {
             key && onTextChange(key as string);
             addValueLazy();
@@ -253,19 +256,23 @@ export function ValuesInput(props: ValuesInputProps) {
           onKeyDown={onKeyDown}
           onFocus={onFocus}
         >
-          {suggestions.map((suggestion) => (
-            <ComboBox.Item key={suggestion} textValue={suggestion}>
-              {suggestion}
-            </ComboBox.Item>
-          ))}
+          {suggestions.length ? (
+            suggestions.map((suggestion) => (
+              <ComboBox.Item key={suggestion} textValue={suggestion}>
+                {suggestion}
+              </ComboBox.Item>
+            ))
+          ) : (
+            <ComboBox.Item key="no-suggestions">No values loaded</ComboBox.Item>
+          )}
         </ComboBox>
       ) : (
         <TextInput
           aria-label="Text value input"
           inputRef={inputRef}
           size="small"
           value={textValue}
-          placeholder={placeholder || 'Type value to add...'}
+          placeholder={placeholder || `Type ${allowSuggestions ? 'or select ' : ''}value to add...`}
           validationState={hasError ? 'invalid' : undefined}
           isLoading={isSuggestionLoading}
           suffix={

packages/cubejs-playground/src/QueryBuilderV2/hooks/query-builder.ts

@@ -525,7 +525,7 @@ export function useQueryBuilder(props: UseQueryBuilderProps) {
       }
     }
 
-    return names;
+    return names.reverse();
   });
 
   // Updaters with simple common logic for dimensions, measures and segments
@@ -540,7 +540,7 @@ export function useQueryBuilder(props: UseQueryBuilderProps) {
           return false;
         }
 
-        let names: string[];
+        let names: string[] = [name];
 
         if (type === 'dimensions') {
           names = getConnectedDimensionNames(name);