Add "result format" dropdown to MRVA view

Author: shati-patel

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

@@ -5,6 +5,7 @@ import { Meta } from "@storybook/react";
 
 import { RepositoriesSearchSortRow as RepositoriesSearchSortRowComponent } from "../../view/variant-analysis/RepositoriesSearchSortRow";
 import { defaultFilterSortState } from "../../variant-analysis/shared/variant-analysis-filter-sort";
+import { ResultFormat } from "../../variant-analysis/shared/variant-analysis-result-format";
 
 export default {
   title: "Variant Analysis/Repositories Search and Sort Row",
@@ -19,9 +20,20 @@ export default {
 } as Meta<typeof RepositoriesSearchSortRowComponent>;
 
 export const RepositoriesSearchSortRow = () => {
-  const [value, setValue] = useState(defaultFilterSortState);
+  const [filterSortValue, setFilterSortValue] = useState(
+    defaultFilterSortState,
+  );
+
+  const [resultFormatValue, setResultFormatValue] = useState(
+    ResultFormat.Alerts,
+  );
 
   return (
-    <RepositoriesSearchSortRowComponent value={value} onChange={setValue} />
+    <RepositoriesSearchSortRowComponent
+      filterSortValue={filterSortValue}
+      resultFormatValue={resultFormatValue}
+      onFilterSortChange={setFilterSortValue}
+      onResultFormatChange={setResultFormatValue}
+    />
   );
 };

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

@@ -9,10 +9,14 @@ import {
 import { RepositoriesSearch } from "./RepositoriesSearch";
 import { RepositoriesSort } from "./RepositoriesSort";
 import { RepositoriesFilter } from "./RepositoriesFilter";
+import { RepositoriesResultFormat } from "./RepositoriesResultFormat";
+import { ResultFormat } from "../../variant-analysis/shared/variant-analysis-result-format";
 
 type Props = {
-  value: RepositoriesFilterSortState;
-  onChange: Dispatch<SetStateAction<RepositoriesFilterSortState>>;
+  filterSortValue: RepositoriesFilterSortState;
+  resultFormatValue: ResultFormat;
+  onFilterSortChange: Dispatch<SetStateAction<RepositoriesFilterSortState>>;
+  onResultFormatChange: Dispatch<SetStateAction<ResultFormat>>;
 };
 
 const Container = styled.div`
@@ -35,51 +39,71 @@ const RepositoriesSortColumn = styled(RepositoriesSort)`
   flex: 1;
 `;
 
-export const RepositoriesSearchSortRow = ({ value, onChange }: Props) => {
+const RepositoriesResultFormatColumn = styled(RepositoriesResultFormat)`
+  flex: 1;
+`;
+
+export const RepositoriesSearchSortRow = ({
+  filterSortValue,
+  resultFormatValue,
+  onFilterSortChange,
+  onResultFormatChange,
+}: Props) => {
   const handleSearchValueChange = useCallback(
     (searchValue: string) => {
-      onChange((oldValue) => ({
+      onFilterSortChange((oldValue) => ({
         ...oldValue,
         searchValue,
       }));
     },
-    [onChange],
+    [onFilterSortChange],
   );
 
   const handleFilterKeyChange = useCallback(
     (filterKey: FilterKey) => {
-      onChange((oldValue) => ({
+      onFilterSortChange((oldValue) => ({
         ...oldValue,
         filterKey,
       }));
     },
-    [onChange],
+    [onFilterSortChange],
   );
 
   const handleSortKeyChange = useCallback(
     (sortKey: SortKey) => {
-      onChange((oldValue) => ({
+      onFilterSortChange((oldValue) => ({
         ...oldValue,
         sortKey,
       }));
     },
-    [onChange],
+    [onFilterSortChange],
+  );
+
+  const handleResultFormatChange = useCallback(
+    (resultFormat: ResultFormat) => {
+      onResultFormatChange(resultFormat);
+    },
+    [onResultFormatChange],
   );
 
   return (
     <Container>
       <RepositoriesSearchColumn
-        value={value.searchValue}
+        value={filterSortValue.searchValue}
         onChange={handleSearchValueChange}
       />
       <RepositoriesFilterColumn
-        value={value.filterKey}
+        value={filterSortValue.filterKey}
         onChange={handleFilterKeyChange}
       />
       <RepositoriesSortColumn
-        value={value.sortKey}
+        value={filterSortValue.sortKey}
         onChange={handleSortKeyChange}
       />
+      <RepositoriesResultFormatColumn
+        value={resultFormatValue}
+        onChange={handleResultFormatChange}
+      />
     </Container>
   );
 };

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Dispatch, SetStateAction } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 import { styled } from "styled-components";
 import {
   VSCodeBadge,
@@ -20,6 +20,7 @@ import { VariantAnalysisSkippedRepositoriesTab } from "./VariantAnalysisSkippedR
 import { RepositoriesFilterSortState } from "../../variant-analysis/shared/variant-analysis-filter-sort";
 import { RepositoriesSearchSortRow } from "./RepositoriesSearchSortRow";
 import { FailureReasonAlert } from "./FailureReasonAlert";
+import { ResultFormat } from "../../variant-analysis/shared/variant-analysis-result-format";
 
 export type VariantAnalysisOutcomePanelProps = {
   variantAnalysis: VariantAnalysis;
@@ -70,6 +71,7 @@ export const VariantAnalysisOutcomePanels = ({
   const accessMismatchRepositoryCount =
     variantAnalysis.skippedRepos?.accessMismatchRepos?.repositoryCount ?? 0;
 
+  const [resultFormat, setResultFormat] = useState(ResultFormat.Alerts);
   const warnings = (
     <WarningsContainer>
       {variantAnalysis.status === VariantAnalysisStatus.Canceled && (
@@ -123,8 +125,10 @@ export const VariantAnalysisOutcomePanels = ({
       <>
         {warnings}
         <RepositoriesSearchSortRow
-          value={filterSortState}
-          onChange={setFilterSortState}
+          filterSortValue={filterSortState}
+          resultFormatValue={resultFormat}
+          onFilterSortChange={setFilterSortState}
+          onResultFormatChange={setResultFormat}
         />
         <VariantAnalysisAnalyzedRepos
           variantAnalysis={variantAnalysis}
@@ -142,8 +146,10 @@ export const VariantAnalysisOutcomePanels = ({
     <>
       {warnings}
       <RepositoriesSearchSortRow
-        value={filterSortState}
-        onChange={setFilterSortState}
+        filterSortValue={filterSortState}
+        resultFormatValue={resultFormat}
+        onFilterSortChange={setFilterSortState}
+        onResultFormatChange={setResultFormat}
       />
       <VSCodePanels>
         {scannedReposCount > 0 && (