[AIAssistant] Add change workspace button to "Changes summary"

Also adds dummy dialog on button click

Screenshots: https://imgur.com/a/93tocHB

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

Author: wolfib

front_end/panels/ai_assistance/components/ChatView.ts

@@ -196,6 +196,18 @@ const UIStringsNotTranslate = {
    *@description Title for the x-link which wraps the image input rendered in chat messages.
    */
   openImageInNewTab: 'Open image in a new tab',
+  /**
+   *@description Button text to change the selected workspace
+   */
+  change: 'Change',
+  /**
+   *@description Button text while data is being loaded
+   */
+  loading: 'Loading...',
+  /**
+   *@description Label for the selected workspace/folder
+   */
+  selectedFolder: 'Selected folder:'
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/components/ChatView.ts', UIStrings);
@@ -538,6 +550,12 @@ export class ChatView extends HTMLElement {
   }
 }
 
+async function onChangeWorkspaceClick(): Promise<void> {
+  await UI.UIUtils.ConfirmDialog.show(
+      'Changing workspace is not implemented yet', 'Change workspace', undefined,
+      {jslogContext: 'change-workspace-dialog'});
+}
+
 function renderChangeSummary({
   changeSummary,
   patchSuggestion,
@@ -570,14 +588,24 @@ function renderChangeSummary({
         .displayNotice=${true}
       ></devtools-code-block>
       <div class="workspace">
+        <div class="change-workspace">
+          <div class="selected-folder">
+            ${lockedString(UIStringsNotTranslate.selectedFolder)} ${projectName}
+          </div>
+          <devtools-button
+            @click=${onChangeWorkspaceClick}
+            .jslogContext=${'change-workspace'}
+            .variant=${Buttons.Button.Variant.TEXT}>
+              ${lockedString(UIStringsNotTranslate.change)}
+          </devtools-button>
+        </div>
         <devtools-button
           class='apply-to-workspace'
           @click=${onApplyToWorkspace}
           .jslogContext=${'stage-to-workspace'}
           .variant=${Buttons.Button.Variant.OUTLINED}>
-            ${!patchSuggestionLoading ? lockedString(UIStringsNotTranslate.applyToWorkspace) : 'Loading...'}
+            ${!patchSuggestionLoading ? lockedString(UIStringsNotTranslate.applyToWorkspace) : lockedString(UIStringsNotTranslate.loading)}
         </devtools-button>
-        <div>Selected folder: ${projectName}</div>
       </div>
       ${patchSuggestion ? html`<div class="patch-tmp-message">
         ${patchSuggestion}

front_end/panels/ai_assistance/components/chatView.css

@@ -790,7 +790,16 @@ main {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    padding: var(--sys-size-4);
+    margin: var(--sys-size-5);
+  }
+
+  .selected-folder {
+    margin: var(--sys-size-3) var(--sys-size-3) 0 0;
+  }
+
+  .change-workspace {
+    display: flex;
+    flex-direction: row;
   }
 
   .patch-tmp-message {

front_end/ui/visual_logging/KnownContextValues.ts

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