@finos/legend-application-studio 25.0.6 → 26.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-application-studio",
-  "version": "25.0.6",
+  "version": "26.0.0",
   "description": "Legend Studio application core",
   "keywords": [
     "legend",
@@ -45,15 +45,15 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "15.0.12",
-    "@finos/legend-art": "7.0.13",
-    "@finos/legend-graph": "28.1.7",
-    "@finos/legend-lego": "1.0.5",
-    "@finos/legend-query-builder": "3.2.7",
-    "@finos/legend-server-depot": "6.0.6",
-    "@finos/legend-server-sdlc": "5.0.6",
-    "@finos/legend-shared": "10.0.5",
-    "@finos/legend-storage": "3.0.55",
+    "@finos/legend-application": "15.0.14",
+    "@finos/legend-art": "7.0.15",
+    "@finos/legend-graph": "29.0.0",
+    "@finos/legend-lego": "1.0.7",
+    "@finos/legend-query-builder": "3.2.9",
+    "@finos/legend-server-depot": "6.0.7",
+    "@finos/legend-server-sdlc": "5.0.8",
+    "@finos/legend-shared": "10.0.6",
+    "@finos/legend-storage": "3.0.56",
     "@testing-library/react": "14.0.0",
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",
@@ -70,7 +70,7 @@
     "yaml": "2.2.2"
   },
   "devDependencies": {
-    "@finos/legend-dev-utils": "2.0.60",
+    "@finos/legend-dev-utils": "2.0.61",
     "@jest/globals": "29.5.0",
     "cross-env": "7.0.3",
     "eslint": "8.40.0",

package/src/application/LegendStudio.tsx

@@ -36,6 +36,7 @@ import {
   QueryBuilder_LegendApplicationPlugin,
 } from '@finos/legend-query-builder';
 import type { LegendStudioApplicationStore } from '../stores/LegendStudioBaseStore.js';
+import { DSL_ExternalFormat_LegendStudioApplicationPlugin } from '../components/extensions/DSL_ExternalFormat_LegendStudioApplicationPlugin.js';
 
 export class LegendStudio extends LegendApplication {
   declare config: LegendStudioApplicationConfig;
@@ -51,6 +52,7 @@ export class LegendStudio extends LegendApplication {
       new Core_LegendApplicationPlugin(),
       new Core_LegendStudioApplicationPlugin(),
       new QueryBuilder_LegendApplicationPlugin(),
+      new DSL_ExternalFormat_LegendStudioApplicationPlugin(),
     ]);
     return application;
   }

package/src/components/editor/editor-group/GenerationSpecificationEditor.tsx

@@ -44,6 +44,9 @@ import {
   Panel,
   PanelContent,
   PanelDnDEntry,
+  PanelHeader,
+  PanelHeaderActions,
+  PanelHeaderActionItem,
 } from '@finos/legend-art';
 import {
   CORE_DND_TYPE,
@@ -455,23 +458,21 @@ const FileGenerationSpecifications = observer(
       [handleDrop],
     );
     return (
-      <div className="panel generation-spec-file-generation-editor">
-        <div className="panel__header">
+      <Panel className="generation-spec-file-generation-editor">
+        <PanelHeader>
           <div className="panel__header__title">
             <div className="panel__header__title__label">File Generations</div>
           </div>
-          <div className="panel__header__actions">
-            <button
-              className="panel__header__action"
+          <PanelHeaderActions>
+            <PanelHeaderActionItem
               onClick={addFileGeneration}
               disabled={!fileGenerationsOptions.length}
-              tabIndex={-1}
               title="Add File Generation"
             >
               <PlusIcon />
-            </button>
-          </div>
-        </div>
+            </PanelHeaderActionItem>
+          </PanelHeaderActions>
+        </PanelHeader>
         <PanelContent>
           <PanelDropZone
             isDragOver={isDragOver}
@@ -499,7 +500,7 @@ const FileGenerationSpecifications = observer(
             )}
           </PanelDropZone>
         </PanelContent>
-      </div>
+      </Panel>
     );
   },
 );
