fix: reports select issue (#1239)

open-sauced · Jun 6, 2023 · a48bc87 · a48bc87
1 parent 9456876
commit a48bc87
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 20 deletions.
diff --git a/components/molecules/SelectReportsFilter/select-reports-filter.tsx b/components/molecules/SelectReportsFilter/select-reports-filter.tsx
@@ -6,7 +6,7 @@ import { FilterOptions } from "interfaces/filter-object-types";
 import { useState } from "react";
 
 interface SelectReportsFilterProps {
-  filterList?: FilterOptions[];
+  filterList: FilterOptions[];
   callback: (selectedValue: string) => any;
 }
 
@@ -23,13 +23,15 @@ const SelectReportsFilter = ({ filterList, callback }: SelectReportsFilterProps)
   return (
     <div className="flex flex-col gap-2 min-h-20">
       <Title level={4}>Select a Filter</Title>
-      <Text>
-        Download the filtered pull requests from the filtered repositories for the last 30 days as a CSV. 
-      </Text>
+      <Text>Download the filtered pull requests from the filtered repositories for the last 30 days as a CSV.</Text>
       <div className="flex flex-col gap-2 md:flex-row">
-        <Select>
+        <Select onValueChange={(value) => setSelectedValue(value)}>
           <SelectTrigger>
-            <SelectValue>{selectedValue ? selectedValue : "Select a Filter"}</SelectValue>
+            <SelectValue className="!capitalize">
+              {selectedValue
+                ? filterList.find((filter) => filter.filterValue === selectedValue)?.filterName
+                : "Select a Filter"}
+            </SelectValue>
           </SelectTrigger>
           <SelectContent>
             {filterList?.map(({ filterName, filterValue }, index) => (

diff --git a/stories/molecules/select-reports-filter.stories.tsx b/stories/molecules/select-reports-filter.stories.tsx
@@ -2,29 +2,22 @@ import { FilterOptions } from "interfaces/filter-object-types";
 import SelectReportsFilter from "../../components/molecules/SelectReportsFilter/select-reports-filter";
 
 const storyConfig = {
-  title: "Design System/Molecules/Select Reports Filter"
+  title: "Design System/Molecules/Select Reports Filter",
 };
 
 export default storyConfig;
 
 const testFilterOptions: FilterOptions[] = [
   {
     filterName: "test",
-    filterValue: "test"
+    filterValue: "test",
   },
   {
     filterName: "test2",
-    filterValue: "test2"
-  }
+    filterValue: "test2",
+  },
 ];
 
-export const EmptySelectReportsFilterMolecule = () => 
-  <SelectReportsFilter
-    callback={() => null}
-  />;
-
-export const PopulatedSelectReportsFilterMolecule = () => 
-  <SelectReportsFilter
-    filterList={testFilterOptions}
-    callback={() => null}
-  />;
+export const PopulatedSelectReportsFilterMolecule = () => (
+  <SelectReportsFilter filterList={testFilterOptions} callback={() => null} />
+);