Merge branch 'main' into asgerf/navigate-alerts

Author: asgerf

.github/workflows/main.yml

@@ -22,7 +22,7 @@ jobs:
 
       - uses: actions/setup-node@v1
         with:
-          node-version: '16.14.0'
+          node-version: '16.14.2'
 
       - name: Install dependencies
         working-directory: extensions/ql-vscode
@@ -139,7 +139,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest]
-        version: ['v2.6.3', 'v2.7.6', 'v2.8.5', 'v2.9.4', 'v2.10.5', 'v2.11.0', 'nightly']
+        version: ['v2.7.6', 'v2.8.5', 'v2.9.4', 'v2.10.5', 'v2.11.1', 'nightly']
     env:
       CLI_VERSION: ${{ matrix.version }}
       NIGHTLY_URL: ${{ needs.find-nightly.outputs.url }}

.github/workflows/release.yml

@@ -22,7 +22,7 @@ jobs:
 
       - uses: actions/setup-node@v1
         with:
-          node-version: '16.14.0'
+          node-version: '16.14.2'
 
       - name: Install dependencies
         run: |

CODEOWNERS

@@ -1,4 +1,3 @@
 **/* @github/codeql-vscode-reviewers
-/extensions/ql-vscode/src/remote-queries/ @github/code-scanning-secexp-reviewers
-/extensions/ql-vscode/src/view/remote-queries/ @github/code-scanning-secexp-reviewers
-/extensions/ql-vscode/src/view/variant-analysis/ @github/code-scanning-secexp-reviewers
+**/remote-queries/ @github/code-scanning-secexp-reviewers
+**/variant-analysis/ @github/code-scanning-secexp-reviewers

CONTRIBUTING.md

@@ -91,29 +91,58 @@ Alternatively, you can start Storybook inside of VSCode. There is a VSCode launc
 
 More information about Storybook can be found inside the **Overview** page once you have launched Storybook.
 
-### Running the unit tests and integration tests that do not require a CLI instance
+### Testing
 
-Unit tests and many integration tests do not require a copy of the CodeQL CLI.
+We have several types of tests:
 
-Outside of vscode, in the `extensions/ql-vscode` directory, run:
+* Unit tests: these live in the `tests/pure-tests/` directory
+* View tests: these live in `src/view/variant-analysis/__tests__/`
+* VSCode integration tests: these live in `src/vscode-tests/no-workspace` and `src/vscode-tests/minimal-workspace`
+* CLI integration tests: these live in `src/vscode-tests/cli-integration`
+
+The CLI integration tests require an instance of the CodeQL CLI to run so they will require some extra setup steps. When adding new tests to our test suite, please be mindful of whether they need to be in the cli-integration folder. If the tests don't depend on the CLI, they are better suited to being a VSCode integration test.
+
+#### Running the tests
+
+##### 1. From the terminal
+
+First move into the `extensions/ql-vscode` directory. Then, depending on which tests you want to run, use the appropriate command to run the tests:
+
+* Unit tests: `npm run test:unit`
+* View Tests: `npm test:view`
+* VSCode integration tests: `npm run integration`
+
+###### CLI integration tests
+
+The CLI integration tests require the CodeQL standard libraries in order to run so you will need to clone a local copy of the `github/codeql` repository.
+
+1. Set the `TEST_CODEQL_PATH` environment variable: running from a terminal, you _must_ set the `TEST_CODEQL_PATH` variable to point to a checkout of the `github/codeql` repository. The appropriate CLI version will be downloaded as part of the test.
+
+2. Run your test command:
 
 ```shell
-npm run test && npm run integration
+cd extensions/ql-vscode && npm run cli-integration
 ```
 
-Alternatively, you can run the tests inside of vscode. There are several vscode launch configurations defined that run the unit and integration tests. They can all be found in the debug view.
+##### 2. From VSCode
 
-Only the _With CLI_ tests require a CLI instance to run. See below on how to do that.
+Alternatively, you can run the tests inside of VSCode. There are several VSCode launch configurations defined that run the unit and integration tests.
 
-Running from a terminal, you _must_ set the `TEST_CODEQL_PATH` variable to point to a checkout of the `github/codeql` repository. The appropriate CLI version will be downloaded as part of the test.
+You will need to run tests using a task from inside of VS Code, under the "Run and Debug" view:
 
-### Running the integration tests
+* Unit tests: run the _Launch Unit Tests - React_ task
+* View Tests: run the _Launch Unit Tests_ task
+* VSCode integration tests: run the _Launch Unit Tests - No Workspace_ and _Launch Unit Tests - Minimal Workspace_ tasks
 
-You will need to run CLI tests using a task from inside of VS Code called _Launch Integration Tests - With CLI_.
+###### CLI integration tests
 
 The CLI integration tests require the CodeQL standard libraries in order to run so you will need to clone a local copy of the `github/codeql` repository.
 
