Documentation; more cleanup

hashicorp-forge · Oct 20, 2023 · f538635 · f538635
1 parent 197db9b
commit f538635
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 25 deletions.
diff --git a/web/app/components/new/doc-form.hbs b/web/app/components/new/doc-form.hbs
@@ -59,9 +59,9 @@
       @matchAnchorWidth={{hash enabled=true additionalWidth=6}}
       class="max-h-[240px]"
     />
-    {{#if this.formErrors.productAbbreviation}}
+    {{#if this.formErrors.product}}
       <Hds::Form::Error data-test-product-error class="mt-2">
-        {{this.formErrors.productAbbreviation}}
+        {{this.formErrors.product}}
       </Hds::Form::Error>
     {{/if}}
   </div>

diff --git a/web/app/components/new/doc-form.ts b/web/app/components/new/doc-form.ts
@@ -56,7 +56,10 @@ export default class NewDocFormComponent extends Component<NewDocFormComponentSi
   /**
    * An object containing error messages for each applicable form field.
    */
-  @tracked protected formErrors: DocFormErrors | undefined;
+  @tracked protected formErrors: DocFormErrors = {
+    title: null,
+    productAbbreviation: null,
+  };
 
   /**
    * Whether to validate eagerly, that is, after every change to the form.
@@ -76,9 +79,6 @@ export default class NewDocFormComponent extends Component<NewDocFormComponentSi
    * Whether the form has errors.
    */
   private get hasErrors(): boolean {
-    if (!this.formErrors) {
-      return false;
-    }
     return Object.values(this.formErrors).some((error) => error !== null);
   }
 
@@ -137,7 +137,7 @@ export default class NewDocFormComponent extends Component<NewDocFormComponentSi
       return;
     }
 
-    if (this.formErrors?.title || this.formErrors?.productAbbreviation) {
+    if (this.formErrors.title || this.formErrors.productAbbreviation) {
       // Validate once the input values are captured
       next("afterRender", () => {
         this.validate();
@@ -214,7 +214,6 @@ export default class NewDocFormComponent extends Component<NewDocFormComponentSi
     } catch (err: unknown) {
       this.docIsBeingCreated = false;
 
-      // TODO: Improve error handling.
       this.flashMessages.add({
         title: "Error creating document draft",
         message: `${err}`,

diff --git a/web/app/components/new/form.ts b/web/app/components/new/form.ts
@@ -10,7 +10,6 @@ const FORM_RESIZE_DURATION = Ember.testing ? 0 : 750;
 
 class HermesFormResize extends Resize {
   *animate() {
-    console.log("calllllt");
     this.opts.easing = easeOutExpo;
     this.opts.duration = FORM_RESIZE_DURATION;
     yield* super.animate();
@@ -37,14 +36,12 @@ export default class NewFormComponent extends Component<NewFormComponentSignatur
 
   *transition({ insertedSprites, removedSprites }: TransitionContext) {
     for (const sprite of insertedSprites) {
-      console.log("insertedSprite", sprite);
       sprite.startTranslatedBy(0, -2);
       void fadeIn(sprite, { duration: 50 });
       void move(sprite, { easing: easeOutQuad, duration: 350 });
     }
 
     for (const sprite of removedSprites) {
-      console.log("removedSprite", sprite);
       void fadeOut(sprite, { duration: 0 });
     }
   }

diff --git a/web/app/components/new/project-form.ts b/web/app/components/new/project-form.ts
@@ -9,9 +9,7 @@ import { task } from "ember-concurrency";
 import FetchService from "hermes/services/fetch";
 import cleanString from "hermes/utils/clean-string";
 
-interface NewProjectFormComponentSignature {
-  Args: {};
-}
+interface NewProjectFormComponentSignature {}
 
 export default class NewProjectFormComponent extends Component<NewProjectFormComponentSignature> {
   @service("fetch") declare fetchSvc: FetchService;
@@ -29,14 +27,14 @@ export default class NewProjectFormComponent extends Component<NewProjectFormCom
 
   @tracked protected title: string = "";
   @tracked protected description: string = "";
-
   @tracked protected titleErrorIsShown = false;
 
+  /**
+   * The action to attempt a form submission.
+   * If the form is valid, the createProject task is run.
+   */
   @action maybeSubmitForm(event?: SubmitEvent) {
-    if (event) {
-      event.preventDefault();
-    }
-
+    event?.preventDefault();
     this.validate();
 
     if (!this.titleErrorIsShown) {
@@ -48,10 +46,14 @@ export default class NewProjectFormComponent extends Component<NewProjectFormCom
     this.titleErrorIsShown = this.title.length === 0;
   }
 
-  @action protected onKeydown(e: KeyboardEvent) {
-    if (e.key === "Enter") {
-      // Override newline function
-      e.preventDefault();
+  /**
+   * The action run on title- and description-input keydown.
+   * If the key is Enter, a form submission is attempted.
+   * If the title error is shown, validation is run eagerly.
+   */
+  @action protected onKeydown(event: KeyboardEvent) {
+    if (event.key === "Enter") {
+      event.preventDefault();
       this.maybeSubmitForm();
     }
     if (this.titleErrorIsShown) {
@@ -62,6 +64,11 @@ export default class NewProjectFormComponent extends Component<NewProjectFormCom
     }
   }
 
+  /**
+   * The task that creates a project and, if successful,
+   * transitions to it. On error, displays a FlashMessage
+   * and reverts the `projectIsBeingCreated` state.
+   */
   private createProject = task(async () => {
     try {
       this.projectIsBeingCreated = true;
@@ -77,15 +84,13 @@ export default class NewProjectFormComponent extends Component<NewProjectFormCom
       this.router.transitionTo("authenticated.projects.project", project.id);
     } catch (error: unknown) {
       const typedError = error as Error;
-
       this.flashMessages.add({
         title: "Error creating project",
         message: typedError.message,
         type: "critical",
         timeout: 6000,
         extendedTimeout: 1000,
       });
-
       this.projectIsBeingCreated = false;
     }
   });