@finos/legend-query-builder 4.14.55 → 4.14.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-query-builder",
-  "version": "4.14.55",
+  "version": "4.14.56",
   "description": "Legend query builder core",
   "keywords": [
     "legend",
@@ -42,20 +42,20 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "15.1.12",
-    "@finos/legend-art": "7.1.40",
-    "@finos/legend-graph": "31.10.7",
-    "@finos/legend-lego": "1.2.43",
-    "@finos/legend-server-depot": "6.0.47",
-    "@finos/legend-shared": "10.0.42",
-    "@finos/legend-storage": "3.0.92",
+    "@finos/legend-application": "15.1.13",
+    "@finos/legend-art": "7.1.41",
+    "@finos/legend-graph": "31.10.8",
+    "@finos/legend-lego": "1.2.44",
+    "@finos/legend-server-depot": "6.0.48",
+    "@finos/legend-shared": "10.0.43",
+    "@finos/legend-storage": "3.0.93",
     "@testing-library/dom": "10.2.0",
     "@testing-library/react": "16.0.0",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "chart.js": "4.4.3",
-    "mathjs": "13.0.0",
-    "mobx": "6.12.4",
+    "mathjs": "13.0.1",
+    "mobx": "6.12.5",
     "mobx-react-lite": "4.0.7",
     "monaco-editor": "0.50.0",
     "react": "18.3.1",
@@ -66,7 +66,7 @@
     "sql-formatter": "15.3.2"
   },
   "devDependencies": {
-    "@finos/legend-dev-utils": "2.1.10",
+    "@finos/legend-dev-utils": "2.1.11",
     "@jest/globals": "29.7.0",
     "cross-env": "7.0.3",
     "eslint": "8.57.0",

package/src/__lib__/QueryBuilderTesting.ts

@@ -36,13 +36,22 @@ export enum QUERY_BUILDER_TEST_ID {
   QUERY_BUILDER_FILTER_TREE_CONDITION_NODE_VALUE = 'query-builder-filter-tree__condition-node__value',
   // post filter
   QUERY_BUILDER_POST_FILTER_PANEL = 'query__builder__post__filter-panel',
-  QUERY_BUILDER_POST_FILTER_TREE_NODE_CONTENT = 'query__builder__post__filter-tree-node__content',
+  QUERY_BUILDER_POST_FILTER_TREE = 'query__builder__post__filter__tree',
+  QUERY_BUILDER_POST_FILTER_TREE_NODE_BLOCK = 'query__builder__post__filter__tree__node-block',
+  QUERY_BUILDER_POST_FILTER_TREE_NODE_CHILDREN = 'query__builder__post__filter__tree__node-children',
+  QUERY_BUILDER_POST_FILTER_TREE_NODE_CONTAINER = 'query__builder__post__filter__tree__node-container',
+  QUERY_BUILDER_POST_FILTER_TREE_NODE_CONTENT = 'query__builder__post__filter__tree__node-content',
+  // window function panel
   QUERY_BUILDER_WINDOW_GROUPBY = 'query__builder__window',
+  // explorer panel
   QUERY_BUILDER_EXPLORER = 'query__builder__explorer',
   QUERY_BUILDER_PROPERTY_SEARCH_PANEL = 'query__builder__property__search__panel',
   QUERY_BUILDER_PERCENTILE_PANEL = 'query__builder__percentile__panel',
+  // parameter panel
   QUERY_BUILDER_PARAMETERS = 'query-builder__parameters',
+  // constant panel
   QUERY_BUILDER_CONSTANTS = 'query-builder__constants',
+  // other
   QUERY_BUILDER_TOOLTIP_ICON = 'query-builder__tooltip__icon',
   // result panel
   QUERY_BUILDER_RESULT_VALUES = 'QUERY_BUILDER_RESULT_VALUES',

package/src/components/QueryBuilder.tsx

@@ -21,7 +21,7 @@ import {
   ResizablePanel,
   ResizablePanelSplitter,
   HackerIcon,
-  DropdownMenu,
+  ControlledDropdownMenu,
   MenuContent,
   MenuContentItem,
   MenuContentItemIcon,
@@ -602,7 +602,7 @@ export const QueryBuilder = observer(
                       {actionConfig.renderer(queryBuilderState)}
                     </Fragment>
                   ))}
-                <DropdownMenu
+                <ControlledDropdownMenu
                   className="query-builder__header__advanced-dropdown"
                   title="Show Advanced Menu..."
                   content={
@@ -902,8 +902,8 @@ export const QueryBuilder = observer(
                     Advanced
                   </div>
                   <CaretDownIcon className="query-builder__header__advanced-dropdown__icon" />
-                </DropdownMenu>
-                <DropdownMenu
+                </ControlledDropdownMenu>
+                <ControlledDropdownMenu
                   className="query-builder__header__advanced-dropdown"
                   content={
                     <MenuContent>
@@ -960,7 +960,7 @@ export const QueryBuilder = observer(
                     Help...
                   </div>
                   <CaretDownIcon className="query-builder__header__advanced-dropdown__icon" />
-                </DropdownMenu>
+                </ControlledDropdownMenu>
               </div>
             </div>
             <div className="query-builder__main">

package/src/components/QueryBuilderPropertyExpressionEditor.tsx

@@ -376,10 +376,36 @@ export const QueryBuilderPropertyExpressionEditor = observer(
   },
 );
 
+export const QueryBuilderPropertyNameDisplay = observer(
+  (props: {
+    columnName: string;
+    title: string;
+    error?: boolean | undefined;
+    setIsEditingColumnName?: ((isEditing: boolean) => void) | undefined;
+  }) => {
+    const { columnName, title, error, setIsEditingColumnName } = props;
+    return (
+      <div className="query-builder__property__name__display" title={title}>
+        <span
+          className={clsx('query-builder__property__name__display__content', {
+            'query-builder__property__name__display__content--error': error,
+            'editable-value': setIsEditingColumnName,
+          })}
+          onClick={() => {
+            setIsEditingColumnName?.(true);
+          }}
+        >
+          {columnName}
+        </span>
+      </div>
+    );
+  },
+);
+
 export const QueryBuilderEditablePropertyName = observer(
   (props: {
     columnName: string;
-    setColumnName?: ((columnName: string) => void) | undefined;
+    setColumnName: ((columnName: string) => void) | undefined;
     error: string | undefined;
     title: string;
     defaultColumnName: string;
@@ -435,21 +461,14 @@ export const QueryBuilderEditablePropertyName = observer(
         />
       </div>
     ) : (
-      <div className="query-builder__property__name__display" title={title}>
-        <span
-          className={clsx('query-builder__property__name__display__content', {
-            'query-builder__property__name__display__content--error': error,
-            'editable-value': setColumnName,
-          })}
-          onClick={() => {
-            if (setColumnName) {
-              setIsEditingColumnName(true);
-            }
-          }}
-        >
-          {columnName}
-        </span>
-      </div>
+      <QueryBuilderPropertyNameDisplay
+        columnName={columnName}
+        title={title}
+        error={Boolean(error)}
+        setIsEditingColumnName={
+          setColumnName ? setIsEditingColumnName : undefined
+        }
+      />
     );
   },
 );

package/src/components/QueryLoader.tsx

@@ -26,7 +26,7 @@ import {
   clsx,
   SearchIcon,
   TimesIcon,
-  DropdownMenu,
+  ControlledDropdownMenu,
   MenuContent,
   MenuContentItem,
   BlankPanelContent,
@@ -474,7 +474,7 @@ export const QueryLoader = observer(
                             </div>
                           </div>
                         </div>
-                        <DropdownMenu
+                        <ControlledDropdownMenu
                           className="query-loader__result__actions-menu"
                           title="More Actions..."
                           content={
@@ -518,7 +518,7 @@ export const QueryLoader = observer(
                           }}
                         >
                           <MoreVerticalIcon />
-                        </DropdownMenu>
+                        </ControlledDropdownMenu>
                         <div className="query-loader__result__arrow">
                           <ThinChevronRightIcon />
                         </div>
@@ -555,7 +555,7 @@ export const QueryLoader = observer(
                             {templateQuery.description}
                           </div>
                         </div>
-                        <DropdownMenu
+                        <ControlledDropdownMenu
                           className="query-loader__result__actions-menu"
                           title="More Actions..."
                           content={
@@ -585,7 +585,7 @@ export const QueryLoader = observer(
                           }}
                         >
                           <MoreVerticalIcon />
-                        </DropdownMenu>
+                        </ControlledDropdownMenu>
                         <div className="query-loader__result__arrow">
                           <ThinChevronRightIcon />
                         </div>

package/src/components/execution-plan/ExecutionPlanViewer.tsx

@@ -28,7 +28,7 @@ import {
   ChevronRightIcon,
   MenuContentItem,
   MenuContent,
-  DropdownMenu,
+  ControlledDropdownMenu,
   BlankPanelContent,
   PanelContent,
   ModalHeader,
@@ -684,7 +684,7 @@ const ExecutionPlanViewPanel = observer(
                   {executionPlanState.selectedNode.label}
                 </button>
               </div>
-              <DropdownMenu
+              <ControlledDropdownMenu
                 className="execution-plan-viewer__panel__view-mode__type"
                 title="View as..."
                 content={
@@ -717,7 +717,7 @@ const ExecutionPlanViewPanel = observer(
                 <div className="execution-plan-viewer__panel__view-mode__type__label">
                   {executionPlanState.viewMode}
                 </div>
-              </DropdownMenu>
+              </ControlledDropdownMenu>
             </div>
             <div className="panel__content execution-plan-viewer__panel__content">
               {executionPlanState.viewMode === EXECUTION_PLAN_VIEW_MODE.JSON &&

package/src/components/explorer/QueryBuilderExplorerPanel.tsx

@@ -26,7 +26,7 @@ import {
   Dialog,
   TreeView,
   BlankPanelContent,
-  DropdownMenu,
+  ControlledDropdownMenu,
   ContextMenu,
   MenuContent,
   MenuContentItem,
@@ -106,7 +106,7 @@ import { getClassPropertyIcon } from '@finos/legend-lego/graph-editor';
 import { QueryBuilderRootClassInfoTooltip } from '../shared/QueryBuilderRootClassInfoTooltip.js';
 import { QueryBuilderTelemetryHelper } from '../../__lib__/QueryBuilderTelemetryHelper.js';
 
-const checkForDeprecatedNode = (
+export const checkForDeprecatedNode = (
   node: QueryBuilderExplorerTreeNodeData,
   graph: PureModel,
   treeData: TreeData<QueryBuilderExplorerTreeNodeData>,
@@ -754,7 +754,7 @@ const QueryBuilderExplorerTreeNodeView = observer(
  * 4. Class Subtypes
  * Note: Derived property nodes will be ranked lower for each relevant return type
  */
-const getQueryBuilderExplorerTreeNodeSortRank = (
+export const getQueryBuilderExplorerTreeNodeSortRank = (
   node: QueryBuilderExplorerTreeNodeData,
 ): number => {
   if (node instanceof QueryBuilderExplorerTreeSubTypeNodeData) {
@@ -928,7 +928,7 @@ export const QueryBuilderExplorerPanel = observer(
             <PanelHeaderActionItem onClick={collapseTree} title="Collapse Tree">
               <CompressIcon />
             </PanelHeaderActionItem>
-            <DropdownMenu
+            <ControlledDropdownMenu
               className="panel__header__action"
               title="Show Options Menu..."
               content={
@@ -972,7 +972,7 @@ export const QueryBuilderExplorerPanel = observer(
               }}
             >
               <MoreVerticalIcon className="query-builder__icon__more-options" />
-            </DropdownMenu>
+            </ControlledDropdownMenu>
           </PanelHeaderActions>
           {propertySearchPanelState.isSearchPanelOpen && (
             <QueryBuilderPropertySearchPanel

package/src/components/explorer/QueryBuilderFunctionsExplorerPanel.tsx

@@ -32,7 +32,7 @@ import {
   TreeView,
   BlankPanelContent,
   MenuContentItem,
-  DropdownMenu,
+  ControlledDropdownMenu,
   MenuContent,
   CheckIcon,
   MenuContentItemIcon,
@@ -454,7 +454,7 @@ export const QueryBuilderFunctionsExplorerPanel = observer(
                 />
               )}
             </div>
-            <DropdownMenu
+            <ControlledDropdownMenu
               className="panel__header__action"
               title="Show Options Menu..."
               content={
@@ -476,7 +476,7 @@ export const QueryBuilderFunctionsExplorerPanel = observer(
               }}
             >
               <MoreVerticalIcon className="query-builder__icon__more-options" />
-            </DropdownMenu>
+            </ControlledDropdownMenu>
           </div>
         </div>
         <div className="panel__content query-builder__functions-explorer__content">