Merge pull request #1497 from Agenta-AI/issue-1495/-pressing-the-ente…

…r-key-should-equal-creating-an-application Pressing the enter key should equal creating an application
Agenta-AI · Apr 9, 2024 · a5a345a · a5a345a
2 parents b6e8d41 + 0321e68
commit a5a345a
Showing 1 changed file with 33 additions and 35 deletions.
diff --git a/agenta-web/src/components/AppSelector/AppSelector.tsx b/agenta-web/src/components/AppSelector/AppSelector.tsx
@@ -254,6 +254,36 @@ const AppSelector: React.FC = () => {
         [apps, newApp],
     )
 
+    const handleEnterKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            handleCreateApp()
+        }
+    }
+
+    const handleCreateApp = () => {
+        if (appNameExist) {
+            notification.warning({
+                message: "Template Selection",
+                description: "App name already exists. Please choose a different name.",
+                duration: 3,
+            })
+        } else if (fetchingTemplate && newApp.length > 0 && isAppNameInputValid(newApp)) {
+            notification.info({
+                message: "Template Selection",
+                description: "The template image is currently being fetched. Please wait...",
+                duration: 3,
+            })
+        } else if (!fetchingTemplate && newApp.length > 0 && isAppNameInputValid(newApp)) {
+            handleTemplateCardClick(templateId as string)
+        } else {
+            notification.warning({
+                message: "Template Selection",
+                description: "Please provide a valid app name to choose a template.",
+                duration: 3,
+            })
+        }
+    }
+
     return (
         <ConfigProvider
             theme={{
@@ -354,9 +384,10 @@ const AppSelector: React.FC = () => {
                     placeholder="New app name (e.g., chat-app)"
                     value={newApp}
                     onChange={(e) => setNewApp(e.target.value)}
+                    onKeyDown={handleEnterKeyPress}
                     disabled={fetchingTemplate}
                 />
-                {appNameExist && <div className={classes.modalError}>App name already exist</div>}
+                {appNameExist && <div className={classes.modalError}>App name already exists</div>}
                 {newApp.length > 0 && !isAppNameInputValid(newApp) && (
                     <div className={classes.modalError} data-cy="enter-app-name-modal-text-warning">
                         App name must contain only letters, numbers, underscore, or dash
@@ -368,40 +399,7 @@ const AppSelector: React.FC = () => {
                     type="primary"
                     loading={fetchingTemplate}
                     disabled={appNameExist || newApp.length === 0}
-                    onClick={() => {
-                        if (appNameExist) {
-                            notification.warning({
-                                message: "Template Selection",
-                                description:
-                                    "App name already exists. Please choose a different name.",
-                                duration: 3,
-                            })
-                        } else if (
-                            fetchingTemplate &&
-                            newApp.length > 0 &&
-                            isAppNameInputValid(newApp)
-                        ) {
-                            notification.info({
-                                message: "Template Selection",
-                                description:
-                                    "The template image is currently being fetched. Please wait...",
-                                duration: 3,
-                            })
-                        } else if (
-                            !fetchingTemplate &&
-                            newApp.length > 0 &&
-                            isAppNameInputValid(newApp)
-                        ) {
-                            handleTemplateCardClick(templateId as string)
-                        } else {
-                            notification.warning({
-                                message: "Template Selection",
-                                description:
-                                    "Please provide a valid app name to choose a template.",
-                                duration: 3,
-                            })
-                        }
-                    }}
+                    onClick={handleCreateApp}
                 >
                     Create
                 </Button>