@finos/legend-application-studio 13.0.2 → 13.1.1

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

@@ -18,12 +18,12 @@ import { useEffect, useCallback } from 'react';
 import { observer } from 'mobx-react-lite';
 import { MappingEditorState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingEditorState.js';
 import {
-  clsx,
   CustomSelectorInput,
   createFilter,
   TimesIcon,
   ArrowCircleRightIcon,
   PlusIcon,
+  PanelDropZone,
 } from '@finos/legend-art';
 import {
   CORE_DND_TYPE,
@@ -146,11 +146,15 @@ export const OperationSetImplementationEditor = observer(
       },
       [setImplementation],
     );
-    const [{ isDragOver }, dropRef] = useDrop(
+    const [{ isDragOver }, dropRef] = useDrop<
+      MappingElementDragSource,
+      void,
+      { isDragOver: boolean }
+    >(
       () => ({
         accept: CORE_DND_TYPE.MAPPING_EXPLORER_CLASS_MAPPING,
-        drop: (item: MappingElementDragSource): void => handleDrop(item),
-        collect: (monitor): { isDragOver: boolean } => ({
+        drop: (item) => handleDrop(item),
+        collect: (monitor) => ({
           isDragOver: monitor.isOver({ shallow: true }),
         }),
       }),
@@ -211,53 +215,52 @@ export const OperationSetImplementationEditor = observer(
               </button>
             </div>
           </div>
-          <div
-            ref={dropRef}
-            className={clsx('panel__content', {
-              'operation-mapping-editor__parameters--dnd-over':
-                isDragOver && !isReadOnly,
-            })}
+          <PanelDropZone
+            isDragOver={isDragOver && !isReadOnly}
+            dropTargetConnector={dropRef}
           >
-            {setImplementation.parameters.map((param) => (
-              <div
-                key={param._UUID}
-                className="operation-mapping-editor__parameter"
-              >
-                <div className="operation-mapping-editor__parameter__selector">
-                  <CustomSelectorInput
-                    options={setImplementationOptions}
-                    disabled={isReadOnly}
-                    onChange={changeParamater(param)}
-                    filterOption={filterOption}
-                    value={{
-                      value: param,
-                      label: param.setImplementation.value.id.value,
-                    }}
-                    placeholder={`Select parameter ID`}
-                  />
-                </div>
-                <button
-                  className="operation-mapping-editor__parameter__visit-btn"
-                  onClick={visit(param)}
-                  tabIndex={-1}
-                  title={'Visit mapping element'}
+            <div className="panel__content">
+              {setImplementation.parameters.map((param) => (
+                <div
+                  key={param._UUID}
+                  className="operation-mapping-editor__parameter"
                 >
-                  <ArrowCircleRightIcon />
-                </button>
-                {!isReadOnly && (
+                  <div className="operation-mapping-editor__parameter__selector">
+                    <CustomSelectorInput
+                      options={setImplementationOptions}
+                      disabled={isReadOnly}
+                      onChange={changeParamater(param)}
+                      filterOption={filterOption}
+                      value={{
+                        value: param,
+                        label: param.setImplementation.value.id.value,
+                      }}
+                      placeholder={`Select parameter ID`}
+                    />
+                  </div>
                   <button
-                    className="operation-mapping-editor__parameter__remove-btn"
-                    disabled={isReadOnly}
-                    onClick={deleteParameter(param)}
+                    className="operation-mapping-editor__parameter__visit-btn"
+                    onClick={visit(param)}
                     tabIndex={-1}
-                    title={'Remove'}
+                    title={'Visit mapping element'}
                   >
-                    <TimesIcon />
+                    <ArrowCircleRightIcon />
                   </button>
-                )}
-              </div>
-            ))}
-          </div>
+                  {!isReadOnly && (
+                    <button
+                      className="operation-mapping-editor__parameter__remove-btn"
+                      disabled={isReadOnly}
+                      onClick={deleteParameter(param)}
+                      tabIndex={-1}
+                      title={'Remove'}
+                    >
+                      <TimesIcon />
+                    </button>
+                  )}
+                </div>
+              ))}
+            </div>
+          </PanelDropZone>
         </div>
       </div>
     );

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

@@ -350,7 +350,14 @@ export const PurePropertyMappingEditor = observer(
       },
       [disableEditingTransform, purePropertyMappingState],
     );
-    const [{ item, dragItemType }, drop] = useDrop(
+    const [{ dragItem, dragItemType }, drop] = useDrop<
+      TypeDragSource,
+      void,
+      {
+        dragItem: TypeDragSource | undefined;
+        dragItemType: CORE_DND_TYPE;
+      }
+    >(
       () => ({
         accept: [
           CORE_DND_TYPE.TYPE_TREE_CLASS,
@@ -358,18 +365,15 @@ export const PurePropertyMappingEditor = observer(
           CORE_DND_TYPE.TYPE_TREE_PRIMITIVE,
           CORE_DND_TYPE.TYPE_TREE_ENUM,
         ],
-        drop: (dropItem: TransformDropTarget, monitor): void =>
-          handleDrop(dropItem, monitor.getItemType() as string),
-        collect: (
-          monitor,
-        ): { item: TypeDragSource | null; dragItemType: CORE_DND_TYPE } => ({
-          item: monitor.getItem<TypeDragSource | null>(),
+        drop: (item, monitor) =>
+          handleDrop(item, monitor.getItemType() as string),
+        collect: (monitor) => ({
+          dragItem: monitor.getItem<TypeDragSource | null>() ?? undefined,
           dragItemType: monitor.getItemType() as CORE_DND_TYPE,
         }),
       }),
       [handleDrop],
     );
-    const dragItem = item instanceof TypeDragSource ? item : undefined;
     const transformProps = {
       disableTransform: disableEditingTransform,
       forceBackdrop: setImplementationHasParserError,

package/src/components/editor/edit-panel/mapping-editor/relational/RelationalPropertyMappingEditor.tsx

@@ -295,11 +295,10 @@ export const RelationalPropertyMappingEditor = observer(
       },
       [disableEditingTransform, relationalPropertyMappingState],
     );
-    const [, drop] = useDrop(
+    const [, drop] = useDrop<TableOrViewTreeNodeDragSource>(
       () => ({
         accept: [TABLE_ELEMENT_DND_TYPE],
-        drop: (droppedItem: TableOrViewTreeNodeDragSource): void =>
-          handleDrop(droppedItem),
+        drop: (item) => handleDrop(item),
       }),
       [handleDrop],
     );

package/src/components/editor/edit-panel/service-editor/ServiceExecutionEditor.tsx

@@ -54,6 +54,7 @@ import {
   PlusIcon,
   ArrowsJoinIcon,
   ArrowsSplitIcon,
+  PanelDropZone,
 } from '@finos/legend-art';
 import { ServiceExecutionQueryEditor } from '../../../editor/edit-panel/service-editor/ServiceExecutionQueryEditor.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
@@ -218,15 +219,18 @@ const PureExecutionContextConfigurationEditor = observer(
       },
       [isReadOnly, mapping, executionContextState, pureExecutionState],
     );
-    const [{ isMappingOrRuntimeDragOver }, dropMappingOrRuntimeRef] = useDrop(
+    const [{ isMappingOrRuntimeDragOver }, dropMappingOrRuntimeRef] = useDrop<
+      ElementDragSource,
+      void,
+      { isMappingOrRuntimeDragOver: boolean }
+    >(
       () => ({
         accept: [
           CORE_DND_TYPE.PROJECT_EXPLORER_MAPPING,
           CORE_DND_TYPE.PROJECT_EXPLORER_RUNTIME,
         ],
-        drop: (item: ElementDragSource): void =>
-          handleMappingOrRuntimeDrop(item),
-        collect: (monitor): { isMappingOrRuntimeDragOver: boolean } => ({
+        drop: (item) => handleMappingOrRuntimeDrop(item),
+        collect: (monitor) => ({
           isMappingOrRuntimeDragOver: monitor.isOver({ shallow: true }),
         }),
       }),
@@ -239,78 +243,77 @@ const PureExecutionContextConfigurationEditor = observer(
     );
 
     return (
-      <div
-        ref={dropMappingOrRuntimeRef}
-        className="panel__content dnd__overlay__container"
-      >
-        <div
-          className={clsx({
-            dnd__overlay: isMappingOrRuntimeDragOver && !isReadOnly,
-          })}
-        />
-        <div className="service-execution-editor__configuration__items">
-          <div className="service-execution-editor__configuration__item">
-            <div className="btn--sm service-execution-editor__configuration__item__label">
-              <PURE_MappingIcon />
-            </div>
-            <CustomSelectorInput
-              className="panel__content__form__section__dropdown service-execution-editor__configuration__item__dropdown"
-              disabled={isReadOnly}
-              options={mappingOptions}
-              onChange={onMappingSelectionChange}
-              value={selectedMappingOption}
-              darkMode={true}
-              hasError={isMappingEmpty}
-            />
-            <button
-              className="btn--dark btn--sm service-execution-editor__configuration__item__btn"
-              onClick={visitMapping}
-              tabIndex={-1}
-              title={'See mapping'}
-            >
-              <LongArrowRightIcon />
-            </button>
-          </div>
-          <div className="service-execution-editor__configuration__item">
-            <div className="btn--sm service-execution-editor__configuration__item__label">
-              <PURE_RuntimeIcon />
-            </div>
-            <CustomSelectorInput
-              className="panel__content__form__section__dropdown service-execution-editor__configuration__item__dropdown"
-              disabled={isReadOnly}
-              options={runtimeOptions}
-              onChange={onRuntimeSelectionChange}
-              value={selectedRuntimeOption}
-              darkMode={true}
-            />
-            {!isRuntimePointer && (
-              <button
-                className="btn--sm btn--dark service-execution-editor__configuration__item__btn"
-                disabled={Boolean(isReadOnly || isMappingEmpty)}
-                onClick={openRuntimeEditor}
-                tabIndex={-1}
-                title={isReadOnly ? 'See runtime' : 'Configure custom runtime'}
-              >
-                <CogIcon />
-              </button>
-            )}
-            {isRuntimePointer && (
+      <div className="panel__content">
+        <PanelDropZone
+          dropTargetConnector={dropMappingOrRuntimeRef}
+          isDragOver={isMappingOrRuntimeDragOver && !isReadOnly}
+        >
+          <div className="service-execution-editor__configuration__items">
+            <div className="service-execution-editor__configuration__item">
+              <div className="btn--sm service-execution-editor__configuration__item__label">
+                <PURE_MappingIcon />
+              </div>
+              <CustomSelectorInput
+                className="panel__content__form__section__dropdown service-execution-editor__configuration__item__dropdown"
+                disabled={isReadOnly}
+                options={mappingOptions}
+                onChange={onMappingSelectionChange}
+                value={selectedMappingOption}
+                darkMode={true}
+                hasError={isMappingEmpty}
+              />
               <button
-                className="btn--sm btn--dark service-execution-editor__configuration__item__btn"
-                onClick={visitRuntime}
+                className="btn--dark btn--sm service-execution-editor__configuration__item__btn"
+                onClick={visitMapping}
                 tabIndex={-1}
-                title={'See runtime'}
+                title={'See mapping'}
               >
                 <LongArrowRightIcon />
               </button>
-            )}
-            <EmbeddedRuntimeEditor
-              runtimeEditorState={pureExecutionState.runtimeEditorState}
-              isReadOnly={serviceState.isReadOnly}
-              onClose={(): void => pureExecutionState.closeRuntimeEditor()}
-            />
+            </div>
+            <div className="service-execution-editor__configuration__item">
+              <div className="btn--sm service-execution-editor__configuration__item__label">
+                <PURE_RuntimeIcon />
+              </div>
+              <CustomSelectorInput
+                className="panel__content__form__section__dropdown service-execution-editor__configuration__item__dropdown"
+                disabled={isReadOnly}
+                options={runtimeOptions}
+                onChange={onRuntimeSelectionChange}
+                value={selectedRuntimeOption}
+                darkMode={true}
+              />
+              {!isRuntimePointer && (
+                <button
+                  className="btn--sm btn--dark service-execution-editor__configuration__item__btn"
+                  disabled={Boolean(isReadOnly || isMappingEmpty)}
+                  onClick={openRuntimeEditor}
+                  tabIndex={-1}
+                  title={
+                    isReadOnly ? 'See runtime' : 'Configure custom runtime'
+                  }
+                >
+                  <CogIcon />
+                </button>
+              )}
+              {isRuntimePointer && (
+                <button
+                  className="btn--sm btn--dark service-execution-editor__configuration__item__btn"
+                  onClick={visitRuntime}
+                  tabIndex={-1}
+                  title={'See runtime'}
+                >
+                  <LongArrowRightIcon />
+                </button>
+              )}
+              <EmbeddedRuntimeEditor
+                runtimeEditorState={pureExecutionState.runtimeEditorState}
+                isReadOnly={serviceState.isReadOnly}
+                onClose={(): void => pureExecutionState.closeRuntimeEditor()}
+              />
+            </div>
           </div>
-        </div>
+        </PanelDropZone>
       </div>
     );
   },
@@ -696,7 +699,7 @@ const MultiPureExecutionEditor = observer(
               ))}
               {!multiExecution.executionParameters.length && (
                 <BlankPanelPlaceholder
-                  placeholderText="Add an execution context"
+                  text="Add an execution context"
                   onClick={addExecutionKey}
                   clickActionType="add"
                   tooltipText="Click to add an execution context"
@@ -739,7 +742,7 @@ const MultiPureExecutionEditor = observer(
               />
             ) : (
               <BlankPanelPlaceholder
-                placeholderText="Add an execution context"
+                text="Add an execution context"
                 onClick={addExecutionKey}
                 clickActionType="add"
                 tooltipText="Click to add an execution context"

package/src/components/editor/edit-panel/service-editor/testable/ServiceTestableEditor.tsx

@@ -208,7 +208,7 @@ export const ServiceTestableEditor = observer(
           )}
           {!service.tests.length && (
             <BlankPanelPlaceholder
-              placeholderText="Add Test Suite"
+              text="Add Test Suite"
               onClick={addSuite}
               clickActionType="add"
               tooltipText="Click to add test"

package/src/components/editor/edit-panel/uml-editor/AssociationEditor.tsx

@@ -41,12 +41,19 @@ import {
   PlusIcon,
   ArrowCircleRightIcon,
   LongArrowRightIcon,
+  PanelDropZone,
 } from '@finos/legend-art';
 import { getElementIcon } from '../../../shared/ElementIconUtils.js';
 import { prettyCONSTName, guaranteeType } from '@finos/legend-shared';
 import { LEGEND_STUDIO_TEST_ID } from '../../../LegendStudioTestID.js';
-import { StereotypeSelector } from './StereotypeSelector.js';
-import { TaggedValueEditor } from './TaggedValueEditor.js';
+import {
+  StereotypeDragPreviewLayer,
+  StereotypeSelector,
+} from './StereotypeSelector.js';
+import {
+  TaggedValueDragPreviewLayer,
+  TaggedValueEditor,
+} from './TaggedValueEditor.js';
 import { PropertyEditor } from './PropertyEditor.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
@@ -388,11 +395,15 @@ export const AssociationEditor = observer(
       },
       [association, isReadOnly],
     );
-    const [{ isTaggedValueDragOver }, dropTaggedValueRef] = useDrop(
+    const [{ isTaggedValueDragOver }, dropTaggedValueRef] = useDrop<
+      ElementDragSource,
+      void,
+      { isTaggedValueDragOver: boolean }
+    >(
       () => ({
         accept: [CORE_DND_TYPE.PROJECT_EXPLORER_PROFILE],
-        drop: (item: ElementDragSource): void => handleDropTaggedValue(item),
-        collect: (monitor): { isTaggedValueDragOver: boolean } => ({
+        drop: (item) => handleDropTaggedValue(item),
+        collect: (monitor) => ({
           isTaggedValueDragOver: monitor.isOver({ shallow: true }),
         }),
       }),
@@ -411,11 +422,15 @@ export const AssociationEditor = observer(
       },
       [association, isReadOnly],
     );
-    const [{ isStereotypeDragOver }, dropStereotypeRef] = useDrop(
+    const [{ isStereotypeDragOver }, dropStereotypeRef] = useDrop<
+      ElementDragSource,
+      void,
+      { isStereotypeDragOver: boolean }
+    >(
       () => ({
         accept: [CORE_DND_TYPE.PROJECT_EXPLORER_PROFILE],
-        drop: (item: ElementDragSource): void => handleDropStereotype(item),
-        collect: (monitor): { isStereotypeDragOver: boolean } => ({
+        drop: (item) => handleDropStereotype(item),
+        collect: (monitor) => ({
           isStereotypeDragOver: monitor.isOver({ shallow: true }),
         }),
       }),
@@ -503,40 +518,42 @@ export const AssociationEditor = observer(
                   </div>
                 )}
                 {selectedTab === UML_EDITOR_TAB.TAGGED_VALUES && (
-                  <div
-                    ref={dropTaggedValueRef}
-                    className={clsx('panel__content__lists', {
-                      'panel__content__lists--dnd-over':
-                        isTaggedValueDragOver && !isReadOnly,
-                    })}
+                  <PanelDropZone
+                    isDragOver={isTaggedValueDragOver && !isReadOnly}
+                    dropTargetConnector={dropTaggedValueRef}
                   >
-                    {association.taggedValues.map((taggedValue) => (
-                      <TaggedValueEditor
-                        key={taggedValue._UUID}
-                        taggedValue={taggedValue}
-                        deleteValue={_deleteTaggedValue(taggedValue)}
-                        isReadOnly={isReadOnly}
-                      />
-                    ))}
-                  </div>
+                    <div className="panel__content__lists">
+                      <TaggedValueDragPreviewLayer />
+                      {association.taggedValues.map((taggedValue) => (
+                        <TaggedValueEditor
+                          annotatedElement={association}
+                          key={taggedValue._UUID}
+                          taggedValue={taggedValue}
+                          deleteValue={_deleteTaggedValue(taggedValue)}
+                          isReadOnly={isReadOnly}
+                        />
+                      ))}
+                    </div>
+                  </PanelDropZone>
                 )}
                 {selectedTab === UML_EDITOR_TAB.STEREOTYPES && (
-                  <div
-                    ref={dropStereotypeRef}
-                    className={clsx('panel__content__lists', {
-                      'panel__content__lists--dnd-over':
-                        isStereotypeDragOver && !isReadOnly,
-                    })}
+                  <PanelDropZone
+                    isDragOver={isStereotypeDragOver && !isReadOnly}
+                    dropTargetConnector={dropStereotypeRef}
                   >
-                    {association.stereotypes.map((stereotype) => (
-                      <StereotypeSelector
-                        key={stereotype.value._UUID}
-                        stereotype={stereotype}
-                        deleteStereotype={_deleteStereotype(stereotype)}
-                        isReadOnly={isReadOnly}
-                      />
-                    ))}
-                  </div>
+                    <div className="panel__content__lists">
+                      <StereotypeDragPreviewLayer />
+                      {association.stereotypes.map((stereotype) => (
+                        <StereotypeSelector
+                          key={stereotype.value._UUID}
+                          annotatedElement={association}
+                          stereotype={stereotype}
+                          deleteStereotype={_deleteStereotype(stereotype)}
+                          isReadOnly={isReadOnly}
+                        />
+                      ))}
+                    </div>
+                  </PanelDropZone>
                 )}
               </div>
             </div>