@finos/legend-application-studio 18.1.0 → 19.1.0

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}

package/src/components/editor/edit-panel/project-configuration-editor/ProjectConfigurationEditor.tsx

@@ -39,7 +39,6 @@ import {
   CheckCircleIcon,
   ExclamationCircleIcon,
   ExternalLinkSquareIcon,
-  ArchiveIcon,
   Dialog,
   Panel,
   PanelForm,
@@ -48,6 +47,10 @@ import {
   CheckSquareIcon,
   SquareIcon,
   ExclamationTriangleIcon,
+  DropdownMenu,
+  CaretDownIcon,
+  MenuContentItem,
+  MenuContent,
 } from '@finos/legend-art';
 import { flowResult } from 'mobx';
 import {
@@ -58,8 +61,6 @@ import {
 } from '@finos/legend-server-sdlc';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
-  ActionAlertActionType,
-  ActionAlertType,
   DocumentationPreview,
   EDITOR_LANGUAGE,
   LEGEND_APPLICATION_DOCUMENTATION_KEY,
@@ -73,11 +74,11 @@ import {
   type ProjectData,
   type ProjectDependencyInfo,
 } from '@finos/legend-server-depot';
-import { generateViewProjectRoute } from '../../../../stores/LegendStudioRouter.js';
 import {
-  compareSemVerVersions,
-  generateGAVCoordinates,
-} from '@finos/legend-storage';
+  generateViewProjectByGAVRoute,
+  generateViewProjectRoute,
+} from '../../../../stores/LegendStudioRouter.js';
+import { compareSemVerVersions } from '@finos/legend-storage';
 
 interface VersionOption {
   label: string;
@@ -326,26 +327,24 @@ const ProjectDependencyEditor = observer(
         }
       }
     };
-    const openProjectinArchive = (): void => {
+    const viewProject = (): void => {
       if (!projectDependency.isLegacyDependency) {
-        const projectDependencyVersionId =
-          projectDependency.versionId === MASTER_SNAPSHOT_ALIAS
-            ? SNAPSHOT_VERSION_ALIAS
-            : projectDependency.versionId;
         applicationStore.navigator.visitAddress(
-          `${
-            applicationStore.config.baseUrl
-          }view/archive/${generateGAVCoordinates(
-            guaranteeNonNullable(projectDependency.groupId),
-            guaranteeNonNullable(projectDependency.artifactId),
-            projectDependencyVersionId,
-          )}`,
+          applicationStore.navigator.generateAddress(
+            generateViewProjectByGAVRoute(
+              guaranteeNonNullable(projectDependency.groupId),
+              guaranteeNonNullable(projectDependency.artifactId),
+              projectDependency.versionId === MASTER_SNAPSHOT_ALIAS
+                ? SNAPSHOT_VERSION_ALIAS
+                : projectDependency.versionId,
+            ),
+          ),
         );
       }
     };
     // NOTE: This assumes that the dependant project is in the same studio instance as the current project
     // In the future, the studio instance may be part of the project data
-    const openProject = (): void => {
+    const viewSDLCProject = (): void => {
       if (projectDependencyData) {
         applicationStore.navigator.visitAddress(
           applicationStore.navigator.generateAddress(
@@ -391,33 +390,41 @@ const ProjectDependencyEditor = observer(
           }
           darkMode={true}
         />
-        <button
-          className="project-dependency-editor__visit-btn btn--dark btn--sm"
-          disabled={
-            projectDependency.isLegacyDependency ||
-            !selectedProject ||
-            !selectedVersionOption ||
-            !projectDependencyData
-          }
-          onClick={openProject}
-          tabIndex={-1}
-          title="Open Project"
-        >
-          <ExternalLinkSquareIcon />
-        </button>
-        <button
-          className="project-dependency-editor__visit-btn btn--dark btn--sm"
-          disabled={
-            projectDependency.isLegacyDependency ||
-            !selectedProject ||
-            !selectedVersionOption
-          }
-          onClick={openProjectinArchive}
-          tabIndex={-1}
-          title="Open Project in archive"
-        >
-          <ArchiveIcon />
-        </button>
+        <div className="project-dependency-editor__visit-project-btn">
+          <button
+            className="project-dependency-editor__visit-project-btn__btn btn--dark"
+            disabled={
+              projectDependency.isLegacyDependency ||
+              !selectedProject ||
+              !selectedVersionOption
+            }
+            onClick={viewProject}
+            tabIndex={-1}
+            title="View project"
+          >
+            <ExternalLinkSquareIcon />
+          </button>
+          <DropdownMenu
+            className="project-dependency-editor__visit-project-btn__dropdown-trigger btn--dark"
+            content={
+              <MenuContent>
+                <MenuContentItem
+                  disabled={
+                    projectDependency.isLegacyDependency ||
+                    !selectedProject ||
+                    !selectedVersionOption ||
+                    !projectDependencyData
+                  }
+                  onClick={viewSDLCProject}
+                >
+                  View SDLC project
+                </MenuContentItem>
+              </MenuContent>
+            }
+          >
+            <CaretDownIcon title="Show more options..." />
+          </DropdownMenu>
+        </div>
         <button
           className="project-dependency-editor__remove-btn btn--dark btn--caution"
           disabled={isReadOnly}
@@ -711,38 +718,13 @@ export const ProjectConfigurationEditor = observer(() => {
     }
   };
   const disableAddButton =
-    selectedTab === CONFIGURATION_EDITOR_TAB.PROJECT_STRUCTURE || isReadOnly;
+    selectedTab !== CONFIGURATION_EDITOR_TAB.PROJECT_DEPENDENCIES || isReadOnly;
   const updateConfigs = (): 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 update project dependencies',
-            type: ActionAlertActionType.PROCEED_WITH_CAUTION,
-            handler: (): void => {
-              flowResult(configState.updateConfigs()).catch(
-                applicationStore.alertUnhandledError,
-              );
-            },
-          },
-          {
-            label: 'Abort',
-            type: ActionAlertActionType.PROCEED,
-            default: true,
-          },
-        ],
-      });
-    } else {
+    editorStore.localChangesState.alertUnsavedChanges((): void => {
       flowResult(configState.updateConfigs()).catch(
         applicationStore.alertUnhandledError,
       );
-    }
+    });
   };
   useEffect(() => {
     if (

package/src/components/editor/edit-panel/service-editor/NewServiceModal.tsx

@@ -61,10 +61,6 @@ export const NewServiceModal = observer(
           .catch(applicationStore.alertUnhandledError);
       }
     };
-    const onSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
-      event.preventDefault();
-      create();
-    };
     const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) =>
       setServicePath(event.target.value);
     return (
@@ -80,7 +76,13 @@ export const NewServiceModal = observer(
           },
         }}
       >