-From inside of VSCode, open the `launch.json` file and in the _Launch Integration Tests - With CLI_ task, uncomment the `"${workspaceRoot}/../codeql"` line. If necessary, replace value with a path to your checkout, and then run the task.
+1. Set the `TEST_CODEQL_PATH` environment variable: running from a terminal, you _must_ set the `TEST_CODEQL_PATH` variable to point to a checkout of the `github/codeql` repository. The appropriate CLI version will be downloaded as part of the test.
+
+2. Set the codeql path in VSCode's launch configuration: open `launch.json` and under the _Launch Integration Tests - With CLI_ section, uncomment the `"${workspaceRoot}/../codeql"` line. If you've cloned the `github/codeql` repo to a different path, replace the value with the correct path.
+
+3. Run the VSCode task from the "Run and Debug" view called _Launch Integration Tests - With CLI_.
 
 ## Releasing (write access required)
 
@@ -137,7 +166,7 @@ From inside of VSCode, open the `launch.json` file and in the _Launch Integratio
     git tag v1.3.6
     ```
 
-   If you've accidentally created a badly named tag, you can delete it via 
+   If you've accidentally created a badly named tag, you can delete it via
     ```bash
     git tag -d badly-named-tag
     ```
@@ -148,13 +177,13 @@ From inside of VSCode, open the `launch.json` file and in the _Launch Integratio
     ```bash
     git push upstream refs/tags/v1.3.6
     ```
-   
+
    b. If you're working straight in this repo:
 
     ```bash
     git push origin refs/tags/v1.3.6
-    ``` 
-   
+    ```
+
    This will trigger [a release build](https://github.com/github/vscode-codeql/releases) on Actions.
 
     * **IMPORTANT** Make sure you are on the `main` branch and your local checkout is fully updated when you add the tag.

extensions/ql-vscode/.nvmrc

@@ -1 +1 @@
-v16.14.0
+v16.14.2

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

@@ -8,7 +8,8 @@ const config: StorybookConfig = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/addon-interactions'
+    '@storybook/addon-interactions',
+    './vscode-theme-addon/preset.ts',
   ],
   framework: '@storybook/react',
   core: {

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

@@ -4,8 +4,6 @@ import { action } from '@storybook/addon-actions';
 // Allow all stories/components to use Codicons
 import '@vscode/codicons/dist/codicon.css';
 
-import '../src/stories/vscode-theme.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
@@ -22,16 +20,12 @@ export const parameters = {
     theme: themes.dark,
   },
   backgrounds: {
-    default: 'dark',
-    values: [
-      {
-        name: 'dark',
-        value: '#1e1e1e',
-      },
-    ],
+    // The background is injected by our theme CSS files
+    disable: true,
   }
 };
 
 (window as any).acquireVsCodeApi = () => ({
-  postMessage: action('post-vscode-message')
+  postMessage: action('post-vscode-message'),
+  setState: action('set-vscode-state'),
 });

extensions/ql-vscode/.storybook/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "moduleResolution": "node",
+    "target": "es6",
+    "outDir": "out",
+    "lib": ["ES2021", "dom"],
+    "jsx": "react",
+    "sourceMap": true,
+    "rootDir": "..",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "experimentalDecorators": true,
+    "skipLibCheck": true
+  },
+  "exclude": ["node_modules"]
+}

extensions/ql-vscode/.storybook/vscode-theme-addon/ThemeSelector.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { FunctionComponent, useCallback } from 'react';
+
+import { useGlobals } from '@storybook/api';
+import { IconButton, Icons, WithTooltip, TooltipLinkList, Link, WithHideFn } from '@storybook/components';
+
+import { themeNames, VSCodeTheme } from './theme';
+
+export const ThemeSelector: FunctionComponent = () => {
+  const [{ vscodeTheme }, updateGlobals] = useGlobals();
+
+  const changeTheme = useCallback((theme: VSCodeTheme) => {
+    updateGlobals({
+      vscodeTheme: theme,
+    });
+  }, [updateGlobals]);
+
+  const createLinks = useCallback((onHide: () => void): Link[] => Object.values(VSCodeTheme).map((theme) => ({
+    id: theme,
+    onClick() {
+      changeTheme(theme);
+      onHide();
+    },
+    title: themeNames[theme],
+    value: theme,
+    active: vscodeTheme === theme,
+  })), [vscodeTheme, changeTheme]);
+
+  return (
+    <WithTooltip
+      placement="top"
+      trigger="click"
+      closeOnClick
+      tooltip={({ onHide }: WithHideFn) => (
+        <TooltipLinkList
+          links={createLinks(onHide)}
+        />
+      )}
+    >
+      <IconButton
+        key="theme"
+        title="Change the theme of the preview"
+        active={vscodeTheme !== VSCodeTheme.Dark}
+      >
+        <Icons icon="dashboard" />
+      </IconButton>
+    </WithTooltip>
+  );
+};

extensions/ql-vscode/.storybook/vscode-theme-addon/manager.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { addons, types } from '@storybook/addons';
+import { ThemeSelector } from './ThemeSelector';
+
+const ADDON_ID = 'vscode-theme-addon';
+
+addons.register(ADDON_ID, () => {
+  addons.add(ADDON_ID, {
+    title: 'VSCode Themes',
+    type: types.TOOL,
+    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    render: () => <ThemeSelector />,
+  });
+});