@finos/legend-application-studio 23.1.3 → 23.1.5

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

@@ -26,12 +26,12 @@ import {
   PlusIcon,
   TimesIcon,
   LockIcon,
-  PanelEntryDragHandle,
-  PanelEntryDropZonePlaceholder,
+  PanelDnDEntryDragHandle,
   DragPreviewLayer,
   useDragPreviewLayer,
   Panel,
   PanelContent,
+  PanelDnDEntry,
 } from '@finos/legend-art';
 import { LEGEND_STUDIO_TEST_ID } from '../../../../application/LegendStudioTesting.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
@@ -70,6 +70,8 @@ const TagBasicEditor = observer(
     isReadOnly: boolean;
   }) => {
     const ref = useRef<HTMLDivElement>(null);
+    const handleRef = useRef<HTMLDivElement>(null);
+
     const { tag, _profile, deleteValue, isReadOnly } = props;
     const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) => {
       tagStereotype_setValue(tag, event.target.value);
@@ -112,39 +114,46 @@ const TagBasicEditor = observer(
       }),
       [tag],
     );
-    dragConnector(dropConnector(ref));
+    dragConnector(handleRef);
+    dropConnector(ref);
     useDragPreviewLayer(dragPreviewConnector);
 
     return (
-      <div ref={ref} className="tag-basic-editor__container">
-        <PanelEntryDropZonePlaceholder showPlaceholder={isBeingDragged}>
-          <div className="tag-basic-editor">
-            <PanelEntryDragHandle />
-            <InputWithInlineValidation
-              className="tag-basic-editor__value input-group__input"
-              spellCheck={false}
+      <PanelDnDEntry
+        ref={ref}
+        className="tag-basic-editor__container"
+        placeholder={<div className="dnd__placeholder--light"></div>}
+        showPlaceholder={isBeingDragged}
+      >
+        <PanelDnDEntryDragHandle
+          dropTargetConnector={handleRef}
+          isBeingDragged={isBeingDragged}
+        />
+        <div className="tag-basic-editor">
+          <InputWithInlineValidation
+            className="tag-basic-editor__value input-group__input"
+            spellCheck={false}
+            disabled={isReadOnly}
+            value={tag.value}
+            onChange={changeValue}
+            placeholder="Tag value"
+            validationErrorMessage={
+              isTagDuplicated(tag) ? 'Duplicated tag' : undefined
+            }
+          />
+          {!isReadOnly && (
+            <button
+              className="uml-element-editor__remove-btn"
               disabled={isReadOnly}
-              value={tag.value}
-              onChange={changeValue}
-              placeholder="Tag value"
-              validationErrorMessage={
-                isTagDuplicated(tag) ? 'Duplicated tag' : undefined
-              }
-            />
-            {!isReadOnly && (
-              <button
-                className="uml-element-editor__remove-btn"
-                disabled={isReadOnly}
-                onClick={deleteValue}
-                tabIndex={-1}
-                title="Remove"
-              >
-                <TimesIcon />
-              </button>
-            )}
-          </div>
-        </PanelEntryDropZonePlaceholder>
-      </div>
+              onClick={deleteValue}
+              tabIndex={-1}
+              title="Remove"
+            >
+              <TimesIcon />
+            </button>
+          )}
+        </div>
+      </PanelDnDEntry>
     );
   },
 );
@@ -163,6 +172,8 @@ const StereotypeBasicEditor = observer(
     isReadOnly: boolean;
   }) => {
     const ref = useRef<HTMLDivElement>(null);
+    const handleRef = useRef<HTMLDivElement>(null);
+
     const { stereotype, _profile, deleteStereotype, isReadOnly } = props;
     const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) => {
       tagStereotype_setValue(stereotype, event.target.value);
@@ -208,41 +219,48 @@ const StereotypeBasicEditor = observer(
         }),
         [stereotype],
       );
