@finos/legend-application-studio 23.1.4 → 23.1.6

package/src/components/editor/edit-panel/GenerationSpecificationEditor.tsx

@@ -41,9 +41,9 @@ import {
   PanelDropZone,
   DragPreviewLayer,
   useDragPreviewLayer,
-  PanelEntryDropZonePlaceholder,
   Panel,
   PanelContent,
+  PanelDnDEntry,
 } from '@finos/legend-art';
 import {
   CORE_DND_TYPE,
@@ -178,49 +178,48 @@ const ModelGenerationItem = observer(
     useDragPreviewLayer(dragPreviewConnector);
 
     return (
-      <div ref={ref} className="generation-spec-model-generation-editor__item">
-        <PanelEntryDropZonePlaceholder showPlaceholder={isBeingDragged}>
-          <div className="btn--sm generation-spec-model-generation-editor__item__label">
-            {getElementIcon(editorStore, modelGeneration)}
-          </div>
-          <input
-            className={clsx(
-              'generation-spec-model-generation-editor__item__id',
-              {
-                'generation-spec-model-generation-editor__item__id--has-error':
-                  !isUnique,
-              },
-            )}
-            spellCheck={false}
-            value={isDefault ? 'DEFAULT' : generationTreeNode.id}
-            onChange={changeNodeId}
-            disabled={isDefault}
-          />
-          <CustomSelectorInput
-            className="generation-spec-model-generation-editor__item__dropdown"
-            options={options}
-            onChange={onChange}
-            value={value}
-            darkMode={true}
-          />
-          <button
-            className="btn--dark btn--sm"
-            onClick={visitModelGeneration}
-            tabIndex={-1}
-            title="See mapping"
-          >
-            <LongArrowRightIcon />
-          </button>
-          <button
-            className="generation-spec-model-generation-editor__item__remove-btn"
-            onClick={deleteNode}
-            tabIndex={-1}
-            title="Remove"
-          >
-            <TimesIcon />
-          </button>
-        </PanelEntryDropZonePlaceholder>
-      </div>
+      <PanelDnDEntry
+        ref={ref}
+        className="generation-spec-model-generation-editor__item"
+        showPlaceholder={isBeingDragged}
+      >
+        <div className="btn--sm generation-spec-model-generation-editor__item__label">
+          {getElementIcon(editorStore, modelGeneration)}
+        </div>
+        <input
+          className={clsx('generation-spec-model-generation-editor__item__id', {
+            'generation-spec-model-generation-editor__item__id--has-error':
+              !isUnique,
+          })}
+          spellCheck={false}
+          value={isDefault ? 'DEFAULT' : generationTreeNode.id}
+          onChange={changeNodeId}
+          disabled={isDefault}
+        />
+        <CustomSelectorInput
+          className="generation-spec-model-generation-editor__item__dropdown"
+          options={options}
+          onChange={onChange}
+          value={value}
+          darkMode={true}
+        />
+        <button
+          className="btn--dark btn--sm"
+          onClick={visitModelGeneration}
+          tabIndex={-1}
+          title="See mapping"
+        >
+          <LongArrowRightIcon />
+        </button>
+        <button
+          className="generation-spec-model-generation-editor__item__remove-btn"
+          onClick={deleteNode}
+          tabIndex={-1}
+          title="Remove"
+        >
+          <TimesIcon />
+        </button>
+      </PanelDnDEntry>
     );
   },
 );

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

@@ -40,12 +40,12 @@ import {
   ArrowCircleRightIcon,
   FireIcon,
   StickArrowCircleRightIcon,
-  PanelEntryDragHandle,
-  PanelEntryDropZonePlaceholder,
+  PanelDnDEntryDragHandle,
   DragPreviewLayer,
   useDragPreviewLayer,
   PanelDropZone,
   Panel,
+  PanelDnDEntry,
 } from '@finos/legend-art';
 import { LEGEND_STUDIO_TEST_ID } from '../../../../application/LegendStudioTesting.js';
 import { PropertyEditor } from './PropertyEditor.js';
