Add title to model alerts view (#3465)

Author: shati-patel

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

@@ -14,6 +14,7 @@ import type { Method } from "../model-editor/method";
 import type { ModeledMethod } from "../model-editor/modeled-method";
 import type {
   MethodModelingPanelViewState,
+  ModelAlertsViewState,
   ModelEditorViewState,
 } from "../model-editor/shared/view-state";
 import type { Mode } from "../model-editor/shared/mode";
@@ -726,10 +727,11 @@ export type ToMethodModelingMessage =
   | SetInProgressMessage
   | SetProcessedByAutoModelMessage;
 
-interface SetModelAlertsMessage {
-  t: "setModelAlerts";
+interface SetModelAlertsViewStateMessage {
+  t: "setModelAlertsViewState";
+  viewState: ModelAlertsViewState;
 }
 
-export type ToModelAlertsMessage = SetModelAlertsMessage;
+export type ToModelAlertsMessage = SetModelAlertsViewStateMessage;
 
 export type FromModelAlertsMessage = CommonFromViewMessages;

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

@@ -14,6 +14,7 @@ import { showAndLogExceptionWithTelemetry } from "../../common/logging";
 import type { ModelingEvents } from "../modeling-events";
 import type { ModelingStore } from "../modeling-store";
 import type { DatabaseItem } from "../../databases/local-databases";
+import type { ExtensionPack } from "../shared/extension-pack";
 
 export class ModelAlertsView extends AbstractWebview<
   ToModelAlertsMessage,
@@ -26,6 +27,7 @@ export class ModelAlertsView extends AbstractWebview<
     private readonly modelingEvents: ModelingEvents,
     private readonly modelingStore: ModelingStore,
     private readonly dbItem: DatabaseItem,
+    private readonly extensionPack: ExtensionPack,
   ) {
     super(app);
 
@@ -37,6 +39,7 @@ export class ModelAlertsView extends AbstractWebview<
     panel.reveal(undefined, true);
 
     await this.waitForPanelLoaded();
+    await this.setViewState();
   }
 
   protected async getPanelConfig(): Promise<WebviewPanelConfig> {
@@ -75,6 +78,15 @@ export class ModelAlertsView extends AbstractWebview<
     }
   }
 
+  private async setViewState(): Promise<void> {
+    await this.postMessage({
+      t: "setModelAlertsViewState",
+      viewState: {
+        title: this.extensionPack.name,
+      },
+    });
+  }
+
   public async focusView(): Promise<void> {
     this.panel?.reveal();
   }

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

@@ -132,6 +132,7 @@ export class ModelEditorView extends AbstractWebview<
       this.variantAnalysisManager,
       databaseItem,
       language,
+      this.extensionPack,
       this.updateModelEvaluationRun.bind(this),
     );
     this.push(this.modelEvaluator);

extensions/ql-vscode/src/model-editor/model-evaluator.ts

@@ -19,6 +19,7 @@ import { CancellationTokenSource } from "vscode";
 import type { QlPackDetails } from "../variant-analysis/ql-pack-details";
 import type { App } from "../common/app";
 import { ModelAlertsView } from "./model-alerts/model-alerts-view";
+import type { ExtensionPack } from "./shared/extension-pack";
 
 export class ModelEvaluator extends DisposableObject {
   // Cancellation token source to allow cancelling of the current run
@@ -34,6 +35,7 @@ export class ModelEvaluator extends DisposableObject {
     private readonly variantAnalysisManager: VariantAnalysisManager,
     private readonly dbItem: DatabaseItem,
     private readonly language: QueryLanguage,
+    private readonly extensionPack: ExtensionPack,
     private readonly updateView: (
       run: ModelEvaluationRunState,
     ) => Promise<void>,
@@ -120,6 +122,7 @@ export class ModelEvaluator extends DisposableObject {
         this.modelingEvents,
         this.modelingStore,
         this.dbItem,
+        this.extensionPack,
       );
       await view.showView();
     }

extensions/ql-vscode/src/model-editor/shared/view-state.ts

@@ -19,3 +19,7 @@ export interface MethodModelingPanelViewState {
   language: QueryLanguage | undefined;
   modelConfig: ModelConfig;
 }
+
+export interface ModelAlertsViewState {
+  title: string;
+}

extensions/ql-vscode/src/stories/model-alerts/ModelAlerts.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryFn } from "@storybook/react";
+
+import { ModelAlerts as ModelAlertsComponent } from "../../view/model-alerts/ModelAlerts";
+
+export default {
+  title: "CodeQL Model Alerts/CodeQL Model Alerts",
+  component: ModelAlertsComponent,
+} as Meta<typeof ModelAlertsComponent>;
+
+const Template: StoryFn<typeof ModelAlertsComponent> = (args) => (
+  <ModelAlertsComponent {...args} />
+);
+
+export const ModelAlerts = Template.bind({});
+ModelAlerts.args = {
+  initialViewState: { title: "codeql/sql2o-models" },
+};

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