-    dragConnector(dropConnector(ref));
+    dragConnector(handleRef);
+    dropConnector(ref);
     useDragPreviewLayer(dragPreviewConnector);
 
     return (
-      <div ref={ref} className="stereotype-basic-editor__container">
-        <PanelEntryDropZonePlaceholder showPlaceholder={isBeingDragged}>
-          <div className="stereotype-basic-editor">
-            <PanelEntryDragHandle />
-            <InputWithInlineValidation
-              className="stereotype-basic-editor__value input-group__input"
-              spellCheck={false}
+      <PanelDnDEntry
+        ref={ref}
+        placeholder={<div className="dnd__placeholder--light"></div>}
+        className="stereotype-basic-editor__container"
+        showPlaceholder={isBeingDragged}
+      >
+        <PanelDnDEntryDragHandle
+          dropTargetConnector={handleRef}
+          isBeingDragged={isBeingDragged}
+        />
+        <div className="stereotype-basic-editor">
+          <InputWithInlineValidation
+            className="stereotype-basic-editor__value input-group__input"
+            spellCheck={false}
+            disabled={isReadOnly}
+            value={stereotype.value}
+            onChange={changeValue}
+            placeholder="Stereotype value"
+            validationErrorMessage={
+              isStereotypeDuplicated(stereotype)
+                ? 'Duplicated stereotype'
+                : undefined
+            }
+          />
+          {!isReadOnly && (
+            <button
+              className="uml-element-editor__remove-btn"
               disabled={isReadOnly}
-              value={stereotype.value}
-              onChange={changeValue}
-              placeholder="Stereotype value"
-              validationErrorMessage={
-                isStereotypeDuplicated(stereotype)
-                  ? 'Duplicated stereotype'
-                  : undefined
-              }
-            />
-            {!isReadOnly && (
-              <button
-                className="uml-element-editor__remove-btn"
-                disabled={isReadOnly}
-                onClick={deleteStereotype}
-                tabIndex={-1}
-                title="Remove"
-              >
-                <TimesIcon />
-              </button>
-            )}
-          </div>
-        </PanelEntryDropZonePlaceholder>
-      </div>
+              onClick={deleteStereotype}
+              tabIndex={-1}
+              title="Remove"
+            >
+              <TimesIcon />
+            </button>
+          )}
+        </div>
+      </PanelDnDEntry>
     );
   },
 );

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

@@ -21,8 +21,8 @@ import {
   createFilter,
   TimesIcon,
   ArrowCircleRightIcon,
-  PanelEntryDragHandle,
-  PanelEntryDropZonePlaceholder,
+  PanelDnDEntryDragHandle,
+  PanelDnDEntry,
   DragPreviewLayer,
   useDragPreviewLayer,
 } from '@finos/legend-art';
@@ -74,6 +74,7 @@ export const StereotypeSelector = observer(
     darkTheme?: boolean;
   }) => {
     const ref = useRef<HTMLDivElement>(null);
+    const handleRef = useRef<HTMLDivElement>(null);
     const {
       annotatedElement,
       stereotype,
@@ -166,65 +167,72 @@ export const StereotypeSelector = observer(
         }),
         [stereotype],
       );
-    dragConnector(dropConnector(ref));
+    dragConnector(handleRef);
+    dropConnector(ref);
     useDragPreviewLayer(dragPreviewConnector);
 
     return (
-      <div ref={ref} className="stereotype-selector__container">
-        <PanelEntryDropZonePlaceholder showPlaceholder={isBeingDragged}>
-          <div className="stereotype-selector">
-            <PanelEntryDragHandle />
-            <div
-              className={`stereotype-selector__profile ${
-                darkTheme ? 'stereotype-selector-dark-theme' : ''
-              } stereotype-selector__profile`}
-            >
-              <CustomSelectorInput
-                className="stereotype-selector__profile__selector"
-                disabled={isReadOnly}
-                options={profileOptions}
-                onChange={changeProfile}
-                value={selectedProfile}
-                placeholder="Choose a profile"
-                filterOption={filterOption}
-                darkMode={Boolean(darkTheme)}
-              />
-              <button
-                className={`stereotype-selector__profile__visit-btn ${
-                  darkTheme ? 'stereotype-selector-dark-theme' : ''
-                }`}
-                disabled={isStubbed_PackageableElement(stereotype.value._OWNER)}
-                onClick={visitProfile}
-                tabIndex={-1}
-                title="Visit profile"
-              >
-                <ArrowCircleRightIcon />
-              </button>
-            </div>
+      <PanelDnDEntry
+        ref={ref}
+        className="stereotype-selector__container"
+        placeholder={<div className="dnd__placeholder--light"></div>}
+        showPlaceholder={isBeingDragged}
+      >
+        <PanelDnDEntryDragHandle
+          dropTargetConnector={handleRef}
+          isBeingDragged={isBeingDragged}
+        />
+        <div className="stereotype-selector">
+          <div
+            className={`stereotype-selector__profile ${
+              darkTheme ? 'stereotype-selector-dark-theme' : ''
+            } stereotype-selector__profile`}
+          >
             <CustomSelectorInput
-              className="stereotype-selector__stereotype"
+              className="stereotype-selector__profile__selector"
               disabled={isReadOnly}
-              options={stereotypeOptions}
-              onChange={updateStereotype}
-              value={selectedStereotype}
-              placeholder="Choose a stereotype"
-              filterOption={stereotypeFilterOption}
-              darkMode={darkTheme ?? false}
+              options={profileOptions}
+              onChange={changeProfile}
+              value={selectedProfile}
+              placeholder="Choose a profile"
+              filterOption={filterOption}
+              darkMode={Boolean(darkTheme)}
             />
-            {!isReadOnly && (
-              <button
-                className="uml-element-editor__remove-btn"
-                disabled={isReadOnly}
-                onClick={deleteStereotype}
-                tabIndex={-1}
-                title="Remove"
-              >
-                <TimesIcon />
-              </button>
-            )}
+            <button
+              className={`stereotype-selector__profile__visit-btn ${
+                darkTheme ? 'stereotype-selector-dark-theme' : ''
+              }`}
+              disabled={isStubbed_PackageableElement(stereotype.value._OWNER)}
+              onClick={visitProfile}
+              tabIndex={-1}
+              title="Visit profile"
+            >
+              <ArrowCircleRightIcon />
+            </button>
           </div>
-        </PanelEntryDropZonePlaceholder>
-      </div>
+          <CustomSelectorInput
+            className="stereotype-selector__stereotype"
+            disabled={isReadOnly}
+            options={stereotypeOptions}
+            onChange={updateStereotype}
+            value={selectedStereotype}
+            placeholder="Choose a stereotype"
+            filterOption={stereotypeFilterOption}
+            darkMode={darkTheme ?? false}
+          />
+          {!isReadOnly && (
+            <button
+              className="uml-element-editor__remove-btn"
+              disabled={isReadOnly}
+              onClick={deleteStereotype}
+              tabIndex={-1}
+              title="Remove"
+            >
+              <TimesIcon />
+            </button>
+          )}
+        </div>
+      </PanelDnDEntry>
     );
   },
 );

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

