@finos/legend-application-query 5.1.0 → 5.2.1

package/src/components/QueryBuilderPostFilterPanel.tsx

@@ -47,6 +47,10 @@ import {
   ToggleIcon,
   HashtagIcon,
   ClockIcon,
+  PanelDropZone,
+  DragPreviewLayer,
+  PanelEntryDropZonePlaceholder,
+  useDragPreviewLayer,
 } from '@finos/legend-art';
 import {
   type Type,
@@ -65,21 +69,8 @@ import {
 } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import {
-  type DropTargetMonitor,
-  useDragLayer,
-  useDrop,
-  useDrag,
-} from 'react-dnd';
-import { getEmptyImage } from 'react-dnd-html5-backend';
+import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import { useDrop, useDrag } from 'react-dnd';
 import { getColumnMultiplicity } from '../stores/postFilterOperators/QueryBuilderPostFilterOperatorHelper.js';
 import { QueryBuilderAggregateColumnState } from '../stores/QueryBuilderAggregationState.js';
 import {
@@ -100,55 +91,16 @@ import {
 import {
   type QueryBuilderProjectionColumnState,
   type QueryBuilderProjectionColumnDragSource,
-  QUERY_BUILDER_PROJECTION_DND_TYPE,
+  QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
   QueryBuilderDerivationProjectionColumnState,
 } from '../stores/QueryBuilderProjectionState.js';
 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 { QUERY_BUILDER_TEST_ID } from './QueryBuilder_TestID.js';
 
-const PostFilterConditionDragLayer: React.FC = () => {
-  const { itemType, item, isDragging, currentPosition } = useDragLayer(
-    (monitor) => ({
-      itemType: monitor.getItemType() as QUERY_BUILDER_POST_FILTER_DND_TYPE,
-      item: monitor.getItem<QueryBuilderPostFilterConditionDragSource | null>(),
-      isDragging: monitor.isDragging(),
-      initialOffset: monitor.getInitialSourceClientOffset(),
-      currentPosition: monitor.getClientOffset(),
-    }),
-  );
-
-  if (
-    !isDragging ||
-    !item ||
-    !Object.values(QUERY_BUILDER_POST_FILTER_DND_TYPE).includes(itemType)
-  ) {
-    return null;
-  }
-  return (
-    <div className="query-builder-post-filter-tree__drag-preview-layer">
-      <div
-        className="query-builder-post-filter-tree__drag-preview"
-        // added some offset so the mouse doesn't overlap the label too much
-        style={
-          !currentPosition
-            ? { display: 'none' }
-            : {
-                transform: `translate(${currentPosition.x + 20}px, ${
-                  currentPosition.y + 10
-                }px)`,
-              }
-        }
-      >
-        {item.node.dragLayerLabel}
-      </div>
-    </div>
-  );
-};
-
 const QueryBuilderPostFilterConditionContextMenu = observer(
   forwardRef<
     HTMLDivElement,
@@ -203,9 +155,9 @@ const QueryBuilderPostFilterConditionContextMenu = observer(
 const QueryBuilderPostFilterGroupConditionEditor = observer(
   (props: {
     node: QueryBuilderPostFilterTreeGroupNodeData;
-    isPropertyDragOver: boolean;
+    isDragOver: boolean;
   }) => {
-    const { node, isPropertyDragOver } = props;
+    const { node, isDragOver } = props;
     const switchOperation: React.MouseEventHandler<HTMLDivElement> = (
       event,
     ): void => {
@@ -217,29 +169,30 @@ const QueryBuilderPostFilterGroupConditionEditor = observer(
       );
     };
     return (
-      <div className="query-builder-post-filter-tree__node__label__content dnd__overlay__container">
-        {isPropertyDragOver && (
-          <div className="query-builder-post-filter-tree__node__dnd__overlay">
-            Add to Logical Group
-          </div>
-        )}
-        <div
-          className={clsx('query-builder-post-filter-tree__group-node', {
-            'query-builder-post-filter-tree__group-node--and':
-              node.groupOperation === QUERY_BUILDER_GROUP_OPERATION.AND,
-            'query-builder-post-filter-tree__group-node--or':
-              node.groupOperation === QUERY_BUILDER_GROUP_OPERATION.OR,
-          })}
-          title="Switch Operation"
-          onClick={switchOperation}
+      <div className="query-builder-post-filter-tree__node__label__content">
+        <PanelEntryDropZonePlaceholder
+          showPlaceholder={isDragOver}
+          label="Add to Logical Group"
+          className="query-builder__dnd__placeholder"
         >
-          <div className="query-builder-post-filter-tree__group-node__label">
-            {node.groupOperation}
+          <div
+            className={clsx('query-builder-post-filter-tree__group-node', {
+              'query-builder-post-filter-tree__group-node--and':
+                node.groupOperation === QUERY_BUILDER_GROUP_OPERATION.AND,
+              'query-builder-post-filter-tree__group-node--or':
+                node.groupOperation === QUERY_BUILDER_GROUP_OPERATION.OR,
+            })}
+            title="Switch Operation"
+            onClick={switchOperation}
+          >
+            <div className="query-builder-post-filter-tree__group-node__label">
+              {node.groupOperation}
+            </div>
+            <button className="query-builder-post-filter-tree__group-node__action">
+              <FilledTriangleIcon />
+            </button>
           </div>
-          <button className="query-builder-post-filter-tree__group-node__action">
-            <FilledTriangleIcon />
-          </button>
-        </div>
+        </PanelEntryDropZonePlaceholder>
       </div>
     );
   },
@@ -344,22 +297,23 @@ export const QueryBuilderColumnBadge = observer(
         onColumnChange(item.columnState),
       [onColumnChange],
     );
-    const [{ isPropertyDragOver }, dropConnector] = useDrop(
+    const [{ isDragOver }, dropConnector] = useDrop<
+      QueryBuilderProjectionColumnDragSource,
+      void,
+      { isDragOver: boolean }
+    >(
       () => ({
-        accept: [QUERY_BUILDER_PROJECTION_DND_TYPE.PROJECTION_COLUMN],
-        drop: (
-          item: QueryBuilderProjectionColumnDragSource,
-          monitor: DropTargetMonitor,
-        ): void => {
+        accept: [QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE],
+        drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
             handleDrop(item).catch(
               postFilterConditionState.postFilterState.queryBuilderState
                 .applicationStore.alertUnhandledError,
             );
-          }
+          } // 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],
@@ -367,12 +321,11 @@ export const QueryBuilderColumnBadge = observer(
 
     return (
       <div ref={dropConnector} className="query-builder-column-badge">
-        {isPropertyDragOver && (
-          <div className="query-builder__dnd__placeholder query-builder-column-badge__dnd__placeholder">
-            Change Property
-          </div>
-        )}
-        {!isPropertyDragOver && (
+        <PanelEntryDropZonePlaceholder
+          showPlaceholder={isDragOver}
+          label="Change Property"
+          className="query-builder__dnd__placeholder"
+        >
           <div className="query-builder-column-badge__content">
             {type && (
               <div
@@ -403,7 +356,7 @@ export const QueryBuilderColumnBadge = observer(
               </div>
             </QueryBuilderColumnInfoTooltip>
           </div>
-        )}
+        </PanelEntryDropZonePlaceholder>
       </div>
     );
   },
@@ -411,9 +364,9 @@ export const QueryBuilderColumnBadge = observer(
 const QueryBuilderPostFilterConditionEditor = observer(
   (props: {
     node: QueryBuilderPostFilterTreeConditionNodeData;
-    isPropertyDragOver: boolean;
+    isDragOver: boolean;
   }) => {
-    const { node, isPropertyDragOver } = props;
+    const { node, isDragOver } = props;
     const graph =
       node.condition.postFilterState.queryBuilderState.graphManagerState.graph;
     const applicationStore = useApplicationStore();
@@ -452,18 +405,19 @@ const QueryBuilderPostFilterConditionEditor = observer(
       },
       [applicationStore, node.condition],
     );
-    const [{ isFilterValueDragOver }, dropConnector] = useDrop(
+    const [{ isFilterValueDragOver }, dropConnector] = useDrop<
+      QueryBuilderParameterDragSource,
+      void,
+      { isFilterValueDragOver: 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);
-          }
+          } // prevent drop event propagation to accomondate for nested DnD
         },
-        collect: (monitor): { isFilterValueDragOver: boolean } => ({
+        collect: (monitor) => ({
           isFilterValueDragOver: monitor.isOver({ shallow: true }),
         }),
       }),
@@ -496,76 +450,78 @@ const QueryBuilderPostFilterConditionEditor = observer(
     };
 
     return (
-      <div className="query-builder-post-filter-tree__node__label__content dnd__overlay__container">
-        {isPropertyDragOver && (
-          <div className="query-builder-post-filter-tree__node__dnd__overlay">
-            Add New Logical Group
-          </div>
-        )}
-        <div className="query-builder-post-filter-tree__condition-node">
-          <div className="query-builder-post-filter-tree__condition-node__property">
-            <QueryBuilderColumnBadge
-              postFilterConditionState={node.condition}
-              onColumnChange={changeColumn}
-            />
-          </div>
-          <DropdownMenu
-            className="query-builder-post-filter-tree__condition-node__operator"
-            content={
-              <MenuContent>
-                {node.condition.operators.map((op) => (
-                  <MenuContentItem
-                    key={op.uuid}
-                    className="query-builder-post-filter-tree__condition-node__operator__dropdown__option"
-                    onClick={changeOperator(op)}
-                  >
-                    {op.getLabel()}
-                  </MenuContentItem>
-                ))}
-              </MenuContent>
-            }
-            menuProps={{
-              anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
-              transformOrigin: { vertical: 'top', horizontal: 'left' },
-              elevation: 7,
-            }}
-          >
-            <div className="query-builder-post-filter-tree__condition-node__operator__label">
-              {node.condition.operator.getLabel()}
-            </div>
-            <button
-              className="query-builder-post-filter-tree__condition-node__operator__dropdown__trigger"
-              tabIndex={-1}
-              title="Choose Operator..."
-            >
-              <CaretDownIcon />
-            </button>
-          </DropdownMenu>
-          {node.condition.value && (
-            <div
-              ref={dropConnector}
-              className="query-builder-post-filter-tree__condition-node__value dnd__overlay__container"
-            >
-              {isFilterValueDragOver && (
-                <div className="query-builder-post-filter-tree__node__dnd__overlay">
-                  Change Filter Value
-                </div>
-              )}
-              <BasicValueSpecificationEditor
-                valueSpecification={node.condition.value}
-                setValueSpecification={changeValueSpecification}
-                graph={graph}
-                typeCheckOption={{
-                  expectedType: guaranteeNonNullable(
-                    node.condition.columnState.getReturnType(),
-                  ),
-                }}
-                resetValue={resetNode}
-                selectorConfig={selectorConfig}
+      <div className="query-builder-post-filter-tree__node__label__content">
+        <PanelEntryDropZonePlaceholder
+          showPlaceholder={isDragOver}
+          label="Add New Logical Group"
+          className="query-builder__dnd__placeholder"
+        >
+          <div className="query-builder-post-filter-tree__condition-node">
+            <div className="query-builder-post-filter-tree__condition-node__property">
+              <QueryBuilderColumnBadge
+                postFilterConditionState={node.condition}
+                onColumnChange={changeColumn}
               />
             </div>
-          )}
-        </div>
+            <DropdownMenu
+              className="query-builder-post-filter-tree__condition-node__operator"
+              content={
+                <MenuContent>
+                  {node.condition.operators.map((op) => (
+                    <MenuContentItem
+                      key={op.uuid}
+                      className="query-builder-post-filter-tree__condition-node__operator__dropdown__option"
+                      onClick={changeOperator(op)}
+                    >
+                      {op.getLabel()}
+                    </MenuContentItem>
+                  ))}
+                </MenuContent>
+              }
+              menuProps={{
+                anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
+                transformOrigin: { vertical: 'top', horizontal: 'left' },
+                elevation: 7,
+              }}
+            >
+              <div className="query-builder-post-filter-tree__condition-node__operator__label">
+                {node.condition.operator.getLabel()}
+              </div>
+              <button
+                className="query-builder-post-filter-tree__condition-node__operator__dropdown__trigger"
+                tabIndex={-1}
+                title="Choose Operator..."
+              >
+                <CaretDownIcon />
+              </button>
+            </DropdownMenu>
+            {node.condition.value && (
+              <div
+                ref={dropConnector}
+                className="query-builder-post-filter-tree__condition-node__value"
+              >
+                <PanelEntryDropZonePlaceholder
+                  showPlaceholder={isFilterValueDragOver}
+                  label="Change Filter Value"
+                  className="query-builder__dnd__placeholder"
+                >
+                  <BasicValueSpecificationEditor
+                    valueSpecification={node.condition.value}
+                    setValueSpecification={changeValueSpecification}
+                    graph={graph}
+                    typeCheckOption={{
+                      expectedType: guaranteeNonNullable(
+                        node.condition.columnState.getReturnType(),
+                      ),
+                    }}
+                    resetValue={resetNode}
+                    selectorConfig={selectorConfig}
+                  />
+                </PanelEntryDropZonePlaceholder>
+              </div>
+            )}
+          </div>
+        </PanelEntryDropZonePlaceholder>
       </div>
     );
   },
@@ -574,17 +530,20 @@ const QueryBuilderPostFilterConditionEditor = observer(
 const QueryBuilderPostFilterBlankConditionEditor = observer(
   (props: {
     node: QueryBuilderPostFilterTreeBlankConditionNodeData;
-    isPropertyDragOver: boolean;
+    isDragOver: boolean;
   }) => {
-    const { isPropertyDragOver } = props;
+    const { isDragOver } = props;
     return (
-      <div className="query-builder-post-filter-tree__node__label__content dnd__overlay__container">
-        {isPropertyDragOver && (
-          <div className="query-builder-post-filter-tree__node__dnd__overlay">
-            Create Condition
+      <div className="query-builder-post-filter-tree__node__label__content">
+        <PanelEntryDropZonePlaceholder
+          showPlaceholder={isDragOver}
+          label="Create Condition"
+          className="query-builder__dnd__placeholder"
+        >
+          <div className="query-builder-post-filter-tree__blank-node">
+            blank
           </div>
-        )}
-        <div className="query-builder-post-filter-tree__blank-node">blank</div>
+        </PanelEntryDropZonePlaceholder>
       </div>
     );
   },
@@ -614,7 +573,7 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
       postFilterState.removeNodeAndPruneBranch(node);
     const handleDrop = useCallback(
       (item: QueryBuilderPostFilterDropTarget, type: string): void => {
-        if (type === QUERY_BUILDER_PROJECTION_DND_TYPE.PROJECTION_COLUMN) {
+        if (type === QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE) {
           const columnState = (item as QueryBuilderProjectionColumnDragSource)
             .columnState;
           let conditionState: PostFilterConditionState;
@@ -669,45 +628,45 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
       },
       [applicationStore, postFilterState, node],
     );
-    const [{ isPropertyDragOver }, dropConnector] = useDrop(
+    const [{ isDragOver }, dropConnector] = useDrop<
+      QueryBuilderPostFilterConditionDragSource,
+      void,
+      { isDragOver: boolean }
+    >(
       () => ({
         accept: [
           ...Object.values(QUERY_BUILDER_POST_FILTER_DND_TYPE),
-          QUERY_BUILDER_PROJECTION_DND_TYPE.PROJECTION_COLUMN,
+          QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
         ],
-        drop: (
-          item: QueryBuilderPostFilterConditionDragSource,
-          monitor: DropTargetMonitor,
-        ): void => {
+        drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
             handleDrop(item, monitor.getItemType() as string);
           } // 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],
     );
 
-    const [, dragConnector, dragPreviewConnector] = useDrag(
-      () => ({
-        type:
-          node instanceof QueryBuilderPostFilterTreeGroupNodeData
-            ? QUERY_BUILDER_POST_FILTER_DND_TYPE.GROUP_CONDITION
-            : node instanceof QueryBuilderPostFilterTreeConditionNodeData
-            ? QUERY_BUILDER_POST_FILTER_DND_TYPE.CONDITION
-            : QUERY_BUILDER_POST_FILTER_DND_TYPE.BLANK_CONDITION,
-        item: (): QueryBuilderPostFilterConditionDragSource => ({ node }),
-        end: (): void => postFilterState.setRearrangingConditions(false),
-      }),
-      [node, postFilterState],
-    );
+    const [, dragConnector, dragPreviewConnector] =
+      useDrag<QueryBuilderPostFilterConditionDragSource>(
+        () => ({
+          type:
+            node instanceof QueryBuilderPostFilterTreeGroupNodeData
+              ? QUERY_BUILDER_POST_FILTER_DND_TYPE.GROUP_CONDITION
+              : node instanceof QueryBuilderPostFilterTreeConditionNodeData
+              ? QUERY_BUILDER_POST_FILTER_DND_TYPE.CONDITION
+              : QUERY_BUILDER_POST_FILTER_DND_TYPE.BLANK_CONDITION,
+          item: () => ({ node }),
+          end: (): void => postFilterState.setRearrangingConditions(false),
+        }),
+        [node, postFilterState],
+      );
     dragConnector(dropConnector(ref));
-    // hide default HTML5 preview image
-    useEffect(() => {
-      dragPreviewConnector(getEmptyImage(), { captureDraggingState: true });
-    }, [dragPreviewConnector]);
+    useDragPreviewLayer(dragPreviewConnector);
+
     // context menu
     const onContextMenuOpen = (): void => setIsSelectedFromContextMenu(true);
     const onContextMenuClose = (): void => setIsSelectedFromContextMenu(false);
@@ -766,20 +725,20 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
               {node instanceof QueryBuilderPostFilterTreeGroupNodeData && (
                 <QueryBuilderPostFilterGroupConditionEditor
                   node={node}
-                  isPropertyDragOver={isPropertyDragOver}
+                  isDragOver={isDragOver}
                 />
               )}
               {node instanceof QueryBuilderPostFilterTreeConditionNodeData && (
                 <QueryBuilderPostFilterConditionEditor
                   node={node}
-                  isPropertyDragOver={isPropertyDragOver}
+                  isDragOver={isDragOver}
                 />
               )}
               {node instanceof
                 QueryBuilderPostFilterTreeBlankConditionNodeData && (
                 <QueryBuilderPostFilterBlankConditionEditor
                   node={node}
-                  isPropertyDragOver={isPropertyDragOver}
+                  isDragOver={isDragOver}
                 />
               )}
             </div>
@@ -987,21 +946,22 @@ export const QueryBuilderPostFilterPanel = observer(
           .columns,
       ],
     );
-    const [{ isPropertyDragOver }, dropConnector] = useDrop(
+    const [{ isDragOver }, dropTargetConnector] = useDrop<
+      QueryBuilderProjectionColumnDragSource,
+      void,
+      { isDragOver: boolean }
+    >(
       () => ({
-        accept: [QUERY_BUILDER_PROJECTION_DND_TYPE.PROJECTION_COLUMN],
-        drop: (
-          item: QueryBuilderProjectionColumnDragSource,
-          monitor: DropTargetMonitor,
-        ): void => {
+        accept: [QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE],
+        drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
             handleDrop(item).catch(
               queryBuilderState.applicationStore.alertUnhandledError,
             );
           } // 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],
@@ -1081,25 +1041,31 @@ export const QueryBuilderPostFilterPanel = observer(
             </button>
           </div>
         </div>
-        <div
-          className="panel__content query-builder__filter__content dnd__overlay__container"
-          ref={dropConnector}
-        >
-          <div className={clsx({ dnd__overlay: isPropertyDragOver })} />
-          {postFilterState.isEmpty && (
-            <BlankPanelPlaceholder
-              placeholderText="Add a post-filter condition"
-              tooltipText="Drag and drop properties here"
-            />
-          )}
-          {!postFilterState.isEmpty && (
-            <>
-              <PostFilterConditionDragLayer />
-              <QueryBuilderPostFilterTree
-                queryBuilderState={queryBuilderState}
+        <div className="panel__content query-builder__filter__content">
+          <PanelDropZone
+            isDragOver={isDragOver}
+            dropTargetConnector={dropTargetConnector}
+          >
+            {postFilterState.isEmpty && (
+              <BlankPanelPlaceholder
+                text="Add a post-filter condition"
+                tooltipText="Drag and drop properties here"
               />
-            </>
-          )}
+            )}
+            {!postFilterState.isEmpty && (
+              <>
+                <DragPreviewLayer
+                  labelGetter={(
+                    item: QueryBuilderPostFilterConditionDragSource,
+                  ): string => item.node.dragPreviewLabel}
+                  types={Object.values(QUERY_BUILDER_POST_FILTER_DND_TYPE)}
+                />
+                <QueryBuilderPostFilterTree
+                  queryBuilderState={queryBuilderState}
+                />
+              </>
+            )}
+          </PanelDropZone>
         </div>
       </div>
     );