From 9cbe6a385008c18820b985f364f2a15f5e66d89c Mon Sep 17 00:00:00 2001 From: Alex Pishcheiko Date: Tue, 18 Aug 2020 18:50:28 +0100 Subject: [PATCH 1/2] more logic around dark mode to make test tabs look nice --- components/templates/Test.tsx | 18 ++++- components/templates/TestHistory.tsx | 22 ++++-- components/templates/showDate.js | 44 +++++++---- components/templates/showResolution.js | 102 +++++++------------------ 4 files changed, 88 insertions(+), 98 deletions(-) diff --git a/components/templates/Test.tsx b/components/templates/Test.tsx index a0ede1e..0a09e5b 100644 --- a/components/templates/Test.tsx +++ b/components/templates/Test.tsx @@ -81,6 +81,16 @@ export const TestExpanded = function(props: TestProps) { return (microseconds / 1000).toString()[0] } + function getBackgroundColorForTheTab(darkMode) { + if(darkMode) return "#2a2a2a" + else return "white" + } + + function getTextColorForTheTab(darkMode) { + if(darkMode) return "#8c8d8d" + else return "black" + } + return (
- Info - Resolution - Test History + Info + Resolution + Test History {/* info tab */} @@ -209,7 +219,7 @@ export const TestExpanded = function(props: TestProps) { {/* historical info tab */} - {children} + {children} diff --git a/components/templates/TestHistory.tsx b/components/templates/TestHistory.tsx index c37bd75..d3c55fd 100644 --- a/components/templates/TestHistory.tsx +++ b/components/templates/TestHistory.tsx @@ -21,10 +21,21 @@ const fetcher = url => fetch(url).then(res => res.json()) interface TestProps { children: any + darkMode: boolean } export const HistoricalTests = function(props: TestProps) { - const { children } = props + const { children, darkMode } = props + + function getBackgroundColor(darkMode) { + if(darkMode) return "#2a2a2a" + else return "white" + } + + function getTextColor(darkMode) { + if(darkMode) return "#8c8d8d" + else return "black" + } const { data, error } = useSWR( `${process.env.publicDeltaCore}/api/v1/test_history/test_id/${children.test_id}`, @@ -72,12 +83,13 @@ export const HistoricalTests = function(props: TestProps) { expanded={historicalTestsExpandedPanel === test.test_history_id} onChange={expandCollapsePanel(test.test_history_id)} TransitionProps={{ unmountOnExit: true }} + style={{backgroundColor: getBackgroundColor(darkMode), color: getTextColor(darkMode)}} > }> - - {showStatusText(test.status)}{" "} - {showDateText(test.end_datetime)} - {showResolutionText(test.resolution)}{" "} + + {showStatusText(test.status, darkMode)}{" "} + {showDateText(test.end_datetime, darkMode)} + {showResolutionText(test.resolution, darkMode)}{" "} {test.test_history_id === children.test_history_id ? ( // if it's current test - show the badge - - ) + if(darkMode) { + dateBadge = ( + + + + ) + } else + dateBadge = ( + + + + ) return dateBadge } diff --git a/components/templates/showResolution.js b/components/templates/showResolution.js index 64e4b3c..c03b7f2 100644 --- a/components/templates/showResolution.js +++ b/components/templates/showResolution.js @@ -1,84 +1,38 @@ import React from "react" import {Typography, Tooltip} from "@material-ui/core" -export function showResolutionText(resolution) { +export function showResolutionText(resolution, darkMode) { let resolutionBadge if (resolution === "Not set") { resolutionBadge = "" - } else if (resolution === "Test is flaky") { - resolutionBadge = ( - - - - ) - } else if (resolution === "Product defect") { - resolutionBadge = ( - - - - ) - } else if (resolution === "Test needs to be updated") { - resolutionBadge = ( - - - - ) - } else if (resolution === "To investigate") { - resolutionBadge = ( - - - - ) - } else if (resolution === "Environment issue") { - resolutionBadge = ( - - - - ) } else { - resolutionBadge = ( - - - {resolution} - + if(darkMode) { + resolutionBadge = ( + + + + ) + } + else + resolutionBadge = ( + + + ) - } return resolutionBadge + } } From 51e08ce9095a0a90eb3a95fa0554fddb88a76df0 Mon Sep 17 00:00:00 2001 From: Alex Pishcheiko Date: Tue, 18 Aug 2020 22:06:54 +0100 Subject: [PATCH 2/2] resolutiion dropdown and badge --- components/templates/ListOfSuites.tsx | 8 ++- components/templates/Test.tsx | 63 +----------------- components/templates/TestResolution.tsx | 88 ++++++++++++++----------- components/templates/showResolution.js | 27 +++++++- pages/index.tsx | 3 +- 5 files changed, 84 insertions(+), 105 deletions(-) diff --git a/components/templates/ListOfSuites.tsx b/components/templates/ListOfSuites.tsx index 11f12c4..b3df8ca 100644 --- a/components/templates/ListOfSuites.tsx +++ b/components/templates/ListOfSuites.tsx @@ -3,6 +3,7 @@ import { makeStyles } from "@material-ui/core/styles" import { showStatusIcon, showTestStats, + showResolutionText, TestExpanded, } from "../../components/templates" import { @@ -182,7 +183,12 @@ export const ListOfSuites = function(props: Props) { {test.name} - {/* */} + {/* if resolution for the current run exists - show it, otherwise - show the general resolution for this test */} + {test.test_history_resolution ? ( + showResolutionText(test.test_history_resolution, darkMode) + ) : ( + showResolutionText(test.test_resolution, darkMode) + )} ))} diff --git a/components/templates/Test.tsx b/components/templates/Test.tsx index 0a09e5b..160dcce 100644 --- a/components/templates/Test.tsx +++ b/components/templates/Test.tsx @@ -1,6 +1,6 @@ -import React, { useState } from "react" +import React from "react" import { makeStyles } from "@material-ui/core/styles" -import { Paper, Typography, Button } from "@material-ui/core" +import { Paper, Typography } from "@material-ui/core" import { TestErrorMessageAccordion, TestMediaAccordion, @@ -46,15 +46,6 @@ const useStyles = makeStyles(theme => ({ }, })) -const testResolutions = [ - "Not set", - "Test is flaky", - "Product defect", - "Test needs to be updated", - "To investigate", - "Environment issue", -] - interface TestProps { children: any darkMode: boolean @@ -64,19 +55,6 @@ export const TestExpanded = function(props: TestProps) { const { children, darkMode } = props const classes = useStyles(props) - const [openResolutionDialog, setOpenResolutionDialog] = useState(false) - const [resolutionResponse, setResolutionResponse] = useState( - testResolutions[0] - ) - const handleResolutionDialogOpen = () => { - setOpenResolutionDialog(true) - } - - const handleResolutionDialogClose = (value: string) => { - setOpenResolutionDialog(false) - setResolutionResponse(value) - } - function convertToSeconds(microseconds: number) { return (microseconds / 1000).toString()[0] } @@ -179,42 +157,7 @@ export const TestExpanded = function(props: TestProps) { {/* set resolution tab */}
- {children.resolution === "Not set" ? ( // when resolution is not set - show button - - {" "} - - {resolutionResponse} - - - ) : ( - - Test Resolution: - - {" "} - {children.resolution}{" "} - - - )} - - +
diff --git a/components/templates/TestResolution.tsx b/components/templates/TestResolution.tsx index d8198b6..02d8233 100644 --- a/components/templates/TestResolution.tsx +++ b/components/templates/TestResolution.tsx @@ -1,35 +1,40 @@ -import React from "react" +import React, { useState } from "react" import { - List, - ListItem, - Dialog, - DialogTitle, - ListItemText, + FormControl, + InputLabel, + Select, + MenuItem, + Typography, } from "@material-ui/core" +import { getResolutionName } from "./showResolution"; -interface ResolutionProps { - open: boolean - selectedValue: string - onClose: (value: string) => void - testHistoryId: string | number - testResolutions: string[] +interface TestProps { + testHistoryId: any + testId: any + resolution: any } -export const TestResolution = function(props: ResolutionProps) { - const { onClose, selectedValue, open, testHistoryId, testResolutions } = props +export const TestResolution = function(props: TestProps) { + const { testHistoryId, testId, resolution } = props + const [resolutionName, setResolutionName] = useState(resolution) + + const handleDropdownSelect = (event: React.ChangeEvent<{ value: unknown }>) => { + setResolutionName(event.target.value as string); + changeResolution(getResolutionName(event.target.value)) + if (typeof window !== 'undefined') { + window.location.reload(false) //temporarily refreshing the page when resolution is updated, need to come up with a better solution + } + }; - const handleClose = () => { - onClose(selectedValue) - } - - const handleListItemClick = async (resolution: string) => { + const changeResolution = async (resolutionValue) => { // PUT request using fetch with async/await const requestOptions = { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ test_history_id: testHistoryId, - test_resolution: resolution, + test_resolution: resolutionValue, + test_id: testId }), } console.log(requestOptions) @@ -38,28 +43,31 @@ export const TestResolution = function(props: ResolutionProps) { `${process.env.publicDeltaCore}/api/v1/test_history_resolution`, requestOptions ) - const data = await response.json() - onClose(data.message) + await response.json() } return ( - - Set resolution: - - {testResolutions.map(resolution => ( - handleListItemClick(resolution)} - key={resolution} - > - - - ))} - - +
+ + Set or update the resolution for this test: + + + Resolution + + + +
) } diff --git a/components/templates/showResolution.js b/components/templates/showResolution.js index c03b7f2..0624ed8 100644 --- a/components/templates/showResolution.js +++ b/components/templates/showResolution.js @@ -2,10 +2,19 @@ import React from "react" import {Typography, Tooltip} from "@material-ui/core" export function showResolutionText(resolution, darkMode) { + + if(resolution == 1) resolution = "Not set" + else if(resolution == 2) resolution = "Test is flaky" + else if(resolution == 3) resolution = "Product defect" + else if(resolution == 4) resolution = "Test needs to be updated" + else if(resolution == 5) resolution = "To investigate" + else if(resolution == 6) resolution = "Environment issue" + let resolutionBadge - if (resolution === "Not set") { + if (resolution === "Not set" || resolution === null) { resolutionBadge = "" } else { + if(darkMode) { resolutionBadge = ( @@ -16,7 +25,7 @@ export function showResolutionText(resolution, darkMode) { border: "1px #dda057 solid", backgroundColor: "#2a2a2a" } - }>Test is flaky + }>{resolution} ) } @@ -30,9 +39,21 @@ export function showResolutionText(resolution, darkMode) { border: "1px #dda057 solid", backgroundColor: "white" } - }>Test is flaky + }>{resolution} ) return resolutionBadge } } + +export function getResolutionName(resolution) { + let resolutionName + if(resolution == 1) resolutionName = "Not set" + else if(resolution == 2) resolutionName = "Test is flaky" + else if(resolution == 3) resolutionName = "Product defect" + else if(resolution == 4) resolutionName = "Test needs to be updated" + else if(resolution == 5) resolutionName = "To investigate" + else if(resolution == 6) resolutionName = "Environment issue" + else return "" + return resolutionName +} diff --git a/pages/index.tsx b/pages/index.tsx index 9dd63bc..53645fe 100755 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -175,7 +175,8 @@ export interface SuiteAndTest { test_history_id: number test_id: number name: string - resolution: string + test_history_resolution: string + test_resolution: string message: string status: string error_type: string