@finos/legend-application-studio 16.0.2 → 18.0.0

package/src/components/editor/edit-panel/connection-editor/post-processor-editor/MapperPostProcessorEditor.tsx

@@ -20,7 +20,7 @@ import {
   PanelHeaderActionItem,
   PlusIcon,
   ResizablePanelSplitter,
-  PanelTextEditor,
+  PanelFormTextEditor,
   PanelForm,
   ContextMenu,
   MenuContent,
@@ -32,6 +32,8 @@ import {
   Panel,
   PanelHeader,
   PanelContent,
+  PanelListSelectorItemLabel,
+  PanelSection,
 } from '@finos/legend-art';
 import {
   type Mapper,
@@ -48,7 +50,7 @@ import {
   mapper_setTo,
   schemaNameMapper_setFrom,
   schemaNameMapper_setTo,
-} from '../../../../../stores/graphModifier/StoreRelational_GraphModifierHelper.js';
+} from '../../../../../stores/graphModifier/STO_Relational_GraphModifierHelper.js';
 
 export const MapperPostProcessorEditor = observer(
   (props: {
@@ -118,8 +120,6 @@ export const MapperPostProcessorEditor = observer(
         )
         .filter(
           (mapper) =>
-            (mapper as TableNameMapper).schema.from ===
-              (val as TableNameMapper).schema.from &&
             (mapper as TableNameMapper).schema.from ===
               (val as TableNameMapper).schema.from &&
             (mapper as TableNameMapper).from ===
@@ -181,24 +181,28 @@ export const MapperPostProcessorEditor = observer(
                       menuProps={{ elevation: 7 }}
                     >
                       <PanelListSelectorItem
-                        title={
-                          mapper instanceof TableNameMapper
-                            ? 'Table Mapper'
-                            : 'Schema Mapper'
-                        }
-                        validationErrorMessage={
-                          isMapperDuplicated(mapper)
-                            ? 'Mappers have the same values'
-                            : undefined
-                        }
+                        validationError={true}
                         isSelected={
                           mapper === postProcessorState.selectedMapper
                         }
                         onSelect={() => selectMapper(mapper)}
-                      />
+                      >
+                        <PanelListSelectorItemLabel
+                          title={
+                            mapper instanceof TableNameMapper
+                              ? 'Table Mapper'
+                              : 'Schema Mapper'
+                          }
+                          validationErrorMessage={
+                            isMapperDuplicated(mapper)
+                              ? 'Mappers have the same values'
+                              : undefined
+                          }
+                        />
+                      </PanelListSelectorItem>
                     </ContextMenu>
                   ))}
-                </PanelContent>{' '}
+                </PanelContent>
               </Panel>
             </ResizablePanel>
             <ResizablePanelSplitter>
@@ -223,26 +227,28 @@ export const MapperPostProcessorEditor = observer(
                   )}
                   {selectedMapper && (
                     <PanelForm>
-                      <PanelTextEditor
-                        isReadOnly={isReadOnly}
-                        value={selectedMapper.from}
-                        name="From"
-                        update={(value: string | undefined): void =>
-                          mapper_setFrom(selectedMapper, value ?? '')
-                        }
-                      />
-                      <PanelTextEditor
-                        isReadOnly={isReadOnly}
-                        value={selectedMapper.to}
-                        name="To"
-                        update={(value: string | undefined): void =>
-                          mapper_setTo(selectedMapper, value ?? '')
-                        }
-                      />
+                      <PanelSection>
+                        <PanelFormTextEditor
+                          isReadOnly={isReadOnly}
+                          value={selectedMapper.from}
+                          name="From"
+                          update={(value: string | undefined): void =>
+                            mapper_setFrom(selectedMapper, value ?? '')
+                          }
+                        />
+                        <PanelFormTextEditor
+                          isReadOnly={isReadOnly}
+                          value={selectedMapper.to}
+                          name="To"
+                          update={(value: string | undefined): void =>
+                            mapper_setTo(selectedMapper, value ?? '')
+                          }
+                        />
+                      </PanelSection>
 
                       {selectedSchemaNameMapper && (
-                        <>
-                          <PanelTextEditor
+                        <PanelSection>
+                          <PanelFormTextEditor
                             isReadOnly={isReadOnly}
                             value={selectedSchemaNameMapper.from}
                             name="Schema - From"
@@ -253,7 +259,7 @@ export const MapperPostProcessorEditor = observer(
                               );
                             }}
                           />
-                          <PanelTextEditor
+                          <PanelFormTextEditor
                             isReadOnly={isReadOnly}
                             value={selectedSchemaNameMapper.to}
                             name="Schema - To"
@@ -264,7 +270,7 @@ export const MapperPostProcessorEditor = observer(
                               )
                             }
                           />
-                        </>
+                        </PanelSection>
                       )}
                     </PanelForm>
                   )}

