@finos/legend-application-studio 13.0.1 → 13.1.0

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
   FunctionEditorState,
@@ -29,7 +29,7 @@ import {
   prettyCONSTName,
   UnsupportedOperationError,
 } from '@finos/legend-shared';
-import { useDrop } from 'react-dnd';
+import { useDrag, useDrop } from 'react-dnd';
 import {
   clsx,
   CustomSelectorInput,
@@ -38,10 +38,20 @@ import {
   PlusIcon,
   TimesIcon,
   ArrowCircleRightIcon,
+  PanelEntryDragHandle,
+  PanelEntryDropZonePlaceholder,
+  DragPreviewLayer,
+  useDragPreviewLayer,
 } from '@finos/legend-art';
 import { LEGEND_STUDIO_TEST_ID } from '../../LegendStudioTestID.js';
-import { StereotypeSelector } from './uml-editor/StereotypeSelector.js';
-import { TaggedValueEditor } from './uml-editor/TaggedValueEditor.js';
+import {
+  StereotypeDragPreviewLayer,
+  StereotypeSelector,
+} from './uml-editor/StereotypeSelector.js';
+import {
+  TaggedValueDragPreviewLayer,
+  TaggedValueEditor,
+} from './uml-editor/TaggedValueEditor.js';
 import { flowResult } from 'mobx';
 import { useEditorStore } from '../EditorStoreProvider.js';
 import {
@@ -81,6 +91,7 @@ import {
   annotatedElement_addStereotype,
   annotatedElement_deleteStereotype,
   annotatedElement_deleteTaggedValue,
+  function_swapParameters,
 } from '../../../stores/graphModifier/DomainGraphModifierHelper.js';
 import {
   rawVariableExpression_setMultiplicity,
@@ -111,13 +122,21 @@ export const getFunctionParameterType = (
   );
 };
 
+type FunctionParameterDragSource = {
+  parameter: RawVariableExpression;
+};
+
+const FUNCTION_PARAMETER_DND_TYPE = 'FUNCTION_PARAMETER';
+
 const ParameterBasicEditor = observer(
   (props: {
     parameter: RawVariableExpression;
+    _func: ConcreteFunctionDefinition;
     deleteParameter: () => void;
     isReadOnly: boolean;
   }) => {
-    const { parameter, deleteParameter, isReadOnly } = props;
+    const ref = useRef<HTMLDivElement>(null);
+    const { parameter, _func, deleteParameter, isReadOnly } = props;
     const editorStore = useEditorStore();
     // Name
     const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) =>
@@ -182,130 +201,182 @@ const ParameterBasicEditor = observer(
       setUpperBound(event.target.value);
       updateMultiplicity(lowerBound, event.target.value);
     };
+
+    // Drag and Drop
+    const handleHover = useCallback(
+      (item: FunctionParameterDragSource): void => {
+        const draggingParameter = item.parameter;
+        const hoveredParameter = parameter;
+        function_swapParameters(_func, draggingParameter, hoveredParameter);
+      },
+      [_func, parameter],
+    );
+
+    const [{ isBeingDraggedParameter }, dropConnector] = useDrop<
+      FunctionParameterDragSource,
+      void,
+      { isBeingDraggedParameter: RawVariableExpression | undefined }
+    >(
+      () => ({
+        accept: [FUNCTION_PARAMETER_DND_TYPE],
+        hover: (item) => handleHover(item),
+        collect: (
+          monitor,
+        ): {
+          isBeingDraggedParameter: RawVariableExpression | undefined;
+        } => ({
+          isBeingDraggedParameter:
+            monitor.getItem<FunctionParameterDragSource | null>()?.parameter,
+        }),
+      }),
+      [handleHover],
+    );
+    const isBeingDragged = parameter === isBeingDraggedParameter;
+
+    const [, dragConnector, dragPreviewConnector] =
+      useDrag<FunctionParameterDragSource>(
+        () => ({
+          type: FUNCTION_PARAMETER_DND_TYPE,
+          item: () => ({
+            parameter: parameter,
+          }),
+        }),
+        [parameter],
+      );
+    dragConnector(dropConnector(ref));
+    useDragPreviewLayer(dragPreviewConnector);
+
     return (
-      <div className="property-basic-editor">
-        {isReadOnly && (
-          <div className="property-basic-editor__lock">
-            <LockIcon />
-          </div>
-        )}
-        <input
-          className="property-basic-editor__name"
-          disabled={isReadOnly}
-          value={parameter.name}
-          spellCheck={false}
-          onChange={changeValue}
-          placeholder={`Property name`}
-        />
-        {!isReadOnly && isEditingType && (
-          <CustomSelectorInput
-            className="property-basic-editor__type"
-            options={typeOptions}
-            onChange={changeType}
-            value={selectedType}
-            placeholder={'Choose a data type or enumeration'}
-            filterOption={filterOption}
-          />
-        )}
-        {!isReadOnly && !isEditingType && (
-          <div
-            className={clsx(
-              'property-basic-editor__type',
-              'property-basic-editor__type--show-click-hint',
-              `background--${typeName.toLowerCase()}`,
-              {
-                'property-basic-editor__type--has-visit-btn':
-                  typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE,
-              },
-            )}
-          >
-            {typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE && (
-              <div className="property-basic-editor__type__abbr">
-                {getElementIcon(editorStore, paramType)}
+      <div ref={ref} className="property-basic-editor__container">
+        <PanelEntryDropZonePlaceholder showPlaceholder={isBeingDragged}>
+          <div className="property-basic-editor">
+            {isReadOnly && (
+              <div className="property-basic-editor__lock">
+                <LockIcon />
               </div>
             )}
-            <div className="property-basic-editor__type__label">
-              {paramType.name}
-            </div>
-            <div
-              className="property-basic-editor__type__label property-basic-editor__type__label--hover"
-              onClick={(): void => setIsEditingType(true)}
-            >
-              Click to edit
-            </div>
-            {typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE && (
-              <button
-                data-testid={LEGEND_STUDIO_TEST_ID.TYPE_VISIT}
-                className="property-basic-editor__type__visit-btn"
-                onClick={openElement}
-                tabIndex={-1}
-                title={'Visit element'}
-              >
-                <ArrowCircleRightIcon />
-              </button>
+            <PanelEntryDragHandle />
+            <input
+              className="property-basic-editor__name"
+              disabled={isReadOnly}
+              value={parameter.name}
+              spellCheck={false}
+              onChange={changeValue}
+              placeholder={`Parameter name`}
+            />
+            {!isReadOnly && isEditingType && (
+              <CustomSelectorInput
+                className="property-basic-editor__type"
+                options={typeOptions}
+                onChange={changeType}
+                value={selectedType}
+                placeholder={'Choose a data type or enumeration'}
+                filterOption={filterOption}
+              />
             )}
-          </div>
-        )}
-        {isReadOnly && (
-          <div
-            className={clsx(
-              'property-basic-editor__type',
-              `background--${typeName.toLowerCase()}`,
-              {
-                'property-basic-editor__type--has-visit-btn':
-                  typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE,
-              },
+            {!isReadOnly && !isEditingType && (
+              <div
+                className={clsx(
+                  'property-basic-editor__type',
+                  'property-basic-editor__type--show-click-hint',
+                  `background--${typeName.toLowerCase()}`,
+                  {
+                    'property-basic-editor__type--has-visit-btn':
+                      typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE,
+                  },
+                )}
+              >
+                {typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE && (
+                  <div className="property-basic-editor__type__abbr">
+                    {getElementIcon(editorStore, paramType)}
+                  </div>
+                )}
+                <div className="property-basic-editor__type__label">
+                  {paramType.name}
+                </div>
+                <div
+                  className="property-basic-editor__type__label property-basic-editor__type__label--hover"
+                  onClick={(): void => setIsEditingType(true)}
+                >
+                  Click to edit
+                </div>
+                {typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE && (
+                  <button
+                    data-testid={LEGEND_STUDIO_TEST_ID.TYPE_VISIT}
+                    className="property-basic-editor__type__visit-btn"
+                    onClick={openElement}
+                    tabIndex={-1}
+                    title={'Visit element'}
+                  >
+                    <ArrowCircleRightIcon />
+                  </button>
+                )}
+              </div>
             )}
-          >
-            {typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE && (
-              <div className="property-basic-editor__type__abbr">
-                {getElementIcon(editorStore, paramType)}
+            {isReadOnly && (
+              <div
+                className={clsx(
+                  'property-basic-editor__type',
+                  `background--${typeName.toLowerCase()}`,
+                  {
+                    'property-basic-editor__type--has-visit-btn':
+                      typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE,
+                  },
+                )}
+              >
+                {typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE && (
+                  <div className="property-basic-editor__type__abbr">
+                    {getElementIcon(editorStore, paramType)}
+                  </div>
+                )}
+                <div className="property-basic-editor__type__label">
+                  {paramType.name}
+                </div>
+                {typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE && (
+                  <button
+                    data-testid={LEGEND_STUDIO_TEST_ID.TYPE_VISIT}
+                    className="property-basic-editor__type__visit-btn"
+                    onClick={openElement}
+                    tabIndex={-1}
+                    title={'Visit element'}
+                  >
+                    <ArrowCircleRightIcon />
+                  </button>
+                )}
               </div>
             )}
-            <div className="property-basic-editor__type__label">
-              {paramType.name}
+            <div className="property-basic-editor__multiplicity">
+              <input
+                className="property-basic-editor__multiplicity-bound"
+                disabled={isReadOnly}
+                spellCheck={false}
+                value={lowerBound}
+                onChange={changeLowerBound}
+              />
+              <div className="property-basic-editor__multiplicity__range">
+                ..
+              </div>
+              <input
+                className="property-basic-editor__multiplicity-bound"
+                disabled={isReadOnly}
+                spellCheck={false}
+                value={upperBound}
+                onChange={changeUpperBound}
+              />
             </div>
-            {typeName !== FUNCTION_PARAMETER_TYPE.PRIMITIVE && (
+            {!isReadOnly && (
               <button
-                data-testid={LEGEND_STUDIO_TEST_ID.TYPE_VISIT}
-                className="property-basic-editor__type__visit-btn"
-                onClick={openElement}
+                className="uml-element-editor__remove-btn"
+                disabled={isReadOnly}
+                onClick={deleteParameter}
                 tabIndex={-1}
-                title={'Visit element'}
+                title={'Remove'}
               >
-                <ArrowCircleRightIcon />
+                <TimesIcon />
               </button>
             )}
           </div>
-        )}
-        <div className="property-basic-editor__multiplicity">
-          <input
-            className="property-basic-editor__multiplicity-bound"
-            disabled={isReadOnly}
-            spellCheck={false}
-            value={lowerBound}
-            onChange={changeLowerBound}
-          />
-          <div className="property-basic-editor__multiplicity__range">..</div>
-          <input
-            className="property-basic-editor__multiplicity-bound"
-            disabled={isReadOnly}
-            spellCheck={false}
-            value={upperBound}
-            onChange={changeUpperBound}
-          />
-        </div>
-        {!isReadOnly && (
-          <button
-            className="uml-element-editor__remove-btn"
-            disabled={isReadOnly}
-            onClick={deleteParameter}
-            tabIndex={-1}
-            title={'Remove'}
-          >
-            <TimesIcon />
-          </button>
-        )}
+        </PanelEntryDropZonePlaceholder>
       </div>
     );
   },
@@ -381,6 +452,7 @@ const ReturnTypeEditor = observer(
       setUpperBound(event.target.value);
       updateMultiplicity(lowerBound, event.target.value);
     };
+
     return (
       <div className="function-editor__return__type-editor">
         {!isReadOnly && isEditingType && (
@@ -528,40 +600,23 @@ export const FunctionMainEditor = observer(
       },
       [functionElement, isReadOnly],
     );
-    const [{ isParameterDragOver }, dropParameterRef] = useDrop(
+    const [{ isParameterDragOver }, dropParameterRef] = useDrop<
+      ElementDragSource,
+      void,
+      { isParameterDragOver: boolean }
+    >(
       () => ({
         accept: [
           CORE_DND_TYPE.PROJECT_EXPLORER_CLASS,
           CORE_DND_TYPE.PROJECT_EXPLORER_ENUMERATION,
         ],
-        drop: (item: ElementDragSource): void => handleDropParameter(item),
-        collect: (monitor): { isParameterDragOver: boolean } => ({
+        drop: (item) => handleDropParameter(item),
+        collect: (monitor) => ({
           isParameterDragOver: monitor.isOver({ shallow: true }),
         }),
       }),
       [handleDropParameter],
     );
-    const handleDropReturnType = useCallback(
-      (item: UMLEditorElementDropTarget): void => {
-        if (!isReadOnly && item.data.packageableElement instanceof Type) {
-          function_setReturnType(functionElement, item.data.packageableElement);
-        }
-      },
-      [functionElement, isReadOnly],
-    );
-    const [{ isReturnTypeDragOver }, dropReturnTypeRef] = useDrop(
-      () => ({
-        accept: [
-          CORE_DND_TYPE.PROJECT_EXPLORER_CLASS,
-          CORE_DND_TYPE.PROJECT_EXPLORER_ENUMERATION,
-        ],
-        drop: (item: ElementDragSource): void => handleDropReturnType(item),
-        collect: (monitor): { isReturnTypeDragOver: boolean } => ({
-          isReturnTypeDragOver: monitor.isOver({ shallow: true }),
-        }),
-      }),
-      [handleDropReturnType],
-    );
 
     return (
       <div className="panel__content function-editor__element">
@@ -580,6 +635,12 @@ export const FunctionMainEditor = observer(
               <PlusIcon />
             </button>
           </div>
+          <DragPreviewLayer
+            labelGetter={(item: FunctionParameterDragSource): string =>
+              item.parameter.name === '' ? '(unknown)' : item.parameter.name
+            }
+            types={[FUNCTION_PARAMETER_DND_TYPE]}
+          />
           <div
             ref={dropParameterRef}
             className={clsx('function-editor__element__item__content', {
@@ -591,6 +652,7 @@ export const FunctionMainEditor = observer(
               <ParameterBasicEditor
                 key={param._UUID}
                 parameter={param}
+                _func={functionElement}
                 deleteParameter={deleteParameter(param)}
                 isReadOnly={isReadOnly}
               />
@@ -602,13 +664,7 @@ export const FunctionMainEditor = observer(
             <div className="function-editor__element__item__header__title">
               LAMBDA
             </div>
-            <div
-              ref={dropReturnTypeRef}
-              className={clsx('function-editor__element__item__content', {
-                'panel__content__lists--dnd-over':
-                  isReturnTypeDragOver && !isReadOnly,
-              })}
-            >
+            <div className="">
               <ReturnTypeEditor
                 functionElement={functionElement}
                 isReadOnly={isReadOnly}
@@ -685,11 +741,15 @@ export const FunctionEditor = observer(() => {
     },
     [functionElement, 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 }),
       }),
     }),
@@ -708,11 +768,15 @@ export const FunctionEditor = observer(() => {
     },
     [functionElement, 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 }),
       }),
     }),
@@ -802,8 +866,10 @@ export const FunctionEditor = observer(() => {
                     isTaggedValueDragOver && !isReadOnly,
                 })}
               >
+                <TaggedValueDragPreviewLayer />
                 {functionElement.taggedValues.map((taggedValue) => (
                   <TaggedValueEditor
+                    annotatedElement={functionElement}
                     key={taggedValue._UUID}
                     taggedValue={taggedValue}
                     deleteValue={_deleteTaggedValue(taggedValue)}
@@ -820,9 +886,11 @@ export const FunctionEditor = observer(() => {
                     isStereotypeDragOver && !isReadOnly,
                 })}
               >
+                <StereotypeDragPreviewLayer />
                 {functionElement.stereotypes.map((stereotype) => (
                   <StereotypeSelector
                     key={stereotype.value._UUID}
+                    annotatedElement={functionElement}
                     stereotype={stereotype}
                     deleteStereotype={_deleteStereotype(stereotype)}
                     isReadOnly={isReadOnly}