@finos/legend-application-studio 17.0.0 → 18.0.1

package/src/components/EmbeddedQueryBuilder.tsx

@@ -27,8 +27,6 @@ import { flowResult } from 'mobx';
 import { noop } from '@finos/legend-shared';
 import {
   useApplicationNavigationContext,
-  ActionAlertActionType,
-  ActionAlertType,
   useApplicationStore,
 } from '@finos/legend-application';
 import {
@@ -52,44 +50,21 @@ const QueryBuilderDialog = observer(
     const applicationStore = useApplicationStore();
     const [isMaximized, setIsMaximized] = useState(false);
     const toggleMaximize = (): void => setIsMaximized(!isMaximized);
-    const closeQueryBuilder = (): void => {
-      flowResult(
-        embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration(
-          undefined,
-        ),
-      ).catch(applicationStore.alertUnhandledError);
+
+    const confirmCloseQueryBuilder = (): void => {
+      queryBuilderState.changeDetectionState.alertUnsavedChanges((): void => {
+        flowResult(
+          embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration(
+            undefined,
+          ),
+        ).catch(applicationStore.alertUnhandledError);
+      });
     };
 
     useApplicationNavigationContext(
       LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.EMBEDDED_QUERY_BUILDER,
     );
 
-    const confirmCloseQueryBuilder = (): void => {
-      if (queryBuilderState.changeDetectionState.hasChanged) {
-        applicationStore.setActionAlertInfo({
-          message:
-            'Unsaved changes to your query will be lost if you continue. Do you still want to proceed?',
-          type: ActionAlertType.CAUTION,
-          actions: [
-            {
-              label: 'Proceed',
-              type: ActionAlertActionType.PROCEED_WITH_CAUTION,
-              handler: applicationStore.guardUnhandledError(async () =>
-                closeQueryBuilder(),
-              ),
-            },
-            {
-              label: 'Cancel',
-              type: ActionAlertActionType.PROCEED,
-              default: true,
-            },
-          ],
-        });
-      } else {
-        closeQueryBuilder();
-      }
-    };
-
     return (
       <Dialog
         open={Boolean(embeddedQueryBuilderState.queryBuilderState)}

package/src/components/editor/aux-panel/AuxiliaryPanel.tsx

@@ -16,7 +16,13 @@
 
 import { useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
-import { clsx, ChevronUpIcon, ChevronDownIcon, XIcon } from '@finos/legend-art';
+import {
+  clsx,
+  ChevronUpIcon,
+  ChevronDownIcon,
+  XIcon,
+  PanelContent,
+} from '@finos/legend-art';
 import { Console } from './Console.js';
 import { AUX_PANEL_MODE } from '../../../stores/EditorConfig.js';
 import { isNonNullable } from '@finos/legend-shared';
@@ -118,7 +124,7 @@ export const AuxiliaryPanel = observer(() => {
           </button>
         </div>
       </div>
-      <div className="panel__content">
+      <PanelContent>
         {isTabVisible(AUX_PANEL_MODE.CONSOLE) && (
           <div className="auxiliary-panel__content__tab">
             <Console />
@@ -129,7 +135,7 @@ export const AuxiliaryPanel = observer(() => {
             <DevTool />
           </div>
         )}
-      </div>
+      </PanelContent>
     </div>
   );
 });

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

@@ -24,6 +24,8 @@ import {
   LockIcon,
   FireIcon,
   StickArrowCircleRightIcon,
+  Panel,
+  PanelContent,
 } from '@finos/legend-art';
 import type { FileGenerationSpecification } from '@finos/legend-graph';
 import { useEditorStore } from '../EditorStoreProvider.js';
@@ -45,7 +47,7 @@ export const FileGenerationViewer = observer(() => {
 
   return (
     <div className="file-generation-viewer">
-      <div className="panel">
+      <Panel>
         <div className="panel__header">
           <div className="panel__header__title">
             {
@@ -87,7 +89,7 @@ export const FileGenerationViewer = observer(() => {
               )}
             </div>
           </div>
-          <div className="panel__content">
+          <PanelContent>
             {
               <StudioTextInputEditor
                 inputValue={getTextContent(
@@ -98,9 +100,9 @@ export const FileGenerationViewer = observer(() => {
                 language={getEditorLanguageFromFormat(generatedFile.format)}
               />
             }
-          </div>
+          </PanelContent>
         </div>
-      </div>
+      </Panel>
     </div>
   );
 });

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

@@ -42,6 +42,8 @@ import {
   PanelEntryDropZonePlaceholder,
   DragPreviewLayer,
   useDragPreviewLayer,
+  Panel,
+  PanelContent,
 } from '@finos/legend-art';
 import { LEGEND_STUDIO_TEST_ID } from '../../LegendStudioTestID.js';
 import {
@@ -64,7 +66,6 @@ import {
   MULTIPLICITY_INFINITE,
   Unit,
   Type,
-  Multiplicity,
   Enumeration,
   Class,
   PrimitiveType,
@@ -189,7 +190,7 @@ const ParameterBasicEditor = observer(
       if (!isNaN(lBound) && (uBound === undefined || !isNaN(uBound))) {
         rawVariableExpression_setMultiplicity(
           parameter,
-          new Multiplicity(lBound, uBound),
+          editorStore.graphManagerState.graph.getMultiplicity(lBound, uBound),
         );
       }
     };
@@ -443,7 +444,7 @@ const ReturnTypeEditor = observer(
       if (!isNaN(lBound) && (uBound === undefined || !isNaN(uBound))) {
         function_setReturnMultiplicity(
           functionElement,
-          new Multiplicity(lBound, uBound),
+          editorStore.graphManagerState.graph.getMultiplicity(lBound, uBound),
         );
       }
     };
@@ -624,7 +625,6 @@ export const FunctionMainEditor = observer(
       }),
       [handleDropParameter],
     );
-
     return (
       <div className="panel__content function-editor__element">
         <div className="function-editor__element__item">
@@ -817,7 +817,7 @@ export const FunctionEditor = observer(() => {
 
   return (
     <div className="function-editor">
-      <div className="panel">
+      <Panel>
         <div className="panel__header">
           <div className="panel__header__title">
             {isReadOnly && (
@@ -864,7 +864,7 @@ export const FunctionEditor = observer(() => {
             isReadOnly={isReadOnly}
           />
         ) : (
-          <div className="panel__content">
+          <PanelContent>
             {selectedTab === FUNCTION_SPEC_TAB.TAGGED_VALUES && (
               <div
                 ref={dropTaggedValueRef}
@@ -905,9 +905,9 @@ export const FunctionEditor = observer(() => {
                 ))}
               </div>
             )}
-          </div>
+          </PanelContent>
         )}
-      </div>
+      </Panel>
     </div>
   );
 });

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

@@ -42,6 +42,8 @@ import {
   DragPreviewLayer,
   useDragPreviewLayer,
   PanelEntryDropZonePlaceholder,
+  Panel,
+  PanelContent,
 } from '@finos/legend-art';
 import {
   CORE_DND_TYPE,
@@ -49,13 +51,13 @@ import {
   type FileGenerationSourceDropTarget,
 } from '../../../stores/shared/DnDUtils.js';
 import { getNullableFirstElement } from '@finos/legend-shared';
-import type { DSLGeneration_LegendStudioApplicationPlugin_Extension } from '../../../stores/DSLGeneration_LegendStudioApplicationPlugin_Extension.js';
+import type { DSL_Generation_LegendStudioApplicationPlugin_Extension } from '../../../stores/DSL_Generation_LegendStudioApplicationPlugin_Extension.js';
 import { flowResult } from 'mobx';
 import { useEditorStore } from '../EditorStoreProvider.js';
 import {
   type PackageableElement,
   type PackageableElementReference,
-  type DSLGeneration_PureGraphManagerPlugin_Extension,
+  type DSL_Generation_PureGraphManagerPlugin_Extension,
   FileGenerationSpecification,
   PackageableElementExplicitReference,
   GenerationTreeNode,
@@ -70,7 +72,7 @@ import {
   generationSpecification_addFileGeneration,
   generationSpecification_deleteFileGeneration,
   generationSpecification_setId,
-} from '../../../stores/graphModifier/DSLGeneration_GraphModifierHelper.js';
+} from '../../../stores/graphModifier/DSL_Generation_GraphModifierHelper.js';
 
 const GENERATION_SPEC_NODE_DND_TYPE = 'GENERATION_SPEC_NODE';
 
@@ -233,7 +235,7 @@ const ModelGenerationSpecifications = observer(
       .flatMap(
         (plugin) =>
           (
-            plugin as DSLGeneration_PureGraphManagerPlugin_Extension
+            plugin as DSL_Generation_PureGraphManagerPlugin_Extension
           ).getExtraModelGenerationElementGetters?.() ?? [],
       )
       .flatMap((getter) => getter(editorStore.graphManagerState.graph));
@@ -243,7 +245,7 @@ const ModelGenerationSpecifications = observer(
         .flatMap(
           (plugin) =>
             (
-              plugin as DSLGeneration_LegendStudioApplicationPlugin_Extension
+              plugin as DSL_Generation_LegendStudioApplicationPlugin_Extension
             ).getExtraModelGenerationSpecificationElementDnDTypes?.() ?? [],
         );
     const modelGenerationElementOptions =
@@ -289,7 +291,7 @@ const ModelGenerationSpecifications = observer(
       [handleDrop],
     );
     return (
-      <div className="panel">
+      <Panel>
         <div className="panel__header">
           <div className="panel__header__title">
             <div className="panel__header__title__label">Model Generations</div>
@@ -306,7 +308,7 @@ const ModelGenerationSpecifications = observer(
             </button>
           </div>
         </div>
-        <div className="panel__content">
+        <PanelContent>
           <PanelDropZone
             isDragOver={isDragOver}
             dropTargetConnector={dropTargetConnector}
@@ -336,8 +338,8 @@ const ModelGenerationSpecifications = observer(
               </BlankPanelContent>
             )}
           </PanelDropZone>
-        </div>
-      </div>
+        </PanelContent>
+      </Panel>
     );
   },
 );
@@ -470,7 +472,7 @@ const FileGenerationSpecifications = observer(
             </button>
           </div>
         </div>
-        <div className="panel__content">
+        <PanelContent>
           <PanelDropZone
             isDragOver={isDragOver}
             dropTargetConnector={dropTargetConnector}
@@ -496,7 +498,7 @@ const FileGenerationSpecifications = observer(
               </BlankPanelContent>
             )}
           </PanelDropZone>
-        </div>
+        </PanelContent>
       </div>
     );
   },
@@ -519,7 +521,7 @@ export const GenerationSpecificationEditor = observer(() => {
 
   return (
     <div className="generation-spec-editor">
-      <div className="panel">
+      <Panel>
         <div className="panel__header">
           <div className="panel__header__title">
             <div className="panel__header__title__label">
@@ -579,7 +581,7 @@ export const GenerationSpecificationEditor = observer(() => {
             </ResizablePanel>
           </ResizablePanelGroup>
         </div>
-      </div>
+      </Panel>
     </div>
   );
 });

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: {