package/src/components/editor/edit-panel/data-editor/DataElementEditor.tsx

@@ -53,7 +53,7 @@ import {
   CORE_DND_TYPE,
   type UMLEditorElementDropTarget,
   type ElementDragSource,
-} from '../../../../stores/shared/DnDUtil.js';
+} from '../../../../stores/shared/DnDUtils.js';
 import {
   TaggedValueDragPreviewLayer,
   TaggedValueEditor,
@@ -66,7 +66,7 @@ import {
 import {
   externalFormatData_setContentType,
   externalFormatData_setData,
-} from '../../../../stores/graphModifier/DSLData_GraphModifierHelper.js';
+} from '../../../../stores/graphModifier/DSL_Data_GraphModifierHelper.js';
 import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
 import { getEditorLanguageFromFormat } from '../../../../stores/editor-state/FileGenerationViewerState.js';
 import type { ExternalFormatDataState } from '../../../../stores/editor-state/element-editor-state/data/EmbeddedDataState.js';

package/src/components/editor/edit-panel/data-editor/EmbeddedDataEditor.tsx

@@ -26,6 +26,7 @@ import {
   LongArrowRightIcon,
   MenuContent,
   MenuContentItem,
+  PanelContent,
   PURE_DataIcon,
   WrenchIcon,
 } from '@finos/legend-art';
@@ -34,9 +35,9 @@ import { UnsupportedEditorPanel } from '../UnsupportedElementEditor.js';
 import {
   externalFormatData_setContentType,
   externalFormatData_setData,
-} from '../../../../stores/graphModifier/DSLData_GraphModifierHelper.js';
+} from '../../../../stores/graphModifier/DSL_Data_GraphModifierHelper.js';
 import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
