@finos/legend-application-studio 13.0.3 → 13.1.0

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

@@ -14,13 +14,17 @@
  * limitations under the License.
  */
 
-import { useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
   CustomSelectorInput,
   createFilter,
   TimesIcon,
   ArrowCircleRightIcon,
+  PanelEntryDragHandle,
+  PanelEntryDropZonePlaceholder,
+  DragPreviewLayer,
+  useDragPreviewLayer,
 } from '@finos/legend-art';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
@@ -28,24 +32,54 @@ import {
   type StereotypeReference,
   type Stereotype,
   isStubbed_PackageableElement,
+  type AnnotatedElement,
 } from '@finos/legend-graph';
-import { stereotypeReference_setValue } from '../../../../stores/graphModifier/DomainGraphModifierHelper.js';
+import {
+  annotatedElement_swapStereotypes,
+  stereotypeReference_setValue,
+} from '../../../../stores/graphModifier/DomainGraphModifierHelper.js';
 import type { PackageableElementOption } from '@finos/legend-application';
+import { useDrop, useDrag } from 'react-dnd';
 
 interface StereotypeOption {
   label: string;
   value: Stereotype;
 }
 
+export const STEREOTYPE_DND_TYPE = 'STEREOTYPE';
+export type StereotypeDragSource = {
+  stereotype: StereotypeReference;
+};
+
+export const StereotypeDragPreviewLayer: React.FC = () => (
+  <DragPreviewLayer
+    labelGetter={(item: StereotypeDragSource): string =>
+      isStubbed_PackageableElement(item.stereotype.ownerReference.value)
+        ? '(unknown)'
+        : `${item.stereotype.ownerReference.value.name}.${item.stereotype.value.value}`
+    }
+    types={[STEREOTYPE_DND_TYPE]}
+  />
+);
+
 export const StereotypeSelector = observer(
   (props: {
+    annotatedElement: AnnotatedElement;
     stereotype: StereotypeReference;
     deleteStereotype: () => void;
     isReadOnly: boolean;
     darkTheme?: boolean;
   }) => {
-    const { stereotype, deleteStereotype, isReadOnly, darkTheme } = props;
+    const ref = useRef<HTMLDivElement>(null);
+    const {
+      annotatedElement,
+      stereotype,
+      deleteStereotype,
+      isReadOnly,
+      darkTheme,
+    } = props;
     const editorStore = useEditorStore();
+
     // Profile
     const profileOptions = editorStore.profileOptions.filter(
       (p) => p.value.p_stereotypes.length,
@@ -59,6 +93,7 @@ export const StereotypeSelector = observer(
     const [selectedProfile, setSelectedProfile] = useState<
       PackageableElementOption<Profile>
     >({ value: stereotype.value._OWNER, label: stereotype.value._OWNER.name });
+
     const changeProfile = (val: PackageableElementOption<Profile>): void => {
       if (val.value.p_stereotypes.length) {
         setSelectedProfile(val);
@@ -86,56 +121,106 @@ export const StereotypeSelector = observer(
     };
     const updateStereotype = (val: StereotypeOption): void =>
       stereotypeReference_setValue(stereotype, val.value);
+
+    // Drag and Drop
+    const handleHover = useCallback(
+      (item: StereotypeDragSource): void => {
+        const draggingProperty = item.stereotype;
+        const hoveredProperty = stereotype;
+        annotatedElement_swapStereotypes(
+          annotatedElement,
+          draggingProperty,
+          hoveredProperty,
+        );
+      },
+      [annotatedElement, stereotype],
+    );
+
+    const [{ isBeingDraggedStereotype }, dropConnector] = useDrop<
+      StereotypeDragSource,
+      void,
+      { isBeingDraggedStereotype: StereotypeReference | undefined }
+    >(
+      () => ({
+        accept: [STEREOTYPE_DND_TYPE],
+        hover: (item) => handleHover(item),
+        collect: (monitor) => ({
+          isBeingDraggedStereotype:
+            monitor.getItem<StereotypeDragSource | null>()?.stereotype,
+        }),
+      }),
+      [handleHover],
+    );
+    const isBeingDragged = stereotype === isBeingDraggedStereotype;
+
+    const [, dragConnector, dragPreviewConnector] =
+      useDrag<StereotypeDragSource>(
+        () => ({
+          type: STEREOTYPE_DND_TYPE,
+          item: () => ({
+            stereotype: stereotype,
+          }),
+        }),
+        [stereotype],
+      );
+    dragConnector(dropConnector(ref));
+    useDragPreviewLayer(dragPreviewConnector);
+
     return (
-      <div className="stereotype-selector">
-        <div
-          className={`stereotype-selector__profile ${
-            darkTheme ? 'stereotype-selector-dark-theme' : ''
-          }`}
-        >
-          <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>
-        <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 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>
+            <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>
+        </PanelEntryDropZonePlaceholder>
       </div>
     );
   },

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
   clsx,
@@ -24,6 +24,10 @@ import {
   TimesIcon,
   ArrowCircleRightIcon,
   LongArrowAltUpIcon,
+  PanelEntryDragHandle,
+  PanelEntryDropZonePlaceholder,
+  DragPreviewLayer,
+  useDragPreviewLayer,
 } from '@finos/legend-art';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
@@ -31,26 +35,53 @@ import {
   type Tag,
   type Profile,
   isStubbed_PackageableElement,
+  type AnnotatedElement,
 } from '@finos/legend-graph';
 import {
   taggedValue_setValue,
   taggedValue_setTag,
+  annotatedElement_swapTaggedValues,
 } from '../../../../stores/graphModifier/DomainGraphModifierHelper.js';
 import type { PackageableElementOption } from '@finos/legend-application';
+import { useDrop, useDrag } from 'react-dnd';
 
 interface TagOption {
   label: string;
   value: Tag;
 }
 
+export const TAGGED_VALUE_DND_TYPE = 'TAGGED_VALUE';
+export type TaggedValueDragSource = {
+  taggedValue: TaggedValue;
+};
+
+export const TaggedValueDragPreviewLayer: React.FC = () => (
+  <DragPreviewLayer
+    labelGetter={(item: TaggedValueDragSource): string =>
+      isStubbed_PackageableElement(item.taggedValue.tag.ownerReference.value)
+        ? '(unknown)'
+        : `${item.taggedValue.tag.ownerReference.value.name}.${item.taggedValue.tag.value.value}`
+    }
+    types={[TAGGED_VALUE_DND_TYPE]}
+  />
+);
+
 export const TaggedValueEditor = observer(
   (props: {
+    annotatedElement: AnnotatedElement;
     taggedValue: TaggedValue;
     deleteValue: () => void;
     isReadOnly: boolean;
     darkTheme?: boolean;
   }) => {
-    const { taggedValue, deleteValue, isReadOnly, darkTheme } = props;
+    const ref = useRef<HTMLDivElement>(null);
+    const {
+      annotatedElement,
+      taggedValue,
+      deleteValue,
+      isReadOnly,
+      darkTheme,
+    } = props;
     const editorStore = useEditorStore();
     // Name
     const changeValue: React.ChangeEventHandler<
@@ -101,98 +132,150 @@ export const TaggedValueEditor = observer(
     const [isExpanded, setIsExpanded] = useState(false);
     const toggleExpandedMode = (): void => setIsExpanded(!isExpanded);
 
+    // Drag and Drop
+    const handleHover = useCallback(
+      (item: TaggedValueDragSource) => {
+        const draggingProperty = item.taggedValue;
+        const hoveredProperty = taggedValue;
+        annotatedElement_swapTaggedValues(
+          annotatedElement,
+          draggingProperty,
+          hoveredProperty,
+        );
+      },
+      [annotatedElement, taggedValue],
+    );
+
+    const [{ isBeingDraggedTaggedValue }, dropConnector] = useDrop<
+      TaggedValueDragSource,
+      void,
+      { isBeingDraggedTaggedValue: TaggedValue | undefined }
+    >(
+      () => ({
+        accept: [TAGGED_VALUE_DND_TYPE],
+        hover: (item) => handleHover(item),
+        collect: (monitor) => ({
+          isBeingDraggedTaggedValue:
+            monitor.getItem<TaggedValueDragSource | null>()?.taggedValue,
+        }),
+      }),
+      [handleHover],
+    );
+    const isBeingDragged = taggedValue === isBeingDraggedTaggedValue;
+
+    const [, dragConnector, dragPreviewConnector] =
+      useDrag<TaggedValueDragSource>(
+        () => ({
+          type: TAGGED_VALUE_DND_TYPE,
+          item: () => ({
+            taggedValue: taggedValue,
+          }),
+        }),
+        [taggedValue],
+      );
+    dragConnector(dropConnector(ref));
+    useDragPreviewLayer(dragPreviewConnector);
+
     return (
-      <div className="tagged-value-editor">
-        <div
-          className={`tagged-value-editor__profile ${
-            darkTheme ? 'tagged-value-editor-dark-theme' : ''
-          }`}
+      <div ref={ref} className="tagged-value-editor__container">
+        <PanelEntryDropZonePlaceholder
+          showPlaceholder={isBeingDragged}
+          className="tagged-value-editor__dnd__placeholder"
         >
-          <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'}
-          >
-            <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 ${
+          <div className="tagged-value-editor">
+            <PanelEntryDragHandle />
+            <div
+              className={`tagged-value-editor__profile ${
                 darkTheme ? 'tagged-value-editor-dark-theme' : ''
               }`}
-              spellCheck={false}
+            >
+              <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'}
+              >
+                <ArrowCircleRightIcon />
+              </button>
+            </div>
+            <CustomSelectorInput
+              className="tagged-value-editor__tag"
               disabled={isReadOnly}
-              value={taggedValue.value}
-              onChange={changeValue}
-              placeholder={`Value`}
+              options={tagOptions}
+              onChange={changeTag}
+              value={selectedTag}
+              placeholder={'Choose a tag'}
+              filterOption={tagFilterOption}
+              darkMode={Boolean(darkTheme)}
             />
-          )}
-          {!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>
+            {!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}
+                  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>
+          </div>
+        </PanelEntryDropZonePlaceholder>
       </div>
     );
   },

package/src/components/editor/side-bar/CreateNewElementModal.tsx

@@ -252,7 +252,6 @@ const NewPureModelConnectionDriverEditor = observer(
             darkMode={true}
             formatOptionLabel={getPackageableElementOptionFormatter({
               darkMode: true,
-              graphManagerState: editorStore.graphManagerState,
             })}
           />
         </div>
@@ -369,6 +368,7 @@ const NewFileGenerationDriverEditor = observer(() => {
         options={options}
         onChange={onTypeSelectionChange}
         value={newConnectionDriver.typeOption}
+        darkMode={true}
       />
     </div>
   );
@@ -490,6 +490,7 @@ export const CreateNewElementModal = observer(() => {
               onChange={handleTypeChange}
               value={selectedTypeOption}
               isClearable={false}
+              darkMode={true}
             />
           )}
           <input

package/src/components/editor/side-bar/Explorer.tsx

@@ -71,6 +71,10 @@ import {
   Package,
   isValidFullPath,
   isValidPath,
+  isGeneratedElement,
+  isSystemElement,
+  isDependencyElement,
+  isElementReadOnly,
 } from '@finos/legend-graph';
 import { useApplicationStore } from '@finos/legend-application';
 import { PACKAGEABLE_ELEMENT_TYPE } from '../../../stores/shared/ModelUtil.js';
@@ -365,15 +369,11 @@ const PackageTreeNodeContainer = observer(
       <ChevronRightIcon />
     );
 
-    const iconPackageColor = editorStore.graphManagerState.isGeneratedElement(
-      node.packageableElement,
-    )
+    const iconPackageColor = isGeneratedElement(node.packageableElement)
       ? 'color--generated'
-      : editorStore.graphManagerState.isSystemElement(node.packageableElement)
+      : isSystemElement(node.packageableElement)
       ? 'color--system'
-      : editorStore.graphManagerState.isDependencyElement(
-          node.packageableElement,
-        )
+      : isDependencyElement(node.packageableElement)
       ? 'color--dependency'
       : '';
 
@@ -688,12 +688,6 @@ const ProjectExplorerActionPanel = observer((props: { disabled: boolean }) => {
     });
     editorStore.explorerTreeState.setTreeData({ ...treeData });
   };
-
-  const isImmutablePackageTreeNode = (node: PackageTreeNodeData): boolean =>
-    editorStore.graphManagerState.isGeneratedElement(node.packageableElement) ||
-    editorStore.graphManagerState.isSystemElement(node.packageableElement) ||
-    editorStore.graphManagerState.isDependencyElement(node.packageableElement);
-
   const showModelLoader = (): void =>
     editorStore.openState(editorStore.modelLoaderState);
 
@@ -713,7 +707,8 @@ const ProjectExplorerActionPanel = observer((props: { disabled: boolean }) => {
         disabled={
           disabled ||
           isInGrammarMode ||
-          (selectedTreeNode && isImmutablePackageTreeNode(selectedTreeNode))
+          (selectedTreeNode &&
+            isElementReadOnly(selectedTreeNode.packageableElement))
         }
         content={<ExplorerDropdownMenu />}
         menuProps={{
@@ -727,7 +722,8 @@ const ProjectExplorerActionPanel = observer((props: { disabled: boolean }) => {
             disabled={
               disabled ||
               isInGrammarMode ||
-              (selectedTreeNode && isImmutablePackageTreeNode(selectedTreeNode))
+              (selectedTreeNode &&
+                isElementReadOnly(selectedTreeNode.packageableElement))
             }
             className="panel__header__action"
             tabIndex={-1}

package/src/components/shared/StudioLambdaEditor.tsx

@@ -46,6 +46,7 @@ export const StudioLambdaEditor = observer(
     disablePopUp?: boolean | undefined;
     useBaseTextEditorSettings?: boolean | undefined;
     hideErrorBar?: boolean | undefined;
+    onEditorFocusEventHandler?: (() => void) | undefined;
   }) => {
     const {
       className,
@@ -60,6 +61,7 @@ export const StudioLambdaEditor = observer(
       disablePopUp,
       useBaseTextEditorSettings,
       hideErrorBar,
+      onEditorFocusEventHandler,
     } = props;
     const applicationStore = useApplicationStore();
     const editorStore = useEditorStore();
@@ -134,6 +136,7 @@ export const StudioLambdaEditor = observer(
         useBaseTextEditorSettings={useBaseTextEditorSettings}
         hideErrorBar={hideErrorBar}
         onKeyDownEventHandlers={onKeyDownEventHandlers}
+        onEditorFocusEventHandler={onEditorFocusEventHandler}
       />
     );
   },