@finos/legend-application-query 5.0.2 → 5.2.2

package/src/components/QueryBuilderFunctionsExplorerPanel.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
   type TooltipPlacement,
@@ -37,15 +38,17 @@ import {
   MenuContentItemIcon,
   MenuContentItemLabel,
   MoreVerticalIcon,
+  DragPreviewLayer,
+  useDragPreviewLayer,
 } from '@finos/legend-art';
 import {
   type QueryBuilderFunctionsExplorerTreeNodeData,
   type QueryBuilderFunctionsExplorerDragSource,
-  QUERY_BUILDER_FUNCTIONS_EXPLORER_TREE_DND_TYPE,
   generateFunctionsExplorerTreeNodeData,
   getFunctionsExplorerTreeNodeChildren,
+  QUERY_BUILDER_FUNCTION_DND_TYPE,
 } from '../stores/QueryFunctionsExplorerState.js';
-import { useDrag, useDragLayer } from 'react-dnd';
+import { useDrag } from 'react-dnd';
 import {
   ConcreteFunctionDefinition,
   generateFunctionSignature,
@@ -54,8 +57,6 @@ import {
   ROOT_PACKAGE_NAME,
   getMultiplicityDescription,
 } from '@finos/legend-graph';
-import { getEmptyImage } from 'react-dnd-html5-backend';
-import { useEffect, useState } from 'react';
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
 
 const isDependencyTreeNode = (
@@ -134,53 +135,6 @@ const QueryBuilderFunctionInfoTooltip: React.FC<{
   );
 };
 
-const QueryBuilderFunctionDragLayer = observer(
-  (props: { queryBuilderState: QueryBuilderState }) => {
-    const { itemType, item, isDragging, currentPosition } = useDragLayer(
-      (monitor) => ({
-        itemType:
-          monitor.getItemType() as QUERY_BUILDER_FUNCTIONS_EXPLORER_TREE_DND_TYPE,
-        item: monitor.getItem<QueryBuilderFunctionsExplorerDragSource | null>(),
-        isDragging: monitor.isDragging(),
-        initialOffset: monitor.getInitialSourceClientOffset(),
-        currentPosition: monitor.getClientOffset(),
-      }),
-    );
-    if (
-      !isDragging ||
-      !item ||
-      !Object.values(QUERY_BUILDER_FUNCTIONS_EXPLORER_TREE_DND_TYPE).includes(
-        itemType,
-      ) ||
-      item.node.dndType ===
-        QUERY_BUILDER_FUNCTIONS_EXPLORER_TREE_DND_TYPE.PACKAGE
-    ) {
-      return null;
-    }
-    return (
-      <div className="query-builder__functions-explorer__tree__drag-preview-layer">
-        <div
-          className="query-builder__functions-explorer__tree__drag-preview"
-          style={
-            !currentPosition
-              ? { display: 'none' }
-              : {
-                  transform: `translate(${currentPosition.x + 20}px, ${
-                    currentPosition.y + 10
-                  }px)`,
-                }
-          }
-        >
-          {generateFunctionSignature(
-            item.node.packageableElement as ConcreteFunctionDefinition,
-            true,
-          )}
-        </div>
-      </div>
-    );
-  },
-);
-
 const QueryBuilderFunctionsExplorerListEntry = observer(
   (props: {
     queryBuilderState: QueryBuilderState;
@@ -196,15 +150,12 @@ const QueryBuilderFunctionsExplorerListEntry = observer(
     const functionSignature = generateFunctionSignature(element, true);
     const [, dragConnector, dragPreviewConnector] = useDrag(
       () => ({
-        type: QUERY_BUILDER_FUNCTIONS_EXPLORER_TREE_DND_TYPE.FUNCTION,
+        type: QUERY_BUILDER_FUNCTION_DND_TYPE,
         item: { node: node },
       }),
       [node],
     );
-    // hide default HTML5 preview image
-    useEffect(() => {
-      dragPreviewConnector(getEmptyImage(), { captureDraggingState: true });
-    }, [dragPreviewConnector]);
+    useDragPreviewLayer(dragPreviewConnector);
 
     return (
       <div
@@ -263,6 +214,7 @@ const QueryBuilderFunctionsExplorerTreeNodeContainer = observer(
     ) : (
       <div />
     );
+
     const iconPackageColor = isDependencyTreeNode(node)
       ? 'color--dependency'
       : '';
@@ -278,23 +230,19 @@ const QueryBuilderFunctionsExplorerTreeNodeContainer = observer(
     const selectNode = (): void => {
       onNodeSelect?.(node);
     };
-    const [, dragConnector, dragPreviewConnector] = useDrag(
+    const [, dragConnector, dragPreviewConnector] = useDrag<{
+      node?: QueryBuilderFunctionsExplorerTreeNodeData;
+    }>(
       () => ({
-        type:
-          node.packageableElement instanceof ConcreteFunctionDefinition
-            ? QUERY_BUILDER_FUNCTIONS_EXPLORER_TREE_DND_TYPE.FUNCTION
-            : QUERY_BUILDER_FUNCTIONS_EXPLORER_TREE_DND_TYPE.PACKAGE,
-        item: (): { node?: QueryBuilderFunctionsExplorerTreeNodeData } =>
+        type: QUERY_BUILDER_FUNCTION_DND_TYPE,
+        item: () =>
           node.packageableElement instanceof ConcreteFunctionDefinition
             ? { node }
             : {},
       }),
       [node],
     );
-    // hide default HTML5 preview image
-    useEffect(() => {
-      dragPreviewConnector(getEmptyImage(), { captureDraggingState: true });
-    }, [dragPreviewConnector]);
+    useDragPreviewLayer(dragPreviewConnector);
 
     return (
       <div>
@@ -522,8 +470,16 @@ export const QueryBuilderFunctionsExplorerPanel = observer(
           </div>
         </div>
         <div className="panel__content query-builder__functions-explorer__content">
-          <QueryBuilderFunctionDragLayer
-            queryBuilderState={queryBuilderState}
+          <DragPreviewLayer
+            labelGetter={(
+              item: QueryBuilderFunctionsExplorerDragSource,
+            ): string =>
+              generateFunctionSignature(
+                item.node.packageableElement as ConcreteFunctionDefinition,
+                true,
+              )
+            }
+            types={[QUERY_BUILDER_FUNCTION_DND_TYPE]}
           />
           {((showDependencyFuncions &&
             (!queryFunctionsState.dependencyTreeData ||

package/src/components/QueryBuilderGraphFetchTreePanel.tsx

@@ -16,7 +16,7 @@
 
 import { useCallback } from 'react';
 import { observer } from 'mobx-react-lite';
-import { type DropTargetMonitor, useDrop } from 'react-dnd';
+import { useDrop } from 'react-dnd';
 import {
   type TreeNodeContainerProps,
   clsx,
@@ -27,6 +27,8 @@ import {
   TimesIcon,
   CheckSquareIcon,
   SquareIcon,
+  InfoCircleIcon,
+  PanelDropZone,
 } from '@finos/legend-art';
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
 import { QUERY_BUILDER_TEST_ID } from './QueryBuilder_TestID.js';
@@ -182,6 +184,9 @@ export const QueryBuilderGraphFetchTreeExplorer = observer(
             <div className="panel__content__form__section__toggler__prompt">
               Check graph fetch
             </div>
+            <div className="query-builder-graph-fetch-tree__settings__hint-icon">
+              <InfoCircleIcon title="With this enabled, while executing, violations of constraints will reported as part of the result, rather than causing a failure" />
+            </div>
           </div>
         </div>
         <div className="query-builder-graph-fetch-tree__container">
@@ -222,22 +227,23 @@ export const QueryBuilderGraphFetchTreePanel = observer(
       },
       [graphFetchState],
     );
-    const [{ isPropertyDragOver }, dropConnector] = useDrop(
+    const [{ isDragOver }, dropTargetConnector] = useDrop<
+      QueryBuilderExplorerTreeDragSource,
+      void,
+      { isDragOver: boolean }
+    >(
       () => ({
         accept: [
           QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY,
           QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY,
         ],
-        drop: (
-          item: QueryBuilderExplorerTreeDragSource,
-          monitor: DropTargetMonitor,
-        ): void => {
+        drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
             handleDrop(item);
           } // prevent drop event propagation to accomondate for nested DnD
         },
-        collect: (monitor): { isPropertyDragOver: boolean } => ({
-          isPropertyDragOver: monitor.isOver({ shallow: true }),
+        collect: (monitor) => ({
+          isDragOver: monitor.isOver({ shallow: true }),
         }),
       }),
       [handleDrop],
@@ -246,24 +252,27 @@ export const QueryBuilderGraphFetchTreePanel = observer(
     return (
       <div
         data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_GRAPH_FETCH}
-        className="panel__content dnd__overlay__container"
-        ref={dropConnector}
+        className="panel__content"
       >
-        <div className={clsx({ dnd__overlay: isPropertyDragOver })} />
-        {(!treeData || isGraphFetchTreeDataEmpty(treeData)) && (
-          <BlankPanelPlaceholder
-            placeholderText="Add a graph fetch property"
-            tooltipText="Drag and drop properties here"
-          />
-        )}
-        {treeData && !isGraphFetchTreeDataEmpty(treeData) && (
-          <QueryBuilderGraphFetchTreeExplorer
-            graphFetchState={graphFetchState}
-            treeData={treeData}
-            isReadOnly={false}
-            updateTreeData={updateTreeData}
-          />
-        )}
+        <PanelDropZone
+          isDragOver={isDragOver}
+          dropTargetConnector={dropTargetConnector}
+        >
+          {(!treeData || isGraphFetchTreeDataEmpty(treeData)) && (
+            <BlankPanelPlaceholder
+              text="Add a graph fetch property"
+              tooltipText="Drag and drop properties here"
+            />
+          )}
+          {treeData && !isGraphFetchTreeDataEmpty(treeData) && (
+            <QueryBuilderGraphFetchTreeExplorer
+              graphFetchState={graphFetchState}
+              treeData={treeData}
+              isReadOnly={false}
+              updateTreeData={updateTreeData}
+            />
+          )}
+        </PanelDropZone>
       </div>
     );
   },

package/src/components/QueryBuilderLambdaEditor.tsx

@@ -47,6 +47,7 @@ export const QueryBuilderLambdaEditor = observer(
     disablePopUp?: boolean | undefined;
     useBaseTextEditorSettings?: boolean | undefined;
     hideErrorBar?: boolean | undefined;
+    onEditorFocusEventHandler?: (() => void) | undefined;
   }) => {
     const {
       queryBuilderState,
@@ -62,6 +63,7 @@ export const QueryBuilderLambdaEditor = observer(
       disablePopUp,
       useBaseTextEditorSettings,
       hideErrorBar,
+      onEditorFocusEventHandler,
     } = props;
     const applicationStore = useApplicationStore();
     const backdropSetter = useCallback(
@@ -111,6 +113,7 @@ export const QueryBuilderLambdaEditor = observer(
         useBaseTextEditorSettings={useBaseTextEditorSettings}
         hideErrorBar={hideErrorBar}
         onKeyDownEventHandlers={onKeyDownEventHandlers}
+        onEditorFocusEventHandler={onEditorFocusEventHandler}
       />
     );
   },

package/src/components/QueryBuilderMilestoneEditor.tsx

@@ -18,7 +18,7 @@ import { observer } from 'mobx-react-lite';
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
 import {
   type QueryBuilderParameterDragSource,
-  QUERY_BUILDER_PARAMETER_TREE_DND_TYPE,
+  QUERY_BUILDER_PARAMETER_DND_TYPE,
 } from '../stores/QueryParametersState.js';
 import { useCallback } from 'react';
 import {
@@ -32,9 +32,9 @@ import {
   TYPICAL_MULTIPLICITY_TYPE,
 } from '@finos/legend-graph';
 import { guaranteeNonNullable } from '@finos/legend-shared';
-import { type DropTargetMonitor, useDrop } from 'react-dnd';
+import { useDrop } from 'react-dnd';
 import { VariableExpressionViewer } from './QueryBuilderParameterPanel.js';
-import { Dialog } from '@finos/legend-art';
+import { Dialog, PanelEntryDropZonePlaceholder } from '@finos/legend-art';
 import { generateDefaultValueForPrimitiveType } from '../stores/QueryBuilderValueSpecificationBuilderHelper.js';
 import { BasicValueSpecificationEditor } from '@finos/legend-application';
 
@@ -58,13 +58,14 @@ const MilestoningParameterEditor = observer(
       },
       [queryBuilderState, stereotype],
     );
-    const [{ isMilestoningParameterValueDragOver }, dropConnector] = useDrop(
+    const [{ isMilestoningParameterValueDragOver }, dropConnector] = useDrop<
+      QueryBuilderParameterDragSource,
+      void,
+      { isMilestoningParameterValueDragOver: boolean }
+    >(
       () => ({
-        accept: [QUERY_BUILDER_PARAMETER_TREE_DND_TYPE.VARIABLE],
-        drop: (
-          item: QueryBuilderParameterDragSource,
-          monitor: DropTargetMonitor,
-        ): void => {
+        accept: [QUERY_BUILDER_PARAMETER_DND_TYPE],
+        drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
             handleDrop(item);
           }
@@ -114,32 +115,31 @@ const MilestoningParameterEditor = observer(
         queryBuilderState.querySetupState.setProcessingDate(parameter);
       }
     };
+
     return (
-      <div
-        ref={dropConnector}
-        className="query-builder__parameter-editor dnd__overlay__container"
-      >
-        {isMilestoningParameterValueDragOver && (
-          <div className="query-builder__parameter-editor__node__dnd__overlay">
-            Change Milestoning Parameter Value
-          </div>
-        )}
-        <BasicValueSpecificationEditor
-          valueSpecification={milestoningParameter}
-          graph={queryBuilderState.graphManagerState.graph}
-          setValueSpecification={(val: ValueSpecification): void =>
-            stereotype === MILESTONING_STEREOTYPE.BUSINESS_TEMPORAL
-              ? queryBuilderState.querySetupState.setBusinessDate(val)
-              : queryBuilderState.querySetupState.setProcessingDate(val)
-          }
-          typeCheckOption={{
-            expectedType:
-              queryBuilderState.graphManagerState.graph.getPrimitiveType(
-                PRIMITIVE_TYPE.DATE,
-              ),
-          }}
-          resetValue={resetMilestoningParameter}
-        />
+      <div ref={dropConnector} className="query-builder__parameter-editor">
+        <PanelEntryDropZonePlaceholder
+          showPlaceholder={isMilestoningParameterValueDragOver}
+          label="Change Milestoning Parameter Value"
+          className="query-builder__dnd__placeholder"
+        >
+          <BasicValueSpecificationEditor
+            valueSpecification={milestoningParameter}
+            graph={queryBuilderState.graphManagerState.graph}
+            setValueSpecification={(val: ValueSpecification): void =>
+              stereotype === MILESTONING_STEREOTYPE.BUSINESS_TEMPORAL
+                ? queryBuilderState.querySetupState.setBusinessDate(val)
+                : queryBuilderState.querySetupState.setProcessingDate(val)
+            }
+            typeCheckOption={{
+              expectedType:
+                queryBuilderState.graphManagerState.graph.getPrimitiveType(
+                  PRIMITIVE_TYPE.DATE,
+                ),
+            }}
+            resetValue={resetMilestoningParameter}
+          />
+        </PanelEntryDropZonePlaceholder>
       </div>
     );
   },

package/src/components/QueryBuilderPanelIssueCountBadge.tsx

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { TimesCircleIcon } from '@finos/legend-art';
+
+export const QueryBuilderPanelIssueCountBadge: React.FC<{
+  issues: string[] | undefined;
+}> = (props) => {
+  const { issues } = props;
+  if (!issues) {
+    return null;
+  }
+  const labelText = `${issues.length} issue${issues.length > 1 ? 's' : ''}`;
+  return (
+    <div
+      className="query-builder-panel-issue-count-badge"
+      title={`Found ${labelText}:\n${issues
+        .map((issue) => `\u2022 ${issue}`)
+        .join('\n')}`}
+    >
+      <TimesCircleIcon className="query-builder-panel-issue-count-badge__icon" />
+      {labelText}
+    </div>
+  );
+};

package/src/components/QueryBuilderParameterPanel.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
 import {
@@ -25,12 +26,13 @@ import {
   DollarIcon,
   PlusIcon,
   InputWithInlineValidation,
+  DragPreviewLayer,
+  useDragPreviewLayer,
 } from '@finos/legend-art';
 import {
   type QueryBuilderParameterDragSource,
-  QUERY_BUILDER_PARAMETER_TREE_DND_TYPE,
+  QUERY_BUILDER_PARAMETER_DND_TYPE,
 } from '../stores/QueryParametersState.js';
-import { useEffect, useState } from 'react';
 import {
   type Type,
   MULTIPLICITY_INFINITE,
@@ -46,10 +48,10 @@ import {
   variableExpression_setName,
   LambdaParameterState,
   LambdaParameterValuesEditor,
-  getPackageableElementOptionalFormatter,
+  getPackageableElementOptionFormatter,
+  useApplicationStore,
 } from '@finos/legend-application';
-import { useDrag, useDragLayer } from 'react-dnd';
-import { getEmptyImage } from 'react-dnd-html5-backend';
+import { useDrag } from 'react-dnd';
 import { generateEnumerableNameFromToken } from '@finos/legend-shared';
 import { DEFAULT_VARIABLE_NAME } from '../QueryBuilder_Const.js';
 
@@ -60,6 +62,7 @@ const VariableExpressionEditor = observer(
   }) => {
     // main state
     const { queryBuilderState, lambdaParameterState } = props;
+    const applicationStore = useApplicationStore();
     const queryParametersState = queryBuilderState.queryParametersState;
     const isCreating =
       !queryParametersState.parameterStates.includes(lambdaParameterState);
@@ -145,6 +148,7 @@ const VariableExpressionEditor = observer(
       }
       close();
     };
+
     return (
       <Dialog
         open={Boolean(lambdaParameterState)}
@@ -192,9 +196,9 @@ const VariableExpressionEditor = observer(
                 options={typeOptions}
                 onChange={changeType}
                 value={selectedType}
-                darkMode={true}
-                formatOptionLabel={getPackageableElementOptionalFormatter({
-                  darkMode: true,
+                darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                formatOptionLabel={getPackageableElementOptionFormatter({
+                  darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
                 })}
               />
             </div>
@@ -242,47 +246,6 @@ const VariableExpressionEditor = observer(
   },
 );
 
-const QueryBuilderParameterDragLayer = observer(
-  (props: { queryBuilderState: QueryBuilderState }) => {
-    const { itemType, item, isDragging, currentPosition } = useDragLayer(
-      (monitor) => ({
-        itemType:
-          monitor.getItemType() as QUERY_BUILDER_PARAMETER_TREE_DND_TYPE,
-        item: monitor.getItem<QueryBuilderParameterDragSource | null>(),
-        isDragging: monitor.isDragging(),
-        initialOffset: monitor.getInitialSourceClientOffset(),
-        currentPosition: monitor.getClientOffset(),
-      }),
-    );
-
-    if (
-      !isDragging ||
-      !item ||
-      !Object.values(QUERY_BUILDER_PARAMETER_TREE_DND_TYPE).includes(itemType)
-    ) {
-      return null;
-    }
-    return (
-      <div className="query-builder__parameters__drag-preview-layer">
-        <div
-          className="query-builder__parameters__drag-preview"
-          style={
-            !currentPosition
-              ? { display: 'none' }
-              : {
-                  transform: `translate(${currentPosition.x + 20}px, ${
-                    currentPosition.y + 10
-                  }px)`,
-                }
-          }
-        >
-          {item.variable.variableName}
-        </div>
-      </div>
-    );
-  },
-);
-
 export const VariableExpressionViewer = observer(
   (props: {
     queryBuilderState: QueryBuilderState;
@@ -301,18 +264,23 @@ export const VariableExpressionViewer = observer(
       queryParameterState.removeParameter(variableExpressionState);
     const [, dragConnector, dragPreviewConnector] = useDrag(
       () => ({
-        type: QUERY_BUILDER_PARAMETER_TREE_DND_TYPE.VARIABLE,
+        type: QUERY_BUILDER_PARAMETER_DND_TYPE,
         item: { variable: variableExpressionState },
       }),
       [variableExpressionState],
     );
-    // hide default HTML5 preview image
-    useEffect(() => {
-      dragPreviewConnector(getEmptyImage(), { captureDraggingState: true });
-    }, [dragPreviewConnector]);
+    useDragPreviewLayer(dragPreviewConnector);
+
     return (
       <div className="query-builder__parameters__parameter" ref={dragConnector}>
-        <QueryBuilderParameterDragLayer queryBuilderState={queryBuilderState} />
+        <DragPreviewLayer
+          labelGetter={(item: QueryBuilderParameterDragSource): string =>
+            item.variable.variableName === ''
+              ? '(unknown)'
+              : item.variable.variableName
+          }
+          types={[QUERY_BUILDER_PARAMETER_DND_TYPE]}
+        />
         <div className="query-builder__parameters__parameter__content">
           <div className="query-builder__parameters__parameter__icon">
             <div className="query-builder__parameters__parameter-icon">