From af26bd8efc3fbc0c28b4a8ad41a6db0bf673166a Mon Sep 17 00:00:00 2001
From: shati-patel <42641846+shati-patel@users.noreply.github.com>
Date: Thu, 24 Aug 2023 11:45:45 +0100
Subject: [PATCH 1/3] Add a "result format" dropdown component

---
 .../shared/variant-analysis-result-format.ts  |  4 ++
 .../RepositoriesResultFormat.tsx              | 40 +++++++++++++++++++
 2 files changed, 44 insertions(+)
 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/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 00000000000..03ace454885
--- /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 00000000000..d3dedcc241d
--- /dev/null
+++ b/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>
+  );
+};

From 7ac9ea0c451750e20ab8bc56005f2a301782934d Mon Sep 17 00:00:00 2001
From: shati-patel <42641846+shati-patel@users.noreply.github.com>
Date: Thu, 24 Aug 2023 11:59:53 +0100
Subject: [PATCH 2/3] Add storybook component for "result format" dropdown

---
 .../RepositoriesResultFormat.stories.tsx      | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 extensions/ql-vscode/src/stories/variant-analysis/RepositoriesResultFormat.stories.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 00000000000..6c73042c7b0
--- /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} />
+  );
+};

From 0ce2eedd05d24d13143d9802e48d1da18fe77c33 Mon Sep 17 00:00:00 2001
From: shati-patel <42641846+shati-patel@users.noreply.github.com>
Date: Thu, 24 Aug 2023 15:20:06 +0100
Subject: [PATCH 3/3] Use enum for display values too

---
 .../view/variant-analysis/RepositoriesResultFormat.tsx    | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx b/extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx
index d3dedcc241d..2bffdfe0916 100644
--- a/extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx
+++ b/extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx
@@ -33,8 +33,12 @@ export const RepositoriesResultFormat = ({
   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>
+      <VSCodeOption value={ResultFormat.Alerts}>
+        {ResultFormat.Alerts}
+      </VSCodeOption>
+      <VSCodeOption value={ResultFormat.RawResults}>
+        {ResultFormat.RawResults}
+      </VSCodeOption>
     </Dropdown>
   );
 };