Add "view" button in model alerts view (#3514)

Author: shati-patel

extensions/ql-vscode/src/common/interface-types.ts

@@ -755,4 +755,5 @@ export type FromModelAlertsMessage =
   | CommonFromViewMessages
   | OpenModelPackMessage
   | OpenActionsLogsMessage
-  | StopEvaluationRunMessage;
+  | StopEvaluationRunMessage
+  | RevealInEditorMessage;

extensions/ql-vscode/src/model-editor/model-alerts/model-alerts-view.ts

@@ -20,6 +20,7 @@ import type {
   VariantAnalysisScannedRepositoryResult,
 } from "../../variant-analysis/shared/variant-analysis";
 import type { AppEvent, AppEventEmitter } from "../../common/events";
+import type { MethodSignature } from "../method";
 
 export class ModelAlertsView extends AbstractWebview<
   ToModelAlertsMessage,
@@ -102,6 +103,9 @@ export class ModelAlertsView extends AbstractWebview<
       case "stopEvaluationRun":
         await this.stopEvaluationRun();
         break;
+      case "revealInModelEditor":
+        await this.revealInModelEditor(msg.method);
+        break;
       default:
         assertNever(msg);
     }
@@ -180,4 +184,15 @@ export class ModelAlertsView extends AbstractWebview<
   private async stopEvaluationRun() {
     this.onEvaluationRunStopClickedEventEmitter.fire();
   }
+
+  private async revealInModelEditor(method: MethodSignature): Promise<void> {
+    if (!this.dbItem) {
+      return;
+    }
+
+    this.modelingEvents.fireRevealInModelEditorEvent(
+      this.dbItem.databaseUri.toString(),
+      method,
+    );
+  }
 }

extensions/ql-vscode/src/view/model-alerts/ModelAlertsResults.tsx

@@ -1,12 +1,13 @@
 import { styled } from "styled-components";
 import type { ModelAlerts } from "../../model-editor/model-alerts/model-alerts";
 import { Codicon } from "../common";
-import { useState } from "react";
-import { VSCodeBadge } from "@vscode/webview-ui-toolkit/react";
+import { useCallback, useState } from "react";
+import { VSCodeBadge, VSCodeLink } from "@vscode/webview-ui-toolkit/react";
 import { formatDecimal } from "../../common/number";
 import AnalysisAlertResult from "../variant-analysis/AnalysisAlertResult";
 import { MethodName } from "../model-editor/MethodName";
 import { ModelDetails } from "./ModelDetails";
+import { vscode } from "../vscode-api";
 
 // This will ensure that these icons have a className which we can use in the TitleContainer
 const ExpandCollapseCodicon = styled(Codicon)``;
@@ -36,6 +37,11 @@ const ModelTypeText = styled.span`
   color: var(--vscode-descriptionForeground);
 `;
 
+const ViewLink = styled(VSCodeLink)`
+  white-space: nowrap;
+  padding: 0 0 0.25em 1em;
+`;
+
 const ModelDetailsContainer = styled.div`
   padding-top: 10px;
 `;
@@ -59,6 +65,14 @@ export const ModelAlertsResults = ({
   modelAlerts,
 }: Props): React.JSX.Element => {
   const [isExpanded, setExpanded] = useState(true);
+  const viewInModelEditor = useCallback(
+    () =>
+      vscode.postMessage({
+        t: "revealInModelEditor",
+        method: modelAlerts.model,
+      }),
+    [modelAlerts.model],
+  );
   return (
     <div>
       <TitleContainer onClick={() => setExpanded(!isExpanded)}>
@@ -71,6 +85,7 @@ export const ModelAlertsResults = ({
         <VSCodeBadge>{formatDecimal(modelAlerts.alerts.length)}</VSCodeBadge>
         <MethodName {...modelAlerts.model}></MethodName>
         <ModelTypeText>{modelAlerts.model.type}</ModelTypeText>
+        <ViewLink onClick={viewInModelEditor}>View</ViewLink>
       </TitleContainer>
       {isExpanded && (
         <>