@finos/legend-application-studio 13.0.1 → 13.1.0

package/src/components/editor/edit-panel/service-editor/ServiceExecutionQueryEditor.tsx

@@ -33,6 +33,7 @@ import {
   MenuContent,
   CaretDownIcon,
   MenuContentItem,
+  PauseCircleIcon,
 } from '@finos/legend-art';
 import { debounce } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
@@ -251,10 +252,16 @@ export const ServiceExecutionQueryEditor = observer(
     const importQuery = (): void => {
       queryState.setOpenQueryImporter(true);
     };
-    // execute
-    const handleExecute = applicationStore.guardUnhandledError(() =>
+
+    const runQuery = applicationStore.guardUnhandledError(() =>
       flowResult(executionState.handleExecute()),
     );
+
+    const cancelQuery = (): void => {
+      executionState.setIsRunningQuery(false);
+      executionState.setQueryRunPromise(undefined);
+    };
+
     const generatePlan = applicationStore.guardUnhandledError(() =>
       flowResult(executionState.generatePlan(false)),
     );
@@ -287,55 +294,68 @@ export const ServiceExecutionQueryEditor = observer(
             >
               <ArrowCircleDownIcon />
             </button>
-            <button
-              className="service-editor__execution__execute-btn"
-              onClick={handleExecute}
-              title="Run Query"
-              disabled={executionState.isExecuting}
-              tabIndex={-1}
-            >
-              <div className="service-editor__execution__execute-btn__label">
-                <PlayIcon className="service-editor__execution__execute-btn__label__icon" />
-                <div className="service-editor__execution__execute-btn__label__title">
-                  Run Query
+            {executionState.isRunningQuery ? (
+              <button
+                className="service-editor__execution__stop-btn"
+                onClick={cancelQuery}
+                tabIndex={-1}
+              >
+                <div className="btn--dark btn--caution service-editor__execution__stop-btn__label">
+                  <PauseCircleIcon className="service-editor__execution__stop-btn__label__icon" />
+                  <div className="service-editor__execution__stop-btn__label__title">
+                    Stop
+                  </div>
                 </div>
-              </div>
-              <DropdownMenu
-                className="service-editor__execution__execute-btn__dropdown-btn"
-                disabled={
-                  executionState.isExecuting || executionState.isGeneratingPlan
-                }
-                content={
-                  <MenuContent>
-                    <MenuContentItem
-                      className="service-editor__execution__execute-btn__option"
-                      onClick={generatePlan}
-                    >
-                      Generate Plan
-                    </MenuContentItem>
-                    <MenuContentItem
-                      className="service-editor__execution__execute-btn__option"
-                      onClick={debugPlanGeneration}
-                    >
-                      Debug
-                    </MenuContentItem>
-                  </MenuContent>
-                }
-                menuProps={{
-                  anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
-                  transformOrigin: { vertical: 'top', horizontal: 'right' },
-                }}
+              </button>
+            ) : (
+              <button
+                className="service-editor__execution__execute-btn"
+                onClick={runQuery}
+                title="Run Query"
+                disabled={executionState.isRunningQuery}
+                tabIndex={-1}
               >
-                <CaretDownIcon />
-              </DropdownMenu>
-            </button>
+                <div className="service-editor__execution__execute-btn__label">
+                  <PlayIcon className="service-editor__execution__execute-btn__label__icon" />
+                  <div className="service-editor__execution__execute-btn__label__title">
+                    Run Query
+                  </div>
+                </div>
+                <DropdownMenu
+                  className="service-editor__execution__execute-btn__dropdown-btn"
+                  disabled={executionState.isGeneratingPlan}
+                  content={
+                    <MenuContent>
+                      <MenuContentItem
+                        className="service-editor__execution__execute-btn__option"
+                        onClick={generatePlan}
+                      >
+                        Generate Plan
+                      </MenuContentItem>
+                      <MenuContentItem
+                        className="service-editor__execution__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="panel__content property-mapping-editor__entry__container">
           <PanelLoadingIndicator
             isLoading={
               executionState.isOpeningQueryEditor ||
-              executionState.isExecuting ||
+              executionState.isRunningQuery ||
               executionState.isGeneratingPlan
             }
           />

package/src/components/editor/edit-panel/service-editor/testable/ServiceTestableEditor.tsx

@@ -208,7 +208,7 @@ export const ServiceTestableEditor = observer(
           )}
           {!service.tests.length && (
             <BlankPanelPlaceholder
-              placeholderText="Add Test Suite"
+              text="Add Test Suite"
               onClick={addSuite}
               clickActionType="add"
               tooltipText="Click to add test"

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

@@ -41,12 +41,19 @@ import {
   PlusIcon,
   ArrowCircleRightIcon,
   LongArrowRightIcon,
+  PanelDropZone,
 } from '@finos/legend-art';
 import { getElementIcon } from '../../../shared/ElementIconUtils.js';
 import { prettyCONSTName, guaranteeType } from '@finos/legend-shared';
 import { LEGEND_STUDIO_TEST_ID } from '../../../LegendStudioTestID.js';
-import { StereotypeSelector } from './StereotypeSelector.js';
-import { TaggedValueEditor } from './TaggedValueEditor.js';
+import {
+  StereotypeDragPreviewLayer,
+  StereotypeSelector,
+} from './StereotypeSelector.js';
+import {
+  TaggedValueDragPreviewLayer,
+  TaggedValueEditor,
+} from './TaggedValueEditor.js';
 import { PropertyEditor } from './PropertyEditor.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
@@ -388,11 +395,15 @@ export const AssociationEditor = observer(
       },
       [association, 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 }),
         }),
       }),
@@ -411,11 +422,15 @@ export const AssociationEditor = observer(
       },
       [association, 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 }),
         }),
       }),
