approve method added with merge param

src/_helpers/route.helpers.ts

@@ -1,9 +1,15 @@
-import { TestRun, TestVariation } from "../types"
-import { routes } from "../constants"
+import { TestRun, TestVariation } from "../types";
+import { routes } from "../constants";
 
-export const buildTestRunUrl = (testVariation: TestVariation, testRun: TestRun) =>
-    `${routes.HOME}${testVariation.projectId}?buildId=${testRun.buildId}&testId=${testRun.id}`
+export const buildTestRunUrl = (
+  testVariation: TestVariation,
+  testRun: TestRun
+) =>
+  `${routes.HOME}${testVariation.projectId}?buildId=${testRun.buildId}&testId=${testRun.id}`;
 
 export const buildTestRunLocation = (testRun: TestRun) => ({
-    search: `buildId=${testRun.buildId}&testId=${testRun.id}`,
-})
+  search: `buildId=${testRun.buildId}&testId=${testRun.id}`,
+});
+
+export const buildBuildPageUrl = (projectId: string, buildId: string) =>
+  `${routes.HOME}${projectId}?buildId=${buildId}`;

src/components/TestDetailsModal.tsx

@@ -10,6 +10,8 @@ import {
   Paper,
   Box,
   makeStyles,
+  Chip,
+  Tooltip,
 } from "@material-ui/core";
 import { ToggleButton } from "@material-ui/lab";
 import { TestRun } from "../types";
@@ -154,26 +156,45 @@ const TestDetailsModal: React.FunctionComponent<{
             {(testRun.status === TestStatus.unresolved ||
               testRun.status === TestStatus.new) && (
               <Grid item>
-                <Button
-                  color="inherit"
-                  onClick={() =>
-                    testRunService.approve(testRun.id).then((testRun) => {
-                      updateTestRun(testRunDispatch, testRun);
-                    })
-                  }
-                >
-                  Approve
-                </Button>
-                <Button
-                  color="secondary"
-                  onClick={() =>
-                    testRunService.reject(testRun.id).then((testRun) => {
-                      updateTestRun(testRunDispatch, testRun);
-                    })
-                  }
-                >
-                  Reject
-                </Button>
+                <Grid container spacing={2} alignItems="center">
+                  {testRun.merge && (
+                    <Grid item>
+                      <Tooltip title="Will replace target branch baseline if accepted">
+                        <Chip
+                          label={`merge into: ${testRun.baselineBranchName}`}
+                          color="secondary"
+                          size="small"
+                        />
+                      </Tooltip>
+                    </Grid>
+                  )}
+                  <Grid item>
+                    <Button
+                      color="inherit"
+                      onClick={() =>
+                        testRunService
+                          .approve(testRun.id, testRun.merge)
+                          .then((testRun) => {
+                            updateTestRun(testRunDispatch, testRun);
+                          })
+                      }
+                    >
+                      Approve
+                    </Button>
+                  </Grid>
+                  <Grid item>
+                    <Button
+                      color="secondary"
+                      onClick={() =>
+                        testRunService.reject(testRun.id).then((testRun) => {
+                          updateTestRun(testRunDispatch, testRun);
+                        })
+                      }
+                    >
+                      Reject
+                    </Button>
+                  </Grid>
+                </Grid>
               </Grid>
             )}
             <Grid item>
@@ -213,8 +234,10 @@ const TestDetailsModal: React.FunctionComponent<{
                     .setComment(testRun.id, comment)
                     .then((testRun) => updateTestRun(testRunDispatch, testRun)),
                   // update in variation
-                  testVariationService
-                    .setComment(testRun.testVariationId, comment),
+                  testVariationService.setComment(
+                    testRun.testVariationId,
+                    comment
+                  ),
                 ])
               }
             />

