@finos/legend-query-builder 4.14.54 → 4.14.56

package/lib/stores/workflows/ServiceQueryBuilderState.js

@@ -71,7 +71,7 @@ export class ServiceQueryBuilderState extends QueryBuilderState {
     }
     get sideBarClassName() {
         return this.executionContexts.length
-            ? 'query-builder__setup__service--with-mutiple-execution'
+            ? 'query-builder__setup__service--with-multiple-execution'
             : 'query-builder__setup__service';
     }
     get isMappingReadOnly() {

package/lib/stores/workflows/ServiceQueryBuilderState.js.map

@@ -1 +1 @@
-{"version":3,"file":"ServiceQueryBuilderState.js","sourceRoot":"","sources":["../../../src/stores/workflows/ServiceQueryBuilderState.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ServiceQueryBuilderState.js","sourceRoot":"","sources":["../../../src/stores/workflows/ServiceQueryBuilderState.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-query-builder",
-  "version": "4.14.54",
+  "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">