@finos/legend-application-studio 13.0.1 → 13.1.0

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

@@ -53,6 +53,7 @@ import {
   LongArrowRightIcon,
   CogIcon,
   CaretRightIcon,
+  PanelDropZone,
 } from '@finos/legend-art';
 import { getElementIcon } from '../../shared/ElementIconUtils.js';
 import type { RuntimeExplorerTreeNodeData } from '../../../stores/shared/TreeUtil.js';
@@ -405,15 +406,18 @@ const RuntimeExplorer = observer(
       },
       [isReadOnly, runtimeEditorState, runtimeValue],
     );
-    const [{ isRuntimeSubElementDragOver }, dropRuntimeSubElementRef] = useDrop(
+    const [{ isRuntimeSubElementDragOver }, dropRuntimeSubElementRef] = useDrop<
+      ElementDragSource,
+      void,
+      { isRuntimeSubElementDragOver: boolean }
+    >(
       () => ({
         accept: [
           CORE_DND_TYPE.PROJECT_EXPLORER_CONNECTION,
           CORE_DND_TYPE.PROJECT_EXPLORER_MAPPING,
         ],
-        drop: (item: ElementDragSource): void =>
-          handleDropRuntimeSubElement(item),
-        collect: (monitor): { isRuntimeSubElementDragOver: boolean } => ({
+        drop: (item) => handleDropRuntimeSubElement(item),
+        collect: (monitor) => ({
           isRuntimeSubElementDragOver: monitor.isOver({ shallow: true }),
         }),
       }),
@@ -440,10 +444,10 @@ const RuntimeExplorer = observer(
           disabled={true}
           menuProps={{ elevation: 7 }}
         >
-          <div ref={dropRuntimeSubElementRef} className="dnd__dropzone">
-            <div
-              className={clsx({ dnd__overlay: isRuntimeSubElementDragOver })}
-            />
+          <PanelDropZone
+            dropTargetConnector={dropRuntimeSubElementRef}
+            isDragOver={isRuntimeSubElementDragOver}
+          >
             <div className="panel__content__list">
               <TreeView
                 components={{
@@ -459,7 +463,7 @@ const RuntimeExplorer = observer(
                 }}
               />
             </div>
-          </div>
+          </PanelDropZone>
         </ContextMenu>
       </div>
     );
@@ -657,10 +661,14 @@ const IdentifiedConnectionsPerStoreEditor = observer(
       },
       [currentRuntimeEditorTabState, isReadOnly],
     );
-    const [{ isConnectionDragOver, dragItem }, dropConnectionRef] = useDrop(
+    const [{ isConnectionDragOver, dragItem }, dropConnectionRef] = useDrop<
+      ElementDragSource,
+      void,
+      { isConnectionDragOver: boolean; dragItem: ElementDragSource | null }
+    >(
       () => ({
         accept: [CORE_DND_TYPE.PROJECT_EXPLORER_CONNECTION],
-        drop: (item: ElementDragSource): void => handleDropConnection(item),
+        drop: (item) => handleDropConnection(item),
         collect: (
           monitor,
         ): {
@@ -736,56 +744,44 @@ const IdentifiedConnectionsPerStoreEditor = observer(
                 }
                 menuProps={{ elevation: 7 }}
               >
-                <div ref={dropConnectionRef} className="dnd__dropzone">
+                <PanelDropZone
+                  dropTargetConnector={dropConnectionRef}
+                  isDragOver={isConnectionDragOver}
+                >
                   {Boolean(
                     currentRuntimeEditorTabState.identifiedConnections.length,
                   ) && (
-                    <>
-                      <div
-                        className={clsx({ dnd__overlay: isConnectionDragOver })}
-                      />
-                      <div className="panel__content__list">
-                        {currentRuntimeEditorTabState.identifiedConnections.map(
-                          (rtConnection) => (
-                            <IdentifiedConnectionsPerStoreExplorerItem
-                              key={rtConnection._UUID}
-                              identifiedConnection={rtConnection}
-                              currentRuntimeEditorTabState={
-                                currentRuntimeEditorTabState
-                              }
-                              isActive={rtConnection === identifiedConnection}
-                              isReadOnly={isReadOnly}
-                            />
-                          ),
-                        )}
-                      </div>
-                    </>
+                    <div className="panel__content__list">
+                      {currentRuntimeEditorTabState.identifiedConnections.map(
+                        (rtConnection) => (
+                          <IdentifiedConnectionsPerStoreExplorerItem
+                            key={rtConnection._UUID}
+                            identifiedConnection={rtConnection}
+                            currentRuntimeEditorTabState={
+                              currentRuntimeEditorTabState
+                            }
+                            isActive={rtConnection === identifiedConnection}
+                            isReadOnly={isReadOnly}
+                          />
+                        ),
+                      )}
+                    </div>
                   )}
                   {!currentRuntimeEditorTabState.identifiedConnections
                     .length && (
                     <BlankPanelPlaceholder
-                      placeholderText="Add a connection"
+                      text="Add a connection"
                       onClick={addNewConnection}
                       clickActionType="add"
                       tooltipText="Drop a connection to add it to the list, or click to add an embedded connection"
-                      dndProps={
-                        isEmbeddedRuntime
-                          ? undefined
-                          : {
-                              isDragOver: isConnectionDragOver,
-                              canDrop: canDropConnection,
-                            }
-                      }
-                      readOnlyProps={
-                        !isReadOnly
-                          ? undefined
-                          : {
-                              placeholderText: 'No connection',
-                            }
+                      isDropZoneActive={
+                        isEmbeddedRuntime ? undefined : canDropConnection
                       }
+                      disabled={isReadOnly}
+                      previewText="No connection"
                     />
                   )}
-                </div>
+                </PanelDropZone>
               </ContextMenu>
             </div>
           </ResizablePanel>
@@ -909,7 +905,7 @@ const RuntimeGeneralEditor = observer(
       }
     };
     const handleDropMapping = useCallback(
-      (item: UMLEditorElementDropTarget): void => {
+      (item: UMLEditorElementDropTarget) => {
         const element = item.data.packageableElement;
         if (
           !isReadOnly &&
@@ -923,11 +919,15 @@ const RuntimeGeneralEditor = observer(
       },
       [isReadOnly, runtimeEditorState, runtimeValue.mappings],
     );
-    const [{ isMappingDragOver }, dropMappingRef] = useDrop(
+    const [{ isMappingDragOver }, dropMappingRef] = useDrop<
+      ElementDragSource,
+      void,
+      { isMappingDragOver: boolean }
+    >(
       () => ({
         accept: [CORE_DND_TYPE.PROJECT_EXPLORER_MAPPING],
-        drop: (item: ElementDragSource): void => handleDropMapping(item),
-        collect: (monitor): { isMappingDragOver: boolean } => ({
+        drop: (item) => handleDropMapping(item),
+        collect: (monitor) => ({
           isMappingDragOver: monitor.isOver({ shallow: true }),
         }),
       }),
@@ -937,46 +937,45 @@ const RuntimeGeneralEditor = observer(
     return (
       <div className="panel runtime-explorer">
         <div className="panel__header"></div>
-        <div
-          ref={dropMappingRef}
-          className="panel__content dnd__overlay__container"
-        >
-          <div
-            className={clsx({ dnd__overlay: isMappingDragOver && !isReadOnly })}
-          />
-          <div className="panel__content__form">
-            <div className="panel__content__form__section">
-              <div className="panel__content__form__section__header__label">
-                Mappings
-              </div>
-              <div className="panel__content__form__section__header__prompt">
-                Specifies the list of mappings covered by this runtime
-              </div>
-              <div className="panel__content__form__section__list">
-                {runtimeValue.mappings.map((mappingRef) => (
-                  <RuntimeMappingEditor
-                    key={mappingRef.value._UUID}
-                    runtimeEditorState={runtimeEditorState}
-                    mappingRef={mappingRef}
-                    isReadOnly={isReadOnly || isRuntimeEmbedded}
-                  />
-                ))}
-                {!isRuntimeEmbedded && (
-                  <div className="panel__content__form__section__list__new-item__add">
-                    <button
-                      className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
-                      disabled={!allowAddingMapping}
-                      tabIndex={-1}
-                      onClick={addMapping}
-                      title="Add Mapping"
-                    >
-                      Add Value
-                    </button>
-                  </div>
-                )}
+        <div className="panel__content">
+          <PanelDropZone
+            dropTargetConnector={dropMappingRef}
+            isDragOver={isMappingDragOver && !isReadOnly}
+          >
+            <div className="panel__content__form">
+              <div className="panel__content__form__section">
+                <div className="panel__content__form__section__header__label">
+                  Mappings
+                </div>
+                <div className="panel__content__form__section__header__prompt">
+                  Specifies the list of mappings covered by this runtime
+                </div>
+                <div className="panel__content__form__section__list">
+                  {runtimeValue.mappings.map((mappingRef) => (
+                    <RuntimeMappingEditor
+                      key={mappingRef.value._UUID}
+                      runtimeEditorState={runtimeEditorState}
+                      mappingRef={mappingRef}
+                      isReadOnly={isReadOnly || isRuntimeEmbedded}
+                    />
+                  ))}
+                  {!isRuntimeEmbedded && (
+                    <div className="panel__content__form__section__list__new-item__add">
+                      <button
+                        className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
+                        disabled={!allowAddingMapping}
+                        tabIndex={-1}
+                        onClick={addMapping}
+                        title="Add Mapping"
+                      >
+                        Add Value
+                      </button>
+                    </div>
+                  )}
+                </div>
               </div>
             </div>
-          </div>
+          </PanelDropZone>
         </div>
       </div>
     );

package/src/components/editor/edit-panel/data-editor/DataElementEditor.tsx

@@ -28,6 +28,7 @@ import {
   LockIcon,
   MenuContent,
   MenuContentItem,
+  PanelDropZone,
   PlusIcon,
 } from '@finos/legend-art';
 import { prettyCONSTName } from '@finos/legend-shared';
@@ -53,9 +54,15 @@ import {
   type UMLEditorElementDropTarget,
   type ElementDragSource,
 } from '../../../../stores/shared/DnDUtil.js';
-import { TaggedValueEditor } from '../uml-editor/TaggedValueEditor.js';
+import {
+  TaggedValueDragPreviewLayer,
+  TaggedValueEditor,
+} from '../uml-editor/TaggedValueEditor.js';
 import { useCallback, useEffect, useRef } from 'react';
-import { StereotypeSelector } from '../uml-editor/StereotypeSelector.js';
+import {
+  StereotypeDragPreviewLayer,
+  StereotypeSelector,
+} from '../uml-editor/StereotypeSelector.js';
 import {
   externalFormatData_setContentType,
   externalFormatData_setData,
@@ -212,11 +219,15 @@ export const DataElementEditor = observer(() => {
     },
     [dataElement, 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 }),
       }),
     }),
@@ -235,11 +246,15 @@ export const DataElementEditor = observer(() => {
     },
     [dataElement, 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 }),
       }),
     }),
@@ -308,23 +323,24 @@ export const DataElementEditor = observer(() => {
             </div>
             <div className="data-editor__content">
               <div className="data-editor__content__lists">
-                <div
-                  ref={dropStereotypeRef}
-                  className={clsx('panel__content__lists', {
-                    'panel__content__lists--dnd-over':
-                      isStereotypeDragOver && !isReadOnly,
-                  })}
+                <PanelDropZone
+                  isDragOver={isStereotypeDragOver && !isReadOnly}
+                  dropTargetConnector={dropStereotypeRef}
                 >
-                  {dataElement.stereotypes.map((stereotype) => (
-                    <StereotypeSelector
-                      key={stereotype.value._UUID}
-                      stereotype={stereotype}
-                      deleteStereotype={_deleteStereotype(stereotype)}
-                      isReadOnly={isReadOnly}
-                      darkTheme={true}
-                    />
-                  ))}
-                </div>
+                  <div className="panel__content__lists">
+                    <StereotypeDragPreviewLayer />
+                    {dataElement.stereotypes.map((stereotype) => (
+                      <StereotypeSelector
+                        key={stereotype.value._UUID}
+                        annotatedElement={dataElement}
+                        stereotype={stereotype}
+                        deleteStereotype={_deleteStereotype(stereotype)}
+                        isReadOnly={isReadOnly}
+                        darkTheme={true}
+                      />
+                    ))}
+                  </div>
+                </PanelDropZone>
               </div>
             </div>
           </>
@@ -356,23 +372,24 @@ export const DataElementEditor = observer(() => {
             </div>
             <div className="data-editor__content">
               <div className="data-editor__content__lists">
-                <div
-                  ref={dropTaggedValueRef}
-                  className={clsx('panel__content__lists', {
-                    'panel__content__lists--dnd-over':
-                      isTaggedValueDragOver && !isReadOnly,
-                  })}
+                <PanelDropZone
+                  isDragOver={isTaggedValueDragOver && !isReadOnly}
+                  dropTargetConnector={dropTaggedValueRef}
                 >
-                  {dataElement.taggedValues.map((taggedValue) => (
-                    <TaggedValueEditor
-                      key={taggedValue._UUID}
-                      taggedValue={taggedValue}
-                      deleteValue={deleteTaggedValue(taggedValue)}
-                      isReadOnly={isReadOnly}
-                      darkTheme={true}
-                    />
-                  ))}
-                </div>
+                  <div className="panel__content__lists">
+                    <TaggedValueDragPreviewLayer />
+                    {dataElement.taggedValues.map((taggedValue) => (
+                      <TaggedValueEditor
+                        annotatedElement={dataElement}
+                        key={taggedValue._UUID}
+                        taggedValue={taggedValue}
+                        deleteValue={deleteTaggedValue(taggedValue)}
+                        isReadOnly={isReadOnly}
+                        darkTheme={true}
+                      />
+                    ))}
+                  </div>
+                </PanelDropZone>
               </div>
             </div>
           </>

package/src/components/editor/edit-panel/data-editor/RelationalCSVDataEditor.tsx

@@ -237,7 +237,7 @@ export const RelationalCSVDataEditor = observer(
               {!currentTableState && (
                 <BlankPanelPlaceholder
                   onClick={(): void => openIdentifierModal()}
-                  placeholderText="Add a relational data table"
+                  text="Add a relational data table"
                   clickActionType="add"
                   tooltipText={'Click to add new relational data table'}
                 />

package/src/components/editor/edit-panel/element-generation-editor/FileGenerationEditor.tsx

@@ -55,9 +55,11 @@ import {
   FileCodeIcon,
   LockIcon,
   SaveIcon,
+  PanelDropZone,
 } from '@finos/legend-art';
 import {
   type FileGenerationSourceDropTarget,
+  type ElementDragSource,
   CORE_DND_TYPE,
 } from '../../../../stores/shared/DnDUtil.js';
 import type { FileGenerationState } from '../../../../stores/editor-state/FileGenerationState.js';
@@ -1332,15 +1334,19 @@ export const FileGenerationConfigurationEditor = observer(
         isReadOnly,
       ],
     );
-    const [{ isScopeElementDragOver }, scopeElementDropRef] = useDrop(
+    const [{ isScopeElementDragOver }, scopeElementDropRef] = useDrop<
+      ElementDragSource,
+      void,
+      { isScopeElementDragOver: boolean }
+    >(
       () => ({
         accept: [
           CORE_DND_TYPE.PROJECT_EXPLORER_PACKAGE,
           CORE_DND_TYPE.PROJECT_EXPLORER_CLASS,
           CORE_DND_TYPE.PROJECT_EXPLORER_ENUMERATION,
         ],
-        drop: (item: FileGenerationSourceDropTarget): void => handleDrop(item),
-        collect: (monitor): { isScopeElementDragOver: boolean } => ({
+        drop: (item) => handleDrop(item),
+        collect: (monitor) => ({
           isScopeElementDragOver: monitor.isOver({ shallow: true }),
         }),
       }),
@@ -1381,50 +1387,49 @@ export const FileGenerationConfigurationEditor = observer(
             )}
           </div>
         </div>
-        <div ref={scopeElementDropRef} className="panel__content dnd__dropzone">
-          <div
-            className={clsx({
-              dnd__overlay:
-                isScopeElementDragOver &&
-                !elementGenerationState &&
-                !isReadOnly,
-            })}
-          />
-          <div className="file-generation-editor__configuration__content">
-            <FileGenerationScopeEditor
-              fileGenerationState={fileGenerationState}
-              regenerate={debouncedRegenerate}
-              isReadOnly={isReadOnly || Boolean(elementGenerationState)}
-            />
-            <div className="panel__content__form__section">
-              <div className="panel__content__form__section__header__label">
-                Generation Output Path
-              </div>
-              <div className="panel__content__form__section__header__prompt">
-                Specifies the root path where files will be generated. Defaults
-                to the file specification path
-              </div>
-              <input
-                className="panel__content__form__section__input"
-                spellCheck={false}
-                disabled={isReadOnly}
-                value={fileGeneration.generationOutputPath ?? ''}
-                onChange={changeValue}
+        <div className="panel__content">
+          <PanelDropZone
+            dropTargetConnector={scopeElementDropRef}
+            isDragOver={
+              isScopeElementDragOver && !elementGenerationState && !isReadOnly
+            }
+          >
+            <div className="file-generation-editor__configuration__content">
+              <FileGenerationScopeEditor
+                fileGenerationState={fileGenerationState}
+                regenerate={debouncedRegenerate}
+                isReadOnly={isReadOnly || Boolean(elementGenerationState)}
               />
+              <div className="panel__content__form__section">
+                <div className="panel__content__form__section__header__label">
+                  Generation Output Path
+                </div>
+                <div className="panel__content__form__section__header__prompt">
+                  Specifies the root path where files will be generated.
+                  Defaults to the file specification path
+                </div>
+                <input
+                  className="panel__content__form__section__input"
+                  spellCheck={false}
+                  disabled={isReadOnly}
+                  value={fileGeneration.generationOutputPath ?? ''}
+                  onChange={changeValue}
+                />
+              </div>
+              {fileGenerationConfiguration.map((abstractGenerationProperty) => (
+                <GenerationPropertyEditor
+                  key={
+                    abstractGenerationProperty.name +
+                    abstractGenerationProperty.type
+                  }
+                  update={update}
+                  isReadOnly={isReadOnly}
+                  getConfigValue={getConfigValue}
+                  property={abstractGenerationProperty}
+                />
+              ))}
             </div>
-            {fileGenerationConfiguration.map((abstractGenerationProperty) => (
-              <GenerationPropertyEditor
-                key={
-                  abstractGenerationProperty.name +
-                  abstractGenerationProperty.type
-                }
-                update={update}
-                isReadOnly={isReadOnly}
-                getConfigValue={getConfigValue}
-                property={abstractGenerationProperty}
-              />
-            ))}
-          </div>
+          </PanelDropZone>
         </div>
       </div>
     );

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) => (