@@ -149,6 +149,8 @@ const PropertyBasicEditor = observer(
     isReadOnly: boolean;
   }) => {
     const ref = useRef<HTMLDivElement>(null);
+    const handleRef = useRef<HTMLDivElement>(null);
+
     const { property, _class, editorState, deleteProperty, isReadOnly } = props;
 
     const editorStore = useEditorStore();
@@ -266,7 +268,8 @@ const PropertyBasicEditor = observer(
         }),
         [property],
       );
-    dragConnector(dropConnector(ref));
+    dragConnector(handleRef);
+    dropConnector(ref);
     useDragPreviewLayer(dragPreviewConnector);
 
     // Other
@@ -283,10 +286,20 @@ const PropertyBasicEditor = observer(
       editorStore.graphEditorMode.openElement(property._OWNER);
 
     return (
-      <div ref={ref} className="property-basic-editor__container">
-        <PanelEntryDropZonePlaceholder showPlaceholder={isBeingDragged}>
+      <>
+        <PanelDnDEntry
+          ref={ref}
+          placeholder={<div className="dnd__placeholder--light"></div>}
+          showPlaceholder={isBeingDragged}
+          className="property-basic-editor__container"
+        >
+          {!isIndirectProperty && (
+            <PanelDnDEntryDragHandle
+              isBeingDragged={isBeingDragged}
+              dropTargetConnector={handleRef}
+            />
+          )}
           <div className="property-basic-editor">
-            {!isIndirectProperty && <PanelEntryDragHandle />}
             {isIndirectProperty && (
               <div className="property-basic-editor__name property-basic-editor__name--with-lock">
                 <div className="property-basic-editor__name--with-lock__icon">
@@ -458,8 +471,8 @@ const PropertyBasicEditor = observer(
               </button>
             )}
           </div>
-        </PanelEntryDropZonePlaceholder>
-      </div>
+        </PanelDnDEntry>
+      </>
     );
   },
 );
@@ -479,6 +492,8 @@ const DerivedPropertyBasicEditor = observer(
     isReadOnly: boolean;
   }) => {
     const ref = useRef<HTMLDivElement>(null);
+    const handleRef = useRef<HTMLDivElement>(null);
+
     const {
       derivedProperty,
       _class,
@@ -617,7 +632,8 @@ const DerivedPropertyBasicEditor = observer(
         }),
         [derivedProperty],
       );
-    dragConnector(dropConnector(ref));
+    dragConnector(handleRef);
+    dropConnector(ref);
     useDragPreviewLayer(dragPreviewConnector);
 
     // Action
