Refactor UserActionRow component

Aligns the UserActionRow presenter with the UI eng vision.

Bug: none
Change-Id: I8b95902ee93e7ad991951ef72dbec06d351102e9
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6177276
Commit-Queue: Alex Rudenko <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>

Author: OrKoN

front_end/panels/ai_assistance/components/ChatView.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import '../../../ui/components/spinners/spinners.js';
-import './UserActionRow.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
@@ -20,7 +19,7 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import {AgentType, type ContextDetail, type ConversationContext, ErrorType} from '../agents/AiAgent.js';
 
 import stylesRaw from './chatView.css.js';
-import type {UserActionRowProps} from './UserActionRow.js';
+import {UserActionRow} from './UserActionRow.js';
 
 // TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
 const styles = new CSSStyleSheet();
@@ -574,25 +573,6 @@ export class ChatView extends HTMLElement {
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceDynamicSuggestionClicked);
   };
 
-  #renderUserActionRow(rpcId?: Host.AidaClient.RpcGlobalId, suggestions?: [string, ...string[]]): Lit.TemplateResult {
-    // clang-format off
-    return html`<devtools-user-action-row
-      .props=${{
-        showRateButtons: rpcId !== undefined,
-        onFeedbackSubmit: (rating, feedback) => {
-          if (!rpcId) {
-            return;
-          }
-          this.#props.onFeedbackSubmit(rpcId, rating, feedback);
-        },
-        suggestions,
-        handleSuggestionClick: this.#handleSuggestionClick,
-        canShowFeedbackForm: this.#props.canShowFeedbackForm,
-      } as UserActionRowProps}
-      ></devtools-user-action-row>`;
-    // clang-format on
-  }
-
   #renderChangeSummary(): Lit.LitTemplate {
     if (!this.#props.changeSummary) {
       return Lit.nothing;
@@ -894,14 +874,21 @@ export class ChatView extends HTMLElement {
           ? html`<p>${this.#renderTextAsMarkdown(message.answer, { animate: !this.#props.isReadOnly, ref: this.#handleLastAnswerMarkdownViewRef })}</p>`
           : Lit.nothing}
         ${this.#renderError(message)}
-        <div class="actions">
-          ${isLast && this.#props.isLoading
-            ? Lit.nothing
-            : this.#renderUserActionRow(
-                message.rpcId,
-                isLast ? message.suggestions : undefined,
-              )}
-        </div>
+        ${isLast && this.#props.isLoading
+          ? Lit.nothing
+          : html`<devtools-widget class="actions" .widgetConfig=${UI.Widget.widgetConfig(UserActionRow, {
+              showRateButtons: message.rpcId !== undefined,
+              onFeedbackSubmit: (rating: Host.AidaClient.Rating, feedback: string) => {
+                if (!message.rpcId) {
+                  return;
+                }
+                this.#props.onFeedbackSubmit(message.rpcId, rating, feedback);
+              },
+              suggestions: isLast ? message.suggestions : undefined,
+              onSuggestionClick: this.#handleSuggestionClick,
+              canShowFeedbackForm: this.#props.canShowFeedbackForm,
+            })}></devtools-widget>`
+        }
       </section>
     `;
     // clang-format on

front_end/panels/ai_assistance/components/UserActionRow.test.ts

@@ -2,59 +2,97 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
+import * as Host from '../../../core/host/host.js';
 import {
   describeWithEnvironment,
 } from '../../../testing/EnvironmentHelpers.js';
 import * as Freestyler from '../ai_assistance.js';
 
 describeWithEnvironment('UserActionRow', () => {
+  function createComponent(props: Freestyler.UserActionRowProps):
+      [sinon.SinonStub<[Freestyler.ViewInput, Freestyler.ViewOutput, HTMLElement], void>, Freestyler.UserActionRow] {
+    const view = sinon.stub<[Freestyler.ViewInput, Freestyler.ViewOutput, HTMLElement]>();
+    const component = new Freestyler.UserActionRow(undefined, view);
+    Object.assign(component, props);
+    component.wasShown();
+    return [view, component];
+  }
+
   it('should show the feedback form when canShowFeedbackForm is true', async () => {
-    const component = new Freestyler.UserActionRow({
+    const [view] = createComponent({
       showRateButtons: true,
-      onFeedbackSubmit: sinon.stub(),
       canShowFeedbackForm: true,
-      handleSuggestionClick: sinon.stub(),
+      onSuggestionClick: sinon.stub(),
+      onFeedbackSubmit: sinon.stub(),
     });
-    renderElementIntoDOM(component);
-    const button = component.shadowRoot!.querySelector('.rate-buttons devtools-button')! as HTMLElement;
-    button.click();
 
-    assert(component.shadowRoot!.querySelector('.feedback-form'));
+    assert.isTrue(view.calledOnce);
+
+    {
+      const [viewInput] = view.args[0];
+      expect(viewInput.isShowingFeedbackForm).equals(false);
+      viewInput.onRatingClick(Host.AidaClient.Rating.POSITIVE);
+    }
+
+    assert.isTrue(view.calledTwice);
+    {
+      const [viewInput] = view.args[0];
+      expect(viewInput.isShowingFeedbackForm).equals(true);
+    }
   });
 
   it('should not show the feedback form when canShowFeedbackForm is false', async () => {
-    const component = new Freestyler.UserActionRow({
+    const [view] = createComponent({
       showRateButtons: true,
-      onFeedbackSubmit: sinon.stub(),
       canShowFeedbackForm: false,
-      handleSuggestionClick: sinon.stub(),
+      onSuggestionClick: sinon.stub(),
+      onFeedbackSubmit: sinon.stub(),
     });
-    renderElementIntoDOM(component);
 
-    const button = component.shadowRoot!.querySelector('.rate-buttons devtools-button')! as HTMLElement;
-    button.click();
+    assert.isTrue(view.calledOnce);
+
+    {
+      const [viewInput] = view.args[0];
+      expect(viewInput.isShowingFeedbackForm).equals(false);
+      viewInput.onRatingClick(Host.AidaClient.Rating.POSITIVE);
+    }
 
-    assert.notExists(component.shadowRoot!.querySelector('.feedback-form'));
+    assert.isTrue(view.calledTwice);
+    {
+      const [viewInput] = view.args[0];
+      expect(viewInput.isShowingFeedbackForm).equals(false);
+    }
   });
 
   it('should disable the submit button when the input is empty', async () => {
-    const component = new Freestyler.UserActionRow({
+    const [view] = createComponent({
       showRateButtons: true,
-      onFeedbackSubmit: sinon.stub(),
       canShowFeedbackForm: true,
-      handleSuggestionClick: sinon.stub(),
+      onSuggestionClick: sinon.stub(),
+      onFeedbackSubmit: sinon.stub(),
     });
-    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);
+
+    assert.isTrue(view.calledOnce);
+
+    {
+      const [viewInput] = view.args[0];
+      expect(viewInput.isSubmitButtonDisabled).equals(false);
+      viewInput.onRatingClick(Host.AidaClient.Rating.POSITIVE);
+    }
+
+    assert.isTrue(view.calledTwice);
+
+    {
+      const [viewInput] = view.args[0];
+      expect(viewInput.isSubmitButtonDisabled).equals(false);
+      expect(viewInput.isShowingFeedbackForm).equals(true);
+      viewInput.onInputChange('test');
+      viewInput.onSubmit(new SubmitEvent('submit'));
+    }
+
+    {
+      const [viewInput] = view.args[0];
+      expect(viewInput.isSubmitButtonDisabled).equals(true);
+    }
   });
 });