-import type { DSLData_LegendStudioApplicationPlugin_Extension } from '../../../../stores/DSLData_LegendStudioApplicationPlugin_Extension.js';
+import type { DSL_Data_LegendStudioApplicationPlugin_Extension } from '../../../../stores/DSL_Data_LegendStudioApplicationPlugin_Extension.js';
 import { getEditorLanguageFromFormat } from '../../../../stores/editor-state/FileGenerationViewerState.js';
 import {
   type EmbeddedDataState,
@@ -266,7 +267,7 @@ export function renderEmbeddedDataEditor(
         .flatMap(
           (plugin) =>
             (
-              plugin as DSLData_LegendStudioApplicationPlugin_Extension
+              plugin as DSL_Data_LegendStudioApplicationPlugin_Extension
             ).getExtraEmbeddedDataEditorRenderers?.() ?? [],
         );
     for (const editorRenderer of extraEmbeddedDataEditorRenderers) {
@@ -289,12 +290,12 @@ export function renderEmbeddedDataEditor(
             </div>
           </div>
         </div>
-        <div className="panel__content">
+        <PanelContent>
           <UnsupportedEditorPanel
             text="Can't display this embedded data in form-mode"
             isReadOnly={isReadOnly}
           />
-        </div>
+        </PanelContent>
       </div>
     );
   }

package/src/components/editor/edit-panel/diff-editor/EntityChangeConflictEditor.tsx

@@ -161,7 +161,7 @@ const MergeConflictEditor = observer(
       ? normalizeLineEnding(conflictEditorState.mergedText)
       : '';
     const error = conflictEditorState.mergeEditorParserError;
-    const decorations = useRef<string[]>([]);
+    const decorations = useRef<monacoEditorAPI.IEditorDecorationsCollection>();
     const mergeConflictResolutionCodeLensDisposer = useRef<
       IDisposable | undefined
     >(undefined);
@@ -390,8 +390,7 @@ const MergeConflictEditor = observer(
       }
 
       // decoration/highlighting for merge conflicts
-      decorations.current = editor.deltaDecorations(
-        decorations.current,
+      decorations.current = editor.createDecorationsCollection(
         conflictEditorState.mergeConflicts.flatMap((conflict) => {
           const currentChangeContentStartLine = conflict.startHeader + 1;
           const currentChangeContentEndLine =

package/src/components/editor/edit-panel/element-generation-editor/ElementGenerationEditor.tsx

@@ -105,7 +105,7 @@ const NewFileGenerationModal = 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}
@@ -120,9 +120,8 @@ const NewFileGenerationModal = observer(
           </div>
           <div className="search-modal__actions">
             <button
-              className="modal--simple__btn btn btn--dark btn--primary"
+              className="btn btn--dark"
               disabled={isReadOnly || elementAlreadyExists}
-              color="primary"
             >
               Create
             </button>

package/src/components/editor/edit-panel/element-generation-editor/FileGenerationEditor.tsx

@@ -56,12 +56,14 @@ import {
   LockIcon,
   SaveIcon,
   PanelDropZone,
+  Panel,
+  PanelContent,
 } from '@finos/legend-art';
 import {
   type FileGenerationSourceDropTarget,
   type ElementDragSource,
   CORE_DND_TYPE,
-} from '../../../../stores/shared/DnDUtil.js';
+} from '../../../../stores/shared/DnDUtils.js';
 import type { FileGenerationState } from '../../../../stores/editor-state/FileGenerationState.js';
 import type { ElementFileGenerationState } from '../../../../stores/editor-state/element-editor-state/ElementFileGenerationState.js';
 import {
@@ -69,7 +71,7 @@ import {
   GenerationDirectory,
   GenerationFile,
   getFileGenerationChildNodes,
-} from '../../../../stores/shared/FileGenerationTreeUtil.js';
+} from '../../../../stores/shared/FileGenerationTreeUtils.js';
 import { LEGEND_STUDIO_TEST_ID } from '../../../LegendStudioTestID.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
@@ -84,13 +86,13 @@ import {
 } from '@finos/legend-graph';
 import { useApplicationStore } from '@finos/legend-application';
 import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
-import type { DSLGenerationSpecification_LegendStudioApplicationPlugin_Extension } from '../../../../stores/DSLGenerationSpecification_LegendStudioApplicationPlugin_Extension.js';
+import type { DSL_Generation_LegendStudioApplicationPlugin_Extension } from '../../../../stores/DSL_Generation_LegendStudioApplicationPlugin_Extension.js';
 import {
   fileGeneration_addScopeElement,
   fileGeneration_changeScopeElement,
   fileGeneration_deleteScopeElement,
   fileGeneration_setGenerationOutputPath,
-} from '../../../../stores/graphModifier/DSLGeneration_GraphModifierHelper.js';
+} from '../../../../stores/graphModifier/DSL_Generation_GraphModifierHelper.js';
 
 export const FileGenerationTreeNodeContainer: React.FC<
   TreeNodeContainerProps<
@@ -239,7 +241,7 @@ export const GenerationResultViewer = observer(
             .flatMap(
               (plugin) =>
                 (
-                  plugin as DSLGenerationSpecification_LegendStudioApplicationPlugin_Extension
+                  plugin as DSL_Generation_LegendStudioApplicationPlugin_Extension
                 ).getExtraFileGenerationResultViewerActionConfigurations?.() ??
                 [],
             )
@@ -276,7 +278,7 @@ export const GenerationResultViewer = observer(
                   </button>
                 </div>
               </div>
-              <div className="panel__content">
+              <PanelContent>
                 <PanelLoadingIndicator
                   isLoading={fileGenerationState.isGenerating}
                 />
@@ -290,7 +292,7 @@ export const GenerationResultViewer = observer(
                     Generation result not available
                   </BlankPanelContent>
                 )}
-              </div>
+              </PanelContent>
             </div>
           </div>
         </ResizablePanel>
@@ -312,7 +314,7 @@ export const GenerationResultViewer = observer(
                 {extraFileGenerationResultViewerActions}
               </div>
             </div>
-            <div className="panel__content">
+            <PanelContent>
               {fileNode instanceof GenerationFile && (
                 <StudioTextInputEditor
                   inputValue={getTextContent(fileNode.content, fileNode.format)}
@@ -323,7 +325,7 @@ export const GenerationResultViewer = observer(
               {!(fileNode instanceof GenerationFile) && (
                 <BlankPanelContent>No file selected</BlankPanelContent>
               )}
-            </div>
+            </PanelContent>
           </div>
         </ResizablePanel>
       </ResizablePanelGroup>
@@ -1387,7 +1389,7 @@ export const FileGenerationConfigurationEditor = observer(
             )}
           </div>
         </div>
-        <div className="panel__content">
+        <PanelContent>
           <PanelDropZone
             dropTargetConnector={scopeElementDropRef}
             isDragOver={
@@ -1430,7 +1432,7 @@ export const FileGenerationConfigurationEditor = observer(
               ))}
             </div>
           </PanelDropZone>
-        </div>
+        </PanelContent>
       </div>
     );
   },
@@ -1446,7 +1448,7 @@ export const FileGenerationEditor = observer(() => {
 
   return (
     <div className="file-generation-editor">
-      <div className="panel">
+      <Panel>
         <div className="panel__header">
           <div className="panel__header__title">
             {isReadOnly && (
@@ -1483,7 +1485,7 @@ export const FileGenerationEditor = observer(() => {
             </ResizablePanel>
           </ResizablePanelGroup>
         </div>
-      </div>
+      </Panel>
     </div>
   );
 });

package/src/components/editor/edit-panel/external-format-editor/{BindingElementEditor.tsx → DSL_ExternalFormat_BindingElementEditor.tsx}

@@ -35,7 +35,7 @@ import {
 import {
   BINDING_TAB_TYPE,
   BindingEditorState,
-} from '../../../../stores/editor-state/element-editor-state/external-format/BindingEditorState.js';
+} from '../../../../stores/editor-state/element-editor-state/external-format/DSL_ExternalFormat_BindingEditorState.js';
 import {
   PackageableElementExplicitReference,
   SchemaSet,
@@ -50,7 +50,7 @@ import {
   CORE_DND_TYPE,
   type ElementDragSource,
   type UMLEditorElementDropTarget,
-} from '../../../../stores/shared/DnDUtil.js';
+} from '../../../../stores/shared/DnDUtils.js';
 import {
   externalFormat_Binding_setContentType,
   externalFormat_Binding_setSchemaId,
@@ -59,7 +59,7 @@ import {
   externalFormat_modelUnit_addPackageableElementIncludes,
   externalFormat_modelUnit_deletePackageableElementExcludes,
   externalFormat_modelUnit_deletePackageableElementIncludes,
-} from '../../../../stores/graphModifier/DSLExternalFormat_GraphModifierHelper.js';
+} from '../../../../stores/graphModifier/DSL_ExternalFormat_GraphModifierHelper.js';
 
 const BindingScopeEntryEditor = observer(
   (props: {

package/src/components/editor/edit-panel/external-format-editor/{ExternalFormatConnectionEditor.tsx → DSL_ExternalFormat_ExternalFormatConnectionEditor.tsx}

@@ -24,7 +24,7 @@ import { computed, makeObservable } from 'mobx';
 import { ConnectionValueState } from '../../../../stores/editor-state/element-editor-state/connection/ConnectionEditorState.js';
 import type { EditorStore } from '../../../../stores/EditorStore.js';
 import { NewConnectionValueDriver } from '../../../../stores/editor/NewElementState.js';
-import { externalFormat_urlStream_setUrl } from '../../../../stores/graphModifier/DSLExternalFormat_GraphModifierHelper.js';
+import { externalFormat_urlStream_setUrl } from '../../../../stores/graphModifier/DSL_ExternalFormat_GraphModifierHelper.js';
 
 export class ExternalFormatConnectionValueState extends ConnectionValueState {
   override connection: ExternalFormatConnection;

package/src/components/editor/edit-panel/external-format-editor/{NewSchemaSetDriver.tsx → DSL_ExternalFormat_NewSchemaSetDriver.tsx}

@@ -21,7 +21,7 @@ import { makeObservable, observable, action } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import type { EditorStore } from '../../../../stores/EditorStore.js';
-import { externalFormat_schemaSet_setFormat } from '../../../../stores/graphModifier/DSLExternalFormat_GraphModifierHelper.js';
+import { externalFormat_schemaSet_setFormat } from '../../../../stores/graphModifier/DSL_ExternalFormat_GraphModifierHelper.js';
 import { NewElementDriver } from '../../../../stores/editor/NewElementState.js';
 import type { ExternalFormatTypeOption } from '../../../../stores/editor-state/ExternalFormatState.js';
 

package/src/components/editor/edit-panel/external-format-editor/{SchemaSetElementEditor.tsx → DSL_ExternalFormat_SchemaSetElementEditor.tsx}

@@ -31,6 +31,7 @@ import {
   BlankPanelContent,
   MenuContent,
   MenuContentItem,
+  PanelContent,
 } from '@finos/legend-art';
 import { ExternalFormatSchema as Schema } from '@finos/legend-graph';
 import { flowResult } from 'mobx';
@@ -38,7 +39,7 @@ import {
   SchemaSetEditorState,
   type InnerSchemaSetEditorState,
   SCHEMA_SET_TAB_TYPE,
-} from '../../../../stores/editor-state/element-editor-state/external-format/SchemaSetEditorState.js';
+} from '../../../../stores/editor-state/element-editor-state/external-format/DSL_ExternalFormat_SchemaSetEditorState.js';
 import { EDITOR_LANGUAGE } from '@finos/legend-application';
 import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
 import { getEditorLanguageFromFormat } from '../../../../stores/editor-state/FileGenerationViewerState.js';
@@ -50,8 +51,8 @@ import {
   externalFormat_schema_setContent,
   externalFormat_schema_setId,
   externalFormat_schema_setLocation,
-} from '../../../../stores/graphModifier/DSLExternalFormat_GraphModifierHelper.js';
-import { SchemaSetModelGenerationEditor } from './SchemaSetModelGenerationEditor.js';
+} from '../../../../stores/graphModifier/DSL_ExternalFormat_GraphModifierHelper.js';
+import { SchemaSetModelGenerationEditor } from './DSL_ExternalFormat_SchemaSetModelGenerationEditor.js';
 
 const SchemaLoader = observer(
   (props: {
@@ -132,7 +133,6 @@ const SchemaLoader = observer(
           </div>
           <div className="modal__footer">
             <button
-              type="button"
               className="btn btn--dark blocking-alert__action--standard"
               onClick={importSchemas}
               disabled={!importState.files?.length}
@@ -431,7 +431,7 @@ export const SchemaSetEditor = observer(() => {
           </div>
         </div>
       </div>
-      <div className="panel__content">
+      <PanelContent>
         <PanelLoadingIndicator isLoading={isFetchingDescriptions} />
         <div className="panel__header">
           <div className="uml-element-editor__tabs">
@@ -461,7 +461,7 @@ export const SchemaSetEditor = observer(() => {
           {currentTab === SCHEMA_SET_TAB_TYPE.GENERATE_MODEL &&
             renderMainEditPanel()}
         </div>
-      </div>
+      </PanelContent>
     </div>
   );
 });

package/src/components/editor/edit-panel/external-format-editor/{SchemaSetModelGenerationEditor.tsx → DSL_ExternalFormat_SchemaSetModelGenerationEditor.tsx}

@@ -18,11 +18,12 @@ import { type GenerationProperty, isValidFullPath } from '@finos/legend-graph';
 import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { useMemo } from 'react';
-import type { SchemaSetModelGenerationState } from '../../../../stores/editor-state/element-editor-state/external-format/SchemaSetEditorState.js';
+import type { SchemaSetModelGenerationState } from '../../../../stores/editor-state/element-editor-state/external-format/DSL_ExternalFormat_SchemaSetEditorState.js';
 import { debounce } from '@finos/legend-shared';
 import {
   clsx,
   InputWithInlineValidation,
+  PanelContent,
   PanelLoadingIndicator,
   RefreshIcon,
   ResizablePanel,
@@ -113,7 +114,7 @@ export const SchemaSetModelGenerationEditor = observer(
                   </button>
                 </div>
               </div>
-              <div className="panel__content">
+              <PanelContent>
                 <div className="file-generation-editor__configuration__content">
                   <div className="panel__content__form__section">
                     <div className="panel__content__form__section__header__label">
@@ -155,7 +156,7 @@ export const SchemaSetModelGenerationEditor = observer(
                       />
                     ))}
                 </div>
-              </div>
+              </PanelContent>
             </div>
           </ResizablePanel>
           <ResizablePanelSplitter>
@@ -203,7 +204,7 @@ export const SchemaSetModelGenerationEditor = observer(
                   )}
                 </div>
               </div>
-              <div className="panel__content">
+              <PanelContent>
                 <PanelLoadingIndicator
                   isLoading={
                     modelGenerationState.generatingModelsState.isInProgress ||
@@ -216,7 +217,7 @@ export const SchemaSetModelGenerationEditor = observer(
                   isReadOnly={true}
                   language={EDITOR_LANGUAGE.PURE}
                 />
-              </div>
+              </PanelContent>
             </div>
           </ResizablePanel>
         </ResizablePanelGroup>

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

@@ -42,9 +42,9 @@ import {
   operationMapping_setOperation,
   operationMapping_setParameters,
   setImpl_setRoot,
-} from '../../../../stores/graphModifier/DSLMapping_GraphModifierHelper.js';
-import { SET_IMPLEMENTATION_TYPE } from '../../../../stores/shared/ModelUtil.js';
-import type { DSLMapping_LegendStudioApplicationPlugin_Extension } from '../../../../stores/DSLMapping_LegendStudioApplicationPlugin_Extension.js';
+} from '../../../../stores/graphModifier/DSL_Mapping_GraphModifierHelper.js';
+import { SET_IMPLEMENTATION_TYPE } from '../../../../stores/shared/ModelClassifierUtils.js';
+import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../../../../stores/DSL_Mapping_LegendStudioApplicationPlugin_Extension.js';
 
 export const OperatorSelector = observer(
   (props: {
@@ -151,7 +151,7 @@ export const ClassMappingEditor = observer(
           .flatMap(
             (plugin) =>
               (
-                plugin as DSLMapping_LegendStudioApplicationPlugin_Extension
+                plugin as DSL_Mapping_LegendStudioApplicationPlugin_Extension
               ).getExtraMappingSourceTypeInfoGetters?.() ?? [],
           );
         for (const sourceTypeInfoGetter of extraMappingSourceTypeInfoGetters) {

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

@@ -31,6 +31,8 @@ import {
   TimesIcon,
   PlusIcon,
   PanelDropZone,
+  Panel,
+  PanelContent,
 } from '@finos/legend-art';
 import { MappingEditorState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingEditorState.js';
 import { TypeTree } from '../../../shared/TypeTree.js';
@@ -41,7 +43,7 @@ import {
   type MappingElementSourceDropTarget,
   CORE_DND_TYPE,
   TypeDragSource,
-} from '../../../../stores/shared/DnDUtil.js';
+} from '../../../../stores/shared/DnDUtils.js';
 import { LEGEND_STUDIO_TEST_ID } from '../../../LegendStudioTestID.js';
 import { noop } from '@finos/legend-shared';
 import {
@@ -66,9 +68,10 @@ import {
   enumValueMapping_addSourceValue,
   enumValueMapping_deleteSourceValue,
   enumValueMapping_updateSourceValue,
-} from '../../../../stores/graphModifier/DSLMapping_GraphModifierHelper.js';
+} from '../../../../stores/graphModifier/DSL_Mapping_GraphModifierHelper.js';
 import {
   buildElementOption,
+  getPackageableElementOptionFormatter,
   type PackageableElementOption,
 } from '@finos/legend-application';
 
@@ -149,6 +152,7 @@ const EnumerationMappingSourceSelectorModal = observer(
             placeholder={'Choose a data type or an enumeration...'}
             isClearable={true}
             filterOption={filterOption}
+            formatOptionLabel={getPackageableElementOptionFormatter({})}
           />
         </div>
       </Dialog>
@@ -471,7 +475,7 @@ export const EnumerationMappingEditor = observer(
           <div className="mapping-element-editor__content">
             <ResizablePanelGroup orientation="vertical">
               <ResizablePanel minSize={300}>
-                <div className="panel">
+                <Panel>
                   <div className="panel__header">
                     <div className="panel__header__title">
                       <div className="panel__header__title__content">ENUMS</div>
@@ -488,7 +492,7 @@ export const EnumerationMappingEditor = observer(
                       />
                     ))}
                   </div>
-                </div>
+                </Panel>
               </ResizablePanel>
               <ResizablePanelSplitter />
               <ResizablePanel size={300} minSize={300}>
@@ -515,7 +519,7 @@ export const EnumerationMappingEditor = observer(
                       </button>
                     </div>
                   </div>
-                  <div className="panel__content">
+                  <PanelContent>
                     <PanelDropZone
                       dropTargetConnector={dropRef}
                       isDragOver={
@@ -547,7 +551,7 @@ export const EnumerationMappingEditor = observer(
                         closeModal={hideSourceSelectorModal}
                       />
                     </PanelDropZone>
-                  </div>
+                  </PanelContent>
                 </div>
               </ResizablePanel>
             </ResizablePanelGroup>

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

@@ -20,7 +20,7 @@ import {
   type FlatDataPropertyMappingTransformDropTarget,
   CORE_DND_TYPE,
   FlatDataColumnDragSource,
-} from '../../../../stores/shared/DnDUtil.js';
+} from '../../../../stores/shared/DnDUtils.js';
 import {
   type MappingElement,
   MappingEditorState,
@@ -46,11 +46,11 @@ import {
   EnumerationMappingExplicitReference,
 } from '@finos/legend-graph';
 import { StudioLambdaEditor } from '../../../shared/StudioLambdaEditor.js';
-import { flatDataPropertyMapping_setTransformer } from '../../../../stores/graphModifier/StoreFlatData_GraphModifierHelper.js';
+import { flatDataPropertyMapping_setTransformer } from '../../../../stores/graphModifier/STO_FlatData_GraphModifierHelper.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/FlatDataRecordTypeTree.tsx

@@ -26,8 +26,8 @@ import {
 import {
   CORE_DND_TYPE,
   FlatDataColumnDragSource,
-} from '../../../../stores/shared/DnDUtil.js';
-import type { FlatDataRecordTypeTreeNodeData } from '../../../../stores/shared/TreeUtil.js';
+} from '../../../../stores/shared/DnDUtils.js';
+import type { FlatDataRecordTypeTreeNodeData } from '../../../../stores/shared/TreeUtils.js';
 import { addUniqueEntry } from '@finos/legend-shared';
 import {
   DEFAULT_SOURCE_PARAMETER_NAME,