@@ -503,40 +518,42 @@ export const AssociationEditor = observer(
                   </div>
                 )}
                 {selectedTab === UML_EDITOR_TAB.TAGGED_VALUES && (
-                  <div
-                    ref={dropTaggedValueRef}
-                    className={clsx('panel__content__lists', {
-                      'panel__content__lists--dnd-over':
-                        isTaggedValueDragOver && !isReadOnly,
-                    })}
+                  <PanelDropZone
+                    isDragOver={isTaggedValueDragOver && !isReadOnly}
+                    dropTargetConnector={dropTaggedValueRef}
                   >
-                    {association.taggedValues.map((taggedValue) => (
-                      <TaggedValueEditor
-                        key={taggedValue._UUID}
-                        taggedValue={taggedValue}
-                        deleteValue={_deleteTaggedValue(taggedValue)}
-                        isReadOnly={isReadOnly}
-                      />
-                    ))}
-                  </div>
+                    <div className="panel__content__lists">
+                      <TaggedValueDragPreviewLayer />
+                      {association.taggedValues.map((taggedValue) => (
+                        <TaggedValueEditor
+                          annotatedElement={association}
+                          key={taggedValue._UUID}
+                          taggedValue={taggedValue}
+                          deleteValue={_deleteTaggedValue(taggedValue)}
+                          isReadOnly={isReadOnly}
+                        />
+                      ))}
+                    </div>
+                  </PanelDropZone>
                 )}
                 {selectedTab === UML_EDITOR_TAB.STEREOTYPES && (
-                  <div
-                    ref={dropStereotypeRef}
-                    className={clsx('panel__content__lists', {
-                      'panel__content__lists--dnd-over':
-                        isStereotypeDragOver && !isReadOnly,
-                    })}
+                  <PanelDropZone
+                    isDragOver={isStereotypeDragOver && !isReadOnly}
+                    dropTargetConnector={dropStereotypeRef}
                   >
-                    {association.stereotypes.map((stereotype) => (
-                      <StereotypeSelector
-                        key={stereotype.value._UUID}
-                        stereotype={stereotype}
-                        deleteStereotype={_deleteStereotype(stereotype)}
-                        isReadOnly={isReadOnly}
-                      />
-                    ))}
-                  </div>
+                    <div className="panel__content__lists">
+                      <StereotypeDragPreviewLayer />
+                      {association.stereotypes.map((stereotype) => (
+                        <StereotypeSelector
+                          key={stereotype.value._UUID}
+                          annotatedElement={association}
+                          stereotype={stereotype}
+                          deleteStereotype={_deleteStereotype(stereotype)}
+                          isReadOnly={isReadOnly}
+                        />
+                      ))}
+                    </div>
+                  </PanelDropZone>
                 )}
               </div>
             </div>