@finos/legend-application-query 5.1.0 → 5.2.1

package/src/components/QueryBuilderExplorerPanel.tsx

@@ -46,6 +46,8 @@ import {
   CheckIcon,
   SearchIcon,
   PanelLoadingIndicator,
+  DragPreviewLayer,
+  useDragPreviewLayer,
 } from '@finos/legend-art';
 import {
   type QueryBuilderExplorerTreeDragSource,
@@ -58,9 +60,8 @@ import {
   getQueryBuilderPropertyNodeData,
   getQueryBuilderSubTypeNodeData,
 } from '../stores/QueryBuilderExplorerState.js';
-import { useDrag, useDragLayer } from 'react-dnd';
+import { useDrag } from 'react-dnd';
 import { QueryBuilderPropertyInfoTooltip } from './QueryBuilderPropertyInfoTooltip.js';
-import { getEmptyImage } from 'react-dnd-html5-backend';
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
 import { addQueryBuilderPropertyNode } from '../stores/QueryBuilderGraphFetchTreeUtil.js';
 import { QueryBuilderSimpleProjectionColumnState } from '../stores/QueryBuilderProjectionState.js';
@@ -233,51 +234,6 @@ const QueryBuilderExplorerPreviewDataModal = observer(
   },
 );
 
-const QueryBuilderExplorerPropertyDragLayer = observer(
-  (props: { queryBuilderState: QueryBuilderState }) => {
-    const { queryBuilderState } = props;
-    const explorerState = queryBuilderState.explorerState;
-    const { itemType, item, isDragging, currentPosition } = useDragLayer(
-      (monitor) => ({
-        itemType: monitor.getItemType() as QUERY_BUILDER_EXPLORER_TREE_DND_TYPE,
-        item: monitor.getItem<QueryBuilderExplorerTreeDragSource | null>(),
-        isDragging: monitor.isDragging(),
-        initialOffset: monitor.getInitialSourceClientOffset(),
-        currentPosition: monitor.getClientOffset(),
-      }),
-    );
-
-    if (
-      !isDragging ||
-      !item ||
-      !Object.values(QUERY_BUILDER_EXPLORER_TREE_DND_TYPE).includes(itemType)
-    ) {
-      return null;
-    }
-    return (
-      <div className="query-builder-explorer-tree__drag-preview-layer">
-        <div
-          className="query-builder-explorer-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)`,
-                }
-          }
-        >
-          {explorerState.humanizePropertyName
-            ? prettyPropertyName(item.node.label)
-            : item.node.label}
-        </div>
-      </div>
-    );
-  },
-);
-
 const QueryBuilderExplorerContextMenu = observer(
   forwardRef<
     HTMLDivElement,
@@ -442,7 +398,9 @@ const QueryBuilderExplorerTreeNodeContainer = observer(
       useState(false);
     const applicationStore = useApplicationStore();
     const explorerState = queryBuilderState.explorerState;
-    const [, dragConnector, dragPreviewConnector] = useDrag(
+    const [, dragConnector, dragPreviewConnector] = useDrag<{
+      node?: QueryBuilderExplorerTreePropertyNodeData;
+    }>(
       () => ({
         type:
           node instanceof QueryBuilderExplorerTreePropertyNodeData
@@ -452,13 +410,15 @@ const QueryBuilderExplorerTreeNodeContainer = observer(
               ? QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.CLASS_PROPERTY
               : QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY
             : QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ROOT,
-        item: (): { node?: QueryBuilderExplorerTreePropertyNodeData } =>
+        item: () =>
           node instanceof QueryBuilderExplorerTreePropertyNodeData
             ? { node }
             : {},
       }),
       [node],
     );
+    useDragPreviewLayer(dragPreviewConnector);
+
     const isExpandable = Boolean(node.childrenIds.length);
     const isDerivedProperty =
       node instanceof QueryBuilderExplorerTreePropertyNodeData &&
@@ -506,10 +466,6 @@ const QueryBuilderExplorerTreeNodeContainer = observer(
         ).catch(applicationStore.alertUnhandledError);
       }
     };
-    // hide default HTML5 preview image
-    useEffect(() => {
-      dragPreviewConnector(getEmptyImage(), { captureDraggingState: true });
-    }, [dragPreviewConnector]);
 
     if (!node.mappingData.mapped && !explorerState.showUnmappedProperties) {
       return null;
@@ -595,7 +551,7 @@ const QueryBuilderExplorerTreeNodeContainer = observer(
               >
                 <div
                   className={clsx(
-                    'query-builder-explorer-tree__node__label--property--name',
+                    'query-builder-explorer-tree__node__label--property__name',
                     {
                       'query-builder-explorer-tree__node__label--deprecated':
                         checkForDeprecatedNode(
@@ -968,8 +924,13 @@ export const QueryBuilderExplorerPanel = observer(
               explorerState.mappingModelCoverageAnalysisState.isInProgress
             }
           />
-          <QueryBuilderExplorerPropertyDragLayer
-            queryBuilderState={queryBuilderState}
+          <DragPreviewLayer
+            labelGetter={(item: QueryBuilderExplorerTreeDragSource): string =>
+              explorerState.humanizePropertyName
+                ? prettyPropertyName(item.node.label)
+                : item.node.label
+            }
+            types={Object.values(QUERY_BUILDER_EXPLORER_TREE_DND_TYPE)}
           />
           {explorerState.mappingModelCoverageAnalysisState.isInProgress ? (
             <BlankPanelContent>

package/src/components/QueryBuilderFetchStructurePanel.tsx

@@ -34,6 +34,7 @@ import {
 } from '@finos/legend-application';
 import { QueryBuilderProjectionState } from '../stores/QueryBuilderProjectionState.js';
 import { QueryBuilderGraphFetchTreeState } from '../stores/QueryBuilderGraphFetchTreeState.js';
+import { QueryBuilderPanelIssueCountBadge } from './QueryBuilderPanelIssueCountBadge.js';
 
 const QueryBuilderUnsupportedFetchStructure = observer(
   (props: { mode: FETCH_STRUCTURE_MODE }) => {
@@ -89,87 +90,96 @@ export const QueryBuilderFetchStructurePanel = observer(
     const onChangeFetchStructureMode =
       (fetchMode: FETCH_STRUCTURE_MODE): (() => void) =>
       (): void => {
+        const reset = (): void => {
+          fetchStructureState.setFetchStructureMode(fetchMode);
+          queryBuilderState.changeFetchStructure();
+          queryBuilderState.postFilterState = new QueryBuilderPostFilterState(
+            queryBuilderState,
+            queryBuilderState.postFilterOperators,
+          );
+          queryBuilderState.setShowPostFilterPanel(false);
+        };
         if (fetchStructureState.fetchStructureMode !== fetchMode) {
-          if (
-            fetchMode === FETCH_STRUCTURE_MODE.GRAPH_FETCH &&
-            queryBuilderState.fetchStructureState.projectionState.columns
-              .length > 0
-          ) {
-            applicationStore.setActionAlertInfo({
-              message:
-                queryBuilderState.showPostFilterPanel &&
-                queryBuilderState.postFilterState.nodes.size > 0
-                  ? 'With graph fetch, post filter is not supported. Current projection columns and post filters will be lost when switching to the graph fetch panel. Do you still want to proceed?'
-                  : 'Current projection columns will be lost when switching to the graph fetch panel. Do you still want to proceed?',
-              type: ActionAlertType.CAUTION,
-              actions: [
-                {
-                  label: 'Proceed',
-                  type: ActionAlertActionType.PROCEED_WITH_CAUTION,
-                  handler: applicationStore.guardUnhandledError(async () => {
-                    fetchStructureState.setFetchStructureMode(fetchMode);
-                    queryBuilderState.changeFetchStructure();
-                    queryBuilderState.fetchStructureState.projectionState =
-                      new QueryBuilderProjectionState(
-                        queryBuilderState,
-                        queryBuilderState.fetchStructureState.projectionState.aggregationState.operators,
-                      );
-                    queryBuilderState.postFilterState =
-                      new QueryBuilderPostFilterState(
-                        queryBuilderState,
-                        queryBuilderState.postFilterOperators,
-                      );
-                    queryBuilderState.setShowPostFilterPanel(false);
-                  }),
-                },
-                {
-                  label: 'Cancel',
-                  type: ActionAlertActionType.PROCEED,
-                  default: true,
-                },
-              ],
-            });
-          } else if (
-            fetchMode === FETCH_STRUCTURE_MODE.PROJECTION &&
-            queryBuilderState.fetchStructureState.graphFetchTreeState.treeData
-              ?.rootIds.length
-          ) {
-            applicationStore.setActionAlertInfo({
-              message:
-                'Current graph fetch nodes will be lost when switching to the projection panel. Do you still want to proceed?',
-              type: ActionAlertType.CAUTION,
-              actions: [
-                {
-                  label: 'Proceed',
-                  type: ActionAlertActionType.PROCEED_WITH_CAUTION,
-                  handler: applicationStore.guardUnhandledError(async () => {
-                    fetchStructureState.setFetchStructureMode(fetchMode);
-                    queryBuilderState.changeFetchStructure();
-                    queryBuilderState.fetchStructureState.graphFetchTreeState =
-                      new QueryBuilderGraphFetchTreeState(queryBuilderState);
-                    queryBuilderState.postFilterState =
-                      new QueryBuilderPostFilterState(
-                        queryBuilderState,
-                        queryBuilderState.postFilterOperators,
-                      );
-                    queryBuilderState.setShowPostFilterPanel(false);
-                  }),
-                },
-                {
-                  label: 'Cancel',
-                  type: ActionAlertActionType.PROCEED,
-                  default: true,
-                },
-              ],
-            });
-          } else {
-            fetchStructureState.setFetchStructureMode(fetchMode);
-            queryBuilderState.changeFetchStructure();
-            queryBuilderState.postFilterState = new QueryBuilderPostFilterState(
-              queryBuilderState,
-              queryBuilderState.postFilterOperators,
-            );
-            queryBuilderState.setShowPostFilterPanel(false);
+          switch (fetchMode) {
+            case FETCH_STRUCTURE_MODE.GRAPH_FETCH: {
+              if (
+                queryBuilderState.fetchStructureState.projectionState.columns
+                  .length > 0
+                // NOTE: here we could potentially check for the presence of post-filter as well
+                // but we make the assumption that if there is no projection column, there should
+                // not be any post-filter at all
+              ) {
+                applicationStore.setActionAlertInfo({
+                  message:
+                    queryBuilderState.showPostFilterPanel &&
+                    queryBuilderState.postFilterState.nodes.size > 0
+                      ? 'With graph-fetch mode, post filter is not supported. Current projection columns and post filters will be lost when switching to the graph-fetch mode. Do you still want to proceed?'
+                      : 'Current projection columns will be lost when switching to the graph-fetch mode. Do you still want to proceed?',
+                  type: ActionAlertType.CAUTION,
+                  actions: [
+                    {
+                      label: 'Proceed',
+                      type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+                      handler: applicationStore.guardUnhandledError(
+                        async () => {
+                          queryBuilderState.fetchStructureState.projectionState =
+                            new QueryBuilderProjectionState(
+                              queryBuilderState,
+                              queryBuilderState.fetchStructureState.projectionState.aggregationState.operators,
+                            );
+                          reset();
+                        },
+                      ),
+                    },
+                    {
+                      label: 'Cancel',
+                      type: ActionAlertActionType.PROCEED,
+                      default: true,
+                    },
+                  ],
+                });
+              } else {
+                reset();
+              }
+              return;
+            }
+            case FETCH_STRUCTURE_MODE.PROJECTION: {
+              if (
+                queryBuilderState.fetchStructureState.graphFetchTreeState
+                  .treeData?.rootIds.length
+              ) {
+                applicationStore.setActionAlertInfo({
+                  message:
+                    'Current graph-fetch will be lost when switching to projection mode. Do you still want to proceed?',
+                  type: ActionAlertType.CAUTION,
+                  actions: [
+                    {
+                      label: 'Proceed',
+                      type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+                      handler: applicationStore.guardUnhandledError(
+                        async () => {
+                          queryBuilderState.fetchStructureState.graphFetchTreeState =
+                            new QueryBuilderGraphFetchTreeState(
+                              queryBuilderState,
+                            );
+                          reset();
+                        },
+                      ),
+                    },
+                    {
+                      label: 'Cancel',
+                      type: ActionAlertActionType.PROCEED,
+                      default: true,
+                    },
+                  ],
+                });
+              } else {
+                reset();
+              }
+              return;
+            }
+            default:
+              return;
           }
         }
       };
@@ -179,6 +189,9 @@ export const QueryBuilderFetchStructurePanel = observer(
         <div className="panel__header">
           <div className="panel__header__title">
             <div className="panel__header__title__label">fetch structure</div>
+            <QueryBuilderPanelIssueCountBadge
+              issues={fetchStructureState.validationIssues}
+            />
           </div>
           <div className="panel__header__actions">
             {fetchStructureStateMode === FETCH_STRUCTURE_MODE.PROJECTION && (