@finos/legend-application-studio 17.0.0 → 18.0.1

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 {
@@ -79,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';
 
@@ -382,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}
@@ -391,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}
@@ -407,7 +408,7 @@ const MappingExecutionQueryEditor = observer(
                 isDropZoneActive={canDrop}
               />
             </PanelDropZone>
-          </div>
+          </PanelContent>
         )}
         {openClassMappingSelectorModal && (
           <ClassMappingSelectorModal

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

@@ -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,6 +46,7 @@ import {
   PauseCircleIcon,
   PanelDropZone,
   PencilIcon,
+  PanelContent,
 } from '@finos/legend-art';
 import { useDrop } from 'react-dnd';
 import {
@@ -86,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';
 
@@ -273,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}
@@ -282,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}
@@ -299,7 +300,7 @@ const MappingTestQueryEditor = observer(
                 disabled={isReadOnly}
               />
             </PanelDropZone>
-          </div>
+          </PanelContent>
         )}
         {openClassMappingSelectorModal && (
           <ClassMappingSelectorModal

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

@@ -24,6 +24,8 @@ import {
   ArrowCircleRightIcon,
   PlusIcon,
   PanelDropZone,
+  Panel,
+  PanelContent,
 } from '@finos/legend-art';
 import {
   CORE_DND_TYPE,
@@ -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

@@ -22,12 +22,20 @@ import {
   type MappingElement,
   MappingEditorState,
 } from '../../../../stores/editor-state/element-editor-state/mapping/MappingEditorState.js';
-import type { InstanceSetImplementationState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingElementState.js';
+import type {
+  InstanceSetImplementationState,
+  PropertyMappingState,
+} from '../../../../stores/editor-state/element-editor-state/mapping/MappingElementState.js';
 import {
   PurePropertyMappingState,
   PureInstanceSetImplementationState,
 } from '../../../../stores/editor-state/element-editor-state/mapping/PureInstanceSetImplementationState.js';
-import { clsx, ArrowCircleRightIcon } from '@finos/legend-art';
+import {
+  clsx,
+  ArrowCircleRightIcon,
+  TimesCircleIcon,
+  TimesIcon,
+} from '@finos/legend-art';
 import { guaranteeType, UnsupportedOperationError } from '@finos/legend-shared';
 import {
   type FlatDataPropertyMappingState,
@@ -42,6 +50,7 @@ import type {
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
   type Property,
+  type PropertyMapping,
   type Type,
   getRootSetImplementation,
   Class,
@@ -53,15 +62,16 @@ import {
 } from '@finos/legend-graph';
 import { useApplicationStore } from '@finos/legend-application';
 import {
+  instanceSetImpl_deletePropertyMapping,
   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/ModelClassifierUtils.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 getExpectedReturnType = (
   targetSetImplementation: SetImplementation | undefined,
@@ -82,6 +92,12 @@ export const PropertyMappingsEditor = observer(
     isReadOnly: boolean;
   }) => {
     const { instanceSetImplementationState, property, isReadOnly } = props;
+    const validationErrorMessage =
+      instanceSetImplementationState.mappingElement.propertyMappings.filter(
+        (pm) => pm.property.value === property,
+      ).length > 1 && !(property.genericType.value.rawType instanceof Class)
+        ? 'Only one property mapping should exist per simple type (e.g. primitive, measure, unit) or enumeration type property'
+        : undefined;
     const editorStore = useEditorStore();
     const applicationStore = useApplicationStore();
     const mappingEditorState =
@@ -90,12 +106,12 @@ 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 =
+    const propertyMappingStates: PropertyMappingState[] =
       instanceSetImplementationState.propertyMappingStates.filter(
         (pm) => pm.propertyMapping.property.value === property,
       );
@@ -107,6 +123,13 @@ export const PropertyMappingsEditor = observer(
         (pm) => pm.parserError,
       ),
     );
+    const removePropertyMapping = (pm: PropertyMapping): void => {
+      instanceSetImpl_deletePropertyMapping(
+        instanceSetImplementationState.mappingElement,
+        pm,
+      );
+      instanceSetImplementationState.decorate();
+    };
     // Walker
     // TODO: revisit this behavior now that we have more types of property mapping to support
     // e.g. embedded, target set implementation, etc.
@@ -188,7 +211,25 @@ export const PropertyMappingsEditor = observer(
         })}
       >
         <div className="property-mapping-editor__metadata">
-          <div className="property-mapping-editor__name">{property.name}</div>
+          <div
+            className={clsx('property-mapping-editor__name', {
+              'property-mapping-editor__name--with-validation': Boolean(
+                validationErrorMessage,
+              ),
+            })}
+          >
+            <div className={'property-mapping-editor__name__label'}>
+              {property.name}
+            </div>
+            {validationErrorMessage && (
+              <div
+                className="property-mapping-editor__name--with-validation__indicator"
+                title={validationErrorMessage}
+              >
+                <TimesCircleIcon />
+              </div>
+            )}
+          </div>
           <div className="property-mapping-editor__info">
             <div
               className={clsx(
@@ -230,120 +271,184 @@ export const PropertyMappingsEditor = observer(
           </div>
         </div>
         <div className="property-mapping-editor__content">
-          {propertyMappingStates.map((propertyMappingState) => {
-            switch (instanceSetImplementationType) {
-              case SET_IMPLEMENTATION_TYPE.PUREINSTANCE: {
-                return (
-                  <PurePropertyMappingEditor
-                    key={propertyMappingState.uuid}
-                    isReadOnly={isReadOnly}
-                    pureInstanceSetImplementationState={guaranteeType(
+          <div className="property-mapping-editor__entries">
+            {propertyMappingStates.map((propertyMappingState) => {
+              switch (instanceSetImplementationType) {
+                case SET_IMPLEMENTATION_TYPE.PUREINSTANCE: {
+                  return (
+                    <div
+                      className="property-mapping-editor__entries__entry"
+                      key={propertyMappingState.uuid}
+                    >
+                      <PurePropertyMappingEditor
+                        isReadOnly={isReadOnly}
+                        pureInstanceSetImplementationState={guaranteeType(
+                          instanceSetImplementationState,
+                          PureInstanceSetImplementationState,
+                        )}
+                        purePropertyMappingState={guaranteeType(
+                          propertyMappingState,
+                          PurePropertyMappingState,
+                        )}
+                        setImplementationHasParserError={
+                          setImplementationHasParserError
+                        }
+                      />
+                      {propertyMappingStates.length > 1 &&
+                        propertyBasicType !== CLASS_PROPERTY_TYPE.CLASS && (
+                          <button
+                            className="property-mapping-editor__entries__entry__remove-btn"
+                            onClick={() =>
+                              removePropertyMapping(
+                                propertyMappingState.propertyMapping,
+                              )
+                            }
+                            tabIndex={-1}
+                            title="Remove"
+                            disabled={propertyMappingState.lambdaString === ''}
+                          >
+                            <TimesIcon />
+                          </button>
+                        )}
+                    </div>
+                  );
+                }
+                case SET_IMPLEMENTATION_TYPE.FLAT_DATA:
+                case SET_IMPLEMENTATION_TYPE.EMBEDDED_FLAT_DATA: {
+                  return (
+                    <div
+                      className="property-mapping-editor__entries__entry"
+                      key={propertyMappingState.uuid}
+                    >
+                      <FlatDataPropertyMappingEditor
+                        isReadOnly={isReadOnly}
+                        flatDataInstanceSetImplementationState={
+                          instanceSetImplementationState as FlatDataInstanceSetImplementationState
+                        }
+                        flatDataPropertyMappingState={
+                          propertyMappingState as FlatDataPropertyMappingState
+                        }
+                        setImplementationHasParserError={
+                          setImplementationHasParserError
+                        }
+                      />
+                      {propertyMappingStates.length > 1 &&
+                        propertyBasicType !== CLASS_PROPERTY_TYPE.CLASS && (
+                          <button
+                            key={propertyMappingState.uuid}
+                            className="property-mapping-editor__entries__entry__remove-btn"
+                            onClick={() =>
+                              removePropertyMapping(
+                                propertyMappingState.propertyMapping,
+                              )
+                            }
+                            tabIndex={-1}
+                            title="Remove"
+                            disabled={propertyMappingState.lambdaString === ''}
+                          >
+                            <TimesIcon />
+                          </button>
+                        )}
+                    </div>
+                  );
+                }
+                case SET_IMPLEMENTATION_TYPE.RELATIONAL: {
+                  return (
+                    <div
+                      className="property-mapping-editor__entries__entry"
+                      key={propertyMappingState.uuid}
+                    >
+                      <RelationalPropertyMappingEditor
+                        isReadOnly={isReadOnly}
+                        relationalInstanceSetImplementationState={
+                          instanceSetImplementationState as RootRelationalInstanceSetImplementationState
+                        }
+                        relationalPropertyMappingState={
+                          propertyMappingState as RelationalPropertyMappingState
+                        }
+                        setImplementationHasParserError={
+                          setImplementationHasParserError
+                        }
+                      />
+                      {propertyMappingStates.length > 1 &&
+                        propertyBasicType !== CLASS_PROPERTY_TYPE.CLASS && (
+                          <button
+                            className="property-mapping-editor__entries__entry__remove-btn"
+                            key={propertyMappingState.uuid}
+                            onClick={() =>
+                              removePropertyMapping(
+                                propertyMappingState.propertyMapping,
+                              )
+                            }
+                            tabIndex={-1}
+                            title="Remove"
+                            disabled={propertyMappingState.lambdaString === ''}
+                          >
+                            <TimesIcon />
+                          </button>
+                        )}
+                    </div>
+                  );
+                }
+                default: {
+                  const extraPropertyMappingEditorRenderers =
+                    editorStore.pluginManager
+                      .getApplicationPlugins()
+                      .flatMap(
+                        (plugin) =>
+                          (
+                            plugin as DSL_Mapping_LegendStudioApplicationPlugin_Extension
+                          ).getExtraPropertyMappingEditorRenderers?.() ?? [],
+                      );
+                  for (const renderer of extraPropertyMappingEditorRenderers) {
+                    const renderedPropertyMappingEditor = renderer(
                       instanceSetImplementationState,
-                      PureInstanceSetImplementationState,
-                    )}
-                    purePropertyMappingState={guaranteeType(
                       propertyMappingState,
-                      PurePropertyMappingState,
-                    )}
-                    setImplementationHasParserError={
-                      setImplementationHasParserError
-                    }
-                  />
-                );
-              }
-              case SET_IMPLEMENTATION_TYPE.FLAT_DATA:
-              case SET_IMPLEMENTATION_TYPE.EMBEDDED_FLAT_DATA: {
-                return (
-                  <FlatDataPropertyMappingEditor
-                    key={propertyMappingState.uuid}
-                    isReadOnly={isReadOnly}
-                    flatDataInstanceSetImplementationState={
-                      instanceSetImplementationState as FlatDataInstanceSetImplementationState
-                    }
-                    flatDataPropertyMappingState={
-                      propertyMappingState as FlatDataPropertyMappingState
-                    }
-                    setImplementationHasParserError={
-                      setImplementationHasParserError
-                    }
-                  />
-                );
-              }
-              case SET_IMPLEMENTATION_TYPE.RELATIONAL: {
-                return (
-                  <RelationalPropertyMappingEditor
-                    key={propertyMappingState.uuid}
-                    isReadOnly={isReadOnly}
-                    relationalInstanceSetImplementationState={
-                      instanceSetImplementationState as RootRelationalInstanceSetImplementationState
-                    }
-                    relationalPropertyMappingState={
-                      propertyMappingState as RelationalPropertyMappingState
-                    }
-                    setImplementationHasParserError={
-                      setImplementationHasParserError
-                    }
-                  />
-                );
-              }
-              default: {
-                const extraPropertyMappingEditorRenderers =
-                  editorStore.pluginManager
-                    .getApplicationPlugins()
-                    .flatMap(
-                      (plugin) =>
-                        (
-                          plugin as DSLMapping_LegendStudioApplicationPlugin_Extension
-                        ).getExtraPropertyMappingEditorRenderers?.() ?? [],
                     );
-                for (const renderer of extraPropertyMappingEditorRenderers) {
-                  const renderedPropertyMappingEditor = renderer(
-                    instanceSetImplementationState,
-                    propertyMappingState,
-                  );
-                  if (renderedPropertyMappingEditor) {
-                    return renderedPropertyMappingEditor;
+                    if (renderedPropertyMappingEditor) {
+                      return renderedPropertyMappingEditor;
+                    }
                   }
+                  throw new UnsupportedOperationError(
+                    `Can't render property mapping editor: no compatible renderer available from plugins`,
+                  );
                 }
-                throw new UnsupportedOperationError(
-                  `Can't render property mapping editor: no compatible renderer available from plugins`,
-                );
               }
-            }
-          })}
-          {propertyBasicType === CLASS_PROPERTY_TYPE.CLASS &&
-            !propertyMappingStates.length && (
-              <>
-                {isEmbedded && (
-                  <div className="property-mapping-editor__entry--empty">
-                    Click
-                    <button
-                      className="property-mapping-editor__entry--empty__visit-btn"
-                      onClick={visitOrCreateMappingElement}
-                      tabIndex={-1}
-                      title={'Create mapping element'}
-                    >
-                      <ArrowCircleRightIcon />
-                    </button>
-                    {`to create an embedded class mapping for property '${property.name}'.`}
-                  </div>
-                )}
-                {!isEmbedded && (
-                  <div className="property-mapping-editor__entry--empty">
-                    No set implementation found. Click
-                    <button
-                      className="property-mapping-editor__entry--empty__visit-btn"
-                      onClick={visitOrCreateMappingElement}
-                      tabIndex={-1}
-                      title={'Create mapping element'}
-                    >
-                      <ArrowCircleRightIcon />
-                    </button>
-                    {`to create a root class mapping for '${propertyRawType.name}'.`}
-                  </div>
-                )}
-              </>
-            )}
+            })}
+            {propertyBasicType === CLASS_PROPERTY_TYPE.CLASS &&
+              !propertyMappingStates.length && (
+                <>
+                  {isEmbedded && (
+                    <div className="property-mapping-editor__entry--empty">
+                      Click
+                      <button
+                        className="property-mapping-editor__entry--empty__visit-btn"
+                        onClick={visitOrCreateMappingElement}
+                        tabIndex={-1}
+                        title={'Create mapping element'}
+                      >
+                        <ArrowCircleRightIcon />
+                      </button>
+                      {`to create an embedded class mapping for property '${property.name}'.`}
+                    </div>
+                  )}
+                  {!isEmbedded && (
+                    <div className="property-mapping-editor__entry--empty">
+                      No set implementation found. Click
+                      <button
+                        className="property-mapping-editor__entry--empty__visit-btn"
+                        onClick={visitOrCreateMappingElement}
+                        tabIndex={-1}
+                        title={'Create mapping element'}
+                      >
+                        <ArrowCircleRightIcon />
+                      </button>
+                      {`to create a root class mapping for '${propertyRawType.name}'.`}
+                    </div>
+                  )}
+                </>
+              )}
+          </div>
         </div>
       </div>
     );

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

@@ -45,7 +45,7 @@ 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,

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

@@ -46,7 +46,7 @@ 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,

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 {
@@ -604,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">
@@ -689,7 +690,7 @@ export const ProjectConfigurationEditor = observer(() => {
               />
             )}
         </div>
-      </div>
+      </Panel>
     </div>
   );
 });

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';