From cf3b6a9e924c6686f3d3fabfb3bfeafdaf4e877e Mon Sep 17 00:00:00 2001
From: Sander Bruens <sbruens@users.noreply.github.com>
Date: Mon, 25 Sep 2023 11:51:17 -0400
Subject: [PATCH] Add a "cancel" button that cancels the form instead of using
 the back button to clear the entire element.

---
 src/www/ui_components/app-root.js             | 10 ----
 src/www/views/contact_view/index.spec.ts      |  9 ++++
 src/www/views/contact_view/index.ts           |  3 +-
 .../contact_view/support_form/index.spec.ts   | 10 ++++
 .../views/contact_view/support_form/index.ts  | 52 ++++++++++++-------
 5 files changed, 54 insertions(+), 30 deletions(-)

diff --git a/src/www/ui_components/app-root.js b/src/www/ui_components/app-root.js
index 8d807a04db4..bdd09d73fef 100644
--- a/src/www/ui_components/app-root.js
+++ b/src/www/ui_components/app-root.js
@@ -785,16 +785,6 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
       history.back();
       // Must fire 'location-changed' so app-location notices and updates the route state.
       window.dispatchEvent(new CustomEvent('location-changed'));
-      if (this.page == 'contact') {
-        // Reset the contact form when a user navigates away from it by replacing
-        // the element with a fresh one. This is less complex than trying to reset
-        // all chosen options manually.
-        const newContactView = document.createElement('contact-view');
-        newContactView.name = 'contact';
-        newContactView.id = 'contactView';
-        newContactView.localize = this.localize;
-        this.$$('contact-view').replaceWith(newContactView);
-      }
     }
   }
 
diff --git a/src/www/views/contact_view/index.spec.ts b/src/www/views/contact_view/index.spec.ts
index f01fa88c9ec..ca57539fb3e 100644
--- a/src/www/views/contact_view/index.spec.ts
+++ b/src/www/views/contact_view/index.spec.ts
@@ -121,6 +121,15 @@ describe('ContactView', () => {
         const exitCard = el.shadowRoot!.querySelector('outline-card')!;
         expect(exitCard.textContent).toContain('Thanks for helping us improve');
       });
+
+      it('shows default contact view on cancellation of support form', async () => {
+        el.shadowRoot!.querySelector('support-form')!.dispatchEvent(new CustomEvent('cancel'));
+
+        await nextFrame();
+
+        expect(el.shadowRoot?.querySelector('p')?.textContent).toContain('Tell us how we can help.');
+        expect(el.shadowRoot?.querySelector('support-form')).toBeNull();
+      });
     });
   });
 });
diff --git a/src/www/views/contact_view/index.ts b/src/www/views/contact_view/index.ts
index 8cda56b62ae..2ce42b89696 100644
--- a/src/www/views/contact_view/index.ts
+++ b/src/www/views/contact_view/index.ts
@@ -177,7 +177,7 @@ export class ContactView extends LitElement {
     }
   }
 
-  private submitForm(e: SubmitEvent) {
+  private submitForm(e: CustomEvent) {
     console.log('Feedback form submitted!', e);
     this.exitTemplate = html`
       Thanks for helping us improve! We love hearing from you.
@@ -201,6 +201,7 @@ export class ContactView extends LitElement {
           <support-form
             .variant=${this.variant}
             .issueType=${this.selectedIssueType}
+            @cancel=${() => (this.step = Step.ISSUE_WIZARD)}
             @submit=${this.submitForm}
           ></support-form>
         `;
diff --git a/src/www/views/contact_view/support_form/index.spec.ts b/src/www/views/contact_view/support_form/index.spec.ts
index e9a82769316..5d17d131765 100644
--- a/src/www/views/contact_view/support_form/index.spec.ts
+++ b/src/www/views/contact_view/support_form/index.spec.ts
@@ -104,5 +104,15 @@ describe('SupportForm', () => {
       const {detail} = await listener;
       expect(detail).toBeTrue();
     });
+
+    it('clicking cancel button emits form cancel event', async () => {
+      const listener = oneEvent(el, 'cancel');
+
+      const cancelButton: HTMLElement = el.shadowRoot!.querySelector('mwc-button[label="Cancel"]')!;
+      cancelButton.click();
+
+      const {detail} = await listener;
+      expect(detail).toBeTrue();
+    });
   });
 });
diff --git a/src/www/views/contact_view/support_form/index.ts b/src/www/views/contact_view/support_form/index.ts
index 11e29b288fb..25842f5a2d3 100644
--- a/src/www/views/contact_view/support_form/index.ts
+++ b/src/www/views/contact_view/support_form/index.ts
@@ -75,6 +75,18 @@ export class SupportForm extends LitElement {
     this.isFormValid = Array.from(fieldNodes).every(field => field.validity.valid);
   }
 
+  /** Resets the form. */
+  private reset() {
+    this.formRef.value.reset();
+  }
+
+  /** Cancels the form. */
+  private cancel() {
+    this.reset();
+    const event = new CustomEvent<boolean>('cancel', {detail: true});
+    this.dispatchEvent(event);
+  }
+
   /** Submits the form. */
   private submit(e: SubmitEvent) {
     e.preventDefault();
@@ -91,7 +103,7 @@ export class SupportForm extends LitElement {
 
     const event = new CustomEvent<boolean>('submit', {detail: true});
     this.dispatchEvent(event);
-    this.formRef.value.reset();
+    this.reset();
     this.isSubmitting = false;
   }
 
@@ -144,18 +156,18 @@ export class SupportForm extends LitElement {
     if (this.variant !== AppType.CLIENT) return nothing;
 
     return html`
-          <mwc-textfield
-            name="Where_did_you_get_your_access_key"
-            label="Source"
-            helper="Where did you get your access key?"
-            helperPersistent
-            maxLength="225"
-            .disabled="${this.isSubmitting}"
-            required
-            outlined
-            @blur=${this.checkFormValidity}
-          ></mwc-textfield>
-        `;
+      <mwc-textfield
+        name="Where_did_you_get_your_access_key"
+        label="Source"
+        helper="Where did you get your access key?"
+        helperPersistent
+        maxLength="225"
+        .disabled="${this.isSubmitting}"
+        required
+        outlined
+        @blur=${this.checkFormValidity}
+      ></mwc-textfield>
+    `;
   }
 
   render() {
@@ -210,12 +222,14 @@ export class SupportForm extends LitElement {
 
           ${this.renderProgressBar}
 
-          <mwc-button
-            label="Submit"
-            slot="card-actions"
-            .disabled="${!this.isFormValid || this.isSubmitting}"
-            @click=${this.submit}
-          ></mwc-button>
+          <span slot="card-actions">
+            <mwc-button label="Cancel" .disabled="${this.isSubmitting}" @click=${this.cancel}></mwc-button>
+            <mwc-button
+              label="Submit"
+              .disabled="${!this.isFormValid || this.isSubmitting}"
+              @click=${this.submit}
+            ></mwc-button>
+          </span>
         </outline-card>
       </form>
     `;