From 5798d9be40c8520000def6adf386465025012bb3 Mon Sep 17 00:00:00 2001 From: Andrey Yamanov Date: Mon, 3 Feb 2025 17:08:36 +0100 Subject: [PATCH] fix(cubejs-playground): update query builder --- .../src/QueryBuilderV2/QueryBuilderExtras.tsx | 38 ++++++++-------- .../QueryBuilderV2/QueryBuilderFilters.tsx | 4 +- .../QueryBuilderV2/QueryBuilderSidePanel.tsx | 3 +- .../components/AddFilterInput.tsx | 2 +- .../QueryBuilderV2/components/CopyButton.tsx | 12 ++++-- .../QueryBuilderV2/components/CopyIcon.tsx | 6 +-- .../components/FilterOptionsButton.tsx | 2 +- .../components/InfoIconButton.tsx | 43 +++++++++++++++++++ .../QueryBuilderV2/components/ValuesInput.tsx | 29 ++++++++----- .../src/QueryBuilderV2/hooks/query-builder.ts | 4 +- 10 files changed, 100 insertions(+), 43 deletions(-) create mode 100644 packages/cubejs-playground/src/QueryBuilderV2/components/InfoIconButton.tsx diff --git a/packages/cubejs-playground/src/QueryBuilderV2/QueryBuilderExtras.tsx b/packages/cubejs-playground/src/QueryBuilderV2/QueryBuilderExtras.tsx index ab2a6a1ce79df..d499375154e82 100644 --- a/packages/cubejs-playground/src/QueryBuilderV2/QueryBuilderExtras.tsx +++ b/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() { - + Query - - ) : null diff --git a/packages/cubejs-playground/src/QueryBuilderV2/QueryBuilderSidePanel.tsx b/packages/cubejs-playground/src/QueryBuilderV2/QueryBuilderSidePanel.tsx index a08a2af46eea5..46f891abab473 100644 --- a/packages/cubejs-playground/src/QueryBuilderV2/QueryBuilderSidePanel.tsx +++ b/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={} + icon={} onPress={() => { clearQuery(); setOpenCubes( diff --git a/packages/cubejs-playground/src/QueryBuilderV2/components/AddFilterInput.tsx b/packages/cubejs-playground/src/QueryBuilderV2/components/AddFilterInput.tsx index 87e5dd64949d6..98cedcdf4b3b1 100644 --- a/packages/cubejs-playground/src/QueryBuilderV2/components/AddFilterInput.tsx +++ b/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[] = []; diff --git a/packages/cubejs-playground/src/QueryBuilderV2/components/CopyButton.tsx b/packages/cubejs-playground/src/QueryBuilderV2/components/CopyButton.tsx index c8bf6bf5b6a0a..a2dac379afbe4 100644 --- a/packages/cubejs-playground/src/QueryBuilderV2/components/CopyButton.tsx +++ b/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: , + icon: , }); export function CopyButton(props: CopyButtonProps) { diff --git a/packages/cubejs-playground/src/QueryBuilderV2/components/CopyIcon.tsx b/packages/cubejs-playground/src/QueryBuilderV2/components/CopyIcon.tsx index 26381607a317d..c6e693948a970 100644 --- a/packages/cubejs-playground/src/QueryBuilderV2/components/CopyIcon.tsx +++ b/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: , + children: , }); const CopiedIconElement = tasty({ diff --git a/packages/cubejs-playground/src/QueryBuilderV2/components/FilterOptionsButton.tsx b/packages/cubejs-playground/src/QueryBuilderV2/components/FilterOptionsButton.tsx index 82d3797cf9d82..3d2149b729ce9 100644 --- a/packages/cubejs-playground/src/QueryBuilderV2/components/FilterOptionsButton.tsx +++ b/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') { diff --git a/packages/cubejs-playground/src/QueryBuilderV2/components/InfoIconButton.tsx b/packages/cubejs-playground/src/QueryBuilderV2/components/InfoIconButton.tsx new file mode 100644 index 0000000000000..2f2bd9299728e --- /dev/null +++ b/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 ( + + {tooltip} {DEFAULT_TOOLTIP_SUFFIX !== tooltipSuffix || rest.to ? tooltipSuffix : ''} + + } + width="initial max-content 40x" + > + + + + + ); +} diff --git a/packages/cubejs-playground/src/QueryBuilderV2/components/ValuesInput.tsx b/packages/cubejs-playground/src/QueryBuilderV2/components/ValuesInput.tsx index 247577ea4badc..01c427a7e8d32 100644 --- a/packages/cubejs-playground/src/QueryBuilderV2/components/ValuesInput.tsx +++ b/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,7 +221,7 @@ export function ValuesInput(props: ValuesInputProps) { const input = type === 'string' ? ( - memberType === 'dimension' && allowSuggestions && showSuggestions && suggestions.length ? ( + memberType === 'dimension' && allowSuggestions && showSuggestions ? ( { key && onTextChange(key as string); addValueLazy(); @@ -253,11 +256,15 @@ export function ValuesInput(props: ValuesInputProps) { onKeyDown={onKeyDown} onFocus={onFocus} > - {suggestions.map((suggestion) => ( - - {suggestion} - - ))} + {suggestions.length ? ( + suggestions.map((suggestion) => ( + + {suggestion} + + )) + ) : ( + No values loaded + )} ) : (