@@ -523,7 +524,7 @@ export const GenerationSpecificationEditor = observer(() => {
   return (
     <div className="generation-spec-editor">
       <Panel>
-        <div className="panel__header">
+        <PanelHeader>
           <div className="panel__header__title">
             <div className="panel__header__title__label">
               Generation Specification
@@ -532,8 +533,8 @@ export const GenerationSpecificationEditor = observer(() => {
               {generationSpec.name}
             </div>
           </div>
-          <div className="panel__header__actions">
-            <button
+          <PanelHeaderActions>
+            <PanelHeaderActionItem
               className={clsx(
                 'editor__status-bar__action editor__status-bar__generate-btn',
                 {
@@ -541,13 +542,12 @@ export const GenerationSpecificationEditor = observer(() => {
                     modelGenerationState.isRunningGlobalGenerate,
                 },
               )}
-              tabIndex={-1}
               onClick={generate}
               title="Generate"
             >
               <FireIcon />
-            </button>
-            <button
+            </PanelHeaderActionItem>
+            <PanelHeaderActionItem
               className={clsx(
                 'editor__status-bar__action editor__status-bar__generate-btn',
                 {
@@ -557,14 +557,13 @@ export const GenerationSpecificationEditor = observer(() => {
                 },
               )}
               onClick={emptyGenerationEntities}
-              tabIndex={-1}
               title="Clear generation entities"
             >
               <RefreshIcon />
-            </button>
-          </div>
-        </div>
-        <div className="panel__content generation-spec-editor__content">
+            </PanelHeaderActionItem>
+          </PanelHeaderActions>
+        </PanelHeader>
+        <PanelContent className="generation-spec-editor__content">
           <ResizablePanelGroup orientation="horizontal">
             <ResizablePanel size={400} minSize={25}>
               <ModelGenerationSpecifications
@@ -582,7 +581,7 @@ export const GenerationSpecificationEditor = observer(() => {
               />
             </ResizablePanel>
           </ResizablePanelGroup>
-        </div>
+        </PanelContent>
       </Panel>
     </div>
   );

package/src/components/editor/editor-group/GrammarTextEditor.tsx

@@ -62,11 +62,7 @@ import { useDrop } from 'react-dnd';
 import type { DSL_LegendStudioApplicationPlugin_Extension } from '../../../stores/LegendStudioApplicationPlugin.js';
 import { flowResult } from 'mobx';
 import { useEditorStore } from '../EditorStoreProvider.js';
-import {
-  guaranteeNonNullable,
-  hasWhiteSpace,
-  isNonNullable,
-} from '@finos/legend-shared';
+import { hasWhiteSpace, isNonNullable } from '@finos/legend-shared';
 import {
   PARSER_SECTION_MARKER,
   PURE_CONNECTION_NAME,
@@ -689,8 +685,6 @@ export const GrammarTextEditor = observer(() => {
   const grammarTextEditorState = editorStore.getGraphEditorMode(
     GraphEditGrammarModeState,
   ).grammarTextEditorState;
-  const currentElementLabelRegexString =
-    grammarTextEditorState.currentElementLabelRegexString;
   const error = editorStore.graphState.error;
 
   const forcedCursorPosition = grammarTextEditorState.forcedCursorPosition;
@@ -983,40 +977,6 @@ export const GrammarTextEditor = observer(() => {
     }
   }, [editor, forcedCursorPosition]);
 
-  /**
-   * This effect helps to navigate to the currently selected element in the explorer tree
-   * NOTE: this effect is placed after the effect to highlight and move cursor to error,
-   * as even when there are errors, the user should be able to click on the explorer tree
-   * to navigate to the element
-   */
-  useEffect(() => {
-    if (editor && currentElementLabelRegexString) {
-      const editorModel = editor.getModel();
-      if (editorModel) {
-        const match = editorModel.findMatches(
-          currentElementLabelRegexString,
-          true,
-          true,
-          true,
-          null,
-          true,
-        );
-        if (Array.isArray(match) && match.length) {
-          const range = guaranteeNonNullable(match[0]).range;
-          editor.focus();
-          editor.revealPositionInCenter({
-            lineNumber: range.startLineNumber,
-            column: range.startColumn,
-          });
-          editor.setPosition({
-            column: range.startColumn,
-            lineNumber: range.startLineNumber,
-          });
-        }
-      }
-    }
-  }, [editor, currentElementLabelRegexString]);
-
   // NOTE: dispose the editor to prevent potential memory-leak
   useEffect(
     () => (): void => {

package/src/components/editor/editor-group/ModelImporter.tsx

@@ -35,6 +35,7 @@ import {
   BlankPanelContent,
   PanelLoadingIndicator,
   clsx,
+  Button,
 } from '@finos/legend-art';
 import { flowResult } from 'mobx';
 import { useEditorStore } from '../EditorStoreProvider.js';
@@ -167,14 +168,18 @@ export const ModelImporter = observer(() => {
         () => flowResult(modelImportEditorState.loadCurrentProjectEntities()),
       );
       return (
-        <button
+        <div
           className="model-loader__header__configs__load-project-entities-btn"
-          tabIndex={-1}
           onClick={loadCurrentProjectEntities}
           title="Load current project entities"
         >
-          <TruckLoadingIcon />
-        </button>
+          <div className="model-loader__header__configs__edit-mode__icon">
+            <TruckLoadingIcon />
+          </div>
+          <div className="model-loader__header__configs__edit-mode__label">
+            current entities
+          </div>
+        </div>
       );
     }
     return null;
@@ -323,18 +328,16 @@ export const ModelImporter = observer(() => {
           {renderExtraActions()}
         </div>
         <div className="model-loader__header__action">
-          <button
-            className="btn--dark model-loader__header__load-btn"
+          <Button
+            className="model-loader__header__load-btn"
             onClick={loadModel}
             disabled={
               modelImportEditorState.loadModelActionState.isInProgress ||
               modelImportEditorState.isLoadingDisabled
             }
-            tabIndex={-1}
             title="Load model"
-          >
-            Load
-          </button>
+            text="Load"
+          />
         </div>
       </div>
 

package/src/components/editor/editor-group/RuntimeEditor.tsx

@@ -72,11 +72,7 @@ import {
   ElementDragSource,
 } from '../../../stores/editor/utils/DnDUtils.js';
 import { useDrop } from 'react-dnd';
-import {
-  assertErrorThrown,
-  guaranteeType,
-  UnsupportedOperationError,
-} from '@finos/legend-shared';
+import { assertErrorThrown, guaranteeType } from '@finos/legend-shared';
 import type { ConnectionEditorState } from '../../../stores/editor/editor-state/element-editor-state/connection/ConnectionEditorState.js';
 import { useEditorStore } from '../EditorStoreProvider.js';
 import {
@@ -147,10 +143,7 @@ const getConnectionTooltipText = (
       return tooltipText;
     }
   }
-  throw new UnsupportedOperationError(
-    `Can't build tooltip text for connection: no compatible builder available from plugins`,
-    connection,
-  );
+  return `Unknown connection`;
 };
 
 const IdentifiedConnectionsPerStoreExplorerContextMenu = observer(

package/src/components/editor/editor-group/UnsupportedElementEditor.tsx

@@ -15,7 +15,14 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { BlankPanelContent, LockIcon, Panel } from '@finos/legend-art';
+import {
+  BlankPanelContent,
+  Button,
+  LockIcon,
+  Panel,
+  PanelContent,
+  PanelHeader,
+} from '@finos/legend-art';
 import { UnsupportedElementEditorState } from '../../../stores/editor/editor-state/UnsupportedElementEditorState.js';
 import { flowResult } from 'mobx';
 import { useEditorStore } from '../EditorStoreProvider.js';
@@ -35,12 +42,11 @@ export const UnsupportedEditorPanel = observer(
         <div className="unsupported-element-editor__main">
           <div className="unsupported-element-editor__summary">{text}</div>
           {!isReadOnly && (
-            <button
-              className="btn--dark unsupported-element-editor__to-text-mode__btn"
+            <Button
+              className="unsupported-element-editor__to-text-mode__btn"
               onClick={handleTextModeClick}
-            >
-              Edit in text mode
-            </button>
+              text="Edit in text mode"
+            />
           )}
         </div>
       </BlankPanelContent>
@@ -61,7 +67,7 @@ export const UnsupportedElementEditor = observer(() => {
   return (
     <div className="unsupported-element-editor">
       <Panel>
-        <div className="panel__header">
+        <PanelHeader>
           <div className="panel__header__title">
             {isReadOnly && (
               <div className="uml-element-editor__header__lock">
@@ -71,13 +77,13 @@ export const UnsupportedElementEditor = observer(() => {
             <div className="panel__header__title__label">element</div>
             <div className="panel__header__title__content">{element.name}</div>
           </div>
-        </div>
-        <div className="panel__content unsupported-element-editor__content">
+        </PanelHeader>
+        <PanelContent className="unsupported-element-editor__content">
           <UnsupportedEditorPanel
             text="Can't display this element in form-mode"
             isReadOnly={isReadOnly}
           />
-        </div>
+        </PanelContent>
       </Panel>
     </div>
   );

package/src/components/editor/editor-group/connection-editor/DatabaseBuilder.tsx

@@ -48,16 +48,14 @@ import {
   useApplicationStore,
   useConditionedApplicationNavigationContext,
 } from '@finos/legend-application';
-import {
-  generateColumnTypeLabel,
-  renderColumnTypeIcon,
-} from './DatabaseEditorHelper.js';
+import { renderColumnTypeIcon } from './DatabaseEditorHelper.js';
 import { flowResult } from 'mobx';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
 import {
   CODE_EDITOR_LANGUAGE,
   CodeEditor,
 } from '@finos/legend-lego/code-editor';
+import { stringifyDataType } from '@finos/legend-graph';
 
 const getNodeIcon = (node: DatabaseBuilderTreeNodeData): React.ReactNode => {
   if (node instanceof SchemaDatabaseBuilderTreeNodeData) {
@@ -151,7 +149,7 @@ const DatabaseBuilderTreeNodeContainer: React.FC<
         {node instanceof ColumnDatabaseBuilderTreeNodeData && (
           <div className="database-builder-tree__node__type">
             <div className="database-builder-tree__node__type__label">
-              {generateColumnTypeLabel(node.column.type)}
+              {stringifyDataType(node.column.type)}
             </div>
           </div>
         )}
@@ -232,6 +230,9 @@ export const DatabaseBuilder = observer(
     );
     const closeModal = (): void => {
       databaseBuilderState.setShowModal(false);
+      databaseBuilderState.editorStore.explorerTreeState.setDatabaseBuilderState(
+        undefined,
+      );
     };
     const isExecutingAction =
       databaseBuilderState.isBuildingDatabase ||

package/src/components/editor/editor-group/connection-editor/DatabaseEditorHelper.tsx

@@ -47,49 +47,6 @@ import {
   Json,
 } from '@finos/legend-graph';
 
-export const generateColumnTypeLabel = (type: RelationalDataType): string => {
-  if (type instanceof VarChar) {
-    return `VARCHAR(${type.size})`;
-  } else if (type instanceof Char) {
-    return `CHAR(${type.size})`;
-  } else if (type instanceof VarBinary) {
-    return `VARBINARY(${type.size})`;
-  } else if (type instanceof Binary) {
-    return `BINARY(${type.size})`;
-  } else if (type instanceof Bit) {
-    return `BIT`;
-  } else if (type instanceof Numeric) {
-    return `NUMERIC(${type.precision},${type.scale})`;
-  } else if (type instanceof Decimal) {
-    return `DECIMAL(${type.precision},${type.scale})`;
-  } else if (type instanceof Double) {
-    return `DOUBLE`;
-  } else if (type instanceof Float) {
-    return `FLOAT`;
-  } else if (type instanceof Real) {
-    return `REAL`;
-  } else if (type instanceof Integer) {
-    return `INT`;
-  } else if (type instanceof BigInt) {
-    return `BIGINT`;
-  } else if (type instanceof SmallInt) {
-    return `SMALLINT`;
-  } else if (type instanceof TinyInt) {
-    return `TINYINT`;
-  } else if (type instanceof Date) {
-    return `DATE`;
-  } else if (type instanceof Timestamp) {
-    return `TIMESTAMP`;
-  } else if (type instanceof Other) {
-    return `OTHER`;
-  } else if (type instanceof SemiStructured) {
-    return 'SEMI-STRUCTURED';
-  } else if (type instanceof Json) {
-    return 'JSON';
-  }
-  return '(UNKNOWN)';
-};
-
 export const renderColumnTypeIcon = (
   type: RelationalDataType,
 ): React.ReactNode => {

package/src/components/editor/editor-group/connection-editor/RelationalDatabaseConnectionEditor.tsx

@@ -84,7 +84,6 @@ import {
 } from '@finos/legend-graph';
 import type { LegendStudioApplicationPlugin } from '../../../../stores/LegendStudioApplicationPlugin.js';
 import type { STO_Relational_LegendStudioApplicationPlugin_Extension } from '../../../../stores/extensions/STO_Relational_LegendStudioApplicationPlugin_Extension.js';
-import { DatabaseBuilder } from './DatabaseBuilder.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
   CODE_EDITOR_LANGUAGE,
@@ -1064,7 +1063,6 @@ const RelationalConnectionStoreEditor = observer(
   }) => {
     const { connectionValueState, isReadOnly } = props;
     const connection = connectionValueState.connection;
-    const databaseBuilderState = connectionValueState.databaseBuilderState;
     // store
     const isStoreEmpty = connectionValueState.storeValidationResult;
     const noStoreLabel = (
@@ -1098,7 +1096,10 @@ const RelationalConnectionStoreEditor = observer(
       }
     };
     const openDatabaseBuilder = (): void =>
-      databaseBuilderState.setShowModal(true);
+      connectionValueState.editorStore.explorerTreeState.buildDbBuilderState(
+        connection,
+        isReadOnly,
+      );
 
     return (
       <div className="relational-connection-editor">
@@ -1124,10 +1125,6 @@ const RelationalConnectionStoreEditor = observer(
             </button>
           </PanelFormSection>
         </PanelContent>
-        <DatabaseBuilder
-          databaseBuilderState={databaseBuilderState}
-          isReadOnly={isReadOnly}
-        />
       </div>
     );
   },
@@ -1166,7 +1163,7 @@ const renderEditorPostProcessor = (
       <UnsupportedEditorPanel
         isReadOnly={true}
         text="Can't display post-processor in form mode"
-      ></UnsupportedEditorPanel>
+      />
     );
   }
 };
@@ -1575,7 +1572,7 @@ const RelationalConnectionGeneralEditor = observer(
       label: connection.type,
     };
     const onTypeChange = (
-      val: { label: string; value: DatabaseType } | null,
+      val: { label: string; value: string } | null,
     ): void => {
       dBConnection_setType(connection, val?.value ?? DatabaseType.H2);
     };
@@ -1597,15 +1594,16 @@ const RelationalConnectionGeneralEditor = observer(
         label: type,
       }));
     const selectedSourceSpec = {
-      value: connectionValueState.selectedDatasourceSpec,
-      label: connectionValueState.selectedDatasourceSpec,
+      label:
+        connectionValueState.selectedDatasourceSpecificationType ?? 'Unknown',
+      value: connectionValueState.selectedDatasourceSpecificationType,
     };
     const onSourceSpecChange = (
-      val: { label: string; value: string } | null,
+      val: { label: string; value: string | undefined } | null,
     ): void => {
-      connectionValueState.changeDatasourceSpec(
-        val?.value ?? CORE_DATASOURCE_SPEC_TYPE.STATIC,
-      );
+      if (val?.value) {
+        connectionValueState.changeDatasourceSpec(val.value);
+      }
     };
 
     // auth type
@@ -1625,15 +1623,16 @@ const RelationalConnectionGeneralEditor = observer(
         label: type,
       }));
     const selectedAuth = {
-      value: connectionValueState.selectedAuth,
-      label: connectionValueState.selectedAuth,
+      label:
+        connectionValueState.selectedAuthenticationStrategyType ?? 'Unknown',
+      value: connectionValueState.selectedAuthenticationStrategyType,
     };
     const onAuthStrategyChange = (
-      val: { label: string; value: string } | null,
+      val: { label: string; value: string | undefined } | null,
     ): void => {
-      connectionValueState.changeAuthenticationStrategy(
-        val?.value ?? CORE_AUTHENTICATION_STRATEGY_TYPE.OAUTH,
-      );
+      if (val?.value) {
+        connectionValueState.changeAuthenticationStrategy(val.value);
+      }
     };
 
     return (
@@ -1672,7 +1671,7 @@ const RelationalConnectionGeneralEditor = observer(
               <ResizablePanelGroup orientation="vertical">
                 <ResizablePanel size={450} minSize={50}>
                   <div className="relational-connection-editor__auth">
-                    <PanelHeader title="datasource spec"></PanelHeader>
+                    <PanelHeader title="datasource specification"></PanelHeader>
                     <PanelContent className="relational-connection-editor__auth__content">
                       <PanelFormSection>
                         <div className="panel__content__form__section__header__label">
@@ -1699,7 +1698,7 @@ const RelationalConnectionGeneralEditor = observer(
                 <ResizablePanelSplitter />
                 <ResizablePanel>
                   <div className="relational-connection-editor__source">
-                    <PanelHeader title="authentication spec"></PanelHeader>
+                    <PanelHeader title="authentication strategy"></PanelHeader>
                     <PanelContent className="relational-connection-editor__source__content">
                       <PanelFormSection>
                         <div className="panel__content__form__section__header__label">