@@ -642,10 +658,12 @@ const DerivedPropertyBasicEditor = observer(
     });
 
     return (
-      <div ref={ref} className="derived-property-editor__container">
-        <PanelEntryDropZonePlaceholder
+      <>
+        <PanelDnDEntry
+          ref={ref}
+          placeholder={<div className="uml-element-editor__dnd__placeholder" />}
+          className="derived-property-editor__container"
           showPlaceholder={isBeingDragged}
-          className="derived-property-editor__dnd__placeholder"
         >
           <div
             className={clsx('derived-property-editor', {
@@ -654,6 +672,12 @@ const DerivedPropertyBasicEditor = observer(
             })}
           >
             <div className="property-basic-editor">
+              {!isInheritedProperty && (
+                <PanelDnDEntryDragHandle
+                  dropTargetConnector={handleRef}
+                  isBeingDragged={isBeingDragged}
+                />
+              )}
               {isInheritedProperty && (
                 <div className="property-basic-editor__name property-basic-editor__name--with-lock">
                   <div className="property-basic-editor__name--with-lock__icon">
@@ -664,7 +688,6 @@ const DerivedPropertyBasicEditor = observer(
                   </span>
                 </div>
               )}
-              {!isInheritedProperty && <PanelEntryDragHandle />}
               {!isInheritedProperty && (
                 <input
                   disabled={isReadOnly}
@@ -828,8 +851,8 @@ const DerivedPropertyBasicEditor = observer(
               onEditorFocus={onLambdaEditorFocus}
             />
           </div>
-        </PanelEntryDropZonePlaceholder>
-      </div>
+        </PanelDnDEntry>
+      </>
     );
   },
 );
@@ -849,6 +872,8 @@ const ConstraintEditor = observer(
     isReadOnly: boolean;
   }) => {
     const ref = useRef<HTMLDivElement>(null);
+    const handleRef = useRef<HTMLDivElement>(null);
+
     const { constraint, _class, deleteConstraint, editorState, isReadOnly } =
       props;
     const editorStore = useEditorStore();
@@ -902,7 +927,8 @@ const ConstraintEditor = observer(
         }),
         [constraint],
       );
-    dragConnector(dropConnector(ref));
+    dragConnector(handleRef);
+    dropConnector(ref);
     useDragPreviewLayer(dragPreviewConnector);
 
     // Actions
@@ -922,74 +948,79 @@ const ConstraintEditor = observer(
       editorStore.graphEditorMode.openElement(constraint._OWNER);
 
     return (
-      <div ref={ref} className="constraint-editor__container">
-        <PanelEntryDropZonePlaceholder
-          showPlaceholder={isBeingDragged}
-          className="constraint-editor__dnd__placeholder"
+      <PanelDnDEntry
+        ref={ref}
+        placeholder={<div className="uml-element-editor__dnd__placeholder" />}
+        className="constraint-editor__container"
+        showPlaceholder={isBeingDragged}
+      >
+        <div
+          className={clsx('constraint-editor', {
+            backdrop__element: constraintState.parserError,
+          })}
         >
-          <div
-            className={clsx('constraint-editor', {
-              backdrop__element: constraintState.parserError,
-            })}
-          >
-            <div className="constraint-editor__content">
-              {!isInheritedConstraint && <PanelEntryDragHandle />}
-              {isInheritedConstraint && (
-                <div className="constraint-editor__content__name--with-lock">
-                  <div className="constraint-editor__content__name--with-lock__icon">
-                    <LockIcon />
-                  </div>
-                  <span className="constraint-editor__content__name--with-lock__name">
-                    {constraint.name}
-                  </span>
+          <div className="constraint-editor__content">
+            {!isInheritedConstraint && (
+              <PanelDnDEntryDragHandle
+                dropTargetConnector={handleRef}
+                isBeingDragged={isBeingDragged}
+              />
+            )}
+            {isInheritedConstraint && (
+              <div className="constraint-editor__content__name--with-lock">
+                <div className="constraint-editor__content__name--with-lock__icon">
+                  <LockIcon />
                 </div>
-              )}
-              {!isInheritedConstraint && (
-                <input
-                  className="constraint-editor__content__name"
-                  spellCheck={false}
-                  disabled={isReadOnly || isInheritedConstraint}
-                  value={constraint.name}
-                  onChange={changeName}
-                  placeholder="Constraint name"
-                />
-              )}
-              {isInheritedConstraint && (
-                <button
-                  className="uml-element-editor__visit-parent-element-btn"
-                  onClick={visitOwner}
-                  tabIndex={-1}
-                  title={`Visit super type class ${constraint._OWNER.path}`}
-                >
-                  <ArrowCircleRightIcon />
-                </button>
-              )}
-              {!isInheritedConstraint && !isReadOnly && (
-                <button
-                  className="uml-element-editor__remove-btn"
-                  disabled={isInheritedConstraint}
-                  onClick={remove}
-                  tabIndex={-1}
-                  title="Remove"
-                >
-                  <TimesIcon />
-                </button>
-              )}
-            </div>
-            <LambdaEditor
-              disabled={
-                editorState.classState.isConvertingConstraintLambdaObjects ||
-                isReadOnly ||
-                isInheritedConstraint
-              }
-              lambdaEditorState={constraintState}
-              forceBackdrop={hasParserError}
-              expectedType={PrimitiveType.BOOLEAN}
-              onEditorFocus={onLambdaEditorFocus}
-            />
+                <span className="constraint-editor__content__name--with-lock__name">
+                  {constraint.name}
+                </span>
+              </div>
+            )}
+            {!isInheritedConstraint && (
+              <input
+                className="constraint-editor__content__name"
+                spellCheck={false}
+                disabled={isReadOnly || isInheritedConstraint}
+                value={constraint.name}
+                onChange={changeName}
+                placeholder="Constraint name"
+              />
+            )}
+            {isInheritedConstraint && (
+              <button
+                className="uml-element-editor__visit-parent-element-btn"
+                onClick={visitOwner}
+                tabIndex={-1}
+                title={`Visit super type class ${constraint._OWNER.path}`}
+              >
+                <ArrowCircleRightIcon />
+              </button>
+            )}
+            {!isInheritedConstraint && !isReadOnly && (
+              <button
+                className="uml-element-editor__remove-btn"
+                disabled={isInheritedConstraint}
+                onClick={remove}
+                tabIndex={-1}
+                title="Remove"
+              >
+                <TimesIcon />
+              </button>
+            )}
           </div>
-        </PanelEntryDropZonePlaceholder>
-      </div>
+          <LambdaEditor
+            disabled={
+              editorState.classState.isConvertingConstraintLambdaObjects ||
+              isReadOnly ||
+              isInheritedConstraint
+            }
+            lambdaEditorState={constraintState}
+            forceBackdrop={hasParserError}
+            expectedType={PrimitiveType.BOOLEAN}
+            onEditorFocus={onLambdaEditorFocus}
+          />
+        </div>
+      </PanelDnDEntry>
     );
   },
 );
