Variations. branch name filter added

Author: pashidlos

src/components/Filters.tsx

@@ -19,6 +19,7 @@ interface IProps {
   browserState: [string, React.Dispatch<React.SetStateAction<string>>];
   viewportState: [string, React.Dispatch<React.SetStateAction<string>>];
   testStatusState?: [string, React.Dispatch<React.SetStateAction<string>>];
+  branchNameState?: [string, React.Dispatch<React.SetStateAction<string>>];
 }
 
 const Filters: React.FunctionComponent<IProps> = ({
@@ -29,6 +30,7 @@ const Filters: React.FunctionComponent<IProps> = ({
   browserState,
   viewportState,
   testStatusState,
+  branchNameState,
 }) => {
   const [query, setQuery] = queryState;
   const [os, setOs] = osState;
@@ -38,6 +40,9 @@ const Filters: React.FunctionComponent<IProps> = ({
   const [testStatus, setTestStatus] = testStatusState
     ? testStatusState
     : [null, () => {}];
+  const [branchName, setBranchName] = branchNameState
+    ? branchNameState
+    : [null, () => {}];
 
   const osList = items
     .map((t) => t.os)
@@ -56,11 +61,18 @@ const Filters: React.FunctionComponent<IProps> = ({
     .filter((v, i, array) => v && array.indexOf(v) === i);
 
   const testStatusList =
+    testStatusState &&
     items.some((i) => (i as TestRun).status) &&
     (items as TestRun[])
       .map((t) => t.status)
       .filter((v, i, array) => v && array.indexOf(v) === i);
 
+  const branchNameList =
+    branchNameState &&
+    items
+      .map((t) => t.branchName)
+      .filter((v, i, array) => v && array.indexOf(v) === i);
+
   return (
     <React.Fragment>
       <Grid container spacing={2} alignItems="flex-end">
@@ -197,6 +209,32 @@ const Filters: React.FunctionComponent<IProps> = ({
             </FormControl>
           </Grid>
         )}
+        {branchNameList && branchNameList.length > 0 && (
+          <Grid item xs>
+            <FormControl fullWidth>
+              <InputLabel shrink id="filter_branchName">
+                Branch
+              </InputLabel>
+              <Select
+                id="filter_branchName"
+                value={branchName}
+                displayEmpty
+                onChange={(event) =>
+                  setBranchName(event.target.value as string)
+                }
+              >
+                <MenuItem value="">
+                  <em>All</em>
+                </MenuItem>
+                {branchNameList.map((item) => (
+                  <MenuItem key={item} value={item}>
+                    {item}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Grid>
+        )}
         <Grid item>
           <Button
             variant="contained"

src/pages/TestVariationListPage.tsx

@@ -19,6 +19,7 @@ const TestVariationListPage: React.FunctionComponent = () => {
   const [device, setDevice] = React.useState("");
   const [browser, setBrowser] = React.useState("");
   const [viewport, setViewport] = React.useState("");
+  const [branchName, setBranchName] = React.useState("");
   const [filteredItems, setFilteredItems] = React.useState<TestVariation[]>([]);
 
   React.useEffect(() => {
@@ -34,13 +35,14 @@ const TestVariationListPage: React.FunctionComponent = () => {
       testVariations.filter(
         (t) =>
           t.name.includes(query) && // by query
+          (branchName ? t.branchName === branchName : true) && // by branchName
           (os ? t.os === os : true) && // by OS
           (device ? t.device === device : true) && // by device
           (viewport ? t.viewport === viewport : true) && // by viewport
           (browser ? t.browser === browser : true) // by browser
       )
     );
-  }, [query, os, device, browser, viewport, testVariations]);
+  }, [query, branchName, os, device, browser, viewport, testVariations]);
 
   return (
     <React.Fragment>
@@ -60,6 +62,7 @@ const TestVariationListPage: React.FunctionComponent = () => {
                   deviceState={[device, setDevice]}
                   browserState={[browser, setBrowser]}
                   viewportState={[viewport, setViewport]}
+                  branchNameState={[branchName, setBranchName]}
                 />
               </Box>
             </Grid>