[RPP][AI] Add error state for when generation failed and rename setting

video: http://screencast/cast/NTE5NTMyODgxMzc5MzI4MHw3NTMzNGFmNy1mNQ

I think at this point we have so many button states that we should create an enum with states and track the current state.
I started doing it, but realised it won't be super straightforward so let's refactor it later.

Also changing the setting name.

Bug: 405354265
Change-Id: I203e80d86ac6788949a813b5d2f91eb3c0e2cfb7
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6403233
Commit-Queue: Jack Franklin <[email protected]>
Auto-Submit: Alina Varkki <[email protected]>
Commit-Queue: Alina Varkki <[email protected]>
Reviewed-by: Jack Franklin <[email protected]>

Author: AlinaVarkki

front_end/panels/settings/AISettingsTab.test.ts

@@ -92,7 +92,7 @@ describeWithEnvironment('AISettingsTab', () => {
 
     const settingCards = view.shadowRoot.querySelectorAll('.setting-card h2');
     const settingNames = Array.from(settingCards).map(element => element.textContent);
-    assert.deepEqual(settingNames, ['Console Insights', 'AI assistance', 'AI annotations']);
+    assert.deepEqual(settingNames, ['Console Insights', 'AI assistance', 'Auto annotations']);
 
     const settingCardDesc = view.shadowRoot.querySelectorAll('.setting-description');
     assert.strictEqual(settingCardDesc[0].textContent, 'Helps you understand and fix console warnings and errors');

front_end/panels/settings/AISettingsTab.ts

@@ -334,7 +334,7 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
 
     if (this.#aiAnnotationsSetting) {
       const aiAssistanceData: AiSettingParams = {
-        settingName: i18n.i18n.lockedString('AI annotations'),
+        settingName: i18n.i18n.lockedString('Auto annotations'),
         iconName: 'pen-spark',
         settingDescription: i18nString(UIStrings.getAIAnnotationsSuggestions),
         enableSettingText: i18nString(UIStrings.enableAiSuggestedAnnotations),

front_end/panels/timeline/overlays/components/EntryLabelOverlay.ts

@@ -90,6 +90,10 @@ const UIStringsNotTranslate = {
    *@description Text shown when the AI-powered annotation is being generated.
    */
   generatingLabel: 'Generating label',
+  /**
+   *@description Text shown when the generation of the AI-powered annotation failed.
+   */
+  generationFailed: 'Generation failed',
   /**
    *@description First disclaimer item text for the fre dialog - AI won't always get it right.
    */
@@ -191,6 +195,8 @@ export class EntryLabelOverlay extends HTMLElement {
   #inAIConsentDialogFlow = false;
   // Keep track of the AI label loading state to render a loading component if the label is being generated
   #isAILabelLoading = false;
+  // Set to true when the generation of an AI label failed so we know when to display the 'generation failed' disclaimer
+  #isAILabelGenerationFailed = false;
   /**
    * The entry label overlay consists of 3 parts - the label part with the label string inside,
    * the line connecting the label to the entry, and a black box around an entry to highlight the entry with a label.
@@ -518,7 +524,9 @@ export class EntryLabelOverlay extends HTMLElement {
         // Trigger a re-render to hide the AI Button and display the generated label.
         this.#render();
       } catch {
-        // TODO(b/405354265): handle the error state
+        this.#isAILabelLoading = false;
+        this.#isAILabelGenerationFailed = true;
+        void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
       }
     } else {
       this.#isAILabelLoading = false;
@@ -657,6 +665,24 @@ export class EntryLabelOverlay extends HTMLElement {
       // clang-format on
     }
 
+    if (this.#isAILabelGenerationFailed) {
+      // Only show the error message on the first component render render after the failure.
+      this.#isAILabelGenerationFailed = false;
+      // clang-format off
+      return html`
+        <span
+          class="ai-label-error">
+          <devtools-icon
+            class="warning"
+            .name=${'warning'}
+            .data=${{
+            iconName: 'warning', color: 'var(--ref-palette-error50)', width: '20px'}}>
+          </devtools-icon>
+          <span class="generate-label-text">${lockedString(UIStringsNotTranslate.generationFailed)}</span>
+        </span>
+      `;
+      // clang-format on
+    }
     // clang-format off
     return html`
       <!-- 'preventDefault' on the AI label button to prevent the label removal on blur  -->

front_end/panels/timeline/overlays/components/entryLabelOverlay.css

@@ -18,7 +18,8 @@
 
 .ai-label-button-wrapper,
 .ai-label-disabled-button-wrapper,
-.ai-label-loading {
+.ai-label-loading,
+.ai-label-error {
   /* position the button wrapper on the very right of the label */
   position: absolute;
   left: 100%;
@@ -49,7 +50,8 @@
   }
 }
 
-.ai-label-loading {
+.ai-label-loading,
+.ai-label-error {
   gap: var(--sys-size-6);
   padding: var(--sys-size-5) var(--sys-size-8);
 }

front_end/ui/visual_logging/KnownContextValues.ts

@@ -673,6 +673,8 @@ export const knownContextValues = new Set([
   'caret-color',
   'category',
   'change',
+  'change-workspace',
+  'change-workspace-dialog',
   'changes',
   'changes.changes',
   'changes.copy',