@finos/legend-application-studio 17.0.0 → 18.0.0

package/src/components/editor/edit-panel/GrammarTextEditor.tsx

@@ -36,6 +36,7 @@ import {
   normalizeLineEnding,
   MoreHorizontalIcon,
   HackerIcon,
+  PanelContent,
 } from '@finos/legend-art';
 import {
   TAB_SIZE,
@@ -101,9 +102,9 @@ import {
   POST_PROCESSOR_RELATIONAL_DATABASE_CONNECTION_SNIPPET,
   createConnectionSnippetWithPostProcessorSuggestionSnippet,
 } from '../../../stores/LegendStudioCodeSnippets.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 { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../stores/LegendStudioApplicationNavigationContext.js';
-import type { StoreRelational_LegendStudioApplicationPlugin_Extension } from '../../../stores/StoreRelational_LegendStudioApplicationPlugin_Extension.js';
+import type { STO_Relational_LegendStudioApplicationPlugin_Extension } from '../../../stores/STO_Relational_LegendStudioApplicationPlugin_Extension.js';
 
 const getSectionParserNameFromLineText = (
   lineText: string,
@@ -531,7 +532,7 @@ const getParserElementSnippetSuggestions = (
         .flatMap(
           (plugin) =>
             (
-              plugin as StoreRelational_LegendStudioApplicationPlugin_Extension
+              plugin as STO_Relational_LegendStudioApplicationPlugin_Extension
             ).getExtraPostProcessorSnippetSuggestions?.() ?? [],
         );
       return [
@@ -625,7 +626,7 @@ const getParserElementSnippetSuggestions = (
         .flatMap(
           (plugin) =>
             (
-              plugin as DSLData_LegendStudioApplicationPlugin_Extension
+              plugin as DSL_Data_LegendStudioApplicationPlugin_Extension
             ).getExtraEmbeddedDataSnippetSuggestions?.() ?? [],
         );
       return [
@@ -1255,11 +1256,11 @@ export const GrammarTextEditor = observer(() => {
           </button>
         </div>
       </ContextMenu>
-      <div className="panel__content edit-panel__content">
+      <PanelContent className="edit-panel__content">
         <div ref={ref} className="text-editor__container">
           <div className="text-editor__body" ref={textEditorRef} />
         </div>
-      </div>
+      </PanelContent>
     </div>
   );
 });

package/src/components/editor/edit-panel/ModelImporter.tsx

@@ -48,9 +48,9 @@ import {
 import { StudioTextInputEditor } from '../../shared/StudioTextInputEditor.js';
 import type { ModelImporterExtensionConfiguration } from '../../../stores/LegendStudioApplicationPlugin.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../stores/LegendStudioApplicationNavigationContext.js';
-import { SCHEMA_SET_TAB_TYPE } from '../../../stores/editor-state/element-editor-state/external-format/SchemaSetEditorState.js';
-import { SchemaSetModelGenerationEditor } from './external-format-editor/SchemaSetModelGenerationEditor.js';
-import { SchemaSetGeneralEditor } from './external-format-editor/SchemaSetElementEditor.js';
+import { SCHEMA_SET_TAB_TYPE } from '../../../stores/editor-state/element-editor-state/external-format/DSL_ExternalFormat_SchemaSetEditorState.js';
+import { SchemaSetModelGenerationEditor } from './external-format-editor/DSL_ExternalFormat_SchemaSetModelGenerationEditor.js';
+import { SchemaSetGeneralEditor } from './external-format-editor/DSL_ExternalFormat_SchemaSetElementEditor.js';
 
 const ExternalFormatModelImporterEditor = observer(
   (props: { externalFormatState: ExternalFormatModelImporterState }) => {

package/src/components/editor/edit-panel/RuntimeEditor.tsx

@@ -54,6 +54,9 @@ import {
   CogIcon,
   CaretRightIcon,
   PanelDropZone,
+  Panel,
+  PanelContent,
+  PanelHeader,
 } from '@finos/legend-art';
 import { getElementIcon } from '../../shared/ElementIconUtils.js';
 import type { RuntimeExplorerTreeNodeData } from '../../../stores/shared/TreeUtils.js';
@@ -97,11 +100,11 @@ import {
   buildElementOption,
   type PackageableElementOption,
 } from '@finos/legend-application';
-import type { DSLMapping_LegendStudioApplicationPlugin_Extension } from '../../../stores/DSLMapping_LegendStudioApplicationPlugin_Extension.js';
+import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../../../stores/DSL_Mapping_LegendStudioApplicationPlugin_Extension.js';
 import {
   runtime_addIdentifiedConnection,
   runtime_deleteIdentifiedConnection,
-} from '../../../stores/graphModifier/DSLMapping_GraphModifierHelper.js';
+} from '../../../stores/graphModifier/DSL_Mapping_GraphModifierHelper.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../stores/LegendStudioApplicationNavigationContext.js';
 
 const getConnectionTooltipText = (
@@ -128,7 +131,7 @@ const getConnectionTooltipText = (
     .flatMap(
       (plugin) =>
         (
-          plugin as DSLMapping_LegendStudioApplicationPlugin_Extension
+          plugin as DSL_Mapping_LegendStudioApplicationPlugin_Extension
         ).getExtraRuntimeConnectionTooltipTextBuilders?.() ?? [],
     );
   for (const builder of extraConnectionToolTipTexts) {
@@ -585,14 +588,8 @@ const IdentifiedConnectionEditor = observer(
     return (
       <div className="runtime-connection-editor">
         <div className="panel runtime-connection-editor__pointer">
-          <div className="panel__header">
-            <div className="panel__header__title">
-              <div className="panel__header__title__label">
-                runtime connection
-              </div>
-            </div>
-          </div>
-          <div className="panel__content">
+          <PanelHeader title="runtime connection" />
+          <PanelContent>
             <div className="runtime-connection-editor__connection-option">
               <div className="runtime-connection-editor__connection-option__label">
                 <PURE_ConnectionIcon />
@@ -616,7 +613,7 @@ const IdentifiedConnectionEditor = observer(
                 </button>
               )}
             </div>
-          </div>
+          </PanelContent>
         </div>
         <div className="runtime-connection-editor__embedded">
           <ConnectionEditor
@@ -799,7 +796,7 @@ const IdentifiedConnectionsPerStoreEditor = observer(
               />
             )}
             {(!connectionEditorState || !identifiedConnection) && (
-              <div className="panel">
+              <Panel>
                 <div className="panel__header">
                   <div className="panel__header__title">
                     <div className="panel__header__title__label">
@@ -807,10 +804,10 @@ const IdentifiedConnectionsPerStoreEditor = observer(
                     </div>
                   </div>
                 </div>
-                <div className="panel__content">
+                <PanelContent>
                   <BlankPanelContent>No connection selected</BlankPanelContent>
-                </div>
-              </div>
+                </PanelContent>
+              </Panel>
             )}
           </ResizablePanel>
         </ResizablePanelGroup>
@@ -937,7 +934,7 @@ const RuntimeGeneralEditor = observer(
     return (
       <div className="panel runtime-explorer">
         <div className="panel__header"></div>
-        <div className="panel__content">
+        <PanelContent>
           <PanelDropZone
             dropTargetConnector={dropMappingRef}
             isDragOver={isMappingDragOver && !isReadOnly}
@@ -976,7 +973,7 @@ const RuntimeGeneralEditor = observer(
               </div>
             </div>
           </PanelDropZone>
-        </div>
+        </PanelContent>
       </div>
     );
   },

package/src/components/editor/edit-panel/UnsupportedElementEditor.tsx

@@ -15,7 +15,7 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { BlankPanelContent, LockIcon } from '@finos/legend-art';
+import { BlankPanelContent, LockIcon, Panel } from '@finos/legend-art';
 import { UnsupportedElementEditorState } from '../../../stores/editor-state/UnsupportedElementEditorState.js';
 import { flowResult } from 'mobx';
 import { useEditorStore } from '../EditorStoreProvider.js';
@@ -59,7 +59,7 @@ export const UnsupportedElementEditor = observer(() => {
 
   return (
     <div className="unsupported-element-editor">
-      <div className="panel">
+      <Panel>
         <div className="panel__header">
           <div className="panel__header__title">
             {isReadOnly && (
@@ -77,7 +77,7 @@ export const UnsupportedElementEditor = observer(() => {
             isReadOnly={isReadOnly}
           />
         </div>
-      </div>
+      </Panel>
     </div>
   );
 });

package/src/components/editor/edit-panel/connection-editor/ConnectionEditor.tsx

@@ -26,13 +26,13 @@ import {
 } from '../../../../stores/editor-state/element-editor-state/connection/ConnectionEditorState.js';
 import { UnsupportedEditorPanel } from '../../../editor/edit-panel/UnsupportedElementEditor.js';
 import type { Class } from '@finos/legend-graph';
-import { CustomSelectorInput, LockIcon } from '@finos/legend-art';
+import { CustomSelectorInput, LockIcon, PanelContent } from '@finos/legend-art';
 import { useEditorStore } from '../../EditorStoreProvider.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';
 import {
   modelConnection_setClass,
   modelConnection_setUrl,
-} from '../../../../stores/graphModifier/DSLMapping_GraphModifierHelper.js';
+} from '../../../../stores/graphModifier/DSL_Mapping_GraphModifierHelper.js';
 import {
   buildElementOption,
   useApplicationNavigationContext,
@@ -144,7 +144,7 @@ export const ConnectionEditor = observer(
         const extraConnectionEditorRenderers = plugins.flatMap(
           (plugin) =>
             (
-              plugin as DSLMapping_LegendStudioApplicationPlugin_Extension
+              plugin as DSL_Mapping_LegendStudioApplicationPlugin_Extension
             ).getExtraConnectionEditorRenderers?.() ?? [],
         );
         for (const editorRenderer of extraConnectionEditorRenderers) {
@@ -171,7 +171,7 @@ export const ConnectionEditor = observer(
             </div>
           </div>
         </div>
-        <div className="panel__content">{renderConnectionValueEditor()}</div>
+        <PanelContent>{renderConnectionValueEditor()}</PanelContent>
       </div>
     );
   },

package/src/components/editor/edit-panel/connection-editor/DatabaseBuilder.tsx

@@ -33,6 +33,7 @@ import {
   ChevronRightIcon,
   CheckCircleIcon,
   EmptyCircleIcon,
+  PanelContent,
 } from '@finos/legend-art';
 import { useEffect } from 'react';
 import {
@@ -336,13 +337,13 @@ export const DatabaseBuilder = observer(
                       </button>
                     </div>
                   </div>
-                  <div className="panel__content">
+                  <PanelContent>
                     <StudioTextInputEditor
                       language={EDITOR_LANGUAGE.PURE}
                       inputValue={databaseBuilderState.databaseGrammarCode}
                       isReadOnly={true}
                     />
-                  </div>
+                  </PanelContent>
                 </div>
               </ResizablePanel>
             </ResizablePanelGroup>

package/src/components/editor/edit-panel/connection-editor/FlatDataConnectionEditor.tsx

@@ -16,7 +16,7 @@
 
 import { observer } from 'mobx-react-lite';
 import type { FlatDataConnectionValueState } from '../../../../stores/editor-state/element-editor-state/connection/ConnectionEditorState.js';
-import { flatDataConnection_setUrl } from '../../../../stores/graphModifier/StoreFlatData_GraphModifierHelper.js';
+import { flatDataConnection_setUrl } from '../../../../stores/graphModifier/STO_FlatData_GraphModifierHelper.js';
 
 export const FlatDataConnectionEditor = observer(
   (props: {