@finos/legend-application-studio 18.1.0 → 19.1.0

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) => (

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

@@ -67,10 +67,10 @@ import {
   externalFormatData_setContentType,
   externalFormatData_setData,
 } from '../../../../stores/shared/modifier/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';
 import { renderEmbeddedDataEditor } from './EmbeddedDataEditor.js';
+import { TextInputEditor } from '@finos/legend-application';
 
 export const ExternalFormatDataEditor = observer(
   (props: {
@@ -116,6 +116,7 @@ export const ExternalFormatDataEditor = observer(
           </div>
           <div className="external-format-data-editor__header__actions">
             <DropdownMenu
+              className="external-format-data-editor__type"
               disabled={isReadOnly}
               content={
                 <MenuContent className="external-format-data-editor__dropdown">
@@ -135,20 +136,18 @@ export const ExternalFormatDataEditor = observer(
                 transformOrigin: { vertical: 'top', horizontal: 'right' },
               }}
             >
-              <div className="external-format-data-editor__type">
-                <div className="external-format-data-editor__type__label">
-                  {externalFormatDataState.embeddedData.contentType}
-                </div>
-                <div className="external-format-data-editor__type__icon">
-                  <CaretDownIcon />
-                </div>
+              <div className="external-format-data-editor__type__label">
+                {externalFormatDataState.embeddedData.contentType}
+              </div>
+              <div className="external-format-data-editor__type__icon">
+                <CaretDownIcon />
               </div>
             </DropdownMenu>
           </div>
         </div>
         <div className={clsx('external-format-data-editor__content')}>
           <div className="external-format-data-editor__content__input">
-            <StudioTextInputEditor
+            <TextInputEditor
               language={language}
               inputValue={externalFormatDataState.embeddedData.data}
               updateInput={changeData}

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

@@ -36,7 +36,6 @@ import {
   externalFormatData_setContentType,
   externalFormatData_setData,
 } from '../../../../stores/shared/modifier/DSL_Data_GraphModifierHelper.js';
-import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
 import type { DSL_Data_LegendStudioApplicationPlugin_Extension } from '../../../../stores/DSL_Data_LegendStudioApplicationPlugin_Extension.js';
 import { getEditorLanguageFromFormat } from '../../../../stores/editor-state/FileGenerationViewerState.js';
 import {
@@ -46,7 +45,7 @@ import {
   RelationalCSVDataState,
 } from '../../../../stores/editor-state/element-editor-state/data/EmbeddedDataState.js';
 import type { DataElement } from '@finos/legend-graph';
-import { buildElementOption } from '@finos/legend-application';
+import { buildElementOption, TextInputEditor } from '@finos/legend-application';
 import { RelationalCSVDataEditor } from './RelationalCSVDataEditor.js';
 
 export const ExternalFormatDataEditor = observer(
@@ -104,6 +103,7 @@ export const ExternalFormatDataEditor = observer(
               <WrenchIcon />
             </button>
             <DropdownMenu
+              className="external-format-data-editor__type"
               disabled={isReadOnly}
               content={
                 <MenuContent className="external-format-data-editor__dropdown">
@@ -123,20 +123,18 @@ export const ExternalFormatDataEditor = observer(
                 transformOrigin: { vertical: 'top', horizontal: 'right' },
               }}
             >
-              <div className="external-format-data-editor__type">
-                <div className="external-format-data-editor__type__label">
-                  {externalFormatDataState.embeddedData.contentType}
-                </div>
-                <div className="external-format-data-editor__type__icon">
-                  <CaretDownIcon />
-                </div>
+              <div className="external-format-data-editor__type__label">
+                {externalFormatDataState.embeddedData.contentType}
+              </div>
+              <div className="external-format-data-editor__type__icon">
+                <CaretDownIcon />
               </div>
             </DropdownMenu>
           </div>
         </div>
         <div className={clsx('external-format-data-editor__content')}>
           <div className="external-format-data-editor__content__input">
-            <StudioTextInputEditor
+            <TextInputEditor
               language={language}
               inputValue={externalFormatDataState.embeddedData.data}
               updateInput={changeData}

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { EDITOR_LANGUAGE } from '@finos/legend-application';
+import { EDITOR_LANGUAGE, TextInputEditor } from '@finos/legend-application';
 import {
   BlankPanelPlaceholder,
   clsx,
@@ -32,7 +32,6 @@ import type { RelationalCSVDataTable } from '@finos/legend-graph';
 import { observer } from 'mobx-react-lite';
 import { forwardRef, useState } from 'react';
 import type { RelationalCSVDataState } from '../../../../stores/editor-state/element-editor-state/data/EmbeddedDataState.js';
-import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
 
 const RelationalTableIdentifierModal = observer(
   (props: { dataState: RelationalCSVDataState; isReadOnly: boolean }) => {
@@ -40,10 +39,6 @@ const RelationalTableIdentifierModal = observer(
     const tableIdentifierState = dataState.tableIdentifierState;
     const editableTable = tableIdentifierState.table;
     const closeModal = (): void => dataState.closeModal();
-    const handleSubmit = (): void => {
-      tableIdentifierState.handleSubmit();
-      closeModal();
-    };
     const changeTableValue: React.ChangeEventHandler<HTMLInputElement> = (
       event,
     ) => {
@@ -62,7 +57,11 @@ const RelationalTableIdentifierModal = observer(
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
         <form
-          onSubmit={handleSubmit}
+          onSubmit={(event) => {
+            event.preventDefault();
+            tableIdentifierState.handleSubmit();
+            closeModal();
+          }}
           className="modal modal--dark search-modal"
         >
           <div className="modal__title">
@@ -226,7 +225,7 @@ export const RelationalCSVDataEditor = observer(
             <div className="relational-data-editor__content">
               {currentTableState && (
                 <div className="relational-data-editor__values">
-                  <StudioTextInputEditor
+                  <TextInputEditor
                     inputValue={currentTableState.table.values}
                     updateInput={updateTableValues}
                     isReadOnly={isReadOnly}

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

@@ -27,6 +27,7 @@ import {
   EDITOR_THEME,
   EDITOR_LANGUAGE,
   useApplicationStore,
+  createPassThroughOnKeyHandler,
 } from '@finos/legend-application';
 import {
   type MergeEditorComparisonViewInfo,
@@ -45,7 +46,6 @@ import {
   clsx,
   CustomSelectorInput,
   disposeEditor,
-  disableEditorHotKeys,
   baseTextEditorSettings,
   moveToPosition,
   setErrorMarkers,
@@ -200,7 +200,7 @@ const MergeConflictEditor = observer(
           formatOnType: true,
           formatOnPaste: true,
         });
-        disableEditorHotKeys(_editor);
+        _editor.onKeyDown(createPassThroughOnKeyHandler());
         _editor.focus(); // focus on the editor initially so we can correctly compute next/prev conflict chunks
         setEditor(_editor);
       }

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

@@ -78,10 +78,6 @@ const NewFileGenerationModal = observer(
         close();
       }
     };
-    const onSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
-      event.preventDefault();
-      promoteToFileGeneration().catch(applicationStore.alertUnhandledError);
-    };
     const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) =>
       setServicePath(event.target.value);
 
@@ -98,7 +94,15 @@ const NewFileGenerationModal = observer(
           },
         }}
       >
-        <form onSubmit={onSubmit} className="modal search-modal modal--dark">
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            promoteToFileGeneration().catch(
+              applicationStore.alertUnhandledError,
+            );
+          }}
+          className="modal search-modal modal--dark"
+        >
           <div className="modal__title">
             Promote file generation specification
           </div>

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

@@ -22,8 +22,8 @@ import { flowResult } from 'mobx';
 import {
   useApplicationStore,
   EDITOR_LANGUAGE,
+  TextInputEditor,
 } from '@finos/legend-application';
-import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
 
 export const ElementNativeView = observer(
   (props: { currentElementState: ElementEditorState }) => {
@@ -51,7 +51,7 @@ export const ElementNativeView = observer(
     }, [applicationStore, currentElementState, currentElementState.editMode]);
 
     return (
-      <StudioTextInputEditor
+      <TextInputEditor
         inputValue={generatedText}
         language={editorLanguage}
         isReadOnly={true}

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

@@ -84,8 +84,10 @@ import {
   resolvePackagePathAndElementName,
   getNullableFileGenerationConfig,
 } from '@finos/legend-graph';
-import { useApplicationStore } from '@finos/legend-application';
-import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
+import {
+  TextInputEditor,
+  useApplicationStore,
+} from '@finos/legend-application';
 import type { DSL_Generation_LegendStudioApplicationPlugin_Extension } from '../../../../stores/DSL_Generation_LegendStudioApplicationPlugin_Extension.js';
 import {
   fileGeneration_addScopeElement,
@@ -316,7 +318,7 @@ export const GenerationResultViewer = observer(
             </div>
             <PanelContent>
               {fileNode instanceof GenerationFile && (
-                <StudioTextInputEditor
+                <TextInputEditor
                   inputValue={getTextContent(fileNode.content, fileNode.format)}
                   isReadOnly={true}
                   language={getEditorLanguageFromFormat(fileNode.format)}

package/src/components/editor/edit-panel/external-format-editor/DSL_ExternalFormat_SchemaSetElementEditor.tsx

@@ -40,8 +40,7 @@ import {
   type InnerSchemaSetEditorState,
   SCHEMA_SET_TAB_TYPE,
 } 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 { EDITOR_LANGUAGE, TextInputEditor } from '@finos/legend-application';
 import { getEditorLanguageFromFormat } from '../../../../stores/editor-state/FileGenerationViewerState.js';
 import { guaranteeNonNullable, prettyCONSTName } from '@finos/legend-shared';
 import { useEditorStore } from '../../EditorStoreProvider.js';
@@ -178,7 +177,7 @@ const SchemaBasicEditor = observer(
         />
         <div className={clsx('schema-editor__content')}>
           <div className="schema-editor__content__input">
-            <StudioTextInputEditor
+            <TextInputEditor
               inputValue={schema.content}
               language={language}
               updateInput={(val: string): void => {

package/src/components/editor/edit-panel/external-format-editor/DSL_ExternalFormat_SchemaSetModelGenerationEditor.tsx

@@ -32,8 +32,7 @@ import {
   ResizablePanelSplitterLine,
 } from '@finos/legend-art';
 import { GenerationPropertyEditor } from '../element-generation-editor/FileGenerationEditor.js';
-import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
-import { EDITOR_LANGUAGE } from '@finos/legend-application';
+import { EDITOR_LANGUAGE, TextInputEditor } from '@finos/legend-application';
 
 enum HIDDEN_CONFIGURATION_PROPERTIES {
   FORMAT = 'format',
@@ -212,7 +211,7 @@ export const SchemaSetModelGenerationEditor = observer(
                       .isInProgress
                   }
                 />
-                <StudioTextInputEditor
+                <TextInputEditor
                   inputValue={modelGenerationState.generationValue}
                   isReadOnly={true}
                   language={EDITOR_LANGUAGE.PURE}

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

@@ -45,12 +45,12 @@ import {
   getRawGenericType,
   EnumerationMappingExplicitReference,
 } from '@finos/legend-graph';
-import { StudioLambdaEditor } from '../../../shared/StudioLambdaEditor.js';
 import { flatDataPropertyMapping_setTransformer } from '../../../../stores/shared/modifier/STO_FlatData_GraphModifierHelper.js';
 import {
   CLASS_PROPERTY_TYPE,
   getClassPropertyType,
 } from '../../../../stores/shared/ModelClassifierUtils.js';
+import { LambdaEditor } from '@finos/legend-query-builder';
 
 const SimplePropertyMappingEditor = observer(
   (props: {
@@ -83,7 +83,7 @@ const SimplePropertyMappingEditor = observer(
     return (
       <div className="property-mapping-editor__entry__container">
         <div ref={drop} className="property-mapping-editor__entry">
-          <StudioLambdaEditor
+          <LambdaEditor
             className={clsx({ 'lambda-editor--dnd-match': canDrop })}
             disabled={transformProps.disableTransform}
             lambdaEditorState={propertyMappingState}
@@ -205,7 +205,7 @@ const EnumerationPropertyMappingEditor = observer(
               <ArrowCircleRightIcon />
             </button>
           </div>
-          <StudioLambdaEditor
+          <LambdaEditor
             className={clsx(
               'property-mapping-editor__entry__enumeration__transform',
               { 'lambda-editor--dnd-match': canDrop },

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

@@ -86,9 +86,9 @@ import {
   getAllRecordTypes,
   getAllClassProperties,
 } from '@finos/legend-graph';
-import { StudioLambdaEditor } from '../../../shared/StudioLambdaEditor.js';
 import type { EditorStore } from '../../../../stores/EditorStore.js';
 import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../../../../stores/DSL_Mapping_LegendStudioApplicationPlugin_Extension.js';
+import { LambdaEditor } from '@finos/legend-query-builder';
 
 export const InstanceSetImplementationSourceExplorer = observer(
   (props: {
@@ -125,10 +125,8 @@ export const InstanceSetImplementationSourceExplorer = observer(
         if (!embeddedSetImpls.length) {
           setSourceElementForSourceSelectorModal(null);
         } else {
-          editorStore.setActionAlertInfo({
+          applicationStore.setActionAlertInfo({
             message: CHANGING_SOURCE_ON_EMBEDDED,
-            onEnter: (): void => editorStore.setBlockGlobalHotkeys(true),
-            onClose: (): void => editorStore.setBlockGlobalHotkeys(false),
             actions: [
               {
                 label: 'Continue',
@@ -220,10 +218,8 @@ export const InstanceSetImplementationSourceExplorer = observer(
           if (!embeddedSetImpls.length) {
             changeClassMappingSourceDriver(droppedPackagableElement);
           } else {
-            editorStore.setActionAlertInfo({
+            applicationStore.setActionAlertInfo({
               message: CHANGING_SOURCE_ON_EMBEDDED,
-              onEnter: (): void => editorStore.setBlockGlobalHotkeys(true),
-              onClose: (): void => editorStore.setBlockGlobalHotkeys(false),
               actions: [
                 {
                   label: 'Continue',
@@ -241,7 +237,7 @@ export const InstanceSetImplementationSourceExplorer = observer(
       },
       [
         changeClassMappingSourceDriver,
-        editorStore,
+        applicationStore,
         isReadOnly,
         setImplementation,
       ],
@@ -406,7 +402,7 @@ const MappingFilterEditor = observer(
         })}
       >
         <div className="class-mapping-filter-editor__content">
-          <StudioLambdaEditor
+          <LambdaEditor
             className="class-mapping-filter-editor__element__lambda-editor"
             disabled={
               isReadOnly ||

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

@@ -68,6 +68,7 @@ import {
   ActionAlertType,
   useApplicationStore,
   ExecutionPlanViewer,
+  TextInputEditor,
 } from '@finos/legend-application';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
@@ -79,7 +80,6 @@ import {
   stub_RawLambda,
   isStubbed_RawLambda,
 } from '@finos/legend-graph';
-import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
 import { objectInputData_setData } from '../../../../stores/shared/modifier/DSL_Mapping_GraphModifierHelper.js';
 import { flatData_setData } from '../../../../stores/shared/modifier/STO_FlatData_GraphModifierHelper.js';
 import {
@@ -296,12 +296,10 @@ const MappingExecutionQueryEditor = observer(
               );
             }
           } else {
-            editorStore.setActionAlertInfo({
+            applicationStore.setActionAlertInfo({
               message: 'Mapping execution input data is already set',
               prompt: 'Do you want to regenerate the input data?',
               type: ActionAlertType.CAUTION,
-              onEnter: (): void => editorStore.setBlockGlobalHotkeys(true),
-              onClose: (): void => editorStore.setBlockGlobalHotkeys(false),
               actions: [
                 {
                   label: 'Regenerate',
@@ -385,7 +383,7 @@ const MappingExecutionQueryEditor = observer(
         {!isStubbed_RawLambda(queryState.query) && (
           <PanelContent>
             <div className="mapping-execution-builder__query-panel__query">
-              <StudioTextInputEditor
+              <TextInputEditor
                 inputValue={queryState.lambdaString}
                 isReadOnly={true}
                 language={EDITOR_LANGUAGE.PURE}
@@ -434,7 +432,7 @@ export const MappingExecutionObjectInputDataBuilder = observer(
 
     return (
       <div className="panel__content mapping-execution-builder__input-data-panel__content">
-        <StudioTextInputEditor
+        <TextInputEditor
           language={EDITOR_LANGUAGE.JSON}
           inputValue={inputDataState.inputData.data}
           updateInput={updateInput}
@@ -454,7 +452,7 @@ export const MappingExecutionFlatDataInputDataBuilder = observer(
 
     return (
       <div className="panel__content mapping-execution-builder__input-data-panel__content">
-        <StudioTextInputEditor
+        <TextInputEditor
           language={EDITOR_LANGUAGE.TEXT}
           inputValue={inputDataState.inputData.data}
           updateInput={updateInput}
@@ -477,7 +475,7 @@ export const MappingExecutionRelationalInputDataBuilder = observer(
 
     return (
       <div className="panel__content mapping-execution-builder__input-data-panel__content">
-        <StudioTextInputEditor
+        <TextInputEditor
           language={getRelationalInputTestDataEditorLanguage(
             inputDataState.inputData.inputType,
           )}
@@ -551,6 +549,7 @@ const RelationalMappingExecutionInputDataTypeSelector = observer(
     return (
       <DropdownMenu
         className="mapping-execution-builder__input-data-panel__type-selector"
+        title="Choose input data type..."
         content={
           <MenuContent>
             {Object.keys(RelationalInputType).map((mode) => (
@@ -565,10 +564,7 @@ const RelationalMappingExecutionInputDataTypeSelector = observer(
           </MenuContent>
         }
       >
-        <div
-          className="mapping-execution-builder__input-data-panel__type-selector__value"
-          title="Choose input data type..."
-        >
+        <div className="mapping-execution-builder__input-data-panel__type-selector__value">
           <div className="mapping-execution-builder__input-data-panel__type-selector__value__label">
             {inputDataState.inputData.inputType}
           </div>
@@ -775,23 +771,23 @@ export const MappingExecutionBuilder = observer(
                 <FlaskIcon />
               </button>
             )}
-            <button
-              className="mapping-execution-builder__execute-btn"
-              onClick={execute}
-              disabled={
-                isStubbed_RawLambda(queryState.query) ||
-                !inputDataState.isValid ||
-                executionState.isGeneratingPlan ||
-                executionState.isExecuting
-              }
-              tabIndex={-1}
-            >
-              <div className="mapping-execution-builder__execute-btn__label">
+            <div className="mapping-execution-builder__execute-btn">
+              <button
+                className="mapping-execution-builder__execute-btn__label"
+                onClick={execute}
+                disabled={
+                  isStubbed_RawLambda(queryState.query) ||
+                  !inputDataState.isValid ||
+                  executionState.isGeneratingPlan ||
+                  executionState.isExecuting
+                }
+                tabIndex={-1}
+              >
                 <PlayIcon className="mapping-execution-builder__execute-btn__label__icon" />
                 <div className="mapping-execution-builder__execute-btn__label__title">
                   Run Query
                 </div>
-              </div>
+              </button>
               <DropdownMenu
                 className="mapping-execution-builder__execute-btn__dropdown-btn"
                 disabled={
@@ -823,7 +819,7 @@ export const MappingExecutionBuilder = observer(
               >
                 <CaretDownIcon />
               </DropdownMenu>
-            </button>
+            </div>
           </div>
         </div>
         <div className="mapping-execution-builder__content">
@@ -855,7 +851,7 @@ export const MappingExecutionBuilder = observer(
                   </div>
                 </div>
                 <div className="panel__content mapping-execution-builder__result-panel__content">
-                  <StudioTextInputEditor
+                  <TextInputEditor
                     inputValue={executionResultText ?? ''}
                     isReadOnly={true}
                     language={EDITOR_LANGUAGE.JSON}