@finos/legend-application-studio 18.1.0 → 19.0.0

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

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>