Add a dropdown for choosing MRVA result format (#2743)

Author: shati-patel

extensions/ql-vscode/src/stories/variant-analysis/RepositoriesResultFormat.stories.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { useState } from "react";
+
+import { Meta } from "@storybook/react";
+
+import { RepositoriesResultFormat as RepositoriesResultFormatComponent } from "../../view/variant-analysis/RepositoriesResultFormat";
+import { ResultFormat } from "../../variant-analysis/shared/variant-analysis-result-format";
+
+export default {
+  title: "Variant Analysis/Repositories Result Format",
+  component: RepositoriesResultFormatComponent,
+  argTypes: {
+    value: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+} as Meta<typeof RepositoriesResultFormatComponent>;
+
+export const RepositoriesResultFormat = () => {
+  const [value, setValue] = useState(ResultFormat.Alerts);
+
+  return (
+    <RepositoriesResultFormatComponent value={value} onChange={setValue} />
+  );
+};

extensions/ql-vscode/src/variant-analysis/shared/variant-analysis-result-format.ts

@@ -0,0 +1,4 @@
+export enum ResultFormat {
+  Alerts = "Alerts",
+  RawResults = "Raw results",
+}

extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { useCallback } from "react";
+import { styled } from "styled-components";
+import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react";
+import { Codicon } from "../common";
+import { ResultFormat } from "../../variant-analysis/shared/variant-analysis-result-format";
+
+const Dropdown = styled(VSCodeDropdown)`
+  width: 100%;
+`;
+
+type Props = {
+  value: ResultFormat;
+  onChange: (value: ResultFormat) => void;
+
+  className?: string;
+};
+
+export const RepositoriesResultFormat = ({
+  value,
+  onChange,
+  className,
+}: Props) => {
+  const handleInput = useCallback(
+    (e: InputEvent) => {
+      const target = e.target as HTMLSelectElement;
+
+      onChange(target.value as ResultFormat);
+    },
+    [onChange],
+  );
+
+  return (
+    <Dropdown value={value} onInput={handleInput} className={className}>
+      <Codicon name="table" label="Result format..." slot="indicator" />
+      <VSCodeOption value={ResultFormat.Alerts}>
+        {ResultFormat.Alerts}
+      </VSCodeOption>
+      <VSCodeOption value={ResultFormat.RawResults}>
+        {ResultFormat.RawResults}
+      </VSCodeOption>
+    </Dropdown>
+  );
+};