Improve form submission handling

hashicorp-forge · Oct 17, 2023 · 06211f2 · 06211f2
1 parent 07ac9d5
commit 06211f2
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 20 deletions.
diff --git a/web/app/components/new/doc-form.hbs b/web/app/components/new/doc-form.hbs
@@ -82,15 +82,6 @@
         </div>
 
         <Hds::Form::Field @layout="vertical" as |F|>
-          {{yield
-            (hash
-              Error=F.Error
-              HelperText=F.HelperText
-              Label=F.Label
-              isRequired=F.isRequired
-              isOptional=F.isOptional
-            )
-          }}
           <F.Control>
             <Inputs::PeopleSelect
               class="multiselect mt-2 w-auto"

diff --git a/web/app/components/new/project-form.hbs b/web/app/components/new/project-form.hbs
@@ -39,13 +39,11 @@
 
     {{! TODO: Add Jira integration }}
 
-    <div>
-      <Hds::Button
-        data-test-submit
-        @text="Create project"
-        {{on "click" this.maybeSubmitForm}}
-      />
-    </div>
-
   </div>
+  <Hds::Button
+    data-test-submit
+    @text="Create project"
+    @isFullWidth={{true}}
+    type="submit"
+  />
 </form>
diff --git a/web/app/components/new/project-form.ts b/web/app/components/new/project-form.ts
@@ -1,6 +1,6 @@
 import { action } from "@ember/object";
 import RouterService from "@ember/routing/router-service";
-import { next, schedule } from "@ember/runloop";
+import { next } from "@ember/runloop";
 import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
@@ -24,7 +24,11 @@ export default class NewProjectFormComponent extends Component<NewProjectFormCom
   @tracked protected formIsValid = false;
   @tracked protected errorIsShown = false;
 
-  @action maybeSubmitForm() {
+  @action maybeSubmitForm(event?: SubmitEvent) {
+    if (event) {
+      event.preventDefault();
+    }
+
     this.validateForm();
 
     if (this.formIsValid) {

diff --git a/web/tests/acceptance/authenticated/new/project-test.ts b/web/tests/acceptance/authenticated/new/project-test.ts
@@ -72,7 +72,7 @@ module("Acceptance | authenticated/new/project", function (hooks) {
     assert.dom(TITLE_ERROR).hasText("Title is required.");
   });
 
-  test("it shows an error if creaing the project fails", async function (this: AuthenticatedNewProjectRouteTestContext, assert) {
+  test("it shows an error if creating the project fails", async function (this: AuthenticatedNewProjectRouteTestContext, assert) {
     this.server.post("/projects", () => {
       return new Response(500, {}, {});
     });