@finos/legend-application-studio 16.0.2 → 18.0.0

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

@@ -26,12 +26,13 @@ import {
   LongArrowAltDownIcon,
   PencilEditIcon,
   PanelDropZone,
+  PanelContent,
 } from '@finos/legend-art';
 import {
   CORE_DND_TYPE,
   type ElementDragSource,
   type MappingElementSourceDropTarget,
-} from '../../../../stores/shared/DnDUtil.js';
+} from '../../../../stores/shared/DnDUtils.js';
 import { LEGEND_STUDIO_TEST_ID } from '../../../LegendStudioTestID.js';
 import {
   InstanceSetImplementationState,
@@ -87,7 +88,7 @@ import {
 } from '@finos/legend-graph';
 import { StudioLambdaEditor } from '../../../shared/StudioLambdaEditor.js';
 import type { EditorStore } from '../../../../stores/EditorStore.js';
-import type { DSLMapping_LegendStudioApplicationPlugin_Extension } from '../../../../stores/DSLMapping_LegendStudioApplicationPlugin_Extension.js';
+import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../../../../stores/DSL_Mapping_LegendStudioApplicationPlugin_Extension.js';
 
 export const InstanceSetImplementationSourceExplorer = observer(
   (props: {
@@ -276,7 +277,7 @@ export const InstanceSetImplementationSourceExplorer = observer(
         .flatMap(
           (plugin) =>
             (
-              plugin as DSLMapping_LegendStudioApplicationPlugin_Extension
+              plugin as DSL_Mapping_LegendStudioApplicationPlugin_Extension
             ).getExtraInstanceSetImplementationBlockingErrorCheckers?.() ?? [],
         );
     let hasParseError = false;
@@ -323,7 +324,7 @@ export const InstanceSetImplementationSourceExplorer = observer(
             </button>
           </div>
         </div>
-        <div className="panel__content">
+        <PanelContent>
           <PanelDropZone
             dropTargetConnector={dropRef}
             isDragOver={isDragOver && !isReadOnly}
@@ -375,7 +376,7 @@ export const InstanceSetImplementationSourceExplorer = observer(
               />
             )}
           </PanelDropZone>
-        </div>
+        </PanelContent>
       </div>
     );
   },
@@ -535,7 +536,7 @@ export const InstanceSetImplementationEditor = observer(
                       </div>
                     </div>
                   </div>
-                  <div className="panel__content">
+                  <PanelContent>
                     {!isReadOnly &&
                       !isUnsupported &&
                       sortedProperties.map((property) => (
@@ -576,7 +577,7 @@ export const InstanceSetImplementationEditor = observer(
                         text="Can't display class mapping in form mode"
                       ></UnsupportedEditorPanel>
                     )}
-                  </div>
+                  </PanelContent>
                 </div>
               </ResizablePanel>
               <ResizablePanelSplitter />

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

@@ -38,6 +38,7 @@ import {
   TableExplicitReference,
   ViewExplicitReference,
   getAllRecordTypes,
+  PackageableElement,
 } from '@finos/legend-graph';
 import { UnsupportedOperationError } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
@@ -45,6 +46,7 @@ import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
   useApplicationStore,
   buildElementOption,
+  getPackageableElementOptionFormatter,
 } from '@finos/legend-application';
 
 export const getMappingElementSourceFilterText = (
@@ -66,6 +68,34 @@ export interface MappingElementSourceSelectOption {
   value: unknown;
 }
 
+const getMappingSourcePackageableElementOptionFormatter = (props: {
+  darkMode?: boolean;
+}): ((option: MappingElementSourceSelectOption) => React.ReactNode) =>
+  function MappingSourceOptionLabel(
+    option: MappingElementSourceSelectOption,
+  ): React.ReactNode {
+    if (option.value instanceof PackageableElement) {
+      return getPackageableElementOptionFormatter(props)(
+        buildElementOption(option.value),
+      );
+    } else if (option.value instanceof TableAlias) {
+      const tableOwner = option.value.relation.ownerReference;
+      return getPackageableElementOptionFormatter(props)(
+        buildElementOption(tableOwner.value),
+      );
+    } else {
+      const className = props.darkMode
+        ? 'packageable-element-format-option-label--dark'
+        : 'packageable-element-format-option-label';
+      return (
+        <div className={className}>
+          <div className="packageable-element-format-option-label-type"></div>
+          <div className={`${className}__name`}>{option.label}</div>
+        </div>
+      );
+    }
+  };
+
 export const getSourceElementLabel = (
   srcElement: unknown | undefined,
 ): string => {
@@ -205,6 +235,9 @@ export const InstanceSetImplementationSourceSelectorModal = observer(
             placeholder={`Select a source...`}
             isClearable={true}
             filterOption={filterOption}
+            formatOptionLabel={getMappingSourcePackageableElementOptionFormatter(
+              {},
+            )}
           />
         </div>
       </Dialog>

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

@@ -32,6 +32,7 @@ import {
   PURE_ClassIcon,
   PURE_EnumerationIcon,
   PURE_AssociationIcon,
+  Panel,
 } from '@finos/legend-art';
 import { ClassMappingEditor } from './ClassMappingEditor.js';
 import { EnumerationMappingEditor } from './EnumerationMappingEditor.js';
@@ -241,7 +242,7 @@ export const MappingEditor = observer(() => {
         </ResizablePanel>
         <ResizablePanelSplitter />
         <ResizablePanel>
-          <div className="panel">
+          <Panel>
             <ContextMenu
               className="panel__header mapping-editor__header"
               disabled={true}
@@ -340,7 +341,7 @@ export const MappingEditor = observer(() => {
             <div className="panel__content mapping-editor__content">
               {renderActiveMappingElementTab()}
             </div>
-          </div>
+          </Panel>
         </ResizablePanel>
       </ResizablePanelGroup>
     </div>

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

@@ -39,6 +39,7 @@ import {
   RobotIcon,
   PanelDropZone,
   PencilIcon,
+  PanelContent,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import {
@@ -52,13 +53,8 @@ import { NewServiceModal } from '../service-editor/NewServiceModal.js';
 import {
   type MappingElementDragSource,
   CORE_DND_TYPE,
-} from '../../../../stores/shared/DnDUtil.js';
-import {
-  assertErrorThrown,
-  guaranteeType,
-  hashObject,
-  uniq,
-} from '@finos/legend-shared';
+} from '../../../../stores/shared/DnDUtils.js';
+import { assertErrorThrown, guaranteeType, uniq } from '@finos/legend-shared';
 import {
   type MappingExecutionState,
   MappingExecutionEmptyInputDataState,
@@ -84,12 +80,12 @@ import {
   isStubbed_RawLambda,
 } from '@finos/legend-graph';
 import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
-import { objectInputData_setData } from '../../../../stores/graphModifier/DSLMapping_GraphModifierHelper.js';
-import { flatData_setData } from '../../../../stores/graphModifier/StoreFlatData_GraphModifierHelper.js';
+import { objectInputData_setData } from '../../../../stores/graphModifier/DSL_Mapping_GraphModifierHelper.js';
+import { flatData_setData } from '../../../../stores/graphModifier/STO_FlatData_GraphModifierHelper.js';
 import {
   relationalInputData_setData,
   relationalInputData_setInputType,
-} from '../../../../stores/graphModifier/StoreRelational_GraphModifierHelper.js';
+} from '../../../../stores/graphModifier/STO_Relational_GraphModifierHelper.js';
 import { MappingExecutionQueryBuilderState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingExecutionQueryBuilderState.js';
 import type { QueryBuilderState } from '@finos/legend-query-builder';
 
@@ -201,10 +197,6 @@ const MappingExecutionQueryEditor = observer(
               queryBuilderState.initializeWithQuery(
                 executionState.queryState.query,
               );
-              queryBuilderState.changeDetectionState.setQueryHashCode(
-                hashObject(executionState.queryState.query),
-              );
-              queryBuilderState.changeDetectionState.setIsEnabled(true);
               return queryBuilderState;
             },
             actionConfigs: [
@@ -223,9 +215,6 @@ const MappingExecutionQueryEditor = observer(
                         applicationStore.notifySuccess(
                           `Mapping execution query is updated`,
                         );
-                        queryBuilderState.changeDetectionState.setQueryHashCode(
-                          hashObject(rawLambda),
-                        );
                         embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration(
                           undefined,
                         );
@@ -394,7 +383,7 @@ const MappingExecutionQueryEditor = observer(
           </div>
         </div>
         {!isStubbed_RawLambda(queryState.query) && (
-          <div className="panel__content">
+          <PanelContent>
             <div className="mapping-execution-builder__query-panel__query">
               <StudioTextInputEditor
                 inputValue={queryState.lambdaString}
@@ -403,10 +392,10 @@ const MappingExecutionQueryEditor = observer(
                 showMiniMap={false}
               />
             </div>
-          </div>
+          </PanelContent>
         )}
         {isStubbed_RawLambda(queryState.query) && (
-          <div className="panel__content">
+          <PanelContent>
             <PanelDropZone
               dropTargetConnector={dropRef}
               isDragOver={isDragOver}
@@ -419,7 +408,7 @@ const MappingExecutionQueryEditor = observer(
                 isDropZoneActive={canDrop}
               />
             </PanelDropZone>
-          </div>
+          </PanelContent>
         )}
         {openClassMappingSelectorModal && (
           <ClassMappingSelectorModal

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

@@ -21,7 +21,7 @@ import {
   type ElementDragSource,
   CORE_DND_TYPE,
   MappingElementDragSource,
-} from '../../../../stores/shared/DnDUtil.js';
+} from '../../../../stores/shared/DnDUtils.js';
 import {
   type TreeNodeContainerProps,
   clsx,
@@ -68,7 +68,7 @@ import {
   PureInstanceSetImplementationFilterState,
   PureInstanceSetImplementationState,
 } from '../../../../stores/editor-state/element-editor-state/mapping/PureInstanceSetImplementationState.js';
-import { pureInstanceSetImpl_setMappingFilter } from '../../../../stores/graphModifier/DSLMapping_GraphModifierHelper.js';
+import { pureInstanceSetImpl_setMappingFilter } from '../../../../stores/graphModifier/DSL_Mapping_GraphModifierHelper.js';
 
 export const MappingExplorerContextMenu = observer(
   forwardRef<

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

@@ -46,17 +46,17 @@ import {
   PauseCircleIcon,
   PanelDropZone,
   PencilIcon,
+  PanelContent,
 } from '@finos/legend-art';
 import { useDrop } from 'react-dnd';
 import {
   type MappingElementDragSource,
   CORE_DND_TYPE,
-} from '../../../../stores/shared/DnDUtil.js';
+} from '../../../../stores/shared/DnDUtils.js';
 import {
   IllegalStateError,
   guaranteeType,
   tryToFormatLosslessJSONString,
-  hashObject,
   assertErrorThrown,
 } from '@finos/legend-shared';
 import {
@@ -87,11 +87,11 @@ import {
   DEPRECATED__validate_MappingTestAssert,
 } from '@finos/legend-graph';
 import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
-import { flatData_setData } from '../../../../stores/graphModifier/StoreFlatData_GraphModifierHelper.js';
+import { flatData_setData } from '../../../../stores/graphModifier/STO_FlatData_GraphModifierHelper.js';
 import {
   relationalInputData_setData,
   relationalInputData_setInputType,
-} from '../../../../stores/graphModifier/StoreRelational_GraphModifierHelper.js';
+} from '../../../../stores/graphModifier/STO_Relational_GraphModifierHelper.js';
 import type { QueryBuilderState } from '@finos/legend-query-builder';
 import { MappingExecutionQueryBuilderState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingExecutionQueryBuilderState.js';
 
@@ -115,10 +115,6 @@ const MappingTestQueryEditor = observer(
                 embeddedQueryBuilderState.editorStore.graphManagerState,
               );
               queryBuilderState.initializeWithQuery(testState.queryState.query);
-              queryBuilderState.changeDetectionState.setQueryHashCode(
-                hashObject(testState.queryState.query),
-              );
-              queryBuilderState.changeDetectionState.setIsEnabled(true);
               return queryBuilderState;
             },
             actionConfigs: [
@@ -137,9 +133,6 @@ const MappingTestQueryEditor = observer(
                         applicationStore.notifySuccess(
                           `Mapping test query is updated`,
                         );
-                        queryBuilderState.changeDetectionState.setQueryHashCode(
-                          hashObject(rawLambda),
-                        );
                         embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration(
                           undefined,
                         );
@@ -281,7 +274,7 @@ const MappingTestQueryEditor = observer(
           </div>
         </div>
         {!isStubbed_RawLambda(queryState.query) && (
-          <div className="panel__content">
+          <PanelContent>
             <div className="mapping-test-editor__query-panel__query">
               <StudioTextInputEditor
                 inputValue={queryState.lambdaString}
@@ -290,10 +283,10 @@ const MappingTestQueryEditor = observer(
                 showMiniMap={false}
               />
             </div>
-          </div>
+          </PanelContent>
         )}
         {isStubbed_RawLambda(queryState.query) && (
-          <div className="panel__content">
+          <PanelContent>
             <PanelDropZone
               dropTargetConnector={dropRef}
               isDragOver={isDragOver}
@@ -307,7 +300,7 @@ const MappingTestQueryEditor = observer(
                 disabled={isReadOnly}
               />
             </PanelDropZone>
-          </div>
+          </PanelContent>
         )}
         {openClassMappingSelectorModal && (
           <ClassMappingSelectorModal

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

@@ -42,7 +42,7 @@ import {
 import {
   type MappingElementDragSource,
   CORE_DND_TYPE,
-} from '../../../../stores/shared/DnDUtil.js';
+} from '../../../../stores/shared/DnDUtils.js';
 import { ClassMappingSelectorModal } from './MappingExecutionBuilder.js';
 import { flowResult } from 'mobx';
 import { Randomizer } from '@finos/legend-shared';

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

@@ -43,7 +43,7 @@ import {
   Enumeration,
   Association,
 } from '@finos/legend-graph';
-import { BASIC_SET_IMPLEMENTATION_TYPE } from '../../../../stores/shared/ModelUtil.js';
+import { BASIC_SET_IMPLEMENTATION_TYPE } from '../../../../stores/shared/ModelClassifierUtils.js';
 import {
   buildElementOption,
   getPackageableElementOptionFormatter,
@@ -263,11 +263,7 @@ export const NewMappingElementModal = observer(() => {
             />
           )}
           <div className="search-modal__actions">
-            <button
-              className="btn btn--primary"
-              disabled={disableCreateButton}
-              color="primary"
-            >
+            <button className="btn btn--primary" disabled={disableCreateButton}>
               Create
             </button>
           </div>

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

@@ -24,12 +24,14 @@ import {
   ArrowCircleRightIcon,
   PlusIcon,
   PanelDropZone,
+  Panel,
+  PanelContent,
 } from '@finos/legend-art';
 import {
   CORE_DND_TYPE,
   type OperationSetImplementationDropTarget,
   type MappingElementDragSource,
-} from '../../../../stores/shared/DnDUtil.js';
+} from '../../../../stores/shared/DnDUtils.js';
 import { useDrop } from 'react-dnd';
 import { noop } from '@finos/legend-shared';
 import {
@@ -55,7 +57,7 @@ import {
   operationMapping_addParameter,
   operationMapping_changeParameter,
   operationMapping_deleteParameter,
-} from '../../../../stores/graphModifier/DSLMapping_GraphModifierHelper.js';
+} from '../../../../stores/graphModifier/DSL_Mapping_GraphModifierHelper.js';
 
 interface SetImplementationOption {
   value: SetImplementation;
@@ -195,7 +197,7 @@ export const OperationSetImplementationEditor = observer(
 
     return (
       <div className="mapping-element-editor__content">
-        <div className="panel">
+        <Panel>
           <div className="panel__header">
             <div className="panel__header__title">
               <div className="panel__header__title__content">PARAMETERS</div>
@@ -219,7 +221,7 @@ export const OperationSetImplementationEditor = observer(
             isDragOver={isDragOver && !isReadOnly}
             dropTargetConnector={dropRef}
           >
-            <div className="panel__content">
+            <PanelContent>
               {setImplementation.parameters.map((param) => (
                 <div
                   key={param._UUID}
@@ -259,9 +261,9 @@ export const OperationSetImplementationEditor = observer(
                   )}
                 </div>
               ))}
-            </div>
+            </PanelContent>
           </PanelDropZone>
-        </div>
+        </Panel>
       </div>
     );
   },

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

@@ -55,13 +55,13 @@ import { useApplicationStore } from '@finos/legend-application';
 import {
   setImpl_nominateRoot,
   setImpl_setRoot,
-} from '../../../../stores/graphModifier/DSLMapping_GraphModifierHelper.js';
+} from '../../../../stores/graphModifier/DSL_Mapping_GraphModifierHelper.js';
 import {
   CLASS_PROPERTY_TYPE,
   getClassPropertyType,
   SET_IMPLEMENTATION_TYPE,
-} from '../../../../stores/shared/ModelUtil.js';
-import type { DSLMapping_LegendStudioApplicationPlugin_Extension } from '../../../../stores/DSLMapping_LegendStudioApplicationPlugin_Extension.js';
+} from '../../../../stores/shared/ModelClassifierUtils.js';
+import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../../../../stores/DSL_Mapping_LegendStudioApplicationPlugin_Extension.js';
 
 export const getExpectedReturnType = (
   targetSetImplementation: SetImplementation | undefined,
@@ -90,10 +90,10 @@ export const PropertyMappingsEditor = observer(
     const propertyBasicType = getClassPropertyType(propertyRawType);
     const instanceSetImplementationType =
       editorStore.graphState.getSetImplementationType(
-        instanceSetImplementationState.setImplementation,
+        instanceSetImplementationState.mappingElement,
       );
     const isEmbedded =
-      instanceSetImplementationState.setImplementation._isEmbedded;
+      instanceSetImplementationState.mappingElement._isEmbedded;
     // Parser Error
     const propertyMappingStates =
       instanceSetImplementationState.propertyMappingStates.filter(
@@ -293,7 +293,7 @@ export const PropertyMappingsEditor = observer(
                     .flatMap(
                       (plugin) =>
                         (
-                          plugin as DSLMapping_LegendStudioApplicationPlugin_Extension
+                          plugin as DSL_Mapping_LegendStudioApplicationPlugin_Extension
                         ).getExtraPropertyMappingEditorRenderers?.() ?? [],
                     );
                 for (const renderer of extraPropertyMappingEditorRenderers) {

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

@@ -20,7 +20,7 @@ import {
   type TransformDropTarget,
   CORE_DND_TYPE,
   TypeDragSource,
-} from '../../../../stores/shared/DnDUtil.js';
+} from '../../../../stores/shared/DnDUtils.js';
 import {
   type MappingElement,
   MappingEditorState,
@@ -45,12 +45,12 @@ import {
   EnumerationMappingExplicitReference,
 } from '@finos/legend-graph';
 import { StudioLambdaEditor } from '../../../shared/StudioLambdaEditor.js';
-import { purePropertyMapping_setTransformer } from '../../../../stores/graphModifier/DSLMapping_GraphModifierHelper.js';
+import { purePropertyMapping_setTransformer } from '../../../../stores/graphModifier/DSL_Mapping_GraphModifierHelper.js';
 import { getExpectedReturnType } from './PropertyMappingsEditor.js';
 import {
   CLASS_PROPERTY_TYPE,
   getClassPropertyType,
-} from '../../../../stores/shared/ModelUtil.js';
+} from '../../../../stores/shared/ModelClassifierUtils.js';
 
 const SimplePropertyMappingEditor = observer(
   (props: {

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

@@ -46,12 +46,12 @@ import {
   EnumerationMappingExplicitReference,
 } from '@finos/legend-graph';
 import { StudioLambdaEditor } from '../../../../shared/StudioLambdaEditor.js';
-import { relationalPropertyMapping_setTransformer } from '../../../../../stores/graphModifier/StoreRelational_GraphModifierHelper.js';
+import { relationalPropertyMapping_setTransformer } from '../../../../../stores/graphModifier/STO_Relational_GraphModifierHelper.js';
 import { getExpectedReturnType } from '../PropertyMappingsEditor.js';
 import {
   CLASS_PROPERTY_TYPE,
   getClassPropertyType,
-} from '../../../../../stores/shared/ModelUtil.js';
+} from '../../../../../stores/shared/ModelClassifierUtils.js';
 
 const SimplePropertyMappingEditor = observer(
   (props: {

package/src/components/editor/edit-panel/project-configuration-editor/ProjectConfigurationEditor.tsx

@@ -41,6 +41,7 @@ import {
   ExternalLinkSquareIcon,
   ArchiveIcon,
   Dialog,
+  Panel,
 } from '@finos/legend-art';
 import { flowResult } from 'mobx';
 import {
@@ -60,11 +61,13 @@ import {
   SNAPSHOT_VERSION_ALIAS,
   MASTER_SNAPSHOT_ALIAS,
   type ProjectData,
-  compareSemVerVersions,
-  generateGAVCoordinates,
   type ProjectDependencyInfo,
 } from '@finos/legend-server-depot';
 import { generateViewProjectRoute } from '../../../../stores/LegendStudioRouter.js';
+import {
+  compareSemVerVersions,
+  generateGAVCoordinates,
+} from '@finos/legend-storage';
 
 interface VersionOption {
   label: string;
@@ -602,7 +605,7 @@ export const ProjectConfigurationEditor = observer(() => {
   }
   return (
     <div className="project-configuration-editor">
-      <div className="panel">
+      <Panel>
         <div className="panel__header">
           <div className="panel__header__title">
             <div className="panel__header__title__label">
@@ -687,7 +690,7 @@ export const ProjectConfigurationEditor = observer(() => {
               />
             )}
         </div>
-      </div>
+      </Panel>
     </div>
   );
 });

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

@@ -85,7 +85,7 @@ export const NewServiceModal = observer(
           <div className="input-group">
             <input
               ref={nameRef}
-              className="modal--simple__input input--dark input-group__input"
+              className="input input--dark input-group__input"
               disabled={isReadOnly}
               value={servicePath}
               spellCheck={false}
@@ -100,9 +100,8 @@ export const NewServiceModal = observer(
           </div>
           <div className="search-modal__actions">
             <button
-              className="modal--simple__btn btn btn--dark btn--primary"
+              className="btn btn--dark"
               disabled={Boolean(isReadOnly) || elementAlreadyExists}
-              color="primary"
               onClick={create}
             >
               Create

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

@@ -45,7 +45,7 @@ import {
   service_setDocumentation,
   service_setPattern,
   service_updateOwner,
-} from '../../../../stores/graphModifier/DSLService_GraphModifierHelper.js';
+} from '../../../../stores/graphModifier/DSL_Service_GraphModifierHelper.js';
 import { validate_ServicePattern } from '@finos/legend-graph';
 import { ServiceTestableEditor } from './testable/ServiceTestableEditor.js';
 import { useApplicationNavigationContext } from '@finos/legend-application';

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

@@ -29,7 +29,7 @@ import {
   CORE_DND_TYPE,
   type ElementDragSource,
   type UMLEditorElementDropTarget,
-} from '../../../../stores/shared/DnDUtil.js';
+} from '../../../../stores/shared/DnDUtils.js';
 import { UnsupportedEditorPanel } from '../../../editor/edit-panel/UnsupportedElementEditor.js';
 import {
   clsx,
@@ -55,6 +55,8 @@ import {
   ArrowsJoinIcon,
   ArrowsSplitIcon,
   PanelDropZone,
+  Panel,
+  PanelContent,
 } from '@finos/legend-art';
 import { ServiceExecutionQueryEditor } from '../../../editor/edit-panel/service-editor/ServiceExecutionQueryEditor.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
@@ -247,7 +249,7 @@ const PureExecutionContextConfigurationEditor = observer(
     );
 
     return (
-      <div className="panel__content">
+      <PanelContent>
         <PanelDropZone
           dropTargetConnector={dropMappingOrRuntimeRef}
           isDragOver={isMappingOrRuntimeDragOver && !isReadOnly}
@@ -318,7 +320,7 @@ const PureExecutionContextConfigurationEditor = observer(
             </div>
           </div>
         </PanelDropZone>
-      </div>
+      </PanelContent>
     );
   },
 );
@@ -439,7 +441,7 @@ const PureSingleExecutionEditor = observer(
 
     return (
       <div className="service-execution-editor__execution">
-        <div className="panel">
+        <Panel>
           <div className="panel__content service-editor__content">
             <PureExecutionContextConfigurationEditor
               pureExecutionState={singleExecutionState}
@@ -448,7 +450,7 @@ const PureSingleExecutionEditor = observer(
               }
             />
           </div>
-        </div>
+        </Panel>
       </div>
     );
   },
@@ -816,7 +818,7 @@ const ServicePureExecutionEditor = observer(
           </ResizablePanelSplitter>
           <ResizablePanel minSize={56}>
             <div className="service-execution-editor__content">
-              <div className="panel">
+              <Panel>
                 <div className="panel__header">
                   <div className="panel__header__title">
                     <div className="panel__header__title__label service-editor__execution__label--test">
@@ -859,7 +861,7 @@ const ServicePureExecutionEditor = observer(
                     />
                   )}
                 </div>
-              </div>
+              </Panel>
             </div>
           </ResizablePanel>
         </ResizablePanelGroup>