Add mock VSCode API in Storybook

This allows us to add a story for the "main" remote queries view.
2022-09-07 14:35:03 +02:00
parent 6018ebaca9
commit 2211e2317d
6 changed files with 15722 additions and 2 deletions
--- a/.gitattributes
+++ b/.gitattributes
@@ -18,4 +18,8 @@ yarn.lock                    merge=binary
 # https://mirrors.edge.kernel.org/pub/software/scm/git/docs/gitattributes.html
 # suggests that this might interleave lines arbitrarily, but empirically
 # it keeps added chunks contiguous
-CHANGELOG.md                merge=union
+CHANGELOG.md                merge=union
+
+# Mark some JSON files containing test data as generated so they are not included
+# as part of diffs or language statistics.
+extensions/ql-vscode/src/stories/remote-queries/data/*.json     linguist-generated
--- a/extensions/ql-vscode/.storybook/preview.js
+++ b/extensions/ql-vscode/.storybook/preview.js
@@ -1,4 +1,5 @@
 import { themes } from '@storybook/theming';
+import { action } from '@storybook/addon-actions';

 // Allow all stories/components to use Codicons
 import '@vscode/codicons/dist/codicon.css';
@@ -31,3 +32,7 @@ export const parameters = {
    },
  },
 };
+
+window.acquireVsCodeApi = () => ({
+  postMessage: action('post-vscode-message')
+});
--- a/extensions/ql-vscode/src/stories/remote-queries/RemoteQueries.stories.tsx
+++ b/extensions/ql-vscode/src/stories/remote-queries/RemoteQueries.stories.tsx
@@ -0,0 +1,24 @@
+import React, { useEffect } from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { RemoteQueries } from '../../view/remote-queries/RemoteQueries';
+
+import remoteQueryResult from './data/remoteQueryResultMessage.json';
+import analysesResults from './data/analysesResultsMessage.json';
+
+export default {
+  title: 'MRVA/Remote Queries',
+  component: RemoteQueries
+} as ComponentMeta<typeof RemoteQueries>;
+
+const Template: ComponentStory<typeof RemoteQueries> = () => {
+  useEffect(() => {
+    window.postMessage(remoteQueryResult);
+    window.postMessage(analysesResults);
+  });
+
+  return <RemoteQueries />;
+};
+
+export const Top10JavaScript = Template.bind({});
--- a/extensions/ql-vscode/src/stories/remote-queries/data/analysesResultsMessage.json
+++ b/extensions/ql-vscode/src/stories/remote-queries/data/analysesResultsMessage.json
--- a/extensions/ql-vscode/src/stories/remote-queries/data/remoteQueryResultMessage.json
+++ b/extensions/ql-vscode/src/stories/remote-queries/data/remoteQueryResultMessage.json
@@ -0,0 +1,170 @@
+{
+  "t": "setRemoteQueryResult",
+  "queryResult": {
+    "queryId": "Empty block-LUzMYbSaBM4Lv6YP8GQ8j",
+    "queryTitle": "Empty block",
+    "queryFileName": "example.ql",
+    "queryFilePath": "/home/octocat/vscode-codeql-starter/codeql-custom-queries-javascript/example.ql",
+    "queryText": "/**\n * @name Empty block\n * @kind problem\n * @problem.severity warning\n * @id javascript/example/empty-block\n */\n\nimport javascript\n\nfrom BlockStmt b\nwhere b.getNumStmt() = 0\nselect b, \"This is an empty block.\"\n",
+    "language": "javascript",
+    "workflowRunUrl": "https://github.com/octocat/octo-repo/actions/runs/2955404400",
+    "totalRepositoryCount": 10,
+    "affectedRepositoryCount": 10,
+    "totalResultCount": 16338,
+    "executionTimestamp": "30 Aug at 0:14 pm",
+    "executionDuration": "1 minute",
+    "analysisSummaries": [
+      {
+        "nwo": "angular/angular",
+        "databaseSha": "a360309f31afa97c4268a94fbd6a5108362a7182",
+        "resultCount": 8436,
+        "downloadLink": {
+          "id": "346232925",
+          "urlPath": "/repos/octocat/octo-repo/actions/artifacts/346232925",
+          "innerFilePath": "results.sarif",
+          "queryId": "Empty block-LUzMYbSaBM4Lv6YP8GQ8j"
+        },
+        "sourceLocationPrefix": "/home/runner/work/bulk-builder/bulk-builder",
+        "fileSize": "5.67 MB",
+        "starCount": 83537,
+        "lastUpdated": -1066284
+      },
+      {
+        "nwo": "babel/babel",
+        "databaseSha": "0f62c58c79830cfe0afb26161e96e0e1b0482c01",
+        "resultCount": 5502,
+        "downloadLink": {
+          "id": "346232926",
+          "urlPath": "/repos/octocat/octo-repo/actions/artifacts/346232926",
+          "innerFilePath": "results.sarif",
+          "queryId": "Empty block-LUzMYbSaBM4Lv6YP8GQ8j"
+        },
+        "sourceLocationPrefix": "/home/runner/work/bulk-builder/bulk-builder",
+        "fileSize": "3.80 MB",
+        "starCount": 41292,
+        "lastUpdated": -1600284
+      },
+      {
+        "nwo": "facebook/react",
+        "databaseSha": "e25648b0a89eab6f82bea2c2a1ef90866ac82b33",
+        "resultCount": 1205,
+        "downloadLink": {
+          "id": "346232919",
+          "urlPath": "/repos/octocat/octo-repo/actions/artifacts/346232919",
+          "innerFilePath": "results.sarif",
+          "queryId": "Empty block-LUzMYbSaBM4Lv6YP8GQ8j"
+        },
+        "sourceLocationPrefix": "/home/runner/work/bulk-builder/bulk-builder",
+        "fileSize": "905.24 KB",
+        "starCount": 194007,
+        "lastUpdated": -379284
+      },
+      {
+        "nwo": "facebook/jest",
+        "databaseSha": "187566a70aa4b6aa5f74952b504bbeddb5854aef",
+        "resultCount": 643,
+        "downloadLink": {
+          "id": "346232921",
+          "urlPath": "/repos/octocat/octo-repo/actions/artifacts/346232921",
+          "innerFilePath": "results.sarif",
+          "queryId": "Empty block-LUzMYbSaBM4Lv6YP8GQ8j"
+        },
+        "sourceLocationPrefix": "/home/runner/work/bulk-builder/bulk-builder",
+        "fileSize": "441.60 KB",
+        "starCount": 39987,
+        "lastUpdated": -113284
+      },
+      {
+        "nwo": "facebook/create-react-app",
+        "databaseSha": "f34d88e30c7d8be7181f728d1abc4fd8d5cd07d3",
+        "resultCount": 198,
+        "downloadLink": {
+          "id": "346232928",
+          "urlPath": "/repos/octocat/octo-repo/actions/artifacts/346232928",
+          "innerFilePath": "results.sarif",
+          "queryId": "Empty block-LUzMYbSaBM4Lv6YP8GQ8j"
+        },
+        "sourceLocationPrefix": "/home/runner/work/bulk-builder/bulk-builder",
+        "fileSize": "132.28 KB",
+        "starCount": 96698,
+        "lastUpdated": -126284
+      },
+      {
+        "nwo": "vuejs/vue",
+        "databaseSha": "810f6d12edea47cde7f39eaf7ec3ae1b7300d40c",
+        "resultCount": 140,
+        "downloadLink": {
+          "id": "346232920",
+          "urlPath": "/repos/octocat/octo-repo/actions/artifacts/346232920",
+          "innerFilePath": "results.sarif",
+          "queryId": "Empty block-LUzMYbSaBM4Lv6YP8GQ8j"
+        },
+        "sourceLocationPrefix": "/home/runner/work/bulk-builder/bulk-builder",
+        "fileSize": "89.99 KB",
+        "starCount": 198970,
+        "lastUpdated": -167284
+      },
+      {
+        "nwo": "lodash/lodash",
+        "databaseSha": "2da024c3b4f9947a48517639de7560457cd4ec6c",
+        "resultCount": 108,
+        "downloadLink": {
+          "id": "346232927",
+          "urlPath": "/repos/octocat/octo-repo/actions/artifacts/346232927",
+          "innerFilePath": "results.sarif",
+          "queryId": "Empty block-LUzMYbSaBM4Lv6YP8GQ8j"
+        },
+        "sourceLocationPrefix": "/home/runner/work/bulk-builder/bulk-builder",
+        "fileSize": "70.43 KB",
+        "starCount": 54215,
+        "lastUpdated": -9080284
+      },
+      {
+        "nwo": "jquery/jquery",
+        "databaseSha": "d2436df36a4b2ef556907e734a90771f0dbdbcaf",
+        "resultCount": 67,
+        "downloadLink": {
+          "id": "346232922",
+          "urlPath": "/repos/octocat/octo-repo/actions/artifacts/346232922",
+          "innerFilePath": "results.sarif",
+          "queryId": "Empty block-LUzMYbSaBM4Lv6YP8GQ8j"
+        },
+        "sourceLocationPrefix": "/home/runner/work/jquery/jquery",
+        "fileSize": "45.07 KB",
+        "starCount": 56629,
+        "lastUpdated": -23284
+      },
+      {
+        "nwo": "expressjs/express",
+        "databaseSha": "33e8dc303af9277f8a7e4f46abfdcb5e72f6797b",
+        "resultCount": 26,
+        "downloadLink": {
+          "id": "346232924",
+          "urlPath": "/repos/octocat/octo-repo/actions/artifacts/346232924",
+          "innerFilePath": "results.sarif",
+          "queryId": "Empty block-LUzMYbSaBM4Lv6YP8GQ8j"
+        },
+        "sourceLocationPrefix": "/home/runner/work/bulk-builder/bulk-builder",
+        "fileSize": "16.96 KB",
+        "starCount": 58125,
+        "lastUpdated": -236284
+      },
+      {
+        "nwo": "twbs/bootstrap",
+        "databaseSha": "af1bd974bba7f6e7f90c5ed3f42738bd101926cb",
+        "resultCount": 13,
+        "downloadLink": {
+          "id": "346232923",
+          "urlPath": "/repos/octocat/octo-repo/actions/artifacts/346232923",
+          "innerFilePath": "results.sarif",
+          "queryId": "Empty block-LUzMYbSaBM4Lv6YP8GQ8j"
+        },
+        "sourceLocationPrefix": "/home/runner/work/bootstrap/bootstrap",
+        "fileSize": "8.50 KB",
+        "starCount": 159230,
+        "lastUpdated": -1754284
+      }
+    ],
+    "analysisFailures": []
+  }
+}
--- a/extensions/ql-vscode/src/stories/tsconfig.json
+++ b/extensions/ql-vscode/src/stories/tsconfig.json
@@ -12,7 +12,9 @@
    "noUnusedLocals": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
-    "experimentalDecorators": true
+    "experimentalDecorators": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules"]
 }