project config (#177)

pashidlos · web-flow · commit a409eaa247f8 · 2021-04-29T11:46:44.000+03:00
closes Visual-Regression-Tracker/Visual-Regression-Tracker#215
diff --git a/src/components/ProjectForm.tsx b/src/components/ProjectForm.tsx
@@ -1,21 +1,18 @@
+import {
+  FormControl,
+  FormControlLabel,
+  InputLabel,
+  MenuItem,
+  Select,
+  Switch,
+} from "@material-ui/core";
 import React from "react";
 import { TextValidator } from "react-material-ui-form-validator";
+import { ProjectDto } from "../types";
+import { ImageComparison } from "../types/imageComparison";
 
 interface IProps {
-  projectState: [
-    {
-      id: string;
-      name: string;
-      mainBranchName: string;
-    },
-    React.Dispatch<
-      React.SetStateAction<{
-        id: string;
-        name: string;
-        mainBranchName: string;
-      }>
-    >
-  ];
+  projectState: [ProjectDto, React.Dispatch<React.SetStateAction<ProjectDto>>];
 }
 
 export const ProjectForm: React.FunctionComponent<IProps> = ({
@@ -54,10 +51,98 @@ export const ProjectForm: React.FunctionComponent<IProps> = ({
         fullWidth
         required
         value={project.mainBranchName}
-        onChange={(event) => {
+        onChange={(event) =>
           setProject({
             ...project,
             mainBranchName: (event.target as HTMLInputElement).value,
+          })
+        }
+      />
+      <FormControl fullWidth>
+        <InputLabel id="imageComparisonSelect">
+          Image comparison library
+        </InputLabel>
+        <Select
+          id="imageComparisonSelect"
+          labelId="imageComparisonSelect"
+          value={project.imageComparison}
+          onChange={(event) =>
+            setProject({
+              ...project,
+              imageComparison: event.target.value as ImageComparison,
+            })
+          }
+        >
+          <MenuItem value={ImageComparison.pixelmatch}>
+            {ImageComparison.pixelmatch}
+          </MenuItem>
+        </Select>
+      </FormControl>
+      <FormControlLabel
+        label="Auto approve feature"
+        control={
+          <Switch
+            checked={project.autoApproveFeature}
+            onChange={(event, checked) =>
+              setProject({
+                ...project,
+                autoApproveFeature: checked,
+              })
+            }
+            color="primary"
+            name="autoApproveFeature"
+          />
+        }
+      />
+      <FormControlLabel
+        label="Allow diff dimentions"
+        control={
+          <Switch
+            checked={project.diffDimensionsFeature}
+            onChange={(event, checked) =>
+              setProject({
+                ...project,
+                diffDimensionsFeature: checked,
+              })
+            }
+            color="primary"
+            name="diffDimensionsFeature"
+          />
+        }
+      />
+      <FormControlLabel
+        label="Ignore anti-alliasing"
+        control={
+          <Switch
+            checked={project.ignoreAntialiasing}
+            onChange={(event, checked) =>
+              setProject({
+                ...project,
+                ignoreAntialiasing: checked,
+              })
+            }
+            color="primary"
+            name="ignoreAntialiasing"
+          />
+        }
+      />
+      <TextValidator
+        name="threshold"
+        validators={["minNumber:0", "maxNumber:1"]}
+        errorMessages={["Enter greater than 0", "Enter less than 1"]}
+        InputProps={{ inputProps: { min: 0, max: 1, step: 0.001 } }}
+        margin="dense"
+        id="threshold"
+        label="Pixel diff threshold"
+        type="number"
+        fullWidth
+        required
+        value={project.threshold}
+        onChange={(event) => {
+          const value = (event.target as HTMLInputElement).value;
+          setProject({
+            ...project,
+            threshold: parseFloat(value),
           });
         }}
       />
diff --git a/src/contexts/project.context.tsx b/src/contexts/project.context.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Project } from "../types";
+import { Project, ProjectDto } from "../types";
 import { projectsService } from "../services";
 import { useSnackbar } from "notistack";
 import { useAuthState } from "./auth.context";
@@ -118,10 +118,7 @@ async function selectProject(dispatch: Dispatch, id: string) {
   dispatch({ type: "select", payload: id });
 }
 
-async function createProject(
-  dispatch: Dispatch,
-  project: { name: string; mainBranchName: string }
-) {
+async function createProject(dispatch: Dispatch, project: ProjectDto) {
   dispatch({ type: "request" });
 
   return projectsService.create(project).then((project: Project) => {
@@ -130,10 +127,7 @@ async function createProject(
   });
 }
 
-async function updateProject(
-  dispatch: Dispatch,
-  project: { id: string; name: string; mainBranchName: string }
-) {
+async function updateProject(dispatch: Dispatch, project: ProjectDto) {
   dispatch({ type: "request" });
 
   return projectsService.update(project).then((project: Project) => {
diff --git a/src/pages/ProjectListPage.tsx b/src/pages/ProjectListPage.tsx
@@ -24,6 +24,19 @@ import { formatDateTime } from "../_helpers/format.helper";
 import { ProjectForm } from "../components/ProjectForm";
 import { useSnackbar } from "notistack";
 import { BaseModal } from "../components/BaseModal";
+import { ProjectDto } from "../types";
+import { ImageComparison } from "../types/imageComparison";
+
+const defaultProject: ProjectDto = {
+  id: "",
+  name: "",
+  mainBranchName: "",
+  ignoreAntialiasing: true,
+  autoApproveFeature: true,
+  diffDimensionsFeature: true,
+  threshold: 0.1,
+  imageComparison: ImageComparison.pixelmatch,
+};
 
 const ProjectsListPage = () => {
   const { enqueueSnackbar } = useSnackbar();
@@ -33,15 +46,7 @@ const ProjectsListPage = () => {
   const [createDialogOpen, setCreateDialogOpen] = React.useState(false);
   const [updateDialogOpen, setUpdateDialogOpen] = React.useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
-  const [project, setProject] = React.useState<{
-    id: string;
-    name: string;
-    mainBranchName: string;
-  }>({
-    id: "",
-    name: "",
-    mainBranchName: "",
-  });
+  const [project, setProject] = React.useState(defaultProject);
 
   const toggleCreateDialogOpen = () => {
     setCreateDialogOpen(!createDialogOpen);
@@ -70,11 +75,7 @@ const ProjectsListPage = () => {
               aria-label="add"
               onClick={() => {
                 toggleCreateDialogOpen();
-                setProject({
-                  id: "",
-                  name: "",
-                  mainBranchName: "",
-                });
+                setProject(defaultProject);
               }}
             >
               <Add />
diff --git a/src/services/projects.service.ts b/src/services/projects.service.ts
@@ -2,51 +2,46 @@ import { Project } from "../types";
 import { handleResponse, authHeader } from "../_helpers/service.helpers";
 import { API_URL } from "../_config/env.config";
 
-function getAll(): Promise<Project[]> {
+async function getAll(): Promise<Project[]> {
   const requestOptions = {
     method: "GET",
     headers: authHeader(),
   };
 
-  return fetch(`${API_URL}/projects`, requestOptions).then(handleResponse);
+  const response = await fetch(`${API_URL}/projects`, requestOptions);
+  return handleResponse(response);
 }
 
-function remove(id: string): Promise<Project> {
+async function remove(id: string): Promise<Project> {
   const requestOptions = {
     method: "DELETE",
     headers: authHeader(),
   };
 
-  return fetch(`${API_URL}/projects/${id}`, requestOptions).then(
-    handleResponse
-  );
+  const response = await fetch(`${API_URL}/projects/${id}`, requestOptions);
+  return handleResponse(response);
 }
 
-function create(project: {
-  name: string;
-  mainBranchName: string;
-}): Promise<Project> {
+async function create(project: Partial<Project>): Promise<Project> {
   const requestOptions = {
     method: "POST",
     headers: { "Content-Type": "application/json", ...authHeader() },
     body: JSON.stringify(project),
   };
 
-  return fetch(`${API_URL}/projects`, requestOptions).then(handleResponse);
+  const response = await fetch(`${API_URL}/projects`, requestOptions);
+  return handleResponse(response);
 }
 
-function update(project: {
-  id: string;
-  name: string;
-  mainBranchName: string;
-}): Promise<Project> {
+async function update(project: Partial<Project>): Promise<Project> {
   const requestOptions = {
     method: "PUT",
     headers: { "Content-Type": "application/json", ...authHeader() },
     body: JSON.stringify(project),
   };
 
-  return fetch(`${API_URL}/projects`, requestOptions).then(handleResponse);
+  const response = await fetch(`${API_URL}/projects`, requestOptions);
+  return handleResponse(response);
 }
 
 export const projectsService = {
diff --git a/src/types/imageComparison.ts b/src/types/imageComparison.ts
@@ -0,0 +1,5 @@
+export enum ImageComparison {
+  pixelmatch = "pixelmatch",
+  lookSame = "lookSame",
+  odiff = "odiff",
+}
diff --git a/src/types/project.ts b/src/types/project.ts
@@ -1,4 +1,5 @@
 import { Build } from "./build";
+import { ImageComparison } from "./imageComparison";
 
 export interface Project {
   id: string;
@@ -7,4 +8,11 @@ export interface Project {
   builds: Build[];
   updatedAt: string;
   createdAt: string;
+  autoApproveFeature: boolean;
+  diffDimensionsFeature: boolean;
+  ignoreAntialiasing: boolean;
+  threshold: number;
+  imageComparison: ImageComparison;
 }
+
+export type ProjectDto = Omit<Project, "updatedAt" | "createdAt" | "builds">;
