@finos/legend-application-studio 13.0.3 → 13.1.2

package/src/components/editor/edit-panel/external-format-editor/BindingElementEditor.tsx

@@ -25,6 +25,7 @@ import {
   ResizablePanelSplitterLine,
   TimesIcon,
   LockIcon,
+  PanelDropZone,
 } from '@finos/legend-art';
 import {
   filterByType,
@@ -121,7 +122,11 @@ const BindingScopeEditor = observer(
       handleDropElement,
       isReadOnly,
     } = props;
-    const [{ isElementDragOver }, dropElementRef] = useDrop(
+    const [{ isElementDragOver }, dropElementRef] = useDrop<
+      ElementDragSource,
+      void,
+      { isElementDragOver: boolean }
+    >(
       () => ({
         accept: [
           CORE_DND_TYPE.PROJECT_EXPLORER_ENUMERATION,
@@ -131,8 +136,8 @@ const BindingScopeEditor = observer(
           CORE_DND_TYPE.PROJECT_EXPLORER_ASSOCIATION,
           CORE_DND_TYPE.PROJECT_EXPLORER_FUNCTION,
         ],
-        drop: (item: ElementDragSource): void => handleDropElement(item),
-        collect: (monitor): { isElementDragOver: boolean } => ({
+        drop: (item) => handleDropElement(item),
+        collect: (monitor) => ({
           isElementDragOver: monitor.isOver({ shallow: true }),
         }),
       }),
@@ -141,38 +146,37 @@ const BindingScopeEditor = observer(
 
     return (
       <div className="binding-scope-editor">
-        <div
-          ref={dropElementRef}
-          className="binding-scope-editor__panel__content dnd__overlay__container"
-        >
-          <div
-            className={clsx({ dnd__overlay: isElementDragOver && !isReadOnly })}
-          />
-          <div className="binding-scope-editor__panel__content__form">
-            <div className="binding-scope-editor__panel__content__form__section">
-              <div className="binding-scope-editor__panel__content__form__section__list">
-                {elements.map((elementRef) => (
-                  <BindingScopeEntryEditor
-                    key={elementRef.value._UUID}
-                    elementRef={elementRef}
-                    removeElement={removeElement}
-                    isReadOnly={isReadOnly}
-                  />
-                ))}
-                <div className="binding-scope-editor__panel__content__form__section__list__new-item__add">
-                  <button
-                    className="binding-scope-editor__panel__content__form__section__list__new-item__add-btn btn btn--dark"
-                    disabled={!allowAddingElement}
-                    tabIndex={-1}
-                    onClick={addElement}
-                    title="Add Element"
-                  >
-                    Add Value
-                  </button>
+        <div className="binding-scope-editor__panel__content">
+          <PanelDropZone
+            dropTargetConnector={dropElementRef}
+            isDragOver={isElementDragOver && !isReadOnly}
+          >
+            <div className="binding-scope-editor__panel__content__form">
+              <div className="binding-scope-editor__panel__content__form__section">
+                <div className="binding-scope-editor__panel__content__form__section__list">
+                  {elements.map((elementRef) => (
+                    <BindingScopeEntryEditor
+                      key={elementRef.value._UUID}
+                      elementRef={elementRef}
+                      removeElement={removeElement}
+                      isReadOnly={isReadOnly}
+                    />
+                  ))}
+                  <div className="binding-scope-editor__panel__content__form__section__list__new-item__add">
+                    <button
+                      className="binding-scope-editor__panel__content__form__section__list__new-item__add-btn btn btn--dark"
+                      disabled={!allowAddingElement}
+                      tabIndex={-1}
+                      onClick={addElement}
+                      title="Add Element"
+                    >
+                      Add Value
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
+          </PanelDropZone>
         </div>
       </div>
     );

package/src/components/editor/edit-panel/external-format-editor/SchemaSetElementEditor.tsx

@@ -422,7 +422,7 @@ const SchemaSetModelGenerationEditor = observer(
                   </button>
                 </div>
               </div>
-              <div className="panel__content dnd__dropzone">
+              <div className="panel__content">
                 <div className="file-generation-editor__configuration__content">
                   {modelGenerationState.modelGenerationProperties.map(
                     (abstractGenerationProperty) => (

package/src/components/editor/edit-panel/mapping-editor/EnumerationMappingEditor.tsx

@@ -30,6 +30,7 @@ import {
   PencilIcon,
   TimesIcon,
   PlusIcon,
+  PanelDropZone,
 } from '@finos/legend-art';
 import { MappingEditorState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingEditorState.js';
 import { TypeTree } from '../../../shared/TypeTree.js';
@@ -203,11 +204,15 @@ export const SourceValueInput = observer(
       },
       [isReadOnly, updateSourceValue, value],
     );
-    const [{ canDrop }, dropRef] = useDrop(
+    const [{ canDrop }, dropRef] = useDrop<
+      TypeDragSource,
+      void,
+      { canDrop: boolean }
+    >(
       () => ({
         accept: CORE_DND_TYPE.TYPE_TREE_ENUM,
-        drop: (item: TransformDropTarget): void => handleDrop(item),
-        collect: (monitor): { canDrop: boolean } => ({
+        drop: (item) => handleDrop(item),
+        collect: (monitor) => ({
           canDrop: monitor.canDrop(),
         }),
       }),
@@ -365,11 +370,15 @@ export const EnumerationMappingEditor = observer(
       },
       [enumerationMapping, isReadOnly],
     );
-    const [{ isDragOver, canDrop }, dropRef] = useDrop(
+    const [{ isDragOver, canDrop }, dropRef] = useDrop<
+      ElementDragSource,
+      void,
+      { isDragOver: boolean; canDrop: boolean }
+    >(
       () => ({
         accept: CORE_DND_TYPE.PROJECT_EXPLORER_ENUMERATION,
-        drop: (item: ElementDragSource): void => handleDrop(item),
-        collect: (monitor): { isDragOver: boolean; canDrop: boolean } => ({
+        drop: (item) => handleDrop(item),
+        collect: (monitor) => ({
           isDragOver: monitor.isOver({ shallow: true }),
           canDrop: monitor.canDrop(),
         }),
@@ -502,42 +511,38 @@ export const EnumerationMappingEditor = observer(
                       </button>
                     </div>
                   </div>
-                  <div ref={dropRef} className="panel__content dnd__dropzone">
-                    {sourceType && isDragOver && !isReadOnly && (
-                      <div className="dnd__overlay"></div>
-                    )}
-                    {sourceType && (
-                      <div className="source-panel__explorer">
-                        {sourceType instanceof Enumeration && (
-                          <TypeTree type={sourceType} />
-                        )}
-                        {/* TODO?: do we need to show anything when the source type is string or integer */}
-                      </div>
-                    )}
-                    {!sourceType && (
-                      <BlankPanelPlaceholder
-                        placeholderText="Choose a source"
-                        onClick={showSourceSelectorModal}
-                        clickActionType="add"
-                        tooltipText="Drop an enumeration"
-                        dndProps={{
-                          isDragOver: isDragOver && !isReadOnly,
-                          canDrop: canDrop && !isReadOnly,
-                        }}
-                        readOnlyProps={
-                          !isReadOnly
-                            ? undefined
-                            : {
-                                placeholderText: 'No source',
-                              }
-                        }
+                  <div className="panel__content">
+                    <PanelDropZone
+                      dropTargetConnector={dropRef}
+                      isDragOver={
+                        Boolean(sourceType) && isDragOver && !isReadOnly
+                      }
+                    >
+                      {sourceType && (
+                        <div className="source-panel__explorer">
+                          {sourceType instanceof Enumeration && (
+                            <TypeTree type={sourceType} />
+                          )}
+                          {/* TODO?: do we need to show anything when the source type is string or integer */}
+                        </div>
+                      )}
+                      {!sourceType && (
+                        <BlankPanelPlaceholder
+                          text="Choose a source"
+                          onClick={showSourceSelectorModal}
+                          clickActionType="add"
+                          tooltipText="Drop an enumeration"
+                          isDropZoneActive={canDrop}
+                          disabled={isReadOnly}
+                          previewText="No source"
+                        />
+                      )}
+                      <EnumerationMappingSourceSelectorModal
+                        enumerationMapping={enumerationMapping}
+                        open={openSourceSelectorModal}
+                        closeModal={hideSourceSelectorModal}
                       />
-                    )}
-                    <EnumerationMappingSourceSelectorModal
-                      enumerationMapping={enumerationMapping}
-                      open={openSourceSelectorModal}
-                      closeModal={hideSourceSelectorModal}
-                    />
+                    </PanelDropZone>
                   </div>
                 </div>
               </ResizablePanel>

package/src/components/editor/edit-panel/mapping-editor/FlatDataPropertyMappingEditor.tsx

@@ -255,19 +255,21 @@ export const FlatDataPropertyMappingEditor = observer(
       },
       [disableEditingTransform, flatDataPropertyMappingState],
     );
-    const [{ item }, drop] = useDrop(
+    const [{ dragItem }, drop] = useDrop<
+      FlatDataColumnDragSource,
+      void,
+      { dragItem: FlatDataColumnDragSource | undefined }
+    >(
       () => ({
         accept: [CORE_DND_TYPE.TYPE_TREE_PRIMITIVE],
-        drop: (droppedItem: FlatDataPropertyMappingTransformDropTarget): void =>
-          handleDrop(droppedItem),
-        collect: (monitor): { item: FlatDataColumnDragSource | null } => ({
-          item: monitor.getItem<FlatDataColumnDragSource | null>(),
+        drop: (_item) => handleDrop(_item),
+        collect: (monitor) => ({
+          dragItem:
+            monitor.getItem<FlatDataColumnDragSource | null>() ?? undefined,
         }),
       }),
       [handleDrop],
     );
-    const dragItem =
-      item instanceof FlatDataColumnDragSource ? item : undefined;
     const transformProps = {
       disableTransform:
         flatDataInstanceSetImplementationState.isConvertingTransformLambdaObjects,

package/src/components/editor/edit-panel/mapping-editor/InstanceSetImplementationEditor.tsx

@@ -25,6 +25,7 @@ import {
   AsteriskIcon,
   LongArrowAltDownIcon,
   PencilEditIcon,
+  PanelDropZone,
 } from '@finos/legend-art';
 import {
   CORE_DND_TYPE,
@@ -244,11 +245,15 @@ export const InstanceSetImplementationSourceExplorer = observer(
         setImplementation,
       ],
     );
-    const [{ isDragOver, canDrop }, dropRef] = useDrop(
+    const [{ isDragOver, canDrop }, dropRef] = useDrop<
+      ElementDragSource,
+      void,
+      { isDragOver: boolean; canDrop: boolean }
+    >(
       () => ({
         accept: dndType,
-        drop: (item: ElementDragSource): void => handleDrop(item),
-        collect: (monitor): { isDragOver: boolean; canDrop: boolean } => ({
+        drop: (item) => handleDrop(item),
+        collect: (monitor) => ({
           isDragOver: monitor.isOver({ shallow: true }),
           canDrop: monitor.canDrop(),
         }),
@@ -318,11 +323,11 @@ export const InstanceSetImplementationSourceExplorer = observer(
             </button>
           </div>
         </div>
-        <div ref={dropRef} className="panel__content dnd__dropzone">
-          <>
-            {srcElement && isDragOver && !isReadOnly && (
-              <div className="dnd__overlay" />
-            )}
+        <div className="panel__content">
+          <PanelDropZone
+            dropTargetConnector={dropRef}
+            isDragOver={isDragOver && !isReadOnly}
+          >
             {srcElement ? (
               <div className="source-panel__explorer">
                 {srcElement instanceof Type && (
@@ -346,21 +351,13 @@ export const InstanceSetImplementationSourceExplorer = observer(
               </div>
             ) : (
               <BlankPanelPlaceholder
-                placeholderText="Choose a source"
+                text="Choose a source"
                 onClick={showSourceSelectorModal}
                 clickActionType="add"
                 tooltipText="Drop a class mapping source, or click to choose one"
-                dndProps={{
-                  isDragOver: isDragOver && !isReadOnly,
-                  canDrop: canDrop && !isReadOnly,
-                }}
-                readOnlyProps={
-                  !isReadOnly
-                    ? undefined
-                    : {
-                        placeholderText: 'No source',
-                      }
-                }
+                isDropZoneActive={canDrop}
+                disabled={isReadOnly}
+                previewText="No source"
               />
             )}
             {isUnsupported && (
@@ -377,7 +374,7 @@ export const InstanceSetImplementationSourceExplorer = observer(
                 closeModal={hideSourceSelectorModal}
               />
             )}
-          </>
+          </PanelDropZone>
         </div>
       </div>
     );

package/src/components/editor/edit-panel/mapping-editor/MappingExecutionBuilder.tsx

@@ -37,6 +37,7 @@ import {
   CaretDownIcon,
   RefreshIcon,
   RobotIcon,
+  PanelDropZone,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import {
@@ -204,7 +205,7 @@ const MappingExecutionQueryEditor = observer(
         flowResult(
           queryState.updateLamba(
             setImplementation
-              ? editorStore.graphManagerState.graphManager.HACKY__createGetAllLambda(
+              ? editorStore.graphManagerState.graphManager.createGetAllRawLambda(
                   guaranteeType(
                     getMappingElementTarget(setImplementation),
                     Class,
@@ -281,11 +282,15 @@ const MappingExecutionQueryEditor = observer(
       },
       [changeClassMapping],
     );
-    const [{ isDragOver, canDrop }, dropRef] = useDrop(
+    const [{ isDragOver, canDrop }, dropRef] = useDrop<
+      MappingElementDragSource,
+      void,
+      { isDragOver: boolean; canDrop: boolean }
+    >(
       () => ({
         accept: CORE_DND_TYPE.MAPPING_EXPLORER_CLASS_MAPPING,
-        drop: (item: MappingElementDragSource): void => handleDrop(item),
-        collect: (monitor): { isDragOver: boolean; canDrop: boolean } => ({
+        drop: (item) => handleDrop(item),
+        collect: (monitor) => ({
           isDragOver: monitor.isOver({ shallow: true }),
           canDrop: monitor.canDrop(),
         }),
@@ -328,17 +333,19 @@ const MappingExecutionQueryEditor = observer(
           </div>
         )}
         {isStubbed_RawLambda(queryState.query) && (
-          <div ref={dropRef} className="panel__content">
-            <BlankPanelPlaceholder
-              placeholderText="Choose a class mapping"
-              onClick={showClassMappingSelectorModal}
-              clickActionType="add"
-              tooltipText="Drop a class mapping, or click to choose one to start building the query"
-              dndProps={{
-                isDragOver: isDragOver,
-                canDrop: canDrop,
-              }}
-            />
+          <div className="panel__content">
+            <PanelDropZone
+              dropTargetConnector={dropRef}
+              isDragOver={isDragOver}
+            >
+              <BlankPanelPlaceholder
+                text="Choose a class mapping"
+                onClick={showClassMappingSelectorModal}
+                clickActionType="add"
+                tooltipText="Drop a class mapping, or click to choose one to start building the query"
+                isDropZoneActive={canDrop}
+              />
+            </PanelDropZone>
           </div>
         )}
         {openClassMappingSelectorModal && (
@@ -437,11 +444,15 @@ export const MappingExecutionEmptyInputDataBuilder = observer(
       },
       [changeClassMapping],
     );
-    const [{ isDragOver, canDrop }, dropRef] = useDrop(
+    const [{ isDragOver, canDrop }, dropRef] = useDrop<
+      MappingElementDragSource,
+      void,
+      { isDragOver: boolean; canDrop: boolean }
+    >(
       () => ({
         accept: CORE_DND_TYPE.MAPPING_EXPLORER_CLASS_MAPPING,
-        drop: (item: MappingElementDragSource): void => handleDrop(item),
-        collect: (monitor): { isDragOver: boolean; canDrop: boolean } => ({
+        drop: (item) => handleDrop(item),
+        collect: (monitor) => ({
           isDragOver: monitor.isOver({ shallow: true }),
           canDrop: monitor.canDrop(),
         }),
@@ -450,17 +461,16 @@ export const MappingExecutionEmptyInputDataBuilder = observer(
     );
 
     return (
-      <div ref={dropRef} className="panel__content">
-        <BlankPanelPlaceholder
-          placeholderText="Choose a class mapping"
-          onClick={showClassMappingSelectorModal}
-          clickActionType="add"
-          tooltipText="Drop a class mapping, or click to choose one to generate input data"
-          dndProps={{
-            isDragOver: isDragOver,
-            canDrop: canDrop,
-          }}
-        />
+      <div className="panel__content">
+        <PanelDropZone dropTargetConnector={dropRef} isDragOver={isDragOver}>
+          <BlankPanelPlaceholder
+            text="Choose a class mapping"
+            onClick={showClassMappingSelectorModal}
+            clickActionType="add"
+            tooltipText="Drop a class mapping, or click to choose one to generate input data"
+            isDropZoneActive={canDrop}
+          />
+        </PanelDropZone>
       </div>
     );
   },

package/src/components/editor/edit-panel/mapping-editor/MappingExplorer.tsx

@@ -27,8 +27,6 @@ import {
   clsx,
   TreeView,
   ContextMenu,
-  VerticalAlignBottomIcon,
-  AddIcon,
   PlusIcon,
   LockIcon,
   FireIcon,
@@ -36,6 +34,8 @@ import {
   ChevronRightIcon,
   ChevronDownIcon,
   FilterIcon,
+  PanelDropZone,
+  BlankPanelPlaceholder,
 } from '@finos/legend-art';
 import { MappingElementState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingElementState.js';
 import { useDrop, useDrag } from 'react-dnd';
@@ -453,15 +453,19 @@ export const MappingExplorer = observer((props: { isReadOnly: boolean }) => {
           }),
     [isReadOnly, mappingEditorState],
   );
-  const [{ isDragOver }, dropRef] = useDrop(
+  const [{ isDragOver }, dropRef] = useDrop<
+    ElementDragSource,
+    void,
+    { isDragOver: boolean }
+  >(
     () => ({
       accept: [
         CORE_DND_TYPE.PROJECT_EXPLORER_ENUMERATION,
         CORE_DND_TYPE.PROJECT_EXPLORER_CLASS,
         CORE_DND_TYPE.PROJECT_EXPLORER_ASSOCIATION,
       ],
-      drop: (item: ElementDragSource): void => handleDrop(item),
-      collect: (monitor): { isDragOver: boolean } => ({
+      drop: (item) => handleDrop(item),
+      collect: (monitor) => ({
         isDragOver: monitor.isOver({ shallow: true }),
       }),
     }),
@@ -553,41 +557,37 @@ export const MappingExplorer = observer((props: { isReadOnly: boolean }) => {
         }
         menuProps={{ elevation: 7 }}
       >
-        <div
-          ref={dropRef}
-          className={clsx('mapping-explorer__content', {
-            'mapping-explorer__content--dnd-over': isDragOver && !isReadOnly,
-          })}
+        <PanelDropZone
+          isDragOver={isDragOver && !isReadOnly}
+          dropTargetConnector={dropRef}
         >
-          <TreeView
-            components={{
-              TreeNodeContainer: MappingElementTreeNodeContainer,
-            }}
-            treeData={mappingElementsTreeData}
-            onNodeSelect={onNodeSelect}
-            getChildNodes={getMappingElementTreeChildNodes}
-            innerProps={{
-              isReadOnly,
-              onNodeExpand,
-            }}
-          />
-          {/* TODO: use BlankPanelPlaceholder */}
-          {!isReadOnly && !mappingElements.length && (
-            <div
-              className="mapping-explorer__content mapping-explorer__content__adder"
-              onClick={openNewMapingModal}
-            >
-              <div className="mapping-explorer__content__adder__text">
-                {'Add a mapping element'}
-              </div>
-              <div className="mapping-explorer__content__adder__action">
-                <VerticalAlignBottomIcon className="mapping-explorer__content__adder__action__dnd-icon" />
-                <AddIcon className="mapping-explorer__content__adder__action__add-icon" />
-              </div>
-            </div>
-          )}
-          <NewMappingElementModal />
-        </div>
+          <div className="mapping-explorer__content">
+            <TreeView
+              components={{
+                TreeNodeContainer: MappingElementTreeNodeContainer,
+              }}
+              treeData={mappingElementsTreeData}
+              onNodeSelect={onNodeSelect}
+              getChildNodes={getMappingElementTreeChildNodes}
+              innerProps={{
+                isReadOnly,
+                onNodeExpand,
+              }}
+            />
+            {!isReadOnly && !mappingElements.length && (
+              <BlankPanelPlaceholder
+                text="Add a mapping element"
+                onClick={openNewMapingModal}
+                clickActionType="add"
+                tooltipText="Drop a class or an enumeration to start creating mappings"
+                isDropZoneActive={isDragOver && !isReadOnly}
+                disabled={isReadOnly}
+                previewText="No mapping"
+              />
+            )}
+            <NewMappingElementModal />
+          </div>
+        </PanelDropZone>
       </ContextMenu>
     </div>
   );

package/src/components/editor/edit-panel/mapping-editor/MappingTestEditor.tsx

@@ -44,6 +44,7 @@ import {
   RefreshIcon,
   WrenchIcon,
   PauseCircleIcon,
+  PanelDropZone,
 } from '@finos/legend-art';
 import { useDrop } from 'react-dnd';
 import {
@@ -124,7 +125,7 @@ const MappingTestQueryEditor = observer(
         flowResult(
           queryState.updateLamba(
             setImplementation
-              ? editorStore.graphManagerState.graphManager.HACKY__createGetAllLambda(
+              ? editorStore.graphManagerState.graphManager.createGetAllRawLambda(
                   guaranteeType(
                     getMappingElementTarget(setImplementation),
                     Class,
@@ -175,11 +176,15 @@ const MappingTestQueryEditor = observer(
       },
       [changeClassMapping],
     );
-    const [{ isDragOver, canDrop }, dropRef] = useDrop(
+    const [{ isDragOver, canDrop }, dropRef] = useDrop<
+      MappingElementDragSource,
+      void,
+      { isDragOver: boolean; canDrop: boolean }
+    >(
       () => ({
         accept: CORE_DND_TYPE.MAPPING_EXPLORER_CLASS_MAPPING,
-        drop: (item: MappingElementDragSource): void => handleDrop(item),
-        collect: (monitor): { isDragOver: boolean; canDrop: boolean } => ({
+        drop: (item) => handleDrop(item),
+        collect: (monitor) => ({
           isDragOver: monitor.isOver({ shallow: true }),
           canDrop: monitor.canDrop(),
         }),
@@ -223,17 +228,20 @@ const MappingTestQueryEditor = observer(
           </div>
         )}
         {isStubbed_RawLambda(queryState.query) && (
-          <div ref={dropRef} className="panel__content">
-            <BlankPanelPlaceholder
-              placeholderText="Choose a class mapping"
-              onClick={showClassMappingSelectorModal}
-              clickActionType="add"
-              tooltipText="Drop a class mapping, or click to choose one to start building the query"
-              dndProps={{
-                isDragOver: isDragOver,
-                canDrop: canDrop,
-              }}
-            />
+          <div className="panel__content">
+            <PanelDropZone
+              dropTargetConnector={dropRef}
+              isDragOver={isDragOver}
+            >
+              <BlankPanelPlaceholder
+                text="Choose a class mapping"
+                onClick={showClassMappingSelectorModal}
+                clickActionType="add"
+                tooltipText="Drop a class mapping, or click to choose one to start building the query"
+                isDropZoneActive={canDrop}
+                disabled={isReadOnly}
+              />
+            </PanelDropZone>
           </div>
         )}
         {openClassMappingSelectorModal && (