@@ -24,8 +24,8 @@ import {
   TimesIcon,
   ArrowCircleRightIcon,
   LongArrowAltUpIcon,
-  PanelEntryDragHandle,
-  PanelEntryDropZonePlaceholder,
+  PanelDnDEntryDragHandle,
+  PanelDnDEntry,
   DragPreviewLayer,
   useDragPreviewLayer,
 } from '@finos/legend-art';
@@ -78,6 +78,8 @@ export const TaggedValueEditor = observer(
     darkTheme?: boolean;
   }) => {
     const ref = useRef<HTMLDivElement>(null);
+    const handleRef = useRef<HTMLDivElement>(null);
+
     const {
       annotatedElement,
       taggedValue,
@@ -176,110 +178,114 @@ export const TaggedValueEditor = observer(
         }),
         [taggedValue],
       );
-    dragConnector(dropConnector(ref));
+    dragConnector(handleRef);
+    dropConnector(ref);
     useDragPreviewLayer(dragPreviewConnector);
 
     return (
-      <div ref={ref} className="tagged-value-editor__container">
-        <PanelEntryDropZonePlaceholder
-          showPlaceholder={isBeingDragged}
-          className="tagged-value-editor__dnd__placeholder"
-        >
-          <div className="tagged-value-editor">
-            <PanelEntryDragHandle />
-            <div
-              className={`tagged-value-editor__profile ${
+      <PanelDnDEntry
+        ref={ref}
+        className="tagged-value-editor__container"
+        showPlaceholder={isBeingDragged}
+        placeholder={<div className="dnd__placeholder--light"></div>}
+      >
+        <PanelDnDEntryDragHandle
+          dropTargetConnector={handleRef}
+          isBeingDragged={isBeingDragged}
+        />
+        <div className="tagged-value-editor">
+          <div
+            className={`tagged-value-editor__profile ${
+              darkTheme ? 'tagged-value-editor-dark-theme' : ''
+            }`}
+          >
+            <CustomSelectorInput
+              className="tagged-value-editor__profile__selector"
+              disabled={isReadOnly}
+              options={profileOptions}
+              onChange={changeProfile}
+              value={selectedProfile}
+              placeholder="Choose a profile"
+              filterOption={profileFilterOption}
+              darkMode={darkTheme ?? false}
+            />
+            <button
+              className={`tagged-value-editor__profile__visit-btn ${
                 darkTheme ? 'tagged-value-editor-dark-theme' : ''
               }`}
+              disabled={isStubbed_PackageableElement(
+                taggedValue.tag.value._OWNER,
+              )}
+              onClick={visitProfile}
+              tabIndex={-1}
+              title="Visit profile"
             >
-              <CustomSelectorInput
-                className="tagged-value-editor__profile__selector"
+              <ArrowCircleRightIcon />
+            </button>
+          </div>
+          <CustomSelectorInput
+            className="tagged-value-editor__tag"
+            disabled={isReadOnly}
+            options={tagOptions}
+            onChange={changeTag}
+            value={selectedTag}
+            placeholder="Choose a tag"
+            filterOption={tagFilterOption}
+            darkMode={Boolean(darkTheme)}
+          />
+          {!isReadOnly && (
+            <button
+              className="uml-element-editor__remove-btn"
+              disabled={isReadOnly}
+              onClick={deleteValue}
+              tabIndex={-1}
+              title="Remove"
+            >
+              <TimesIcon />
+            </button>
+          )}
+          <div
+            className={clsx('tagged-value-editor__value', {
+              'tagged-value-editor__value__expanded': isExpanded,
+            })}
+          >
+            {isExpanded && (
+              <textarea
+                className={`tagged-value-editor__value__input ${
+                  darkTheme ? 'tagged-value-editor-dark-theme' : ''
+                }`}
+                spellCheck={false}
                 disabled={isReadOnly}
-                options={profileOptions}
-                onChange={changeProfile}
-                value={selectedProfile}
-                placeholder="Choose a profile"
-                filterOption={profileFilterOption}
-                darkMode={darkTheme ?? false}
+                value={taggedValue.value}
+                onChange={changeValue}
+                placeholder="Value"
               />
-              <button
-                className={`tagged-value-editor__profile__visit-btn ${
+            )}
+            {!isExpanded && (
+              <input
+                className={`tagged-value-editor__value__input ${
                   darkTheme ? 'tagged-value-editor-dark-theme' : ''
                 }`}
-                disabled={isStubbed_PackageableElement(
-                  taggedValue.tag.value._OWNER,
-                )}
-                onClick={visitProfile}
-                tabIndex={-1}
-                title="Visit profile"
-              >
-                <ArrowCircleRightIcon />
-              </button>
-            </div>
-            <CustomSelectorInput
-              className="tagged-value-editor__tag"
-              disabled={isReadOnly}
-              options={tagOptions}
-              onChange={changeTag}
-              value={selectedTag}
-              placeholder="Choose a tag"
-              filterOption={tagFilterOption}
-              darkMode={Boolean(darkTheme)}
-            />
-            {!isReadOnly && (
-              <button
-                className="uml-element-editor__remove-btn"
+                spellCheck={false}
                 disabled={isReadOnly}
-                onClick={deleteValue}
-                tabIndex={-1}
-                title="Remove"
-              >
-                <TimesIcon />
-              </button>
+                value={taggedValue.value}
+                onChange={changeValue}
+                placeholder="Value"
+              />
             )}
-            <div
-              className={clsx('tagged-value-editor__value', {
-                'tagged-value-editor__value__expanded': isExpanded,
-              })}
+            <button
+              className={`tagged-value-editor__value__expand-btn ${
+                darkTheme ? 'tagged-value-editor-dark-theme' : ''
+              }`}
+              onClick={toggleExpandedMode}
+              tabIndex={-1}
+              title="Expand/Collapse"
             >
-              {isExpanded && (
-                <textarea
-                  className={`tagged-value-editor__value__input ${
-                    darkTheme ? 'tagged-value-editor-dark-theme' : ''
-                  }`}
-                  spellCheck={false}
-                  disabled={isReadOnly}
-                  value={taggedValue.value}
-                  onChange={changeValue}
-                  placeholder="Value"
-                />
-              )}
-              {!isExpanded && (
-                <input
-                  className={`tagged-value-editor__value__input ${
-                    darkTheme ? 'tagged-value-editor-dark-theme' : ''
-                  }`}
-                  spellCheck={false}
-                  disabled={isReadOnly}
-                  value={taggedValue.value}
-                  onChange={changeValue}
-                  placeholder="Value"
-                />
-              )}
-              <button
-                className={`tagged-value-editor__value__expand-btn ${
-                  darkTheme ? 'tagged-value-editor-dark-theme' : ''
-                }`}
-                onClick={toggleExpandedMode}
-                tabIndex={-1}
-                title="Expand/Collapse"
-              >
-                {isExpanded ? <LongArrowAltUpIcon /> : <MoreVerticalIcon />}
-              </button>
-            </div>
+              {isExpanded ? <LongArrowAltUpIcon /> : <MoreVerticalIcon />}
+            </button>
           </div>
-        </PanelEntryDropZonePlaceholder>
-      </div>
+        </div>
+      </PanelDnDEntry>
     );
   },
 );

package/src/stores/project-view/ProjectViewerStore.ts

@@ -37,7 +37,6 @@ import {
   type ProjectGAVCoordinates,
   type EntitiesWithOrigin,
   parseGAVCoordinates,
-  LegendSDLC,
 } from '@finos/legend-storage';
 import {
   ProjectConfiguration,
@@ -63,6 +62,7 @@ import {
   GraphDataDeserializationError,
   GraphBuilderError,
   createGraphBuilderReport,
+  LegendSDLC,
 } from '@finos/legend-graph';
 import { GRAPH_EDITOR_MODE } from '../editor/EditorConfig.js';