Add mock VSCode API in Storybook

This allows us to add a story for the "main" remote queries view.

Author: koesie10

.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

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')
+});

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({});