-        <form onSubmit={onSubmit} className="modal search-modal modal--dark">
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            create();
+          }}
+          className="modal search-modal modal--dark"
+        >
           <div className="modal__title">Promote to Service</div>
           <div className="input-group">
             <input

package/src/components/editor/edit-panel/service-editor/ServiceExecutionEditor.tsx

@@ -334,10 +334,6 @@ export const ChangeExecutionModal = observer(
     const closeModal = (): void => executionState.setShowChangeExecModal(false);
     const isChangingToMulti =
       executionState instanceof SingleServicePureExecutionState;
-    const handleSubmit = (): void => {
-      executionState.changeExecution();
-      closeModal();
-    };
     const renderChangeExecution = (): React.ReactNode => {
       if (executionState instanceof SingleServicePureExecutionState) {
         const keyValue = executionState.multiExecutionKey;
@@ -404,7 +400,11 @@ export const ChangeExecutionModal = observer(
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
         <form
-          onSubmit={handleSubmit}
+          onSubmit={(event) => {
+            event.preventDefault();
+            executionState.changeExecution();
+            closeModal();
+          }}
           className="modal modal--dark search-modal"
         >
           <div className="modal__title">
@@ -553,11 +553,6 @@ export const NewExecutionParameterModal = observer(
 
     const closeModal = (): void =>
       executionState.setNewKeyParameterModal(false);
-    const handleSubmit = (): void => {
-      executionState.addExecutionParameter(keyValue);
-      setKeyValue('');
-      closeModal();
-    };
     const onChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
       setKeyValue(event.target.value);
     };
@@ -569,7 +564,12 @@ export const NewExecutionParameterModal = observer(
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
         <form
-          onSubmit={handleSubmit}
+          onSubmit={(event) => {
+            event.preventDefault();
+            executionState.addExecutionParameter(keyValue);
+            setKeyValue('');
+            closeModal();
+          }}
           className="modal modal--dark search-modal"
         >
           <div className="modal__title">New Execution Context</div>
@@ -607,10 +607,6 @@ const RenameModal = observer(
   }) => {
     const { val, isReadOnly, showModal, closeModal, setValue } = props;
     const [inputValue, setInputValue] = useState(val);
-    const handleSubmit = (): void => {
-      setValue(inputValue);
-      closeModal();
-    };
     const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) => {
       setInputValue(event.target.value);
     };
@@ -622,7 +618,11 @@ const RenameModal = observer(
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
         <form
-          onSubmit={handleSubmit}
+          onSubmit={(event) => {
+            event.preventDefault();
+            setValue(inputValue);
+            closeModal();
+          }}
           className="modal modal--dark search-modal"
         >
           <div className="modal__title">Rename</div>

package/src/components/editor/edit-panel/service-editor/ServiceExecutionQueryEditor.tsx

@@ -42,9 +42,9 @@ import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
   EDITOR_LANGUAGE,
   ExecutionPlanViewer,
+  TextInputEditor,
   useApplicationStore,
 } from '@finos/legend-application';
-import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
 import {
   type LightQuery,
   isStubbed_PackageableElement,
@@ -80,7 +80,7 @@ const ServiceExecutionResultViewer = observer(
             <div className="modal__title">Execution Result</div>
           </div>
           <div className="modal__body">
-            <StudioTextInputEditor
+            <TextInputEditor
               inputValue={executionResultText ?? ''}
               isReadOnly={true}
               language={EDITOR_LANGUAGE.JSON}
@@ -209,7 +209,7 @@ const ServiceExecutionQueryImporter = observer(
               isLoading={queryState.loadQueryInfoState.isInProgress}
             />
             {queryState.selectedQueryInfo && (
-              <StudioTextInputEditor
+              <TextInputEditor
                 inputValue={queryState.selectedQueryInfo.content}
                 isReadOnly={true}
                 language={EDITOR_LANGUAGE.PURE}
@@ -264,6 +264,7 @@ export const ServiceExecutionQueryEditor = observer(
                     embeddedQueryBuilderState.editorStore.applicationStore,
                     embeddedQueryBuilderState.editorStore.graphManagerState,
                     service,
+                    undefined,
                     selectedExecutionState.executionContext instanceof
                     KeyedExecutionParameter
                       ? selectedExecutionState.executionContext.key
@@ -396,19 +397,19 @@ export const ServiceExecutionQueryEditor = observer(
                 </div>
               </button>
             ) : (
-              <button
-                className="service-editor__execution__execute-btn"
-                onClick={runQuery}
-                title="Run Query"
-                disabled={executionState.isRunningQuery}
-                tabIndex={-1}
-              >
-                <div className="service-editor__execution__execute-btn__label">
+              <div className="service-editor__execution__execute-btn">
+                <button
+                  className="service-editor__execution__execute-btn__label"
+                  onClick={runQuery}
+                  title="Run Query"
+                  disabled={executionState.isGeneratingPlan}
+                  tabIndex={-1}
+                >
                   <PlayIcon className="service-editor__execution__execute-btn__label__icon" />
                   <div className="service-editor__execution__execute-btn__label__title">
                     Run Query
                   </div>
-                </div>
+                </button>
                 <DropdownMenu
                   className="service-editor__execution__execute-btn__dropdown-btn"
                   disabled={executionState.isGeneratingPlan}
@@ -435,7 +436,7 @@ export const ServiceExecutionQueryEditor = observer(
                 >
                   <CaretDownIcon />
                 </DropdownMenu>
-              </button>
+              </div>
             )}
           </div>
         </div>
@@ -448,7 +449,7 @@ export const ServiceExecutionQueryEditor = observer(
             }
           />
           <div className="service-execution-query-editor__content">
-            <StudioTextInputEditor
+            <TextInputEditor
               inputValue={queryState.lambdaString}
               isReadOnly={true}
               language={EDITOR_LANGUAGE.PURE}

package/src/components/editor/edit-panel/service-editor/testable/ServiceTestDataEditor.tsx

@@ -253,14 +253,6 @@ export const NewConnectionDataModal = observer(
           (c) => c.connectionId === selectedConnection?.value.id,
         ),
       );
-    const handleSubmit = (): void => {
-      const connection = newConnectionState.connection;
-      const data = newConnectionState.embeddedDataType;
-      if (connection && data) {
-        testDataState.createConnectionTestData();
-        closeModal();
-      }
-    };
     const onConnectionSelectionChange = (val: {
       label: string;
       value?: IdentifiedConnection;
@@ -309,7 +301,15 @@ export const NewConnectionDataModal = observer(
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
         <form
-          onSubmit={handleSubmit}
+          onSubmit={(event) => {
+            event.preventDefault();
+            const connection = newConnectionState.connection;
+            const data = newConnectionState.embeddedDataType;
+            if (connection && data) {
+              testDataState.createConnectionTestData();
+              closeModal();
+            }
+          }}
           className="modal service-test-data-modal modal--dark"
         >
           <div className="modal__header">

package/src/components/editor/edit-panel/service-editor/testable/ServiceTestableEditor.tsx

@@ -101,10 +101,6 @@ export const RenameModal = observer(
   }) => {
     const { val, isReadOnly, showModal, closeModal, setValue } = props;
     const [inputValue, setInputValue] = useState(val);
-    const handleSubmit = (): void => {
-      setValue(inputValue);
-      closeModal();
-    };
     const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) => {
       setInputValue(event.target.value);
     };
@@ -116,7 +112,11 @@ export const RenameModal = observer(
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
         <form
-          onSubmit={handleSubmit}
+          onSubmit={(event) => {
+            event.preventDefault();
+            setValue(inputValue);
+            closeModal();
+          }}
           className="modal modal--dark search-modal"
         >
           <div className="modal__title">Rename</div>