From c38a01e937bcdcdf2b4c1d120c5d05dcbb96aecc Mon Sep 17 00:00:00 2001
From: Shati Patel <42641846+shati-patel@users.noreply.github.com>
Date: Thu, 24 Aug 2023 15:42:44 +0100
Subject: [PATCH] Add a dropdown for choosing MRVA result format (#2743)

---
 .../RepositoriesResultFormat.stories.tsx      | 27 ++++++++++++
 .../shared/variant-analysis-result-format.ts  |  4 ++
 .../RepositoriesResultFormat.tsx              | 44 +++++++++++++++++++
 3 files changed, 75 insertions(+)
 create mode 100644 extensions/ql-vscode/src/stories/variant-analysis/RepositoriesResultFormat.stories.tsx
 create mode 100644 extensions/ql-vscode/src/variant-analysis/shared/variant-analysis-result-format.ts
 create mode 100644 extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx

diff --git a/extensions/ql-vscode/src/stories/variant-analysis/RepositoriesResultFormat.stories.tsx b/extensions/ql-vscode/src/stories/variant-analysis/RepositoriesResultFormat.stories.tsx
new file mode 100644
index 000000000..6c73042c7
--- /dev/null
+++ b/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} />
+  );
+};
diff --git a/extensions/ql-vscode/src/variant-analysis/shared/variant-analysis-result-format.ts b/extensions/ql-vscode/src/variant-analysis/shared/variant-analysis-result-format.ts
new file mode 100644
index 000000000..03ace4548
--- /dev/null
+++ b/extensions/ql-vscode/src/variant-analysis/shared/variant-analysis-result-format.ts
@@ -0,0 +1,4 @@
+export enum ResultFormat {
+  Alerts = "Alerts",
+  RawResults = "Raw results",
+}
diff --git a/extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx b/extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx
new file mode 100644
index 000000000..2bffdfe09
--- /dev/null
+++ b/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>
+  );
+};