@@ -1008,6 +1039,8 @@ const SuperTypeEditor = observer(
     isReadOnly: boolean;
   }) => {
     const ref = useRef<HTMLDivElement>(null);
+    const handleRef = useRef<HTMLDivElement>(null);
+
     const { superType, _class, deleteSuperType, isReadOnly } = props;
     const editorStore = useEditorStore();
     // Type
@@ -1061,7 +1094,8 @@ const SuperTypeEditor = observer(
         }),
         [superType],
       );
-    dragConnector(dropConnector(ref));
+    dragConnector(handleRef);
+    dropConnector(ref);
     useDragPreviewLayer(dragPreviewConnector);
 
     const rawType = superType.value.rawType;
@@ -1078,44 +1112,50 @@ const SuperTypeEditor = observer(
       editorStore.graphEditorMode.openElement(rawType);
 
     return (
-      <div ref={ref} className="super-type-editor__container">
-        <PanelEntryDropZonePlaceholder showPlaceholder={isBeingDragged}>
-          <div className="super-type-editor">
-            <PanelEntryDragHandle />
-            <CustomSelectorInput
-              className="super-type-editor__class"
-              disabled={isReadOnly}
-              options={superTypeOptions}
-              onChange={changeType}
-              value={selectedType}
-              placeholder="Choose a class"
-              filterOption={filterOption}
-              formatOptionLabel={getPackageableElementOptionFormatter({
-                graph: editorStore.graphManagerState.graph,
-              })}
-            />
+      <PanelDnDEntry
+        ref={ref}
+        placeholder={<div className="uml-element-editor__dnd__placeholder" />}
+        className="super-type-editor__container"
+        showPlaceholder={isBeingDragged}
+      >
+        <PanelDnDEntryDragHandle
+          dropTargetConnector={handleRef}
+          isBeingDragged={isBeingDragged}
+        />
+        <div className="super-type-editor">
+          <CustomSelectorInput
+            className="super-type-editor__class"
+            disabled={isReadOnly}
+            options={superTypeOptions}
+            onChange={changeType}
+            value={selectedType}
+            placeholder="Choose a class"
+            filterOption={filterOption}
+            formatOptionLabel={getPackageableElementOptionFormatter({
+              graph: editorStore.graphManagerState.graph,
+            })}
+          />
+          <button
+            className="uml-element-editor__basic__detail-btn"
+            onClick={visitDerivationSource}
+            tabIndex={-1}
+            title="Visit super type"
+          >
+            <LongArrowRightIcon />
+          </button>
+          {!isReadOnly && (
             <button
-              className="uml-element-editor__basic__detail-btn"
-              onClick={visitDerivationSource}
+              className="uml-element-editor__remove-btn"
+              disabled={isReadOnly}
+              onClick={deleteSuperType}
               tabIndex={-1}
-              title="Visit super type"
+              title="Remove"
             >
-              <LongArrowRightIcon />
+              <TimesIcon />
             </button>
-            {!isReadOnly && (
-              <button
-                className="uml-element-editor__remove-btn"
-                disabled={isReadOnly}
-                onClick={deleteSuperType}
-                tabIndex={-1}
-                title="Remove"
-              >
-                <TimesIcon />
-              </button>
-            )}
-          </div>
-        </PanelEntryDropZonePlaceholder>
-      </div>
+          )}
+        </div>
+      </PanelDnDEntry>
     );
   },
 );

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

