[Freestyler] Disable submit button when input is empty

Bug: https://crbug.com/374662092
Change-Id: Iecc2c6648c696f8787b8c0457e960ea39278ed66
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5942732
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Commit-Queue: Ergün Erdoğmuş <[email protected]>
Auto-Submit: Wolfgang Beyer <[email protected]>

Author: wolfib

front_end/panels/freestyler/components/ProvideFeedback.test.ts

@@ -17,6 +17,7 @@ describeWithEnvironment('ProvideFeedback', () => {
 
     assert(component.shadowRoot!.querySelector('.feedback-form'));
   });
+
   it('should not show the feedback form when canShowFeedbackForm is false', async () => {
     const component = new Freestyler.ProvideFeedback({onFeedbackSubmit: sinon.stub(), canShowFeedbackForm: false});
     renderElementIntoDOM(component);
@@ -26,4 +27,19 @@ describeWithEnvironment('ProvideFeedback', () => {
 
     assert.notExists(component.shadowRoot!.querySelector('.feedback-form'));
   });
+
+  it('should disable the submit button when the input is empty', async () => {
+    const component = new Freestyler.ProvideFeedback({onFeedbackSubmit: sinon.stub(), canShowFeedbackForm: true});
+    renderElementIntoDOM(component);
+    const button = component.shadowRoot!.querySelector('.rate-buttons devtools-button')! as HTMLElement;
+    button.click();
+
+    assert(component.shadowRoot!.querySelector('.feedback-form'));
+    const submitButton = component.shadowRoot!.querySelector('[aria-label="Submit"]') as HTMLButtonElement;
+    assert.isTrue(submitButton?.disabled);
+    const inputField = component.shadowRoot!.querySelector('.feedback-form input')! as HTMLInputElement;
+    inputField.value = 'test';
+    inputField.dispatchEvent(new Event('input'));
+    assert.isFalse(submitButton?.disabled);
+  });
 });

front_end/panels/freestyler/components/ProvideFeedback.ts

@@ -71,6 +71,7 @@ export class ProvideFeedback extends HTMLElement {
   #props: ProvideFeedbackProps;
   #isShowingFeedbackForm = false;
   #currentRating?: Host.AidaClient.Rating;
+  #isSubmitButtonDisabled = true;
 
   constructor(props: ProvideFeedbackProps) {
     super();
@@ -164,6 +165,15 @@ export class ProvideFeedback extends HTMLElement {
     // clang-format on
   }
 
+  #handleInputChange = (event: KeyboardEvent): void => {
+    const value = (event.target as HTMLInputElement).value;
+    const disableSubmit = !value;
+    if (disableSubmit !== this.#isSubmitButtonDisabled) {
+      this.#isSubmitButtonDisabled = disableSubmit;
+      this.#render();
+    }
+  };
+
   #renderFeedbackForm(): LitHtml.LitTemplate {
     // clang-format off
     return html`
@@ -189,6 +199,7 @@ export class ProvideFeedback extends HTMLElement {
         <input
           type="text"
           class="devtools-text-input feedback-input"
+          @input=${this.#handleInputChange}
           placeholder=${lockedString(
            UIStringsNotTranslate.provideFeedbackPlaceholder,
           )}
@@ -202,6 +213,7 @@ export class ProvideFeedback extends HTMLElement {
         .data=${
           {
               type: 'submit',
+              disabled: this.#isSubmitButtonDisabled,
               variant: Buttons.Button.Variant.OUTLINED,
               size: Buttons.Button.Size.SMALL,
               title: lockedString(UIStringsNotTranslate.submit),