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

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/QueryBuilderSidePanel.tsx

@@ -121,7 +121,7 @@ export function QueryBuilderSidePanel({
     if (isQueryEmpty) {
       setOpenCubes(cubesOrViews.length === 1 ? new Set([cubesOrViews[0].name]) : new Set());
     }
-  }, [meta, selectedType]);
+  }, [meta, cubesOrViews.length, selectedType]);
 
   const highlightedCubes = appliedFilterString ? usedCubes : [];
 
@@ -368,6 +368,7 @@ export function QueryBuilderSidePanel({
     [...openCubes.values()].join(),
     appliedFilterString,
     usedCubes.join(),
+    cubesOrViews.length,
     memberViewType,
     selectedType,
     isQueryEmpty,

packages/cubejs-playground/src/components/PlaygroundQueryBuilder/QueryBuilderContainer.tsx

@@ -1,4 +1,4 @@
-import { LockIcon, ThunderboltIcon, Space, Button } from '@cube-dev/ui-kit';
+import { LockIcon, ThunderboltIcon, Panel, Space, Button } from '@cube-dev/ui-kit';
 import { CubeProvider } from '@cubejs-client/react';
 import { Card } from 'antd';
 import { useLayoutEffect } from 'react';
@@ -8,7 +8,6 @@ import styled from 'styled-components';
 import { CubeLoader } from '../../atoms';
 import { useCloud } from '../../cloud';
 import { useAppContext, useCubejsApi, useSecurityContext } from '../../hooks';
-import { Panel } from '../../QueryBuilderV2/components/Panel';
 import {
   RollupDesignerContext,
   useRollupDesignerContext,

yarn.lock

@@ -5257,10 +5257,10 @@
   resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz#b6c75a56a1947cc916ea058772d666a2c8932f31"
   integrity sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==
 
-"@cube-dev/ui-kit@0.38.0":
-  version "0.38.0"
-  resolved "https://registry.yarnpkg.com/@cube-dev/ui-kit/-/ui-kit-0.38.0.tgz#9b2dc69cdb04ff6dcbe0015af532163d95e55b5e"
-  integrity sha512-YpkmqMNgtwt3Laa2Yc9x41EvaJ79nO1xUGowQVTifTqG2FzDij60RQRVvC6HYMm29BBBqIgr/INThVBjUig5dg==
+"@cube-dev/ui-kit@0.52.3":
+  version "0.52.3"
+  resolved "https://registry.yarnpkg.com/@cube-dev/ui-kit/-/ui-kit-0.52.3.tgz#f578446d4599a78787953e97e144a80339ae15b9"
+  integrity sha512-egTiaR857jRmdK63B1VFDxUnfJxFY+SyJX6irqpPCVrqOqS0mErVJCy2qkgrC9uU6IzTCo2UlkL977Zv2SXZDg==
   dependencies:
     "@ant-design/icons" "^5.5.1"
     "@internationalized/date" "^3.5.6"
@@ -5272,25 +5272,11 @@
     "@react-aria/utils" "^3.25.3"
     "@react-spectrum/utils" "^3.11.11"
     "@react-stately/utils" "^3.10.4"
-    "@react-types/button" "^3.10.0"
-    "@react-types/calendar" "^3.4.10"
-    "@react-types/checkbox" "^3.8.4"
-    "@react-types/combobox" "^3.13.0"
-    "@react-types/datepicker" "^3.8.3"
-    "@react-types/dialog" "^3.5.13"
-    "@react-types/menu" "^3.9.12"
-    "@react-types/numberfield" "^3.8.6"
-    "@react-types/overlays" "^3.8.10"
-    "@react-types/radio" "^3.8.4"
-    "@react-types/select" "^3.9.7"
     "@react-types/shared" "^3.25.0"
-    "@react-types/slider" "^3.7.6"
-    "@react-types/switch" "^3.5.6"
-    "@react-types/textfield" "^3.9.7"
-    "@react-types/tooltip" "^3.4.12"
     "@vitejs/plugin-react" "^4.3.2"
     clipboard-copy "^4.0.1"
     clsx "^1.1.1"
+    diff "^7.0.0"
     email-validator "^2.0.4"
     prismjs "^1.27.0"
     react-aria "^3.35.1"
@@ -5301,6 +5287,7 @@
     react-transition-group "^4.4.5"
     react-types "^0.1.0"
     tiny-invariant "^1.3.3"
+    usehooks-ts "^3.1.0"
     valid-url "^1.0.9"
 
 "@cubejs-backend/dotenv@^9.0.2":
@@ -12665,6 +12652,11 @@ before-after-hook@^2.2.0:
   resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.2.2.tgz#a6e8ca41028d90ee2c24222f201c90956091613e"
   integrity sha512-3pZEU3NT5BFUo/AD5ERPWOgQOCZITni6iavr5AUw5AUwQjMlI0kzu5btnyD39AF0gUEsDPwJT+oY1ORBJijPjQ==
 
+best-effort-json-parser@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/best-effort-json-parser/-/best-effort-json-parser-1.1.2.tgz#869272c9de76fc7d336c4d9e3a8bbcdee3edda04"
+  integrity sha512-RD7tyk24pNCDwEKFACauR6Lqp5m6BHUrehwyhN/pA8V3QYWq8Y+hk9vHZvKiThZsdEFTaUqN49duVsamgCd8/g==
+
 big-integer@^1.6.43:
   version "1.6.51"
   resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686"
@@ -15331,6 +15323,11 @@ diff@^4.0.1:
   resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
   integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
 
+diff@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-7.0.0.tgz#3fb34d387cd76d803f6eebea67b921dab0182a9a"
+  integrity sha512-PJWHUb1RFevKCwaFA9RlG5tCd+FO5iRh9A8HEtkmBH2Li03iJriB6m6JIN4rGz3K3JLawI7/veA1xzRKP6ISBw==
+
 dir-glob@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
@@ -29071,6 +29068,13 @@ use-sidecar@^1.1.2:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
+usehooks-ts@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/usehooks-ts/-/usehooks-ts-3.1.0.tgz#156119f36efc85f1b1952616c02580f140950eca"
+  integrity sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==
+  dependencies:
+    lodash.debounce "^4.0.8"
+
 utf8-byte-length@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz#f45f150c4c66eee968186505ab93fcbb8ad6bf61"