@finos/legend-application-studio 13.0.1 → 13.1.0

package/src/components/editor/edit-panel/mapping-editor/EnumerationMappingEditor.tsx

@@ -30,6 +30,7 @@ import {
   PencilIcon,
   TimesIcon,
   PlusIcon,
+  PanelDropZone,
 } from '@finos/legend-art';
 import { MappingEditorState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingEditorState.js';
 import { TypeTree } from '../../../shared/TypeTree.js';
@@ -203,11 +204,15 @@ export const SourceValueInput = observer(
       },
       [isReadOnly, updateSourceValue, value],
     );
-    const [{ canDrop }, dropRef] = useDrop(
+    const [{ canDrop }, dropRef] = useDrop<
+      TypeDragSource,
+      void,
+      { canDrop: boolean }
+    >(
       () => ({
         accept: CORE_DND_TYPE.TYPE_TREE_ENUM,
-        drop: (item: TransformDropTarget): void => handleDrop(item),
-        collect: (monitor): { canDrop: boolean } => ({
+        drop: (item) => handleDrop(item),
+        collect: (monitor) => ({
           canDrop: monitor.canDrop(),
         }),
       }),
@@ -365,11 +370,15 @@ export const EnumerationMappingEditor = observer(
       },
       [enumerationMapping, isReadOnly],
     );
-    const [{ isDragOver, canDrop }, dropRef] = useDrop(
+    const [{ isDragOver, canDrop }, dropRef] = useDrop<
+      ElementDragSource,
+      void,
+      { isDragOver: boolean; canDrop: boolean }
+    >(
       () => ({
         accept: CORE_DND_TYPE.PROJECT_EXPLORER_ENUMERATION,
-        drop: (item: ElementDragSource): void => handleDrop(item),
-        collect: (monitor): { isDragOver: boolean; canDrop: boolean } => ({
+        drop: (item) => handleDrop(item),
+        collect: (monitor) => ({
           isDragOver: monitor.isOver({ shallow: true }),
           canDrop: monitor.canDrop(),
         }),
@@ -502,42 +511,38 @@ export const EnumerationMappingEditor = observer(
                       </button>
                     </div>
                   </div>
-                  <div ref={dropRef} className="panel__content dnd__dropzone">
-                    {sourceType && isDragOver && !isReadOnly && (
-                      <div className="dnd__overlay"></div>
-                    )}
-                    {sourceType && (
-                      <div className="source-panel__explorer">
-                        {sourceType instanceof Enumeration && (
-                          <TypeTree type={sourceType} />
-                        )}
-                        {/* TODO?: do we need to show anything when the source type is string or integer */}
-                      </div>
-                    )}
-                    {!sourceType && (
-                      <BlankPanelPlaceholder
-                        placeholderText="Choose a source"
-                        onClick={showSourceSelectorModal}
-                        clickActionType="add"
-                        tooltipText="Drop an enumeration"
-                        dndProps={{
-                          isDragOver: isDragOver && !isReadOnly,
-                          canDrop: canDrop && !isReadOnly,
-                        }}
-                        readOnlyProps={
-                          !isReadOnly
-                            ? undefined
-                            : {
-                                placeholderText: 'No source',
-                              }
-                        }
+                  <div className="panel__content">
+                    <PanelDropZone
+                      dropTargetConnector={dropRef}
+                      isDragOver={
+                        Boolean(sourceType) && isDragOver && !isReadOnly
+                      }
+                    >
+                      {sourceType && (
+                        <div className="source-panel__explorer">
+                          {sourceType instanceof Enumeration && (
+                            <TypeTree type={sourceType} />
+                          )}
+                          {/* TODO?: do we need to show anything when the source type is string or integer */}
+                        </div>
+                      )}
+                      {!sourceType && (
+                        <BlankPanelPlaceholder
+                          text="Choose a source"
+                          onClick={showSourceSelectorModal}
+                          clickActionType="add"
+                          tooltipText="Drop an enumeration"
+                          isDropZoneActive={canDrop}
+                          disabled={isReadOnly}
+                          previewText="No source"
+                        />
+                      )}
+                      <EnumerationMappingSourceSelectorModal
+                        enumerationMapping={enumerationMapping}
+                        open={openSourceSelectorModal}
+                        closeModal={hideSourceSelectorModal}
                       />
-                    )}
-                    <EnumerationMappingSourceSelectorModal
-                      enumerationMapping={enumerationMapping}
-                      open={openSourceSelectorModal}
-                      closeModal={hideSourceSelectorModal}
-                    />
+                    </PanelDropZone>
                   </div>
                 </div>
               </ResizablePanel>

package/src/components/editor/edit-panel/mapping-editor/FlatDataPropertyMappingEditor.tsx

@@ -255,19 +255,21 @@ export const FlatDataPropertyMappingEditor = observer(
       },
       [disableEditingTransform, flatDataPropertyMappingState],
     );
-    const [{ item }, drop] = useDrop(
+    const [{ dragItem }, drop] = useDrop<
+      FlatDataColumnDragSource,
+      void,
+      { dragItem: FlatDataColumnDragSource | undefined }
+    >(
       () => ({
         accept: [CORE_DND_TYPE.TYPE_TREE_PRIMITIVE],
-        drop: (droppedItem: FlatDataPropertyMappingTransformDropTarget): void =>
-          handleDrop(droppedItem),
-        collect: (monitor): { item: FlatDataColumnDragSource | null } => ({
-          item: monitor.getItem<FlatDataColumnDragSource | null>(),
+        drop: (_item) => handleDrop(_item),
+        collect: (monitor) => ({
+          dragItem:
+            monitor.getItem<FlatDataColumnDragSource | null>() ?? undefined,
         }),
       }),
       [handleDrop],
     );
-    const dragItem =
-      item instanceof FlatDataColumnDragSource ? item : undefined;
     const transformProps = {
       disableTransform:
         flatDataInstanceSetImplementationState.isConvertingTransformLambdaObjects,

package/src/components/editor/edit-panel/mapping-editor/InstanceSetImplementationEditor.tsx

@@ -25,6 +25,7 @@ import {
   AsteriskIcon,
   LongArrowAltDownIcon,
   PencilEditIcon,
+  PanelDropZone,
 } from '@finos/legend-art';
 import {
   CORE_DND_TYPE,
@@ -244,11 +245,15 @@ export const InstanceSetImplementationSourceExplorer = observer(
         setImplementation,
       ],
     );
-    const [{ isDragOver, canDrop }, dropRef] = useDrop(
+    const [{ isDragOver, canDrop }, dropRef] = useDrop<
+      ElementDragSource,
+      void,
+      { isDragOver: boolean; canDrop: boolean }
+    >(
       () => ({
         accept: dndType,
-        drop: (item: ElementDragSource): void => handleDrop(item),
-        collect: (monitor): { isDragOver: boolean; canDrop: boolean } => ({
+        drop: (item) => handleDrop(item),
+        collect: (monitor) => ({
           isDragOver: monitor.isOver({ shallow: true }),
           canDrop: monitor.canDrop(),
         }),
@@ -318,11 +323,11 @@ export const InstanceSetImplementationSourceExplorer = observer(
             </button>
           </div>
         </div>
-        <div ref={dropRef} className="panel__content dnd__dropzone">
-          <>
-            {srcElement && isDragOver && !isReadOnly && (
-              <div className="dnd__overlay" />
-            )}
+        <div className="panel__content">
+          <PanelDropZone
+            dropTargetConnector={dropRef}
+            isDragOver={isDragOver && !isReadOnly}
+          >
             {srcElement ? (
               <div className="source-panel__explorer">
                 {srcElement instanceof Type && (
@@ -346,21 +351,13 @@ export const InstanceSetImplementationSourceExplorer = observer(
               </div>
             ) : (
               <BlankPanelPlaceholder
-                placeholderText="Choose a source"
+                text="Choose a source"
                 onClick={showSourceSelectorModal}
                 clickActionType="add"
                 tooltipText="Drop a class mapping source, or click to choose one"
-                dndProps={{
-                  isDragOver: isDragOver && !isReadOnly,
-                  canDrop: canDrop && !isReadOnly,
-                }}
-                readOnlyProps={
-                  !isReadOnly
-                    ? undefined
-                    : {
-                        placeholderText: 'No source',
-                      }
-                }
+                isDropZoneActive={canDrop}
+                disabled={isReadOnly}
+                previewText="No source"
               />
             )}
             {isUnsupported && (
@@ -377,7 +374,7 @@ export const InstanceSetImplementationSourceExplorer = observer(
                 closeModal={hideSourceSelectorModal}
               />
             )}
-          </>
+          </PanelDropZone>
         </div>
       </div>
     );

package/src/components/editor/edit-panel/mapping-editor/MappingExecutionBuilder.tsx

@@ -37,6 +37,7 @@ import {
   CaretDownIcon,
   RefreshIcon,
   RobotIcon,
+  PanelDropZone,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import {
@@ -204,7 +205,7 @@ const MappingExecutionQueryEditor = observer(
         flowResult(
           queryState.updateLamba(
             setImplementation
-              ? editorStore.graphManagerState.graphManager.HACKY__createGetAllLambda(
+              ? editorStore.graphManagerState.graphManager.createGetAllRawLambda(
                   guaranteeType(
                     getMappingElementTarget(setImplementation),
                     Class,
@@ -281,11 +282,15 @@ const MappingExecutionQueryEditor = observer(
       },
       [changeClassMapping],
     );
-    const [{ isDragOver, canDrop }, dropRef] = useDrop(
+    const [{ isDragOver, canDrop }, dropRef] = useDrop<
+      MappingElementDragSource,
+      void,
+      { isDragOver: boolean; canDrop: boolean }
+    >(
       () => ({
         accept: CORE_DND_TYPE.MAPPING_EXPLORER_CLASS_MAPPING,
-        drop: (item: MappingElementDragSource): void => handleDrop(item),
-        collect: (monitor): { isDragOver: boolean; canDrop: boolean } => ({
+        drop: (item) => handleDrop(item),
+        collect: (monitor) => ({
           isDragOver: monitor.isOver({ shallow: true }),
           canDrop: monitor.canDrop(),
         }),
@@ -328,17 +333,19 @@ const MappingExecutionQueryEditor = observer(
           </div>
         )}
         {isStubbed_RawLambda(queryState.query) && (
-          <div ref={dropRef} className="panel__content">
-            <BlankPanelPlaceholder
-              placeholderText="Choose a class mapping"
-              onClick={showClassMappingSelectorModal}
-              clickActionType="add"
-              tooltipText="Drop a class mapping, or click to choose one to start building the query"
-              dndProps={{
-                isDragOver: isDragOver,
-                canDrop: canDrop,
-              }}
-            />
+          <div className="panel__content">
+            <PanelDropZone
+              dropTargetConnector={dropRef}
+              isDragOver={isDragOver}
+            >
+              <BlankPanelPlaceholder
+                text="Choose a class mapping"
+                onClick={showClassMappingSelectorModal}
+                clickActionType="add"
+                tooltipText="Drop a class mapping, or click to choose one to start building the query"
+                isDropZoneActive={canDrop}
+              />
+            </PanelDropZone>
           </div>
         )}
         {openClassMappingSelectorModal && (
@@ -437,11 +444,15 @@ export const MappingExecutionEmptyInputDataBuilder = observer(
       },
       [changeClassMapping],
     );
-    const [{ isDragOver, canDrop }, dropRef] = useDrop(
+    const [{ isDragOver, canDrop }, dropRef] = useDrop<
+      MappingElementDragSource,
+      void,
+      { isDragOver: boolean; canDrop: boolean }
+    >(
       () => ({
         accept: CORE_DND_TYPE.MAPPING_EXPLORER_CLASS_MAPPING,
-        drop: (item: MappingElementDragSource): void => handleDrop(item),
-        collect: (monitor): { isDragOver: boolean; canDrop: boolean } => ({
+        drop: (item) => handleDrop(item),
+        collect: (monitor) => ({
           isDragOver: monitor.isOver({ shallow: true }),
           canDrop: monitor.canDrop(),
         }),
@@ -450,17 +461,16 @@ export const MappingExecutionEmptyInputDataBuilder = observer(
     );
 
     return (
-      <div ref={dropRef} className="panel__content">
-        <BlankPanelPlaceholder
-          placeholderText="Choose a class mapping"
-          onClick={showClassMappingSelectorModal}
-          clickActionType="add"
-          tooltipText="Drop a class mapping, or click to choose one to generate input data"
-          dndProps={{
-            isDragOver: isDragOver,
-            canDrop: canDrop,
-          }}
-        />
+      <div className="panel__content">
+        <PanelDropZone dropTargetConnector={dropRef} isDragOver={isDragOver}>
+          <BlankPanelPlaceholder
+            text="Choose a class mapping"
+            onClick={showClassMappingSelectorModal}
+            clickActionType="add"
+            tooltipText="Drop a class mapping, or click to choose one to generate input data"
+            isDropZoneActive={canDrop}
+          />
+        </PanelDropZone>
       </div>
     );
   },

package/src/components/editor/edit-panel/mapping-editor/MappingExplorer.tsx

@@ -27,8 +27,6 @@ import {
   clsx,
   TreeView,
   ContextMenu,
-  VerticalAlignBottomIcon,
-  AddIcon,
   PlusIcon,
   LockIcon,
   FireIcon,
@@ -36,6 +34,8 @@ import {
   ChevronRightIcon,
   ChevronDownIcon,
   FilterIcon,
+  PanelDropZone,
+  BlankPanelPlaceholder,
 } from '@finos/legend-art';
 import { MappingElementState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingElementState.js';
 import { useDrop, useDrag } from 'react-dnd';
@@ -453,15 +453,19 @@ export const MappingExplorer = observer((props: { isReadOnly: boolean }) => {
           }),
     [isReadOnly, mappingEditorState],
   );
-  const [{ isDragOver }, dropRef] = useDrop(
+  const [{ isDragOver }, dropRef] = useDrop<
+    ElementDragSource,
+    void,
+    { isDragOver: boolean }
+  >(
     () => ({
       accept: [
         CORE_DND_TYPE.PROJECT_EXPLORER_ENUMERATION,
         CORE_DND_TYPE.PROJECT_EXPLORER_CLASS,
         CORE_DND_TYPE.PROJECT_EXPLORER_ASSOCIATION,
       ],
-      drop: (item: ElementDragSource): void => handleDrop(item),
-      collect: (monitor): { isDragOver: boolean } => ({
+      drop: (item) => handleDrop(item),
+      collect: (monitor) => ({
         isDragOver: monitor.isOver({ shallow: true }),
       }),
     }),
@@ -553,41 +557,37 @@ export const MappingExplorer = observer((props: { isReadOnly: boolean }) => {
         }
         menuProps={{ elevation: 7 }}
       >
-        <div
-          ref={dropRef}
-          className={clsx('mapping-explorer__content', {
-            'mapping-explorer__content--dnd-over': isDragOver && !isReadOnly,
-          })}
+        <PanelDropZone
+          isDragOver={isDragOver && !isReadOnly}
+          dropTargetConnector={dropRef}
         >
-          <TreeView
-            components={{
-              TreeNodeContainer: MappingElementTreeNodeContainer,
-            }}
-            treeData={mappingElementsTreeData}
-            onNodeSelect={onNodeSelect}
-            getChildNodes={getMappingElementTreeChildNodes}
-            innerProps={{
-              isReadOnly,
-              onNodeExpand,
-            }}
-          />
-          {/* TODO: use BlankPanelPlaceholder */}
-          {!isReadOnly && !mappingElements.length && (
-            <div
-              className="mapping-explorer__content mapping-explorer__content__adder"
-              onClick={openNewMapingModal}
-            >
-              <div className="mapping-explorer__content__adder__text">
-                {'Add a mapping element'}
-              </div>
-              <div className="mapping-explorer__content__adder__action">
-                <VerticalAlignBottomIcon className="mapping-explorer__content__adder__action__dnd-icon" />
-                <AddIcon className="mapping-explorer__content__adder__action__add-icon" />
-              </div>
-            </div>
-          )}
-          <NewMappingElementModal />
-        </div>
+          <div className="mapping-explorer__content">
+            <TreeView
+              components={{
+                TreeNodeContainer: MappingElementTreeNodeContainer,
+              }}
+              treeData={mappingElementsTreeData}
+              onNodeSelect={onNodeSelect}
+              getChildNodes={getMappingElementTreeChildNodes}
+              innerProps={{
+                isReadOnly,
+                onNodeExpand,
+              }}
+            />
+            {!isReadOnly && !mappingElements.length && (
+              <BlankPanelPlaceholder
+                text="Add a mapping element"
+                onClick={openNewMapingModal}
+                clickActionType="add"
+                tooltipText="Drop a class or an enumeration to start creating mappings"
+                isDropZoneActive={isDragOver && !isReadOnly}
+                disabled={isReadOnly}
+                previewText="No mapping"
+              />
+            )}
+            <NewMappingElementModal />
+          </div>
+        </PanelDropZone>
       </ContextMenu>
     </div>
   );

package/src/components/editor/edit-panel/mapping-editor/MappingTestEditor.tsx

@@ -43,6 +43,8 @@ import {
   ErrorIcon,
   RefreshIcon,
   WrenchIcon,
+  PauseCircleIcon,
+  PanelDropZone,
 } from '@finos/legend-art';
 import { useDrop } from 'react-dnd';
 import {
@@ -123,7 +125,7 @@ const MappingTestQueryEditor = observer(
         flowResult(
           queryState.updateLamba(
             setImplementation
-              ? editorStore.graphManagerState.graphManager.HACKY__createGetAllLambda(
+              ? editorStore.graphManagerState.graphManager.createGetAllRawLambda(
                   guaranteeType(
                     getMappingElementTarget(setImplementation),
                     Class,
@@ -174,11 +176,15 @@ const MappingTestQueryEditor = observer(
       },
       [changeClassMapping],
     );
-    const [{ isDragOver, canDrop }, dropRef] = useDrop(
+    const [{ isDragOver, canDrop }, dropRef] = useDrop<
+      MappingElementDragSource,
+      void,
+      { isDragOver: boolean; canDrop: boolean }
+    >(
       () => ({
         accept: CORE_DND_TYPE.MAPPING_EXPLORER_CLASS_MAPPING,
-        drop: (item: MappingElementDragSource): void => handleDrop(item),
-        collect: (monitor): { isDragOver: boolean; canDrop: boolean } => ({
+        drop: (item) => handleDrop(item),
+        collect: (monitor) => ({
           isDragOver: monitor.isOver({ shallow: true }),
           canDrop: monitor.canDrop(),
         }),
@@ -222,17 +228,20 @@ const MappingTestQueryEditor = observer(
           </div>
         )}
         {isStubbed_RawLambda(queryState.query) && (
-          <div ref={dropRef} className="panel__content">
-            <BlankPanelPlaceholder
-              placeholderText="Choose a class mapping"
-              onClick={showClassMappingSelectorModal}
-              clickActionType="add"
-              tooltipText="Drop a class mapping, or click to choose one to start building the query"
-              dndProps={{
-                isDragOver: isDragOver,
-                canDrop: canDrop,
-              }}
-            />
+          <div className="panel__content">
+            <PanelDropZone
+              dropTargetConnector={dropRef}
+              isDragOver={isDragOver}
+            >
+              <BlankPanelPlaceholder
+                text="Choose a class mapping"
+                onClick={showClassMappingSelectorModal}
+                clickActionType="add"
+                tooltipText="Drop a class mapping, or click to choose one to start building the query"
+                isDropZoneActive={canDrop}
+                disabled={isReadOnly}
+              />
+            </PanelDropZone>
           </div>
         )}
         {openClassMappingSelectorModal && (
@@ -634,6 +643,10 @@ export const MappingTestEditor = observer(
     const runTest = applicationStore.guardUnhandledError(() =>
       flowResult(testState.runTest()),
     );
+    const cancelTest = (): void => {
+      testState.setIsRunningTest(false);
+      testState.setTestRunPromise(undefined);
+    };
     const executionPlanState = testState.executionPlanState;
     const generatePlan = applicationStore.guardUnhandledError(() =>
       flowResult(testState.generatePlan(false)),
@@ -686,53 +699,64 @@ export const MappingTestEditor = observer(
             ))}
           </div>
           <div className="mapping-test-editor__header__actions">
-            <button
-              className="mapping-test-editor__execute-btn"
-              onClick={runTest}
-              disabled={
-                testState.isRunningTest ||
-                testState.isExecutingTest ||
-                testState.isGeneratingPlan
-              }
-              tabIndex={-1}
-            >
-              <div className="mapping-test-editor__execute-btn__label">
-                <PlayIcon className="mapping-test-editor__execute-btn__label__icon" />
-                <div className="mapping-test-editor__execute-btn__label__title">
-                  Run Test
+            {testState.isRunningTest ? (
+              <button
+                className="mapping-test-editor__stop-btn"
+                onClick={cancelTest}
+                tabIndex={-1}
+              >
+                <div className="btn--dark btn--caution mapping-test-editor__stop-btn__label">
+                  <PauseCircleIcon className="mapping-test-editor__stop-btn__label__icon" />
+                  <div className="mapping-test-editor__stop-btn__label__title">
+                    Stop
+                  </div>
                 </div>
-              </div>
-              <DropdownMenu
-                className="mapping-test-editor__execute-btn__dropdown-btn"
+              </button>
+            ) : (
+              <button
+                className="mapping-test-editor__execute-btn"
+                onClick={runTest}
                 disabled={
-                  testState.isRunningTest ||
-                  testState.isExecutingTest ||
-                  testState.isGeneratingPlan
+                  testState.isExecutingTest || testState.isGeneratingPlan
                 }
-                content={
-                  <MenuContent>
-                    <MenuContentItem
-                      className="mapping-test-editor__execute-btn__option"
-                      onClick={generatePlan}
-                    >
-                      Generate Plan
-                    </MenuContentItem>
-                    <MenuContentItem
-                      className="mapping-test-editor__execute-btn__option"
-                      onClick={debugPlanGeneration}
-                    >
-                      Debug
-                    </MenuContentItem>
-                  </MenuContent>
-                }
-                menuProps={{
-                  anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
-                  transformOrigin: { vertical: 'top', horizontal: 'right' },
-                }}
+                tabIndex={-1}
               >
-                <CaretDownIcon />
-              </DropdownMenu>
-            </button>
+                <div className="mapping-test-editor__execute-btn__label">
+                  <PlayIcon className="mapping-test-editor__execute-btn__label__icon" />
+                  <div className="mapping-test-editor__execute-btn__label__title">
+                    Run Test
+                  </div>
+                </div>
+                <DropdownMenu
+                  className="mapping-test-editor__execute-btn__dropdown-btn"
+                  disabled={
+                    testState.isExecutingTest || testState.isGeneratingPlan
+                  }
+                  content={
+                    <MenuContent>
+                      <MenuContentItem
+                        className="mapping-test-editor__execute-btn__option"
+                        onClick={generatePlan}
+                      >
+                        Generate Plan
+                      </MenuContentItem>
+                      <MenuContentItem
+                        className="mapping-test-editor__execute-btn__option"
+                        onClick={debugPlanGeneration}
+                      >
+                        Debug
+                      </MenuContentItem>
+                    </MenuContent>
+                  }
+                  menuProps={{
+                    anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+                    transformOrigin: { vertical: 'top', horizontal: 'right' },
+                  }}
+                >
+                  <CaretDownIcon />
+                </DropdownMenu>
+              </button>
+            )}
           </div>
         </div>
         <div className="mapping-test-editor__content">