@finos/legend-query-builder 4.15.29 → 4.15.31

package/src/components/filter/QueryBuilderFilterPanel.tsx

@@ -962,6 +962,8 @@ const QueryBuilderFilterConditionEditor = observer(
       }),
       [handleDrop],
     );
+    const ref = useRef<HTMLDivElement>(null);
+    dropConnector(ref);
 
     const { isFilterValueDroppable } = useDragLayer((monitor) => ({
       isFilterValueDroppable:
@@ -1022,7 +1024,7 @@ const QueryBuilderFilterConditionEditor = observer(
       ) {
         return (
           <div
-            ref={dropConnector}
+            ref={ref}
             data-testid={
               QUERY_BUILDER_TEST_ID.QUERY_BUILDER_FILTER_TREE_CONDITION_NODE_VALUE
             }
@@ -1059,7 +1061,7 @@ const QueryBuilderFilterConditionEditor = observer(
       ) {
         return (
           <div
-            ref={dropConnector}
+            ref={ref}
             className="query-builder-filter-tree__condition-node__value"
           >
             <PanelEntryDropZonePlaceholder
@@ -1219,7 +1221,7 @@ const QueryBuilderFilterTreeNodeContainer = observer(
   ) => {
     const { node, onNodeSelect, innerProps } = props;
     const { queryBuilderState } = innerProps;
-    const dragRef = useRef<HTMLDivElement>(null);
+    const ref = useRef<HTMLDivElement>(null);
     const [isSelectedFromContextMenu, setIsSelectedFromContextMenu] =
       useState(false);
     const applicationStore = useApplicationStore();
@@ -1293,19 +1295,9 @@ const QueryBuilderFilterTreeNodeContainer = observer(
             applicationStore.notificationService.notifyWarning(error.message);
             return;
           }
-          if (node instanceof QueryBuilderFilterTreeOperationNodeData) {
-            buildFilterTree(
-              filterConditionState.propertyExpressionState.propertyExpression,
-              filterState,
-              node,
-            );
-          } else if (node instanceof QueryBuilderFilterTreeConditionNodeData) {
-            buildFilterTree(
-              filterConditionState.propertyExpressionState.propertyExpression,
-              filterState,
-              node,
-            );
-          } else if (
+          if (
+            node instanceof QueryBuilderFilterTreeOperationNodeData ||
+            node instanceof QueryBuilderFilterTreeConditionNodeData ||
             node instanceof QueryBuilderFilterTreeBlankConditionNodeData
           ) {
             buildFilterTree(
@@ -1357,7 +1349,7 @@ const QueryBuilderFilterTreeNodeContainer = observer(
         }),
         [node, filterState],
       );
-    dragConnector(dropConnector(dragRef));
+    dragConnector(dropConnector(ref));
     useDragPreviewLayer(dragPreviewConnector);
 
     const { isDroppable } = useDragLayer((monitor) => ({
@@ -1421,7 +1413,7 @@ const QueryBuilderFilterTreeNodeContainer = observer(
               QUERY_BUILDER_TEST_ID.QUERY_BUILDER_FILTER_TREE_NODE_CONTENT
             }
             className="query-builder-filter-tree__node__content"
-            ref={dragRef}
+            ref={ref}
             onClick={
               node instanceof QueryBuilderFilterTreeConditionNodeData ||
               node instanceof QueryBuilderFilterTreeBlankConditionNodeData
@@ -1697,7 +1689,7 @@ export const QueryBuilderFilterPanel = observer(
       [applicationStore, filterState, queryBuilderState.observerContext],
     );
 
-    const [{ isDragOver }, dropTargetConnector] = useDrop<
+    const [{ isDragOver }, dropConnector] = useDrop<
       QueryBuilderExplorerTreeDragSource,
       void,
       { isDragOver: boolean }
@@ -1719,8 +1711,8 @@ export const QueryBuilderFilterPanel = observer(
       [handleDrop],
     );
 
-    const addFilterRef = useRef<HTMLInputElement>(null);
-    dropTargetConnector(addFilterRef);
+    const ref = useRef<HTMLInputElement>(null);
+    dropConnector(ref);
 
     return (
       <div
@@ -1818,7 +1810,7 @@ export const QueryBuilderFilterPanel = observer(
           <PanelDropZone
             isDragOver={isDragOver && filterState.isEmpty}
             isDroppable={isDroppable && filterState.isEmpty}
-            dropTargetConnector={dropTargetConnector}
+            dropTargetConnector={dropConnector}
           >
             {filterState.isEmpty && (
               <BlankPanelPlaceholder
@@ -1839,7 +1831,7 @@ export const QueryBuilderFilterPanel = observer(
             )}
             {isDroppable && !filterState.isEmpty && (
               <div
-                ref={addFilterRef}
+                ref={ref}
                 className="query-builder-filter-tree__free-drop-zone__container"
               >
                 <PanelEntryDropZonePlaceholder

package/src/components/result/tds/QueryBuilderTDSGridResult.tsx

@@ -28,6 +28,7 @@ import {
   type DataGridIRowNode,
   type DataGridMenuItemDef,
   type DataGridIAggFuncParams,
+  type DataGridDefaultMenuItem,
 } from '@finos/legend-lego/data-grid';
 import {
   getRowDataFromExecutionResult,
@@ -334,8 +335,8 @@ export const QueryBuilderTDSGridResult = observer(
     const getContextMenuItems = useCallback(
       (
         params: DataGridGetContextMenuItemsParams<QueryBuilderTDSRowDataType>,
-      ): (string | DataGridMenuItemDef)[] => {
-        let result: (string | DataGridMenuItemDef)[] = [];
+      ) => {
+        let result: (DataGridDefaultMenuItem | DataGridMenuItemDef)[] = [];
         const fetchStructureImplementation =
           resultState.queryBuilderState.fetchStructureState.implementation;
         if (fetchStructureImplementation instanceof QueryBuilderTDSState) {
@@ -569,9 +570,7 @@ export const QueryBuilderTDSGridResult = observer(
               suppressClipboardPaste={false}
               suppressContextMenu={false}
               columnDefs={colDefs}
-              getContextMenuItems={(params): (string | DataGridMenuItemDef)[] =>
-                getContextMenuItems(params)
-              }
+              getContextMenuItems={(params) => getContextMenuItems(params)}
             />
           )}
           {resultState.wavgAggregationState?.isApplyingWavg && (

package/src/components/result/tds/QueryBuilderTDSSimpleGridResult.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ContextMenu, clsx } from '@finos/legend-art';
+import { ContextMenu, WarningIcon, clsx } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import type { QueryBuilderState } from '../../../stores/QueryBuilderState.js';
 import {
@@ -25,6 +25,7 @@ import {
 import {
   DataGrid,
   type DataGridColumnDefinition,
+  type DataGridCustomHeaderProps,
 } from '@finos/legend-lego/data-grid';
 import {
   getRowDataFromExecutionResult,
@@ -50,66 +51,26 @@ import { QUERY_BUILDER_TEST_ID } from '../../../__lib__/QueryBuilderTesting.js';
 
 export const MAXIMUM_FRACTION_DIGITS = 4;
 
-export const getFloatGridColumnCustomHeader = (): string =>
-  `<div class="ag-cell-label-container" role="presentation">
-    <span
-      data-ref="eMenu"
-      class="ag-header-icon ag-header-cell-menu-button"
-    ></span>
-    <span
-      data-ref="eFilterButton"
-      class="ag-header-icon ag-header-cell-filter-button"
-    ></span>
-    <div data-ref="eLabel" class="ag-header-cell-label" role="presentation">
-      <span
-        data-ref="eSortOrder"
-        class="ag-header-icon ag-sort-order ag-hidden"
-      ></span>
-      <span
-        data-ref="eSortAsc"
-        class="ag-header-icon ag-sort-ascending-icon ag-hidden"
-      ></span>
-      <span
-        data-ref="eSortDesc"
-        class="ag-header-icon ag-sort-descending-icon ag-hidden"
-      ></span>
-      <span
-        data-ref="eSortMixed"
-        class="ag-header-icon ag-sort-mixed-icon ag-hidden"
-      ></span>
-      <span
-        data-ref="eSortNone"
-        class="ag-header-icon ag-sort-none-icon ag-hidden"
-      ></span>
-      <span
-        data-ref="eText"
-        class="ag-header-cell-text"
-        role="columnheader"
-      ></span>
-      <span data-ref="eFilter" class="ag-header-icon ag-filter-icon"></span>
-    </div>
+export const FloatGridColumnCustomHeader = (
+  props: DataGridCustomHeaderProps,
+) => {
+  return (
     <div
-      data-testid="query__builder__result__grid__custom-header"
-      class="query-builder__result__values__table__custom-header"
+      data-testid={
+        QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_GRID_CUSTOM_HEADER
+      }
+      className="query-builder__result__values__table__custom-header"
     >
       <div
-        class="query-builder__result__values__table__custom-header__icon"
+        className="query-builder__result__values__table__custom-header__icon"
         title="some values have been rounded using en-us format in this preview grid (defaults to max 4 decimal places)"
       >
-        <svg
-          stroke="currentColor"
-          fill="currentColor"
-          stroke-width="0"
-          viewBox="0 0 576 512"
-          height="1em"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path>
-        </svg>
+        <WarningIcon />
       </div>
+      <div>{props.displayName}</div>
     </div>
-  </div>`;
+  );
+};
 
 export const getTDSColumnCustomizations = (
   result: TDSExecutionResult,
@@ -138,11 +99,11 @@ export const getTDSColumnCustomizations = (
       case PRIMITIVE_TYPE.DECIMAL:
       case PRIMITIVE_TYPE.FLOAT:
         return isTruncated(colValues)
-          ? {
+          ? ({
               headerComponentParams: {
-                template: getFloatGridColumnCustomHeader(),
+                innerHeaderComponent: FloatGridColumnCustomHeader,
               },
-            }
+            } satisfies DataGridColumnDefinition)
           : {};
       default:
         return {};
@@ -472,6 +433,7 @@ export const QueryBuilderTDSSimpleGridResult = observer(
           resizable: true,
           field: colName,
           flex: 1,
+          headerName: colName,
           ...getTDSColumnCustomizations(executionResult, colName),
           cellRenderer: QueryResultCellRenderer,
           cellRendererParams: {

package/src/components/shared/BasicValueSpecificationEditor.tsx

@@ -1385,7 +1385,7 @@ const DateInstanceValueEditor = observer(
  * See https://github.com/finos/legend-studio/pull/1021
  */
 export const BasicValueSpecificationEditor = forwardRef<
-  HTMLInputElement,
+  HTMLInputElement | null,
   {
     valueSpecification: ValueSpecification;
     graph: PureModel;
@@ -1402,7 +1402,7 @@ export const BasicValueSpecificationEditor = forwardRef<
       | undefined;
     displayDateEditorAsEditableValue?: boolean | undefined;
   }
->(function BasicValueSpecificationEditor(props, ref) {
+>(function _BasicValueSpecificationEditor(props, ref) {
   const {
     className,
     valueSpecification,

package/src/components/shared/QueryBuilderPropertyInfoTooltip.tsx

@@ -122,7 +122,7 @@ export const QueryBuilderBaseInfoTooltip: React.FC<{
   data: {
     label: string;
     value: string;
-    actionButton?: JSX.Element | undefined;
+    actionButton?: React.ReactNode | undefined;
   }[];
   placement?: TooltipPlacement | undefined;
   children: React.ReactElement;

package/src/components/shared/QueryBuilderVariableSelector.tsx

@@ -44,7 +44,7 @@ import {
 } from './BasicValueSpecificationEditor.js';
 import { buildDatePickerOption } from './CustomDatePicker.js';
 import { QueryBuilderSimpleConstantExpressionState } from '../../stores/QueryBuilderConstantsState.js';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useRef, useState } from 'react';
 
 const CALCULATED = '(calculated)';
 
@@ -184,10 +184,12 @@ export const VariableViewer = observer(
       }),
       [variable],
     );
+    const ref = useRef<HTMLDivElement>(null);
+    dragConnector(ref);
     useDragPreviewLayer(dragPreviewConnector);
 
     return (
-      <div className="query-builder__variables__variable" ref={dragConnector}>
+      <div className="query-builder__variables__variable" ref={ref}>
         <ContextMenu
           content={
             <QueryBuilderVariableContextMenu

package/src/stores/QueryBuilderStateBuilder.ts

@@ -340,7 +340,6 @@ const processFromFunction = (
     new RuntimePointer(PackageableElementExplicitReference.create(runtimeVal)),
   );
   queryBuilderState.setExecutionContextState(fromContext);
-  return;
 };
 
 /**

package/src/stores/QueryLoaderState.ts

@@ -315,7 +315,7 @@ export class QueryLoaderState {
         searchSpecification,
       )) as LightQuery[];
       if (!querySearchSortBy) {
-        this.queries = this.queries.sort((a, b) =>
+        this.queries = this.queries.toSorted((a, b) =>
           a.name.localeCompare(b.name),
         );
       }

package/src/stores/explorer/QueryBuilderExplorerState.ts

@@ -106,7 +106,7 @@ export abstract class QueryBuilderExplorerTreeNodeData implements TreeNodeData {
   isPartOfDerivedPropertyBranch: boolean;
   type: Type;
   mappingData: QueryBuilderExplorerTreeNodeMappingData;
-  elementRef: React.RefObject<HTMLDivElement>;
+  elementRef: React.RefObject<HTMLDivElement | null>;
 
   constructor(
     id: string,

package/src/stores/fetch-structure/graph-fetch/QueryBuilderGraphFetchTreeUtil.ts

@@ -178,7 +178,7 @@ const buildRootGraphFetchSubTree = (
  */
 export const buildGraphFetchTreeData = (
   tree: RootGraphFetchTree,
-  displayRoot: boolean = false,
+  displayRoot = false,
 ): QueryBuilderGraphFetchTreeData => {
   const rootIds: string[] = [];
   const nodes = new Map<string, QueryBuilderGraphFetchTreeNodeData>();

package/src/stores/fetch-structure/tds/QueryBuilderTDSState.ts

@@ -611,21 +611,19 @@ export class QueryBuilderTDSState
 
     if (!options?.skipSorting) {
       // sort columns: aggregate columns go last
-      this.projectionColumns = this.projectionColumns
-        .slice()
-        .sort(
-          (colA, colB) =>
-            (this.aggregationState.columns.find(
-              (column) => column.projectionColumnState === colA,
-            )
-              ? 1
-              : 0) -
-            (this.aggregationState.columns.find(
-              (column) => column.projectionColumnState === colB,
-            )
-              ? 1
-              : 0),
-        );
+      this.projectionColumns = this.projectionColumns.toSorted(
+        (colA, colB) =>
+          (this.aggregationState.columns.find(
+            (column) => column.projectionColumnState === colA,
+          )
+            ? 1
+            : 0) -
+          (this.aggregationState.columns.find(
+            (column) => column.projectionColumnState === colB,
+          )
+            ? 1
+            : 0),
+      );
     }
   }
 

package/src/stores/fetch-structure/tds/post-filter/QueryBuilderPostFilterState.ts

@@ -474,7 +474,6 @@ export class PostFilterConditionState implements Hashable {
       this.rightConditionValue instanceof PostFilterValueSpecConditionValueState
     ) {
       this.rightConditionValue.setValue(val);
-      return;
     } else {
       this.setRightConditionVal(
         new PostFilterValueSpecConditionValueState(this, val),