From d9199e957ade1489d7565c500abd48f5edff6080 Mon Sep 17 00:00:00 2001 From: Pavel Strunkin Date: Fri, 22 May 2020 22:45:11 +0200 Subject: [PATCH 1/8] TestVariationPage added --- src/Router.jsx | 6 +++ src/components/TestVariationList.tsx | 61 +++++++++++++++++++++++++++ src/constants/routes.ts | 2 +- src/pages/ProjectListPage.tsx | 8 ++++ src/pages/ProjectPage.tsx | 3 +- src/pages/TestVariationPage.tsx | 42 ++++++++++++++++++ src/services/index.ts | 3 +- src/services/testVariation.service.ts | 16 +++++++ src/types/index.ts | 3 +- 9 files changed, 140 insertions(+), 4 deletions(-) create mode 100644 src/components/TestVariationList.tsx create mode 100644 src/pages/TestVariationPage.tsx create mode 100644 src/services/testVariation.service.ts diff --git a/src/Router.jsx b/src/Router.jsx index 0475d489..21fc77f9 100644 --- a/src/Router.jsx +++ b/src/Router.jsx @@ -7,6 +7,7 @@ import PrivateRoute from "./components/PrivateRoute"; import { routes } from "./constants"; import RegisterPage from "./pages/RegisterPage"; import ProfilePage from "./pages/ProfilePage"; +import TestVariationPage from "./pages/TestVariationPage"; function Router() { return ( @@ -28,6 +29,11 @@ function Router() { path={`${routes.HOME}:projectId`} component={() => } /> + } + /> = ({ items }) => { + const classes = useStyles(); + + return ( + + {items.map((t) => ( + + + + + {t.name} + + + + OS: {t.os} + + + Browser: {t.browser} + + + Viewport: {t.viewport} + + + + + + ))} + + ); +}; + +export default TestVariationList; diff --git a/src/constants/routes.ts b/src/constants/routes.ts index 9fee3262..d24e0a38 100644 --- a/src/constants/routes.ts +++ b/src/constants/routes.ts @@ -7,5 +7,5 @@ export const routes = { HOME: "/", PROFILE_PAGE: "/profile", PROJECT_LIST_PAGE: "/projects", - // PROJECT: "/project", + VARIATION_LIST_PAGE: "/variations", }; diff --git a/src/pages/ProjectListPage.tsx b/src/pages/ProjectListPage.tsx index c0e89a42..b888725c 100644 --- a/src/pages/ProjectListPage.tsx +++ b/src/pages/ProjectListPage.tsx @@ -27,6 +27,7 @@ import { } from "../contexts/project.context"; import { Link } from "react-router-dom"; import { Delete, Add } from "@material-ui/icons"; +import { routes } from "../constants"; const ProjectsListPage = () => { const theme = useTheme(); @@ -122,6 +123,13 @@ const ProjectsListPage = () => { + ) => { deleteProject(projectDispatch, project.id); diff --git a/src/pages/ProjectPage.tsx b/src/pages/ProjectPage.tsx index 92a50665..76db9f29 100644 --- a/src/pages/ProjectPage.tsx +++ b/src/pages/ProjectPage.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from "react"; -import { Grid, Dialog, IconButton, Box } from "@material-ui/core"; +import { Grid, Dialog, IconButton, Box, Typography } from "@material-ui/core"; import { useParams, useLocation, useHistory } from "react-router-dom"; import { Build, TestRun } from "../types"; import { projectsService, buildsService, testsService } from "../services"; @@ -119,6 +119,7 @@ const ProjectPage = () => { + Project: diff --git a/src/pages/TestVariationPage.tsx b/src/pages/TestVariationPage.tsx new file mode 100644 index 00000000..f817b103 --- /dev/null +++ b/src/pages/TestVariationPage.tsx @@ -0,0 +1,42 @@ +import React from "react"; +import TestVariationList from "../components/TestVariationList"; +import { useParams } from "react-router-dom"; +import { TestVariation } from "../types"; +import { testVariationService } from "../services"; +import { Container, Box, Grid, Typography } from "@material-ui/core"; +import ProjectSelect from "../components/ProjectSelect"; + +const TestVariationPage: React.FunctionComponent = () => { + const { projectId } = useParams(); + const [testVariations, setTestVariations] = React.useState( + [] + ); + + React.useEffect(() => { + if (projectId) { + testVariationService.get(projectId).then((testVariations) => { + setTestVariations(testVariations); + }); + } + }, [projectId]); + + return ( + + + + + + Project: + + + + + + + + + + ); +}; + +export default TestVariationPage; diff --git a/src/services/index.ts b/src/services/index.ts index 4e28d927..27be19c7 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -2,4 +2,5 @@ export * from './users.service'; export * from './projects.service' export * from './builds.service' export * from './tests.service' -export * from './static.service' \ No newline at end of file +export * from './static.service' +export * from './testVariation.service' \ No newline at end of file diff --git a/src/services/testVariation.service.ts b/src/services/testVariation.service.ts new file mode 100644 index 00000000..3267e1b4 --- /dev/null +++ b/src/services/testVariation.service.ts @@ -0,0 +1,16 @@ +import { TestVariation } from "../types"; +import { handleResponse, authHeader } from "../_helpers/service.helpers"; +import { API_URL } from "../_config/api.config"; + +export const testVariationService = { + get, +}; + +function get(projectId: String): Promise { + const requestOptions = { + method: "GET", + headers: authHeader(), + }; + + return fetch(`${API_URL}/test-variations?projectId=${projectId}`, requestOptions).then(handleResponse); +} diff --git a/src/types/index.ts b/src/types/index.ts index eaf1596d..e3d6c938 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,4 +1,5 @@ export * from './user' export * from './project' export * from './build' -export * from './testRun' \ No newline at end of file +export * from './testRun' +export * from './testVariation' \ No newline at end of file From 7e3c319d490c7afc9cdb840b574dbee511d476c9 Mon Sep 17 00:00:00 2001 From: Pavel Strunkin Date: Sat, 23 May 2020 00:04:56 +0200 Subject: [PATCH 2/8] ProjectList. Builds btn added --- src/pages/ProjectListPage.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/pages/ProjectListPage.tsx b/src/pages/ProjectListPage.tsx index b888725c..958607b5 100644 --- a/src/pages/ProjectListPage.tsx +++ b/src/pages/ProjectListPage.tsx @@ -3,7 +3,6 @@ import { Grid, Typography, Card, - CardActionArea, IconButton, CardContent, CardActions, @@ -115,14 +114,17 @@ const ProjectsListPage = () => { Key: {project.id} + Name: {project.name} + Updated: {project.updatedAt} - - - Name: {project.name} - Updated: {project.updatedAt} - - + + ))} diff --git a/src/constants/routes.ts b/src/constants/routes.ts index d24e0a38..8698ab9e 100644 --- a/src/constants/routes.ts +++ b/src/constants/routes.ts @@ -8,4 +8,5 @@ export const routes = { PROFILE_PAGE: "/profile", PROJECT_LIST_PAGE: "/projects", VARIATION_LIST_PAGE: "/variations", + VARIATION_DETAILS_PAGE: "/variations/details", }; diff --git a/src/pages/TestVariationDetailsPage.tsx b/src/pages/TestVariationDetailsPage.tsx new file mode 100644 index 00000000..a14e978c --- /dev/null +++ b/src/pages/TestVariationDetailsPage.tsx @@ -0,0 +1,84 @@ +import React from "react"; +import { useParams, Link } from "react-router-dom"; +import { TestVariation } from "../types"; +import { testVariationService, staticService } from "../services"; +import { + Container, + Box, + Grid, + Typography, + Card, + CardMedia, + makeStyles, + CardActions, + Button, +} from "@material-ui/core"; +import { buildTestRunUrl } from "../_helpers/route.helpers"; + +const useStyles = makeStyles({ + media: { + height: 600, + backgroundSize: "contain", + }, +}); + +const TestVariationDetailsPage: React.FunctionComponent = () => { + const classes = useStyles(); + const { testVariationId } = useParams(); + const [testVariation, setTestVariation] = React.useState(); + + React.useEffect(() => { + if (testVariationId) { + testVariationService.getDetails(testVariationId).then((item) => { + setTestVariation(item); + }); + } + }, [testVariationId]); + + return ( + + + + {testVariation && ( + + {testVariation.name} + + + + OS: {testVariation.os} + + + Browser: {testVariation.browser} + + + Viewport: {testVariation.viewport} + + + {testVariation.baselines.map((baseline) => ( + + + + + + + + + ))} + + )} + + + + ); +}; + +export default TestVariationDetailsPage; diff --git a/src/pages/TestVariationPage.tsx b/src/pages/TestVariationListPage.tsx similarity index 86% rename from src/pages/TestVariationPage.tsx rename to src/pages/TestVariationListPage.tsx index f817b103..4299fc42 100644 --- a/src/pages/TestVariationPage.tsx +++ b/src/pages/TestVariationListPage.tsx @@ -6,7 +6,7 @@ import { testVariationService } from "../services"; import { Container, Box, Grid, Typography } from "@material-ui/core"; import ProjectSelect from "../components/ProjectSelect"; -const TestVariationPage: React.FunctionComponent = () => { +const TestVariationListPage: React.FunctionComponent = () => { const { projectId } = useParams(); const [testVariations, setTestVariations] = React.useState( [] @@ -14,7 +14,7 @@ const TestVariationPage: React.FunctionComponent = () => { React.useEffect(() => { if (projectId) { - testVariationService.get(projectId).then((testVariations) => { + testVariationService.getList(projectId).then((testVariations) => { setTestVariations(testVariations); }); } @@ -39,4 +39,4 @@ const TestVariationPage: React.FunctionComponent = () => { ); }; -export default TestVariationPage; +export default TestVariationListPage; diff --git a/src/services/testVariation.service.ts b/src/services/testVariation.service.ts index 13976c66..7574fc51 100644 --- a/src/services/testVariation.service.ts +++ b/src/services/testVariation.service.ts @@ -6,11 +6,12 @@ import { IgnoreArea } from "../types/ignoreArea"; const ENDPOINT_URL = "/test-variations" export const testVariationService = { - get, + getList, + getDetails, setIgnoreAreas }; -function get(projectId: String): Promise { +function getList(projectId: String): Promise { const requestOptions = { method: "GET", headers: authHeader(), @@ -19,6 +20,15 @@ function get(projectId: String): Promise { return fetch(`${API_URL}${ENDPOINT_URL}?projectId=${projectId}`, requestOptions).then(handleResponse); } +function getDetails(id: String): Promise { + const requestOptions = { + method: "GET", + headers: authHeader(), + }; + + return fetch(`${API_URL}${ENDPOINT_URL}/${id}`, requestOptions).then(handleResponse); +} + function setIgnoreAreas( variationId: string, ignoreAreas: IgnoreArea[] diff --git a/src/types/baseline.ts b/src/types/baseline.ts new file mode 100644 index 00000000..8e2ac758 --- /dev/null +++ b/src/types/baseline.ts @@ -0,0 +1,11 @@ +import { TestRun } from "./testRun"; + +export interface Baseline { + id: string; + baselineName: string; + testRunId: string; + testVariationId: string; + createdAt: Date; + updatedAt: Date; + testRun: TestRun; +} diff --git a/src/types/testVariation.ts b/src/types/testVariation.ts index 30c9b78f..2a75a30e 100644 --- a/src/types/testVariation.ts +++ b/src/types/testVariation.ts @@ -1,4 +1,4 @@ -import { IgnoreArea } from "./ignoreArea"; +import { Baseline } from "./baseline"; export interface TestVariation { id: string; @@ -9,4 +9,6 @@ export interface TestVariation { viewport: string; device: string; ignoreAreas: string; + projectId: string; + baselines: Baseline[] }