fix(cubejs-playground): update query builder * 2

Author: tenphi

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

@@ -20,7 +20,12 @@ import {
   Title,
 } from '@cube-dev/ui-kit';
 import { forwardRef, Key, useEffect, useMemo, useState } from 'react';
-import { DragDropContext, Draggable, Droppable, OnDragEndResponder } from 'react-beautiful-dnd';
+import {
+  DragDropContext,
+  Draggable,
+  Droppable,
+  OnDragEndResponder,
+} from 'react-beautiful-dnd';
 import { TCubeMemberType } from '@cubejs-client/core';
 
 import { useStoredTimezones, useEvent } from './hooks';
@@ -54,7 +59,9 @@ const LIMIT_OPTIONS: { key: number; label: string }[] = [
   { key: 5000, label: '5,000 (Default)' },
   { key: 50000, label: '50,000 (Max)' },
 ];
-const LIMIT_OPTION_VALUES = LIMIT_OPTIONS.map((option) => option.key) as number[];
+const LIMIT_OPTION_VALUES = LIMIT_OPTIONS.map(
+  (option) => option.key
+) as number[];
 
 function timezoneByName(name: string) {
   return {
@@ -172,7 +179,10 @@ type OrderListItemProps = {
   onSortChange: (name: string, sorting: SortDirection) => void;
 };
 
-export const OrderListItem = forwardRef(function OrderListItem(props: OrderListItemProps, ref) {
+export const OrderListItem = forwardRef(function OrderListItem(
+  props: OrderListItemProps,
+  ref
+) {
   const {
     name,
     memberType,
@@ -185,7 +195,12 @@ export const OrderListItem = forwardRef(function OrderListItem(props: OrderListI
   const label = props.label ?? name;
 
   return (
-    <OrderListItemStyled ref={ref} key={name} data-member={memberType} {...otherProps}>
+    <OrderListItemStyled
+      ref={ref}
+      key={name}
+      data-member={memberType}
+      {...otherProps}
+    >
       <DragOutlined style={{ fontSize: 16 }} />
 
       <MemberLabel name={label} member={memberType} />
@@ -200,11 +215,19 @@ export const OrderListItem = forwardRef(function OrderListItem(props: OrderListI
           {ORDER_LABEL_BY_TYPE[cubeMemberKind ?? 'string'][0]}
         </SortButton>
 
-        <SortButton data-member={memberType} aria-label="Descending" value="desc">
+        <SortButton
+          data-member={memberType}
+          aria-label="Descending"
+          value="desc"
+        >
           {ORDER_LABEL_BY_TYPE[cubeMemberKind ?? 'string'][1]}
         </SortButton>
 
-        <SortButton data-member={memberType} aria-label="No sorting" value="none">
+        <SortButton
+          data-member={memberType}
+          aria-label="No sorting"
+          value="none"
+        >
           None
         </SortButton>
       </Radio.ButtonGroup>
@@ -218,7 +241,9 @@ export function QueryBuilderExtras() {
   const fields = [...(query?.dimensions ?? []), ...(query?.measures ?? [])];
   const storedTimezones = useStoredTimezones(query.timezone);
   const timeDimensions =
-    query?.timeDimensions?.filter((time) => time.granularity).map((time) => time.dimension) ?? [];
+    query?.timeDimensions
+      ?.filter((time) => time.granularity)
+      .map((time) => time.dimension) ?? [];
 
   timeDimensions.forEach((name) => {
     if (name && !fields.includes(name)) {
@@ -405,7 +430,7 @@ export function QueryBuilderExtras() {
                   ) : null
                 }
                 selectedKey={timezone}
-                onSelectionChange={(val: Key) => {
+                onSelectionChange={(val: Key | null) => {
                   const timezone = val as string;
 
                   updateQuery(() => ({
@@ -422,7 +447,12 @@ export function QueryBuilderExtras() {
                   return (
                     <Select.Item key={tz.tzCode} textValue={tz.label}>
                       <Space placeContent="space-between" preset="t3m">
-                        <Text nowrap ellipsis block styles={{ width: 'max 40x' }}>
+                        <Text
+                          nowrap
+                          ellipsis
+                          block
+                          styles={{ width: 'max 40x' }}
+                        >
                           {name || 'UTC (Default)'}
                         </Text>
                         {zone ? (
@@ -489,7 +519,13 @@ export function QueryBuilderExtras() {
         )}
       </DialogTrigger>
     );
-  }, [query.ungrouped, query.timezone, query.offset, storedTimezones.join('::'), query.limit]);
+  }, [
+    query.ungrouped,
+    query.timezone,
+    query.offset,
+    storedTimezones.join('::'),
+    query.limit,
+  ]);
 
   const orderSelector = useMemo(() => {
     if (!allFields.length) {
@@ -516,11 +552,17 @@ export function QueryBuilderExtras() {
           )}
         </Button>
         <Dialog width="max 80x">
-          <Content padding="(1.5x - 1ow)" style={{ minHeight: `${30 * allFields.length + 18}px` }}>
+          <Content
+            padding="(1.5x - 1ow)"
+            style={{ minHeight: `${30 * allFields.length + 18}px` }}
+          >
             <DragDropContext onDragEnd={onDrag}>
               <Droppable droppableId="queryOrder">
                 {(provided) => (
-                  <OrderListContainer ref={provided.innerRef} {...provided.droppableProps}>
+                  <OrderListContainer
+                    ref={provided.innerRef}
+                    {...provided.droppableProps}
+                  >
                     {allFields.map((name, index) => {
                       const memberType = getMemberType(name);