test variation delete added

src/components/TestVariationList.tsx

@@ -8,14 +8,17 @@ import {
   makeStyles,
   CardActions,
   Button,
+  IconButton,
 } from "@material-ui/core";
 import { staticService } from "../services";
 import { Link } from "react-router-dom";
 import { routes } from "../constants";
 import { TestVariationDetails } from "./TestVariationDetails";
+import { Delete } from "@material-ui/icons";
 
 interface IProps {
   items: TestVariation[];
+  onDeleteClick: (id: string) => void;
 }
 
 const useStyles = makeStyles({
@@ -28,7 +31,10 @@ const useStyles = makeStyles({
   },
 });
 
-const TestVariationList: React.FunctionComponent<IProps> = ({ items }) => {
+const TestVariationList: React.FunctionComponent<IProps> = ({
+  items,
+  onDeleteClick,
+}) => {
   const classes = useStyles();
 
   return (
@@ -52,6 +58,13 @@ const TestVariationList: React.FunctionComponent<IProps> = ({ items }) => {
               >
                 History
               </Button>
+              <IconButton
+                onClick={(event: React.MouseEvent<HTMLElement>) =>
+                  onDeleteClick(t.id)
+                }
+              >
+                <Delete />
+              </IconButton>
             </CardActions>
           </Card>
         </Grid>

src/pages/TestVariationListPage.tsx

@@ -45,6 +45,12 @@ const TestVariationListPage: React.FunctionComponent = () => {
     );
   }, [query, branchName, os, device, browser, viewport, testVariations]);
 
+  const handleDelete = (id: string) => {
+    testVariationService.remove(id).then((item) => {
+      setTestVariations(testVariations.filter((i) => i.id !== item.id));
+    });
+  };
+
   return (
     <React.Fragment>
       <Container>
@@ -74,7 +80,10 @@ const TestVariationListPage: React.FunctionComponent = () => {
               />
             </Grid>
             <Grid item>
-              <TestVariationList items={filteredItems} />
+              <TestVariationList
+                items={filteredItems}
+                onDeleteClick={handleDelete}
+              />
             </Grid>
           </Grid>
         </Box>

src/services/testVariation.service.ts

@@ -11,6 +11,7 @@ export const testVariationService = {
   setIgnoreAreas,
   setComment,
   merge,
+  remove,
 };
 
 function getList(projectId: String): Promise<TestVariation[]> {
@@ -74,4 +75,15 @@ function merge(projectId: String, branchName: String): Promise<Build> {
     `${API_URL}${ENDPOINT_URL}/merge?projectId=${projectId}&branchName=${branchName}`,
     requestOptions
   ).then(handleResponse);
-}
+}
+
+function remove(id: String): Promise<TestVariation> {
+  const requestOptions = {
+    method: "DELETE",
+    headers: authHeader(),
+  };
+
+  return fetch(`${API_URL}${ENDPOINT_URL}/${id}`, requestOptions).then(
+    handleResponse
+  );
+}