@@ -1,10 +1,27 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+import { ModelAlertsHeader } from "./ModelAlertsHeader";
+import type { ModelAlertsViewState } from "../../model-editor/shared/view-state";
+import type { ToModelAlertsMessage } from "../../common/interface-types";
+
+type Props = {
+  initialViewState?: ModelAlertsViewState;
+};
+
+export function ModelAlerts({ initialViewState }: Props): React.JSX.Element {
+  const [viewState, setViewState] = useState<ModelAlertsViewState | undefined>(
+    initialViewState,
+  );
 
-export function ModelAlerts(): React.JSX.Element {
   useEffect(() => {
     const listener = (evt: MessageEvent) => {
       if (evt.origin === window.origin) {
-        // TODO: handle messages
+        const msg: ToModelAlertsMessage = evt.data;
+        switch (msg.t) {
+          case "setModelAlertsViewState": {
+            setViewState(msg.viewState);
+            break;
+          }
+        }
       } else {
         // sanitize origin
         const origin = evt.origin.replace(/\n|\r/g, "");
@@ -18,5 +35,9 @@ export function ModelAlerts(): React.JSX.Element {
     };
   }, []);
 
-  return <>hello world</>;
+  if (viewState === undefined) {
+    return <></>;
+  }
+
+  return <ModelAlertsHeader viewState={viewState}></ModelAlertsHeader>;
 }

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

@@ -0,0 +1,8 @@
+import type { ModelAlertsViewState } from "../../model-editor/shared/view-state";
+import { ViewTitle } from "../common";
+
+type Props = { viewState: ModelAlertsViewState };
+
+export const ModelAlertsHeader = ({ viewState }: Props) => {
+  return <ViewTitle>Model evaluation results for {viewState.title}</ViewTitle>;
+};

extensions/ql-vscode/test/vscode-tests/activated-extension/model-editor/model-evaluator.test.ts

@@ -7,6 +7,7 @@ import type { ModelEvaluationRun } from "../../../../src/model-editor/model-eval
 import { ModelEvaluator } from "../../../../src/model-editor/model-evaluator";
 import type { ModelingEvents } from "../../../../src/model-editor/modeling-events";
 import type { ModelingStore } from "../../../../src/model-editor/modeling-store";
+import type { ExtensionPack } from "../../../../src/model-editor/shared/extension-pack";
 import type { VariantAnalysisManager } from "../../../../src/variant-analysis/variant-analysis-manager";
 import { createMockLogger } from "../../../__mocks__/loggerMock";
 import { createMockModelingEvents } from "../../../__mocks__/model-editor/modelingEventsMock";
@@ -23,6 +24,7 @@ describe("Model Evaluator", () => {
   let variantAnalysisManager: VariantAnalysisManager;
   let dbItem: DatabaseItem;
   let language: QueryLanguage;
+  let extensionPack: ExtensionPack;
   let updateView: jest.Mock;
   let getModelEvaluationRunMock = jest.fn();
 
@@ -40,6 +42,7 @@ describe("Model Evaluator", () => {
     });
     dbItem = mockedObject<DatabaseItem>({});
     language = QueryLanguage.Java;
+    extensionPack = mockedObject<ExtensionPack>({});
     updateView = jest.fn();
 
     modelEvaluator = new ModelEvaluator(
@@ -50,6 +53,7 @@ describe("Model Evaluator", () => {
       variantAnalysisManager,
       dbItem,
       language,
+      extensionPack,
       updateView,
     );
   });