src/components/TestVariationMergeForm.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { Grid, Select, MenuItem, Button } from "@material-ui/core";
+import { testVariationService } from "../services";
+import { useHistory } from "react-router-dom";
+import { buildBuildPageUrl } from "../_helpers/route.helpers";
+
+interface IProps {
+  projectId: string;
+  items: string[];
+}
+
+export const TestVariationMergeForm: React.FunctionComponent<IProps> = ({
+  projectId,
+  items,
+}) => {
+  const history = useHistory();
+  const [branch, setBranch] = React.useState("");
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    testVariationService.merge(projectId, branch).then((build) => {
+      history.push(buildBuildPageUrl(projectId, build.id));
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Grid container spacing={2}>
+        <Grid item>
+          <Select
+            displayEmpty
+            value={branch}
+            onChange={(event) => setBranch(event.target.value as string)}
+          >
+            <MenuItem value="">
+              <em>Select branch</em>
+            </MenuItem>
+            {items.map((i) => (
+              <MenuItem key={i} value={i}>
+                {i}
+              </MenuItem>
+            ))}
+          </Select>
+        </Grid>
+        <Grid item>
+          <Button type="submit" color="primary" variant="contained">
+            Merge
+          </Button>
+        </Grid>
+      </Grid>
+    </form>
+  );
+};

src/pages/TestVariationListPage.tsx

@@ -6,9 +6,10 @@ import { testVariationService } from "../services";
 import { Container, Box, Grid, Typography } from "@material-ui/core";
 import ProjectSelect from "../components/ProjectSelect";
 import Filters from "../components/Filters";
+import { TestVariationMergeForm } from "../components/TestVariationMergeForm";
 
 const TestVariationListPage: React.FunctionComponent = () => {
-  const { projectId } = useParams();
+  const { projectId = "" } = useParams();
   const [testVariations, setTestVariations] = React.useState<TestVariation[]>(
     []
   );
@@ -54,17 +55,23 @@ const TestVariationListPage: React.FunctionComponent = () => {
               <ProjectSelect selectedId={projectId} />
             </Grid>
             <Grid item>
-              <Box m={2}>
-                <Filters
-                  items={testVariations}
-                  queryState={[query, setQuery]}
-                  osState={[os, setOs]}
-                  deviceState={[device, setDevice]}
-                  browserState={[browser, setBrowser]}
-                  viewportState={[viewport, setViewport]}
-                  branchNameState={[branchName, setBranchName]}
-                />
-              </Box>
+              <TestVariationMergeForm
+                projectId={projectId}
+                items={Array.from(
+                  new Set(testVariations.map((t) => t.branchName))
+                )}
+              />
+            </Grid>
+            <Grid item>
+              <Filters
+                items={testVariations}
+                queryState={[query, setQuery]}
+                osState={[os, setOs]}
+                deviceState={[device, setDevice]}
+                browserState={[browser, setBrowser]}
+                viewportState={[viewport, setViewport]}
+                branchNameState={[branchName, setBranchName]}
+              />
             </Grid>
             <Grid item>
               <TestVariationList items={filteredItems} />

src/services/testRun.service.ts

@@ -50,15 +50,16 @@ function recalculateDiff(id: string): Promise<TestRun> {
   ).then(handleResponse);
 }
 
-function approve(id: string): Promise<TestRun> {
+function approve(id: string, merge: boolean): Promise<TestRun> {
   const requestOptions = {
     method: "GET",
     headers: authHeader(),
   };
 
-  return fetch(`${API_URL}${ENDPOINT_URL}/approve/${id}`, requestOptions).then(
-    handleResponse
-  );
+  return fetch(
+    `${API_URL}${ENDPOINT_URL}/approve?id=${id}&merge=${merge}`,
+    requestOptions
+  ).then(handleResponse);
 }
 
 function reject(id: string): Promise<TestRun> {

src/services/testVariation.service.ts

@@ -1,4 +1,4 @@
-import { TestVariation } from "../types";
+import { TestVariation, Build } from "../types";
 import { handleResponse, authHeader } from "../_helpers/service.helpers";
 import { API_URL } from "../_config/api.config";
 import { IgnoreArea } from "../types/ignoreArea";
@@ -10,6 +10,7 @@ export const testVariationService = {
   getDetails,
   setIgnoreAreas,
   setComment,
+  merge,
 };
 
 function getList(projectId: String): Promise<TestVariation[]> {
@@ -30,7 +31,7 @@ function getDetails(id: String): Promise<TestVariation> {
     headers: authHeader(),
   };
 
-  return fetch(`${API_URL}${ENDPOINT_URL}/${id}`, requestOptions).then(
+  return fetch(`${API_URL}${ENDPOINT_URL}/details/${id}`, requestOptions).then(
     handleResponse
   );
 }
@@ -62,3 +63,15 @@ function setComment(id: string, comment: string): Promise<TestVariation> {
     handleResponse
   );
 }
+
+function merge(projectId: String, branchName: String): Promise<Build> {
+  const requestOptions = {
+    method: "GET",
+    headers: authHeader(),
+  };
+
+  return fetch(
+    `${API_URL}${ENDPOINT_URL}/merge?projectId=${projectId}&branchName=${branchName}`,
+    requestOptions
+  ).then(handleResponse);
+}

src/types/testRun.ts

@@ -19,4 +19,5 @@ export interface TestRun {
   comment?: string;
   branchName: string;
   baselineBranchName: string;
+  merge: boolean;
 }