@finos/legend-application-studio 18.1.0 → 19.0.0

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}

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

@@ -65,6 +65,7 @@ import {
   ActionAlertActionType,
   ActionAlertType,
   ExecutionPlanViewer,
+  TextInputEditor,
 } from '@finos/legend-application';
 import {
   ClassMappingSelectorModal,
@@ -86,7 +87,6 @@ import {
   isStubbed_RawLambda,
   DEPRECATED__validate_MappingTestAssert,
 } from '@finos/legend-graph';
-import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
 import { flatData_setData } from '../../../../stores/shared/modifier/STO_FlatData_GraphModifierHelper.js';
 import {
   relationalInputData_setData,
@@ -189,12 +189,10 @@ const MappingTestQueryEditor = observer(
 
         // Attempt to generate data for input data panel as we pick the class mapping
         if (setImplementation) {
-          editorStore.setActionAlertInfo({
+          applicationStore.setActionAlertInfo({
             message: 'Mapping test 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',
@@ -276,7 +274,7 @@ const MappingTestQueryEditor = observer(
         {!isStubbed_RawLambda(queryState.query) && (
           <PanelContent>
             <div className="mapping-test-editor__query-panel__query">
-              <StudioTextInputEditor
+              <TextInputEditor
                 inputValue={queryState.lambdaString}
                 isReadOnly={true}
                 language={EDITOR_LANGUAGE.PURE}
@@ -328,7 +326,7 @@ export const MappingTestObjectInputDataBuilder = observer(
 
     return (
       <div className="panel__content mapping-test-editor__input-data-panel__content">
-        <StudioTextInputEditor
+        <TextInputEditor
           language={EDITOR_LANGUAGE.JSON}
           inputValue={inputDataState.data}
           isReadOnly={isReadOnly}
@@ -352,7 +350,7 @@ export const MappingTestFlatDataInputDataBuilder = observer(
 
     return (
       <div className="panel__content mapping-test-editor__input-data-panel__content">
-        <StudioTextInputEditor
+        <TextInputEditor
           language={EDITOR_LANGUAGE.TEXT}
           inputValue={inputDataState.inputData.data}
           isReadOnly={isReadOnly}
@@ -379,7 +377,7 @@ export const MappingTestRelationalInputDataBuilder = observer(
 
     return (
       <div className="panel__content mapping-test-editor__input-data-panel__content">
-        <StudioTextInputEditor
+        <TextInputEditor
           language={getRelationalInputTestDataEditorLanguage(
             inputDataState.inputData.inputType,
           )}
@@ -407,6 +405,7 @@ const RelationalMappingTestInputDataTypeSelector = observer(
     return (
       <DropdownMenu
         className="mapping-test-editor__input-data-panel__type-selector"
+        title="Choose input data type..."
         disabled={isReadOnly}
         content={
           <MenuContent>
@@ -422,10 +421,7 @@ const RelationalMappingTestInputDataTypeSelector = observer(
           </MenuContent>
         }
       >
-        <div
-          className="mapping-test-editor__input-data-panel__type-selector__value"
-          title="Choose input data type..."
-        >
+        <div className="mapping-test-editor__input-data-panel__type-selector__value">
           <div className="mapping-test-editor__input-data-panel__type-selector__value__label">
             {inputDataState.inputData.inputType}
           </div>
@@ -607,7 +603,7 @@ export const MappingTestExpectedOutputAssertionBuilder = observer(
               <ErrorIcon />
             </div>
           )}
-          <StudioTextInputEditor
+          <TextInputEditor
             inputValue={assertionState.expectedResult}
             updateInput={updateExpectedResult}
             isReadOnly={isReadOnly}
@@ -771,20 +767,20 @@ export const MappingTestEditor = observer(
                 </div>
               </button>
             ) : (
-              <button
-                className="mapping-test-editor__execute-btn"
-                onClick={runTest}
-                disabled={
-                  testState.isExecutingTest || testState.isGeneratingPlan
-                }
-                tabIndex={-1}
-              >
-                <div className="mapping-test-editor__execute-btn__label">
+              <div className="mapping-test-editor__execute-btn">
+                <button
+                  className="mapping-test-editor__execute-btn__label"
+                  onClick={runTest}
+                  disabled={
+                    testState.isExecutingTest || testState.isGeneratingPlan
+                  }
+                  tabIndex={-1}
+                >
                   <PlayIcon className="mapping-test-editor__execute-btn__label__icon" />
                   <div className="mapping-test-editor__execute-btn__label__title">
                     Run Test
                   </div>
-                </div>
+                </button>
                 <DropdownMenu
                   className="mapping-test-editor__execute-btn__dropdown-btn"
                   disabled={
@@ -813,7 +809,7 @@ export const MappingTestEditor = observer(
                 >
                   <CaretDownIcon />
                 </DropdownMenu>
-              </button>
+              </div>
             )}
           </div>
         </div>

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

@@ -189,10 +189,6 @@ export const NewMappingElementModal = observer(() => {
       handleClose();
     }
   };
-  const onSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
-    event.preventDefault();
-    handleSubmit();
-  };
   // Title
   const titleText = spec
     ? spec.showTarget
@@ -224,7 +220,10 @@ export const NewMappingElementModal = observer(() => {
     >
       {spec && (
         <form
-          onSubmit={onSubmit}
+          onSubmit={(event) => {
+            event.preventDefault();
+            handleSubmit();
+          }}
           className="modal search-modal new-mapping-element-modal"
         >
           {titleText && <div className="modal__title">{titleText}</div>}

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

@@ -44,13 +44,13 @@ import {
   getRawGenericType,
   EnumerationMappingExplicitReference,
 } from '@finos/legend-graph';
-import { StudioLambdaEditor } from '../../../shared/StudioLambdaEditor.js';
 import { purePropertyMapping_setTransformer } from '../../../../stores/shared/modifier/DSL_Mapping_GraphModifierHelper.js';
 import { getExpectedReturnType } from './PropertyMappingsEditor.js';
 import {
   CLASS_PROPERTY_TYPE,
   getClassPropertyType,
 } from '../../../../stores/shared/ModelClassifierUtils.js';
+import { LambdaEditor } from '@finos/legend-query-builder';
 
 const SimplePropertyMappingEditor = observer(
   (props: {
@@ -80,7 +80,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}
@@ -207,7 +207,7 @@ const EnumerationPropertyMappingEditor = observer(
               <ArrowCircleRightIcon />
             </button>
           </div>
-          <StudioLambdaEditor
+          <LambdaEditor
             className={clsx(
               'property-mapping-editor__entry__enumeration__transform',
               { 'lambda-editor--dnd-match': canDrop },
@@ -294,7 +294,7 @@ const ClassPropertyMappingEditor = observer(
               <ArrowCircleRightIcon />
             </button>
           </div>
-          <StudioLambdaEditor
+          <LambdaEditor
             className={clsx({ 'lambda-editor--dnd-match': canDrop })}
             disabled={transformProps.disableTransform}
             lambdaEditorState={propertyMappingState}

package/src/components/editor/edit-panel/mapping-editor/relational/RelationalPropertyMappingEditor.tsx

@@ -45,13 +45,13 @@ import {
   getRawGenericType,
   EnumerationMappingExplicitReference,
 } from '@finos/legend-graph';
-import { StudioLambdaEditor } from '../../../../shared/StudioLambdaEditor.js';
 import { relationalPropertyMapping_setTransformer } from '../../../../../stores/shared/modifier/STO_Relational_GraphModifierHelper.js';
 import { getExpectedReturnType } from '../PropertyMappingsEditor.js';
 import {
   CLASS_PROPERTY_TYPE,
   getClassPropertyType,
 } from '../../../../../stores/shared/ModelClassifierUtils.js';
+import { LambdaEditor } from '@finos/legend-query-builder';
 
 const SimplePropertyMappingEditor = observer(
   (props: {
@@ -67,7 +67,7 @@ const SimplePropertyMappingEditor = observer(
     return (
       <div className="property-mapping-editor__entry__container">
         <div ref={drop} className="property-mapping-editor__entry">
-          <StudioLambdaEditor
+          <LambdaEditor
             disabled={transformProps.disableTransform}
             lambdaEditorState={propertyMappingState}
             forceBackdrop={transformProps.forceBackdrop}
@@ -168,7 +168,7 @@ const EnumerationPropertyMappingEditor = observer(
               <ArrowCircleRightIcon />
             </button>
           </div>
-          <StudioLambdaEditor
+          <LambdaEditor
             className={clsx(
               'property-mapping-editor__entry__enumeration__transform',
             )}
@@ -249,7 +249,7 @@ const ClassPropertyMappingEditor = observer(
               <ArrowCircleRightIcon />
             </button>
           </div>
-          <StudioLambdaEditor
+          <LambdaEditor
             disabled={transformProps.disableTransform}
             lambdaEditorState={propertyMappingState}
             forceBackdrop={transformProps.forceBackdrop}