@finos/legend-application-studio 18.0.2 → 19.0.0

package/src/components/editor/StatusBar.tsx

@@ -31,31 +31,30 @@ import { LEGEND_STUDIO_TEST_ID } from '../LegendStudioTestID.js';
 import { ACTIVITY_MODE } from '../../stores/EditorConfig.js';
 import {
   generateSetupRoute,
-  type EditorPathParams,
-  type GroupEditorPathParams,
+  type WorkspaceEditorPathParams,
 } from '../../stores/LegendStudioRouter.js';
 import { flowResult } from 'mobx';
 import { useEditorStore } from './EditorStoreProvider.js';
 import { WorkspaceType } from '@finos/legend-server-sdlc';
 import { useLegendStudioApplicationStore } from '../LegendStudioBaseStoreProvider.js';
 import { useParams } from '@finos/legend-application';
+import { guaranteeNonNullable } from '@finos/legend-shared';
 
 export const StatusBar = observer((props: { actionsDisabled: boolean }) => {
   const { actionsDisabled } = props;
-  const params = useParams<EditorPathParams | GroupEditorPathParams>();
+  const params = useParams<WorkspaceEditorPathParams>();
   const editorStore = useEditorStore();
   const applicationStore = useLegendStudioApplicationStore();
   const isInConflictResolutionMode = editorStore.isInConflictResolutionMode;
   // SDLC
   const projectId = params.projectId;
-  const workspaceType = (params as { groupWorkspaceId: string | undefined })
-    .groupWorkspaceId
+  const workspaceType = params.groupWorkspaceId
     ? WorkspaceType.GROUP
     : WorkspaceType.USER;
-  const workspaceId =
-    workspaceType === WorkspaceType.GROUP
-      ? (params as GroupEditorPathParams).groupWorkspaceId
-      : (params as EditorPathParams).workspaceId;
+  const workspaceId = guaranteeNonNullable(
+    params.groupWorkspaceId ?? params.workspaceId,
+    `Workspace/group workspace ID is not provided`,
+  );
   const currentProject = editorStore.sdlcState.currentProject;
   const goToWorkspaceUpdater = (): void =>
     editorStore.setActiveActivity(
@@ -155,8 +154,10 @@ export const StatusBar = observer((props: { actionsDisabled: boolean }) => {
             title="Go back to workspace setup using the specified project"
             tabIndex={-1}
             onClick={(): void =>
-              applicationStore.navigator.goToLocation(
-                generateSetupRoute(projectId),
+              applicationStore.navigator.visitAddress(
+                applicationStore.navigator.generateAddress(
+                  generateSetupRoute(projectId),
+                ),
               )
             }
           >
@@ -168,8 +169,10 @@ export const StatusBar = observer((props: { actionsDisabled: boolean }) => {
             title="Go back to workspace setup using the specified workspace"
             tabIndex={-1}
             onClick={(): void =>
-              applicationStore.navigator.goToLocation(
-                generateSetupRoute(projectId, workspaceId, workspaceType),
+              applicationStore.navigator.visitAddress(
+                applicationStore.navigator.generateAddress(
+                  generateSetupRoute(projectId, workspaceId, workspaceType),
+                ),
               )
             }
           >

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

@@ -57,7 +57,7 @@ export const AuxiliaryPanel = observer(() => {
       mode: AUX_PANEL_MODE.DEV_TOOL,
       name: 'DEVELOPER TOOLS',
       icon: undefined,
-      isVisible: editorStore.isDevToolEnabled,
+      isVisible: true,
     },
   };
 

package/src/components/editor/command-center/ProjectSearchCommand.tsx

@@ -98,6 +98,8 @@ export const ProjectSearchCommand = observer(() => {
       <div className="modal search-modal modal--dark">
         <div className="project-search-command">
           <DropdownMenu
+            className="project-search-command__type"
+            title="Choose Element Type..."
             content={
               <div className="project-search-command__options">
                 <div
@@ -118,22 +120,16 @@ export const ProjectSearchCommand = observer(() => {
               </div>
             }
           >
-            <button
-              className="project-search-command__type"
-              tabIndex={-1}
-              title="Choose Element Type..."
-            >
-              <div className="project-search-command__type__label">
-                {elementType ? (
-                  getElementTypeIcon(editorStore, elementType)
-                ) : (
-                  <MoreHorizontalIcon />
-                )}
-              </div>
-              <div className="project-search-command__type__selector">
-                <CaretDownIcon />
-              </div>
-            </button>
+            <div className="project-search-command__type__label">
+              {elementType ? (
+                getElementTypeIcon(editorStore, elementType)
+              ) : (
+                <MoreHorizontalIcon />
+              )}
+            </div>
+            <div className="project-search-command__type__selector">
+              <CaretDownIcon />
+            </div>
           </DropdownMenu>
           <CustomSelectorInput
             ref={selectorRef}

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

@@ -440,7 +440,8 @@ export const EditPanel = observer(() => {
         <div className="edit-panel__header__actions">
           {currentEditorState instanceof ElementEditorState && (
             <DropdownMenu
-              className="edit-panel__view-mode"
+              className="edit-panel__view-mode__type"
+              title="View as..."
               content={
                 <MenuContent
                   data-testid={
@@ -503,23 +504,19 @@ export const EditPanel = observer(() => {
                 transformOrigin: { vertical: 'top', horizontal: 'right' },
               }}
             >
-              <button
-                className="edit-panel__view-mode__type"
-                title="View as..."
-              >
-                <div className="edit-panel__view-mode__type__label">
-                  {currentEditorState.generationViewMode
-                    ? editorStore.graphState.graphGenerationState.getFileGenerationConfiguration(
-                        currentEditorState.generationViewMode,
-                      ).label
-                    : currentEditorState.editMode}
-                </div>
-              </button>
+              <div className="edit-panel__view-mode__type__label">
+                {currentEditorState.generationViewMode
+                  ? editorStore.graphState.graphGenerationState.getFileGenerationConfiguration(
+                      currentEditorState.generationViewMode,
+                    ).label
+                  : currentEditorState.editMode}
+              </div>
             </DropdownMenu>
           )}
           {currentEditorState instanceof EntityDiffViewState && (
             <DropdownMenu
-              className="edit-panel__view-mode"
+              className="edit-panel__view-mode__type"
+              title="View as..."
               content={
                 <MenuContent
                   data-testid={
@@ -550,14 +547,9 @@ export const EditPanel = observer(() => {
                 transformOrigin: { vertical: 'top', horizontal: 'right' },
               }}
             >
-              <button
-                className="edit-panel__view-mode__type"
-                title="View as..."
-              >
-                <div className="edit-panel__view-mode__type__label">
-                  {currentEditorState.diffMode}
-                </div>
-              </button>
+              <div className="edit-panel__view-mode__type__label">
+                {currentEditorState.diffMode}
+              </div>
             </DropdownMenu>
           )}
         </div>

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

@@ -29,7 +29,7 @@ import {
 } from '@finos/legend-art';
 import type { FileGenerationSpecification } from '@finos/legend-graph';
 import { useEditorStore } from '../EditorStoreProvider.js';
-import { StudioTextInputEditor } from '../../shared/StudioTextInputEditor.js';
+import { TextInputEditor } from '@finos/legend-application';
 
 export const FileGenerationViewer = observer(() => {
   const editorStore = useEditorStore();
@@ -90,16 +90,14 @@ export const FileGenerationViewer = observer(() => {
             </div>
           </div>
           <PanelContent>
-            {
-              <StudioTextInputEditor
-                inputValue={getTextContent(
-                  generatedFile.content,
-                  generatedFile.format,
-                )}
-                isReadOnly={true}
-                language={getEditorLanguageFromFormat(generatedFile.format)}
-              />
-            }
+            <TextInputEditor
+              inputValue={getTextContent(
+                generatedFile.content,
+                generatedFile.format,
+              )}
+              isReadOnly={true}
+              language={getEditorLanguageFromFormat(generatedFile.format)}
+            />
           </PanelContent>
         </div>
       </Panel>

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

@@ -82,7 +82,6 @@ import {
   useApplicationStore,
   buildElementOption,
 } from '@finos/legend-application';
-import { StudioLambdaEditor } from '../../shared/StudioLambdaEditor.js';
 import { getElementIcon } from '../../shared/ElementIconUtils.js';
 import {
   function_setReturnType,
@@ -101,6 +100,7 @@ import {
   rawVariableExpression_setType,
 } from '../../../stores/shared/modifier/RawValueSpecificationGraphModifierHelper.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../stores/LegendStudioApplicationNavigationContext.js';
+import { LambdaEditor } from '@finos/legend-query-builder';
 
 enum FUNCTION_PARAMETER_TYPE {
   CLASS = 'CLASS',
@@ -685,7 +685,7 @@ export const FunctionMainEditor = observer(
               ),
             })}
           >
-            <StudioLambdaEditor
+            <LambdaEditor
               className="function-editor__element__lambda-editor"
               disabled={
                 lambdaEditorState.isConvertingFunctionBodyToString || isReadOnly

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

@@ -20,7 +20,6 @@ import {
   type IDisposable,
   editor as monacoEditorAPI,
   languages as monacoLanguagesAPI,
-  KeyCode,
 } from 'monaco-editor';
 import {
   ContextMenu,
@@ -28,7 +27,6 @@ import {
   setErrorMarkers,
   disposeEditor,
   baseTextEditorSettings,
-  disableEditorHotKeys,
   resetLineNumberGutterWidth,
   clsx,
   WordWrapIcon,
@@ -46,6 +44,7 @@ import {
   useApplicationStore,
   type DocumentationEntry,
   useApplicationNavigationContext,
+  createPassThroughOnKeyHandler,
 } from '@finos/legend-application';
 import {
   type ElementDragSource,
@@ -817,22 +816,7 @@ export const GrammarTextEditor = observer(() => {
         // but if we do that on first load, the cursor will not jump to the current element
         // also, it's better to place that logic in an effect that watches for the regex string
       });
-      _editor.onKeyDown((event) => {
-        if (event.keyCode === KeyCode.F9) {
-          event.preventDefault();
-          event.stopPropagation();
-          flowResult(editorStore.graphState.globalCompileInTextMode()).catch(
-            applicationStore.alertUnhandledError,
-          );
-        } else if (event.keyCode === KeyCode.F8) {
-          event.preventDefault();
-          event.stopPropagation();
-          flowResult(editorStore.toggleTextMode()).catch(
-            applicationStore.alertUnhandledError,
-          );
-        }
-      });
-      disableEditorHotKeys(_editor);
+      _editor.onKeyDown(createPassThroughOnKeyHandler());
       _editor.focus(); // focus on the editor initially
       setEditor(_editor);
     }

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

@@ -39,13 +39,11 @@ import {
 import { flowResult } from 'mobx';
 import { useEditorStore } from '../EditorStoreProvider.js';
 import {
-  ActionAlertType,
-  ActionAlertActionType,
   useApplicationStore,
   EDITOR_LANGUAGE,
   useApplicationNavigationContext,
+  TextInputEditor,
 } from '@finos/legend-application';
-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/DSL_ExternalFormat_SchemaSetEditorState.js';
@@ -151,36 +149,11 @@ export const ModelImporter = observer(() => {
   const label = modelImporterState.modelImportEditorState.label;
   const modelImportEditorState = modelImporterState.modelImportEditorState;
   const loadModel = (): void => {
-    if (editorStore.localChangesState.hasUnpushedChanges) {
-      editorStore.setActionAlertInfo({
-        message: 'You have unpushed changes',
-        prompt:
-          'This action will discard these changes and refresh the application',
-        type: ActionAlertType.CAUTION,
-        onEnter: (): void => editorStore.setBlockGlobalHotkeys(true),
-        onClose: (): void => editorStore.setBlockGlobalHotkeys(false),
-        actions: [
-          {
-            label: 'Proceed to load model',
-            type: ActionAlertActionType.PROCEED_WITH_CAUTION,
-            handler: (): void => {
-              modelImporterState.modelImportEditorState
-                .loadModel()
-                .catch(applicationStore.alertUnhandledError);
-            },
-          },
-          {
-            label: 'Abort',
-            type: ActionAlertActionType.PROCEED,
-            default: true,
-          },
-        ],
-      });
-    } else {
+    editorStore.localChangesState.alertUnsavedChanges((): void => {
       modelImporterState.modelImportEditorState
         .loadModel()
         .catch(applicationStore.alertUnhandledError);
-    }
+    });
   };
   useApplicationNavigationContext(
     LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.MODEL_LOADER,
@@ -216,7 +189,7 @@ export const ModelImporter = observer(() => {
         modelImportEditorState.setModelText(val);
       return (
         <div className="panel__content model-loader__editor">
-          <StudioTextInputEditor
+          <TextInputEditor
             language={
               modelImportEditorState.nativeType ===
               MODEL_IMPORT_NATIVE_INPUT_TYPE.PURE_GRAMMAR
@@ -246,6 +219,7 @@ export const ModelImporter = observer(() => {
       <div className="panel__header model-loader__header">
         <div className="model-loader__header__configs">
           <DropdownMenu
+            className="model-loader__header__configs__type"
             content={
               <MenuContent className="model-loader__header__configs__type__menu">
                 <div className="model-loader__header__configs__type-option__group model-loader__header__configs__type-option__group--native">
@@ -325,13 +299,11 @@ export const ModelImporter = observer(() => {
               transformOrigin: { vertical: 'top', horizontal: 'right' },
             }}
           >
-            <div className="model-loader__header__configs__type">
-              <div className="model-loader__header__configs__type__label">
-                {prettyCONSTName(label)}
-              </div>
-              <div className="model-loader__header__configs__type__icon">
-                <CaretDownIcon />
-              </div>
+            <div className="model-loader__header__configs__type__label">
+              {prettyCONSTName(label)}
+            </div>
+            <div className="model-loader__header__configs__type__icon">
+              <CaretDownIcon />
             </div>
           </DropdownMenu>
           {modelImportEditorState.allowHardReplace && (

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

@@ -47,6 +47,7 @@ import {
 import { capitalize } from '@finos/legend-shared';
 import {
   EDITOR_LANGUAGE,
+  TextInputEditor,
   useApplicationStore,
 } from '@finos/legend-application';
 import {
@@ -54,7 +55,6 @@ import {
   renderColumnTypeIcon,
 } from './DatabaseEditorHelper.js';
 import { flowResult } from 'mobx';
-import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
 
 const getNodeIcon = (node: DatabaseBuilderTreeNodeData): React.ReactNode => {
   if (node instanceof SchemaDatabaseBuilderTreeNodeData) {
@@ -338,7 +338,7 @@ export const DatabaseBuilder = observer(
                     </div>
                   </div>
                   <PanelContent>
-                    <StudioTextInputEditor
+                    <TextInputEditor
                       language={EDITOR_LANGUAGE.PURE}
                       inputValue={databaseBuilderState.databaseGrammarCode}
                       isReadOnly={true}

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

@@ -29,7 +29,6 @@ import {
   CustomSelectorInput,
   ErrorIcon,
   PanelHeader,
-  PanelHeaderActionItem,
   PlusIcon,
   PanelFormTextEditor,
   ContextMenu,
@@ -46,6 +45,7 @@ import {
   PanelListSelectorItemLabel,
   PanelSection,
   PanelFormBooleanEditor,
+  PanelHeaderActions,
 } from '@finos/legend-art';
 import { capitalize, prettyCONSTName } from '@finos/legend-shared';
 
@@ -79,8 +79,8 @@ import {
   EDITOR_LANGUAGE,
   buildElementOption,
   type PackageableElementOption,
+  TextInputEditor,
 } from '@finos/legend-application';
-import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
 import { connection_setStore } from '../../../../stores/shared/modifier/DSL_Mapping_GraphModifierHelper.js';
 import {
   apiTokenAuthenticationStrategy_setApiToken,
@@ -153,7 +153,7 @@ const LocalH2DatasourceSpecificationEditor = observer(
           {capitalize('test data setup SQL')}
         </div>
         <div className="panel__content__form__section__text-editor">
-          <StudioTextInputEditor
+          <TextInputEditor
             inputValue={SQLValue}
             updateInput={(value: string | undefined): void =>
               localH2DatasourceSpecification_setTestDataSetupSqls(
@@ -417,7 +417,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
           isReadOnly={isReadOnly}
           value={sourceSpec.quotedIdentifiersIgnoreCase}
           name="quoted identifiers ignore case"
-          description="Controls whether Snowflake will treat alphabetic characters in double-quoted identifiers as uppercase"
+          prompt="Controls whether Snowflake will treat alphabetic characters in double-quoted identifiers as uppercase"
           update={(value: boolean | undefined): void =>
             snowflakeDatasourceSpec_setQuotedIdentifiersIgnoreCase(
               sourceSpec,
@@ -544,7 +544,7 @@ const BigQueryDatasourceSpecificationEditor = observer(
           isReadOnly={isReadOnly}
           value={sourceSpec.proxyHost}
           name="proxy host"
-          description="Specifies proxy host for connection to GCP BigQuery"
+          prompt="Specifies proxy host for connection to GCP BigQuery"
           update={(value: string | undefined): void =>
             bigQueryDatasourceSpecification_setProxyHost(
               sourceSpec,
@@ -556,7 +556,7 @@ const BigQueryDatasourceSpecificationEditor = observer(
           isReadOnly={isReadOnly}
           value={sourceSpec.proxyPort}
           name="proxy port"
-          description="Specifies proxy port for connection to GCP BigQuery"
+          prompt="Specifies proxy port for connection to GCP BigQuery"
           update={(value: string | undefined): void =>
             bigQueryDatasourceSpecification_setProxyPort(
               sourceSpec,
@@ -746,7 +746,7 @@ const MiddleTierUsernamePasswordAuthenticationStrategyEditor = observer(
           isReadOnly={isReadOnly}
           value={authSpec.vaultReference}
           name="vault reference"
-          description="Specifies the cred vault reference containing connection credentials"
+          prompt="Specifies the credential vault reference containing connection credentials"
           update={(value: string | undefined): void =>
             middleTierUsernamePasswordAuthenticationStrategy_setVaultReference(
               authSpec,
@@ -1024,39 +1024,38 @@ const PostProcessorRelationalConnectionEditor = observer(
                 <ResizablePanel size={200} minSize={100}>
                   <Panel>
                     <PanelHeader title="post-processor">
-                      <DropdownMenu
-                        disabled={isReadOnly}
-                        content={postProcessorOptions.map(
-                          (postProcessorType) => (
-                            <MenuContentItem
-                              key={postProcessorType.value}
-                              onClick={addPostProcessor(
-                                postProcessorType.value,
-                              )}
-                            >
-                              New {postProcessorType.label} Post-Processor
-                            </MenuContentItem>
-                          ),
-                        )}
-                        menuProps={{
-                          anchorOrigin: {
-                            vertical: 'bottom',
-                            horizontal: 'right',
-                          },
-                          transformOrigin: {
-                            vertical: 'top',
-                            horizontal: 'right',
-                          },
-                          elevation: 7,
-                        }}
-                      >
-                        <PanelHeaderActionItem
+                      <PanelHeaderActions>
+                        <DropdownMenu
+                          title="Create post-processor"
+                          className="panel__header__action"
                           disabled={isReadOnly}
-                          title="Create Post-Processor"
+                          content={postProcessorOptions.map(
+                            (postProcessorType) => (
+                              <MenuContentItem
+                                key={postProcessorType.value}
+                                onClick={addPostProcessor(
+                                  postProcessorType.value,
+                                )}
+                              >
+                                New {postProcessorType.label} Post-Processor
+                              </MenuContentItem>
+                            ),
+                          )}
+                          menuProps={{
+                            anchorOrigin: {
+                              vertical: 'bottom',
+                              horizontal: 'right',
+                            },
+                            transformOrigin: {
+                              vertical: 'top',
+                              horizontal: 'right',
+                            },
+                            elevation: 7,
+                          }}
                         >
                           <PlusIcon />
-                        </PanelHeaderActionItem>
-                      </DropdownMenu>
+                        </DropdownMenu>
+                      </PanelHeaderActions>
                     </PanelHeader>
                     <PanelContent>
                       {postProcessors.map((postProcessor, idx) => (
@@ -1375,7 +1374,7 @@ const RelationalConnectionGeneralEditor = observer(
                   isReadOnly={isReadOnly}
                   value={connection.quoteIdentifiers}
                   name="Quote identifiers"
-                  description="Specifies whether to use double-quotes for SQL identifiers"
+                  prompt="Specifies whether to use double-quotes for SQL identifiers"
                   update={(value?: boolean): void =>
                     dBConnection_setQuoteIdentifiers(connection, Boolean(value))
                   }

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

@@ -17,7 +17,6 @@
 import {
   ResizablePanelGroup,
   ResizablePanel,
-  PanelHeaderActionItem,
   PlusIcon,
   ResizablePanelSplitter,
   PanelFormTextEditor,
@@ -34,6 +33,7 @@ import {
   PanelContent,
   PanelListSelectorItemLabel,
   PanelSection,
+  PanelHeaderActions,
 } from '@finos/legend-art';
 import {
   type Mapper,
@@ -137,31 +137,36 @@ export const MapperPostProcessorEditor = observer(
             <ResizablePanel size={170} minSize={70}>
               <Panel>
                 <PanelHeader title="mapper">
-                  <DropdownMenu
-                    disabled={isReadOnly}
-                    content={
-                      <MenuContent>
-                        <MenuContentItem onClick={addSchemaMapper}>
-                          New Schema Mapper
-                        </MenuContentItem>
-                        <MenuContentItem onClick={addTableMapper}>
-                          New Table Mapper
-                        </MenuContentItem>
-                      </MenuContent>
-                    }
-                    menuProps={{
-                      anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
-                      transformOrigin: { vertical: 'top', horizontal: 'right' },
-                      elevation: 7,
-                    }}
-                  >
-                    <PanelHeaderActionItem
+                  <PanelHeaderActions>
+                    <DropdownMenu
+                      title="Create mapper"
+                      className="panel__header__action"
                       disabled={isReadOnly}
-                      title="Create Mapper"
+                      content={
+                        <MenuContent>
+                          <MenuContentItem onClick={addSchemaMapper}>
+                            New Schema Mapper
+                          </MenuContentItem>
+                          <MenuContentItem onClick={addTableMapper}>
+                            New Table Mapper
+                          </MenuContentItem>
+                        </MenuContent>
+                      }
+                      menuProps={{
+                        anchorOrigin: {
+                          vertical: 'bottom',
+                          horizontal: 'right',
+                        },
+                        transformOrigin: {
+                          vertical: 'top',
+                          horizontal: 'right',
+                        },
+                        elevation: 7,
+                      }}
                     >
                       <PlusIcon />
-                    </PanelHeaderActionItem>
-                  </DropdownMenu>
+                    </DropdownMenu>
+                  </PanelHeaderActions>
                 </PanelHeader>
                 <PanelContent>
                   {mappers.map((mapper) => (
@@ -193,7 +198,7 @@ export const MapperPostProcessorEditor = observer(
                               ? 'Table Mapper'
                               : 'Schema Mapper'
                           }
-                          validationErrorMessage={
+                          errorMessage={
                             isMapperDuplicated(mapper)
                               ? 'Mappers have the same values'
                               : undefined