feat(amazonq): automatically scroll to fix section (#6210)

## Problem

Code fix section is not automatically visible after clicking on generate
fix inside code issue detail view.


## Solution

- Changed the behavior of updating the webview so that it doesn't
close/reopen a new panel every time
- Added event listeners to trigger UI updates
- Added scroll into view functionality


---

- Treat all work as PUBLIC. Private `feature/x` branches will not be
squash-merged at release time.
- Your code changes must meet the guidelines in
[CONTRIBUTING.md](https://github.com/aws/aws-toolkit-vscode/blob/master/CONTRIBUTING.md#guidelines).

License: I confirm that my contribution is made under the terms of the
Apache 2.0 license.

Author: ctlai95

packages/amazonq/.changes/next-release/Feature-65d6b661-7ab8-409d-8af8-918db3e69a2d.json

@@ -0,0 +1,4 @@
+{
+	"type": "Feature",
+	"description": "/review: Code fix automatically scrolls into view after generation."
+}

packages/core/src/codewhisperer/views/securityIssue/securityIssueWebview.ts

@@ -24,6 +24,10 @@ import { ExtContext } from '../../../shared/extensions'
 export class SecurityIssueWebview extends VueWebview {
     public static readonly sourcePath: string = 'src/codewhisperer/views/securityIssue/vue/index.js'
     public readonly id = 'aws.codeWhisperer.securityIssue'
+    public readonly onChangeIssue = new vscode.EventEmitter<CodeScanIssue | undefined>()
+    public readonly onChangeFilePath = new vscode.EventEmitter<string | undefined>()
+    public readonly onChangeGenerateFixLoading = new vscode.EventEmitter<boolean>()
+    public readonly onChangeGenerateFixError = new vscode.EventEmitter<boolean>()
 
     private issue: CodeScanIssue | undefined
     private filePath: string | undefined
@@ -40,10 +44,12 @@ export class SecurityIssueWebview extends VueWebview {
 
     public setIssue(issue: CodeScanIssue) {
         this.issue = issue
+        this.onChangeIssue.fire(issue)
     }
 
     public setFilePath(filePath: string) {
         this.filePath = filePath
+        this.onChangeFilePath.fire(filePath)
     }
 
     public applyFix() {
@@ -90,6 +96,7 @@ export class SecurityIssueWebview extends VueWebview {
 
     public setIsGenerateFixLoading(isGenerateFixLoading: boolean) {
         this.isGenerateFixLoading = isGenerateFixLoading
+        this.onChangeGenerateFixLoading.fire(isGenerateFixLoading)
     }
 
     public getIsGenerateFixError() {
@@ -98,6 +105,7 @@ export class SecurityIssueWebview extends VueWebview {
 
     public setIsGenerateFixError(isGenerateFixError: boolean) {
         this.isGenerateFixError = isGenerateFixError
+        this.onChangeGenerateFixError.fire(isGenerateFixError)
     }
 
     public generateFix() {
@@ -189,12 +197,7 @@ const Panel = VueWebview.compilePanel(SecurityIssueWebview)
 let activePanel: InstanceType<typeof Panel> | undefined
 
 export async function showSecurityIssueWebview(ctx: vscode.ExtensionContext, issue: CodeScanIssue, filePath: string) {
-    const previousPanel = activePanel
-    const previousId = previousPanel?.server?.getIssue()?.findingId
-    if (previousPanel && previousId) {
-        previousPanel.server.closeWebview(previousId)
-    }
-    activePanel = new Panel(ctx)
+    activePanel ??= new Panel(ctx)
     activePanel.server.setIssue(issue)
     activePanel.server.setFilePath(filePath)
     activePanel.server.setIsGenerateFixLoading(false)

packages/core/src/codewhisperer/views/securityIssue/vue/root.vue

@@ -47,7 +47,10 @@
             </div>
         </div>
 
-        <div v-if="isFixAvailable || isGenerateFixLoading || isGenerateFixError || isFixDescriptionAvailable">
+        <div
+            v-if="isFixAvailable || isGenerateFixLoading || isGenerateFixError || isFixDescriptionAvailable"
+            ref="codeFixSection"
+        >
             <hr />
 
             <h3>Suggested code fix preview</h3>
@@ -57,7 +60,7 @@
             </pre>
             <div class="code-block">
                 <span v-if="isFixAvailable" v-html="suggestedFixHtml"></span>
-                <div v-if="isFixAvailable" class="code-diff-actions">
+                <div v-if="isFixAvailable" class="code-diff-actions" ref="codeFixAction">
                     <button class="code-diff-action-button" @click="copyFixedCode">
                         <span class="icon icon-md icon-vscode-copy"></span> Copy
                     </button>
@@ -201,6 +204,7 @@ export default defineComponent({
     },
     created() {
         this.getData()
+        this.setupEventListeners()
     },
     beforeMount() {
         this.getData()
@@ -223,6 +227,32 @@ export default defineComponent({
             const fixedCode = await client.getFixedCode()
             this.updateFixedCode(fixedCode)
         },
+        setupEventListeners() {
+            client.onChangeIssue(async (issue) => {
+                if (issue) {
+                    this.updateFromIssue(issue)
+                }
+                const fixedCode = await client.getFixedCode()
+                this.updateFixedCode(fixedCode)
+                this.scrollTo('codeFixActions')
+            })
+            client.onChangeFilePath(async (filePath) => {
+                const relativePath = await client.getRelativePath()
+                this.updateRelativePath(relativePath)
+
+                const languageId = await client.getLanguageId()
+                if (languageId) {
+                    this.updateLanguageId(languageId)
+                }
+            })
+            client.onChangeGenerateFixLoading((isGenerateFixLoading) => {
+                this.isGenerateFixLoading = isGenerateFixLoading
+                this.scrollTo('codeFixSection')
+            })
+            client.onChangeGenerateFixError((isGenerateFixError) => {
+                this.isGenerateFixError = isGenerateFixError
+            })
+        },
         updateRelativePath(relativePath: string) {
             this.relativePath = relativePath
         },
@@ -339,6 +369,9 @@ ${this.fixedCode}
             }
             return doc.body.innerHTML
         },
+        scrollTo(refName: string) {
+            this.$nextTick(() => this.$refs?.[refName]?.scrollIntoView({ behavior: 'smooth' }))
+        },
     },
     computed: {
         severityImage() {