Merge branch 'main' into robertbrignull/always_trigger_monitoring

Author: robertbrignull

extensions/ql-vscode/.eslintignore

@@ -0,0 +1,6 @@
+.vscode-test/
+node_modules/
+out/
+
+# Include the Storybook config
+!.storybook

extensions/ql-vscode/.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 2018,
     sourceType: "module",
-    project: ["tsconfig.json", "./src/**/tsconfig.json", "./gulpfile.ts/tsconfig.json"],
+    project: ["tsconfig.json", "./src/**/tsconfig.json", "./gulpfile.ts/tsconfig.json", "./scripts/tsconfig.json", "./.storybook/tsconfig.json"],
   },
   plugins: ["@typescript-eslint"],
   env: {

extensions/ql-vscode/.storybook/preview.ts

@@ -7,7 +7,7 @@ import '@vscode/codicons/dist/codicon.css';
 // https://storybook.js.org/docs/react/configure/overview#configure-story-rendering
 export const parameters = {
   // All props starting with `on` will automatically receive an action as a prop
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   // All props matching these names will automatically get the correct control
   controls: {
     matchers: {

extensions/ql-vscode/.storybook/vscode-theme-addon/preset.ts

@@ -1,7 +1,7 @@
 export function config(entry = []) {
-  return [...entry, require.resolve("./preview.ts")];
+  return [...entry, require.resolve('./preview.ts')];
 }
 
 export function managerEntries(entry = []) {
-  return [...entry, require.resolve("./manager.tsx")];
+  return [...entry, require.resolve('./manager.tsx')];
 }

extensions/ql-vscode/.storybook/vscode-theme-addon/theme.ts

@@ -6,4 +6,4 @@ export enum VSCodeTheme {
 export const themeNames: { [key in VSCodeTheme]: string } = {
   [VSCodeTheme.Dark]: 'Dark+',
   [VSCodeTheme.Light]: 'Light+',
-}
+};

extensions/ql-vscode/.storybook/vscode-theme-addon/withTheme.ts

@@ -4,9 +4,11 @@ import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from
 import { VSCodeTheme } from './theme';
 
 const themeFiles: { [key in VSCodeTheme]: string } = {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
   [VSCodeTheme.Dark]: require('!file-loader?modules!../../src/stories/vscode-theme-dark.css').default,
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
   [VSCodeTheme.Light]: require('!file-loader?modules!../../src/stories/vscode-theme-light.css').default,
-}
+};
 
 export const withTheme = (
   StoryFn: StoryFunction<AnyFramework>,
@@ -18,7 +20,7 @@ export const withTheme = (
     const styleSelectorId =
       context.viewMode === 'docs'
         ? `addon-vscode-theme-docs-${context.id}`
-        : `addon-vscode-theme-theme`;
+        : 'addon-vscode-theme-theme';
 
     const theme = Object.values(VSCodeTheme).includes(vscodeTheme) ? vscodeTheme as VSCodeTheme : VSCodeTheme.Dark;
 

extensions/ql-vscode/package.json

@@ -37,6 +37,7 @@
     "onLanguage:ql",
     "onLanguage:ql-summary",
     "onView:codeQLDatabases",
+    "onView:codeQLDatabasesExperimental",
     "onView:codeQLQueryHistory",
     "onView:codeQLAstViewer",
     "onView:codeQLEvalLogViewer",
@@ -1208,6 +1209,11 @@
           "id": "codeQLDatabases",
           "name": "Databases"
         },
+        {
+          "id": "codeQLDatabasesExperimental",
+          "name": "Databases",
+          "when": "config.codeQL.canary && config.codeQL.newQueryRunExperience"
+        },
         {
           "id": "codeQLQueryHistory",
           "name": "Query History"
@@ -1254,8 +1260,8 @@
     "integration": "node ./out/vscode-tests/run-integration-tests.js no-workspace,minimal-workspace",
     "cli-integration": "npm run preintegration && node ./out/vscode-tests/run-integration-tests.js cli-integration",
     "update-vscode": "node ./node_modules/vscode/bin/install",
-    "format": "tsfmt -r && eslint src test --ext .ts,.tsx --fix",
-    "lint": "eslint src test --ext .ts,.tsx --max-warnings=0",
+    "format": "tsfmt -r && eslint . --ext .ts,.tsx --fix",
+    "lint": "eslint . --ext .ts,.tsx --max-warnings=0",
     "format-staged": "lint-staged",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",

extensions/ql-vscode/scripts/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "../tsconfig.json",
+  "include": ["**/*.ts"],
+  "exclude": []
+}

extensions/ql-vscode/src/abstract-webview.ts

@@ -5,7 +5,7 @@ import {
   ViewColumn,
   Uri,
   WebviewPanelOptions,
-  WebviewOptions
+  WebviewOptions,
 } from 'vscode';
 import * as path from 'path';
 
@@ -27,6 +27,8 @@ export abstract class AbstractWebview<ToMessage extends WebviewMessage, FromMess
   protected panelLoaded = false;
   protected panelLoadedCallBacks: (() => void)[] = [];
 
+  private panelResolves?: Array<(panel: WebviewPanel) => void>;
+
   constructor(
     protected readonly ctx: ExtensionContext
   ) {
@@ -35,20 +37,36 @@ export abstract class AbstractWebview<ToMessage extends WebviewMessage, FromMess
 
   public async restoreView(panel: WebviewPanel): Promise<void> {
     this.panel = panel;
-    this.setupPanel(panel);
+    const config = await this.getPanelConfig();
+    this.setupPanel(panel, config);
   }
 
   protected get isShowingPanel() {
     return !!this.panel;
   }
 
-  protected getPanel(): WebviewPanel {
+  protected async getPanel(): Promise<WebviewPanel> {
     if (this.panel == undefined) {
       const { ctx } = this;
 
-      const config = this.getPanelConfig();
+      // This is an async method, so in theory this method can be called concurrently. To ensure that we don't
+      // create two panels, we use a promise that resolves when the panel is created. This way, if the panel is
+      // being created, the promise will resolve when it is done.
+      if (this.panelResolves !== undefined) {
+        return new Promise((resolve) => {
+          if (this.panel !== undefined) {
+            resolve(this.panel);
+            return;
+          }
+
+          this.panelResolves?.push(resolve);
+        });
+      }
+      this.panelResolves = [];
+
+      const config = await this.getPanelConfig();
 
-      this.panel = Window.createWebviewPanel(
+      const panel = Window.createWebviewPanel(
         config.viewId,
         config.title,
         { viewColumn: config.viewColumn, preserveFocus: config.preserveFocus },
@@ -64,14 +82,17 @@ export abstract class AbstractWebview<ToMessage extends WebviewMessage, FromMess
           ],
         }
       );
-      this.setupPanel(this.panel);
+      this.panel = panel;
+
+      this.setupPanel(panel, config);
+
+      this.panelResolves.forEach((resolve) => resolve(panel));
+      this.panelResolves = undefined;
     }
     return this.panel;
   }
 
-  protected setupPanel(panel: WebviewPanel): void {
-    const config = this.getPanelConfig();
-
+  protected setupPanel(panel: WebviewPanel, config: WebviewPanelConfig): void {
     this.push(
       panel.onDidDispose(
         () => {
@@ -101,7 +122,7 @@ export abstract class AbstractWebview<ToMessage extends WebviewMessage, FromMess
     );
   }
 
-  protected abstract getPanelConfig(): WebviewPanelConfig;
+  protected abstract getPanelConfig(): WebviewPanelConfig | Promise<WebviewPanelConfig>;
 
   protected abstract onPanelDispose(): void;
 
@@ -123,8 +144,9 @@ export abstract class AbstractWebview<ToMessage extends WebviewMessage, FromMess
     this.panelLoadedCallBacks = [];
   }
 
-  protected postMessage(msg: ToMessage): Thenable<boolean> {
-    return this.getPanel().webview.postMessage(msg);
+  protected async postMessage(msg: ToMessage): Promise<boolean> {
+    const panel = await this.getPanel();
+    return panel.webview.postMessage(msg);
   }
 
   public dispose(disposeHandler?: DisposeHandler) {

extensions/ql-vscode/src/compare/compare-view.ts

@@ -46,7 +46,8 @@ export class CompareView extends AbstractWebview<ToCompareViewMessage, FromCompa
     selectedResultSetName?: string
   ) {
     this.comparePair = { from, to };
-    this.getPanel().reveal(undefined, true);
+    const panel = await this.getPanel();
+    panel.reveal(undefined, true);
 
     await this.waitForPanelLoaded();
     const [