@@ -42,13 +42,13 @@ import {
   LockIcon,
   FireIcon,
   StickArrowCircleRightIcon,
-  PanelEntryDragHandle,
-  PanelEntryDropZonePlaceholder,
+  PanelDnDEntryDragHandle,
   DragPreviewLayer,
   useDragPreviewLayer,
   PanelDropZone,
   Panel,
   PanelContent,
+  PanelDnDEntry,
 } from '@finos/legend-art';
 import { LEGEND_STUDIO_TEST_ID } from '../../../../application/LegendStudioTesting.js';
 import {
@@ -100,6 +100,8 @@ const EnumBasicEditor = observer(
     isReadOnly: boolean;
   }) => {
     const ref = useRef<HTMLDivElement>(null);
+    const handleRef = useRef<HTMLDivElement>(null);
+
     const { enumValue, selectValue, deleteValue, isReadOnly } = props;
     const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) => {
       enum_setName(enumValue, event.target.value);
@@ -148,47 +150,55 @@ const EnumBasicEditor = observer(
         }),
         [enumValue],
       );
-    dragConnector(dropConnector(ref));
+    dragConnector(handleRef);
+    dropConnector(ref);
     useDragPreviewLayer(dragPreviewConnector);
 
     return (
-      <div ref={ref} className="enum-basic-editor__container">
-        <PanelEntryDropZonePlaceholder showPlaceholder={isBeingDragged}>
-          <div className="enum-basic-editor">
-            <PanelEntryDragHandle />
-            <InputWithInlineValidation
-              className="enum-basic-editor__name input-group__input"
-              spellCheck={false}
-              disabled={isReadOnly}
-              value={enumValue.name}
-              onChange={changeValue}
-              placeholder="Enum name"
-              validationErrorMessage={
-                isEnumValueDuplicated(enumValue) ? 'Duplicated enum' : undefined
-              }
-            />
+      <PanelDnDEntry
+        ref={ref}
+        showPlaceholder={isBeingDragged}
+        placeholder={<div className="dnd__placeholder--light"></div>}
+        className="enum-basic-editor__container"
+      >
+        <PanelDnDEntryDragHandle
+          dropTargetConnector={handleRef}
+          isBeingDragged={isBeingDragged}
+        />
+
+        <div className="enum-basic-editor">
+          <InputWithInlineValidation
+            className="enum-basic-editor__name input-group__input"
+            spellCheck={false}
+            disabled={isReadOnly}
+            value={enumValue.name}
+            onChange={changeValue}
+            placeholder="Enum name"
+            validationErrorMessage={
+              isEnumValueDuplicated(enumValue) ? 'Duplicated enum' : undefined
+            }
+          />
+          <button
+            className="uml-element-editor__basic__detail-btn"
+            onClick={selectValue}
+            tabIndex={-1}
+            title="See detail"
+          >
+            <LongArrowRightIcon />
+          </button>
+          {!isReadOnly && (
             <button
-              className="uml-element-editor__basic__detail-btn"
-              onClick={selectValue}
+              className="uml-element-editor__remove-btn"
+              disabled={isReadOnly}
+              onClick={deleteValue}
               tabIndex={-1}
-              title="See detail"
+              title="Remove"
             >
-              <LongArrowRightIcon />
+              <TimesIcon />
             </button>
-            {!isReadOnly && (
-              <button
-                className="uml-element-editor__remove-btn"
-                disabled={isReadOnly}
-                onClick={deleteValue}
-                tabIndex={-1}
-                title="Remove"
-              >
-                <TimesIcon />
-              </button>
-            )}
-          </div>
-        </PanelEntryDropZonePlaceholder>
-      </div>
+          )}
+        </div>
+      </PanelDnDEntry>
     );
   },
 );