Add a "result format" dropdown component

Author: shati-patel

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,40 @@
+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}>Alerts</VSCodeOption>
+      <VSCodeOption value={ResultFormat.RawResults}>Raw results</VSCodeOption>
+    </Dropdown>
+  );
+};