TestVariationMergeForm added

Author: pashidlos

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

@@ -160,7 +160,11 @@ const TestDetailsModal: React.FunctionComponent<{
                   {testRun.merge && (
                     <Grid item>
                       <Tooltip title="Will replace target branch baseline if accepted">
-                        <Chip label="merge" color="secondary" size="small" />
+                        <Chip
+                          label={`merge into: ${testRun.baselineBranchName}`}
+                          color="secondary"
+                          size="small"
+                        />
                       </Tooltip>
                     </Grid>
                   )}

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/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);
+}