@finos/legend-application-studio 13.0.3 → 13.1.2

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

@@ -27,8 +27,6 @@ import {
   clsx,
   ContextMenu,
   ProgressBar,
-  VerticalAlignBottomIcon,
-  AddIcon,
   PlayIcon,
   EmptyCircleIcon,
   TimesCircleIcon,
@@ -38,6 +36,8 @@ import {
   EmptyStopCircleIcon,
   ExclamationCircleIcon,
   PauseCircleIcon,
+  PanelDropZone,
+  BlankPanelPlaceholder,
 } from '@finos/legend-art';
 import {
   type MappingElementDragSource,
@@ -369,11 +369,15 @@ export const MappingTestsExplorer = observer(
       },
       [applicationStore.alertUnhandledError, isReadOnly, mappingEditorState],
     );
-    const [{ isDragOver }, dropRef] = useDrop(
+    const [{ isDragOver }, dropRef] = useDrop<
+      MappingElementDragSource,
+      void,
+      { isDragOver: boolean }
+    >(
       () => ({
         accept: CORE_DND_TYPE.MAPPING_EXPLORER_CLASS_MAPPING,
-        drop: (item: MappingElementDragSource): void => handleDrop(item),
-        collect: (monitor): { isDragOver: boolean } => ({
+        drop: (item) => handleDrop(item),
+        collect: (monitor) => ({
           isDragOver: monitor.isOver({ shallow: true }),
         }),
       }),
@@ -474,40 +478,38 @@ export const MappingTestsExplorer = observer(
           }
           menuProps={{ elevation: 7 }}
         >
-          <div
-            ref={dropRef}
-            className={clsx('mapping-test-explorer__content', {
-              'mapping-test-explorer__content--dnd-over':
-                isDragOver && !isReadOnly,
-            })}
+          <PanelDropZone
+            isDragOver={isDragOver && !isReadOnly}
+            dropTargetConnector={dropRef}
           >
-            {Boolean(mappingEditorState.mappingTestStates.length) &&
-              mappingEditorState.mappingTestStates
-                .slice()
-                .map((testState) => (
-                  <MappingTestExplorer
-                    key={testState.test._UUID}
-                    testState={testState}
-                    isReadOnly={isReadOnly}
-                  />
-                ))}
-            {/* TODO: use BlankPanelPlaceholder */}
-            {!isReadOnly && !mappingEditorState.mappingTestStates.length && (
-              <div
-                className="mapping-test-explorer__content mapping-test-explorer__content__adder"
-                onClick={showClassMappingSelectorModal}
-              >
-                <div className="mapping-test-explorer__content__adder__text">
-                  {new Randomizer().getRandomItemInCollection(addTestPromps) ??
-                    addTestPromps[0]}
-                </div>
-                <div className="mapping-test-explorer__content__adder__action">
-                  <VerticalAlignBottomIcon className="mapping-test-explorer__content__adder__action__dnd-icon" />
-                  <AddIcon className="mapping-test-explorer__content__adder__action__add-icon" />
-                </div>
-              </div>
-            )}
-          </div>
+            <div className="mapping-test-explorer__content">
+              {Boolean(mappingEditorState.mappingTestStates.length) &&
+                mappingEditorState.mappingTestStates
+                  .slice()
+                  .map((testState) => (
+                    <MappingTestExplorer
+                      key={testState.test._UUID}
+                      testState={testState}
+                      isReadOnly={isReadOnly}
+                    />
+                  ))}
+              {!isReadOnly && !mappingEditorState.mappingTestStates.length && (
+                <BlankPanelPlaceholder
+                  text={
+                    new Randomizer().getRandomItemInCollection(addTestPromps) ??
+                    addTestPromps[0] ??
+                    'Add a mapping test'
+                  }
+                  onClick={showClassMappingSelectorModal}
+                  clickActionType="add"
+                  tooltipText="Drop a mapping element to start testing"
+                  isDropZoneActive={isDragOver && !isReadOnly}
+                  disabled={isReadOnly}
+                  previewText="No test"
+                />
+              )}
+            </div>
+          </PanelDropZone>
         </ContextMenu>
         {openClassMappingSelectorModal && (
           <ClassMappingSelectorModal

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

@@ -235,9 +235,7 @@ export const NewMappingElementModal = observer(() => {
               filterOption={filterOption}
               onChange={handleTargetChange}
               value={selectedOption}
-              formatOptionLabel={getPackageableElementOptionFormatter({
-                graphManagerState: editorStore.graphManagerState,
-              })}
+              formatOptionLabel={getPackageableElementOptionFormatter({})}
               placeholder="Choose a target"
               isClearable={true}
             />

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

@@ -18,12 +18,12 @@ import { useEffect, useCallback } from 'react';
 import { observer } from 'mobx-react-lite';
 import { MappingEditorState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingEditorState.js';
 import {
-  clsx,
   CustomSelectorInput,
   createFilter,
   TimesIcon,
   ArrowCircleRightIcon,
   PlusIcon,
+  PanelDropZone,
 } from '@finos/legend-art';
 import {
   CORE_DND_TYPE,
@@ -146,11 +146,15 @@ export const OperationSetImplementationEditor = observer(
       },
       [setImplementation],
     );
-    const [{ isDragOver }, dropRef] = useDrop(
+    const [{ isDragOver }, dropRef] = useDrop<
+      MappingElementDragSource,
+      void,
+      { isDragOver: boolean }
+    >(
       () => ({
         accept: CORE_DND_TYPE.MAPPING_EXPLORER_CLASS_MAPPING,
-        drop: (item: MappingElementDragSource): void => handleDrop(item),
-        collect: (monitor): { isDragOver: boolean } => ({
+        drop: (item) => handleDrop(item),
+        collect: (monitor) => ({
           isDragOver: monitor.isOver({ shallow: true }),
         }),
       }),
@@ -211,53 +215,52 @@ export const OperationSetImplementationEditor = observer(
               </button>
             </div>
           </div>
-          <div
-            ref={dropRef}
-            className={clsx('panel__content', {
-              'operation-mapping-editor__parameters--dnd-over':
-                isDragOver && !isReadOnly,
-            })}
+          <PanelDropZone
+            isDragOver={isDragOver && !isReadOnly}
+            dropTargetConnector={dropRef}
           >
-            {setImplementation.parameters.map((param) => (
-              <div
-                key={param._UUID}
-                className="operation-mapping-editor__parameter"
-              >
-                <div className="operation-mapping-editor__parameter__selector">
-                  <CustomSelectorInput
-                    options={setImplementationOptions}
-                    disabled={isReadOnly}
-                    onChange={changeParamater(param)}
-                    filterOption={filterOption}
-                    value={{
-                      value: param,
-                      label: param.setImplementation.value.id.value,
-                    }}
-                    placeholder={`Select parameter ID`}
-                  />
-                </div>
-                <button
-                  className="operation-mapping-editor__parameter__visit-btn"
-                  onClick={visit(param)}
-                  tabIndex={-1}
-                  title={'Visit mapping element'}
+            <div className="panel__content">
+              {setImplementation.parameters.map((param) => (
+                <div
+                  key={param._UUID}
+                  className="operation-mapping-editor__parameter"
                 >
-                  <ArrowCircleRightIcon />
-                </button>
-                {!isReadOnly && (
+                  <div className="operation-mapping-editor__parameter__selector">
+                    <CustomSelectorInput
+                      options={setImplementationOptions}
+                      disabled={isReadOnly}
+                      onChange={changeParamater(param)}
+                      filterOption={filterOption}
+                      value={{
+                        value: param,
+                        label: param.setImplementation.value.id.value,
+                      }}
+                      placeholder={`Select parameter ID`}
+                    />
+                  </div>
                   <button
-                    className="operation-mapping-editor__parameter__remove-btn"
-                    disabled={isReadOnly}
-                    onClick={deleteParameter(param)}
+                    className="operation-mapping-editor__parameter__visit-btn"
+                    onClick={visit(param)}
                     tabIndex={-1}
-                    title={'Remove'}
+                    title={'Visit mapping element'}
                   >
-                    <TimesIcon />
+                    <ArrowCircleRightIcon />
                   </button>
-                )}
-              </div>
-            ))}
-          </div>
+                  {!isReadOnly && (
+                    <button
+                      className="operation-mapping-editor__parameter__remove-btn"
+                      disabled={isReadOnly}
+                      onClick={deleteParameter(param)}
+                      tabIndex={-1}
+                      title={'Remove'}
+                    >
+                      <TimesIcon />
+                    </button>
+                  )}
+                </div>
+              ))}
+            </div>
+          </PanelDropZone>
         </div>
       </div>
     );

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

@@ -350,7 +350,14 @@ export const PurePropertyMappingEditor = observer(
       },
       [disableEditingTransform, purePropertyMappingState],
     );
-    const [{ item, dragItemType }, drop] = useDrop(
+    const [{ dragItem, dragItemType }, drop] = useDrop<
+      TypeDragSource,
+      void,
+      {
+        dragItem: TypeDragSource | undefined;
+        dragItemType: CORE_DND_TYPE;
+      }
+    >(
       () => ({
         accept: [
           CORE_DND_TYPE.TYPE_TREE_CLASS,
@@ -358,18 +365,15 @@ export const PurePropertyMappingEditor = observer(
           CORE_DND_TYPE.TYPE_TREE_PRIMITIVE,
           CORE_DND_TYPE.TYPE_TREE_ENUM,
         ],
-        drop: (dropItem: TransformDropTarget, monitor): void =>
-          handleDrop(dropItem, monitor.getItemType() as string),
-        collect: (
-          monitor,
-        ): { item: TypeDragSource | null; dragItemType: CORE_DND_TYPE } => ({
-          item: monitor.getItem<TypeDragSource | null>(),
+        drop: (item, monitor) =>
+          handleDrop(item, monitor.getItemType() as string),
+        collect: (monitor) => ({
+          dragItem: monitor.getItem<TypeDragSource | null>() ?? undefined,
           dragItemType: monitor.getItemType() as CORE_DND_TYPE,
         }),
       }),
       [handleDrop],
     );
-    const dragItem = item instanceof TypeDragSource ? item : undefined;
     const transformProps = {
       disableTransform: disableEditingTransform,
       forceBackdrop: setImplementationHasParserError,

package/src/components/editor/edit-panel/mapping-editor/relational/RelationalPropertyMappingEditor.tsx

@@ -295,11 +295,10 @@ export const RelationalPropertyMappingEditor = observer(
       },
       [disableEditingTransform, relationalPropertyMappingState],
     );
-    const [, drop] = useDrop(
+    const [, drop] = useDrop<TableOrViewTreeNodeDragSource>(
       () => ({
         accept: [TABLE_ELEMENT_DND_TYPE],
-        drop: (droppedItem: TableOrViewTreeNodeDragSource): void =>
-          handleDrop(droppedItem),
+        drop: (item) => handleDrop(item),
       }),
       [handleDrop],
     );

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

@@ -54,6 +54,7 @@ import {
   PlusIcon,
   ArrowsJoinIcon,
   ArrowsSplitIcon,
+  PanelDropZone,
 } from '@finos/legend-art';
 import { ServiceExecutionQueryEditor } from '../../../editor/edit-panel/service-editor/ServiceExecutionQueryEditor.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
@@ -218,15 +219,18 @@ const PureExecutionContextConfigurationEditor = observer(
       },
       [isReadOnly, mapping, executionContextState, pureExecutionState],
     );
-    const [{ isMappingOrRuntimeDragOver }, dropMappingOrRuntimeRef] = useDrop(
+    const [{ isMappingOrRuntimeDragOver }, dropMappingOrRuntimeRef] = useDrop<
+      ElementDragSource,
+      void,
+      { isMappingOrRuntimeDragOver: boolean }
+    >(
       () => ({
         accept: [
           CORE_DND_TYPE.PROJECT_EXPLORER_MAPPING,
           CORE_DND_TYPE.PROJECT_EXPLORER_RUNTIME,
         ],
-        drop: (item: ElementDragSource): void =>
-          handleMappingOrRuntimeDrop(item),
-        collect: (monitor): { isMappingOrRuntimeDragOver: boolean } => ({
+        drop: (item) => handleMappingOrRuntimeDrop(item),
+        collect: (monitor) => ({
           isMappingOrRuntimeDragOver: monitor.isOver({ shallow: true }),
         }),
       }),
@@ -239,78 +243,77 @@ const PureExecutionContextConfigurationEditor = observer(
     );
 
     return (
-      <div
-        ref={dropMappingOrRuntimeRef}
-        className="panel__content dnd__overlay__container"
-      >
-        <div
-          className={clsx({
-            dnd__overlay: isMappingOrRuntimeDragOver && !isReadOnly,
-          })}
-        />
-        <div className="service-execution-editor__configuration__items">
-          <div className="service-execution-editor__configuration__item">
-            <div className="btn--sm service-execution-editor__configuration__item__label">
-              <PURE_MappingIcon />
-            </div>
-            <CustomSelectorInput
-              className="panel__content__form__section__dropdown service-execution-editor__configuration__item__dropdown"
-              disabled={isReadOnly}
-              options={mappingOptions}
-              onChange={onMappingSelectionChange}
-              value={selectedMappingOption}
-              darkMode={true}
-              hasError={isMappingEmpty}
-            />
-            <button
-              className="btn--dark btn--sm service-execution-editor__configuration__item__btn"
-              onClick={visitMapping}
-              tabIndex={-1}
-              title={'See mapping'}
-            >
-              <LongArrowRightIcon />
-            </button>
-          </div>
-          <div className="service-execution-editor__configuration__item">
-            <div className="btn--sm service-execution-editor__configuration__item__label">
-              <PURE_RuntimeIcon />
-            </div>
-            <CustomSelectorInput
-              className="panel__content__form__section__dropdown service-execution-editor__configuration__item__dropdown"
-              disabled={isReadOnly}
-              options={runtimeOptions}
-              onChange={onRuntimeSelectionChange}
-              value={selectedRuntimeOption}
-              darkMode={true}
-            />
-            {!isRuntimePointer && (
-              <button
-                className="btn--sm btn--dark service-execution-editor__configuration__item__btn"
-                disabled={Boolean(isReadOnly || isMappingEmpty)}
-                onClick={openRuntimeEditor}
-                tabIndex={-1}
-                title={isReadOnly ? 'See runtime' : 'Configure custom runtime'}
-              >
-                <CogIcon />
-              </button>
-            )}
-            {isRuntimePointer && (
+      <div className="panel__content">
+        <PanelDropZone
+          dropTargetConnector={dropMappingOrRuntimeRef}
+          isDragOver={isMappingOrRuntimeDragOver && !isReadOnly}
+        >
+          <div className="service-execution-editor__configuration__items">
+            <div className="service-execution-editor__configuration__item">
+              <div className="btn--sm service-execution-editor__configuration__item__label">
+                <PURE_MappingIcon />
+              </div>
+              <CustomSelectorInput
+                className="panel__content__form__section__dropdown service-execution-editor__configuration__item__dropdown"
+                disabled={isReadOnly}
+                options={mappingOptions}
+                onChange={onMappingSelectionChange}
+                value={selectedMappingOption}
+                darkMode={true}
+                hasError={isMappingEmpty}
+              />
               <button
-                className="btn--sm btn--dark service-execution-editor__configuration__item__btn"
-                onClick={visitRuntime}
+                className="btn--dark btn--sm service-execution-editor__configuration__item__btn"
+                onClick={visitMapping}
                 tabIndex={-1}
-                title={'See runtime'}
+                title={'See mapping'}
               >
                 <LongArrowRightIcon />
               </button>
-            )}
-            <EmbeddedRuntimeEditor
-              runtimeEditorState={pureExecutionState.runtimeEditorState}
-              isReadOnly={serviceState.isReadOnly}
-              onClose={(): void => pureExecutionState.closeRuntimeEditor()}
-            />
+            </div>
+            <div className="service-execution-editor__configuration__item">
+              <div className="btn--sm service-execution-editor__configuration__item__label">
+                <PURE_RuntimeIcon />
+              </div>
+              <CustomSelectorInput
+                className="panel__content__form__section__dropdown service-execution-editor__configuration__item__dropdown"
+                disabled={isReadOnly}
+                options={runtimeOptions}
+                onChange={onRuntimeSelectionChange}
+                value={selectedRuntimeOption}
+                darkMode={true}
+              />
+              {!isRuntimePointer && (
+                <button
+                  className="btn--sm btn--dark service-execution-editor__configuration__item__btn"
+                  disabled={Boolean(isReadOnly || isMappingEmpty)}
+                  onClick={openRuntimeEditor}
+                  tabIndex={-1}
+                  title={
+                    isReadOnly ? 'See runtime' : 'Configure custom runtime'
+                  }
+                >
+                  <CogIcon />
+                </button>
+              )}
+              {isRuntimePointer && (
+                <button
+                  className="btn--sm btn--dark service-execution-editor__configuration__item__btn"
+                  onClick={visitRuntime}
+                  tabIndex={-1}
+                  title={'See runtime'}
+                >
+                  <LongArrowRightIcon />
+                </button>
+              )}
+              <EmbeddedRuntimeEditor
+                runtimeEditorState={pureExecutionState.runtimeEditorState}
+                isReadOnly={serviceState.isReadOnly}
+                onClose={(): void => pureExecutionState.closeRuntimeEditor()}
+              />
+            </div>
           </div>
-        </div>
+        </PanelDropZone>
       </div>
     );
   },
@@ -696,7 +699,7 @@ const MultiPureExecutionEditor = observer(
               ))}
               {!multiExecution.executionParameters.length && (
                 <BlankPanelPlaceholder
-                  placeholderText="Add an execution context"
+                  text="Add an execution context"
                   onClick={addExecutionKey}
                   clickActionType="add"
                   tooltipText="Click to add an execution context"
@@ -739,7 +742,7 @@ const MultiPureExecutionEditor = observer(
               />
             ) : (
               <BlankPanelPlaceholder
-                placeholderText="Add an execution context"
+                text="Add an execution context"
                 onClick={addExecutionKey}
                 clickActionType="add"
                 tooltipText="Click to add an execution context"

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

@@ -212,12 +212,14 @@ export const NewConnectionDataModal = observer(
     const dataElementOptions = testDataState.editorStore.dataOptions;
     const newConnectionState = testDataState.newConnectionDataState;
     const dataElement = newConnectionState.dataElement;
-    const selectedOption = dataElement ? buildElementOption(dataElement) : null;
+    const selectedDataElement = dataElement
+      ? buildElementOption(dataElement)
+      : null;
     const onDataElementChange = (val: {
       label: string;
       value?: DataElement;
     }): void => {
-      if (val.value !== selectedOption?.value && val.value) {
+      if (val.value !== selectedDataElement?.value && val.value) {
         newConnectionState.setDataElement(val.value);
       }
     };
@@ -265,7 +267,7 @@ export const NewConnectionDataModal = observer(
     // external format
     const selectedEmbeddedType = newConnectionState.embeddedDataType
       ? {
-          label: prettyCONSTName(newConnectionState.embeddedDataType.label),
+          label: prettyCONSTName(newConnectionState.embeddedDataType.value),
           value: newConnectionState.embeddedDataType.value,
         }
       : undefined;
@@ -301,42 +303,67 @@ export const NewConnectionDataModal = observer(
       >
         <form
           onSubmit={handleSubmit}
-          className="modal modal--dark search-modal"
+          className="modal service-test-data-modal modal--dark"
         >
-          <div className="modal__title">Create a connection test data</div>
-          <div className="explorer__new-element-modal__driver">
-            <CustomSelectorInput
-              className="explorer__new-element-modal__driver__dropdown"
-              options={connectionOptions}
-              onChange={onConnectionSelectionChange}
-              value={selectedConnection}
-              isClearable={false}
-              darkMode={true}
-            />
+          <div className="modal__header">
+            <div className="modal__title">Create a connection test data</div>
           </div>
-          <div className="explorer__new-element-modal__driver">
-            <CustomSelectorInput
-              className="explorer__new-element-modal__driver__dropdown"
-              options={embeddedOptions}
-              onChange={onEmbeddedTypeChange}
-              value={selectedEmbeddedType}
-              isClearable={false}
-              darkMode={true}
-            />
-          </div>
-          {selectedEmbeddedType?.value === EmbeddedDataType.DATA_ELEMENT && (
-            <div className="explorer__new-element-modal__driver">
-              <CustomSelectorInput
-                className="panel__content__form__section__dropdown data-element-reference-editor__value__dropdown"
-                disabled={isReadOnly}
-                options={dataElementOptions}
-                onChange={onDataElementChange}
-                value={selectedOption}
-                darkMode={true}
-              />
+          <div className="modal__body">
+            <div className="panel__content__form__section">
+              <div className="panel__content__form__section__header__label">
+                Connection ID
+              </div>
+              <div className="panel__content__form__section__header__prompt">
+                Connection in runtime to povide test data for
+              </div>
+              <div className="explorer__new-element-modal__driver">
+                <CustomSelectorInput
+                  className="explorer__new-element-modal__driver__dropdown"
+                  options={connectionOptions}
+                  onChange={onConnectionSelectionChange}
+                  value={selectedConnection}
+                  isClearable={false}
+                  darkMode={true}
+                />
+              </div>
             </div>
-          )}
-          <div className="search-modal__actions">
+            <div className="panel__content__form__section">
+              <div className="panel__content__form__section__header__label">
+                Data Type
+              </div>
+              <div className="panel__content__form__section__header__prompt">
+                Test data type that will be loaded to your test connection
+              </div>
+              <div className="explorer__new-element-modal__driver">
+                <CustomSelectorInput
+                  className="explorer__new-element-modal__driver__dropdown"
+                  options={embeddedOptions}
+                  onChange={onEmbeddedTypeChange}
+                  value={selectedEmbeddedType}
+                  isClearable={false}
+                  darkMode={true}
+                />
+              </div>
+            </div>
+            {selectedEmbeddedType?.value === EmbeddedDataType.DATA_ELEMENT && (
+              <div className="panel__content__form__section">
+                <div className="panel__content__form__section__header__label">
+                  Data Element
+                </div>
+                <div className="explorer__new-element-modal__driver">
+                  <CustomSelectorInput
+                    className="panel__content__form__section__dropdown data-element-reference-editor__value__dropdown"
+                    disabled={isReadOnly}
+                    options={dataElementOptions}
+                    onChange={onDataElementChange}
+                    value={selectedDataElement}
+                    darkMode={true}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="modal__footer">
             <button
               type="button"
               className="btn btn--dark"

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"