Skip to content

Commit

Permalink
Merge pull request #36 from delta-reporter/resolution
Browse files Browse the repository at this point in the history 
Resolution v1.1
  • Loading branch information
@opishcheiko
opishcheiko authored Aug 19, 2020
2 parents 4e50801 + 51e08ce commit 7154507
Show file tree
Hide file tree
Showing 7 changed files with 168 additions and 199 deletions.
8 changes: 7 additions & 1 deletion components/templates/ListOfSuites.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { makeStyles } from "@material-ui/core/styles"
import {
showStatusIcon,
showTestStats,
showResolutionText,
TestExpanded,
} from "../../components/templates"
import {
Expand Down Expand Up @@ -182,7 +183,12 @@ export const ListOfSuites = function(props: Props) {
<Typography className={darkMode ? classes.nameOfTestOrSuiteDark : classes.nameOfTestOrSuiteLight}>
{test.name}
</Typography>
{/* </> */}
{/* 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)
)}
</ListItem>
</a>
))}
Expand Down
77 changes: 15 additions & 62 deletions components/templates/Test.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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
Expand All @@ -64,21 +55,18 @@ 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)
function convertToSeconds(microseconds: number) {
return (microseconds / 1000).toString()[0]
}

const handleResolutionDialogClose = (value: string) => {
setOpenResolutionDialog(false)
setResolutionResponse(value)
function getBackgroundColorForTheTab(darkMode) {
if(darkMode) return "#2a2a2a"
else return "white"
}

function convertToSeconds(microseconds: number) {
return (microseconds / 1000).toString()[0]
function getTextColorForTheTab(darkMode) {
if(darkMode) return "#8c8d8d"
else return "black"
}

return (
Expand All @@ -105,9 +93,9 @@ export const TestExpanded = function(props: TestProps) {
</Typography>
<Tabs style={{ marginTop: "20px" }} className={darkMode ? classes.textColorDarkMode : classes.textColorLightMode}>
<TabList>
<Tab style={{ fontSize: "16px" }}>Info</Tab>
<Tab style={{ fontSize: "16px" }}>Resolution</Tab>
<Tab style={{ fontSize: "16px" }}>Test History</Tab>
<Tab style={{ fontSize: "16px", backgroundColor: getBackgroundColorForTheTab(darkMode), color: getTextColorForTheTab(darkMode) }} >Info</Tab>
<Tab style={{ fontSize: "16px", backgroundColor: getBackgroundColorForTheTab(darkMode), color: getTextColorForTheTab(darkMode) }}>Resolution</Tab>
<Tab style={{ fontSize: "16px", backgroundColor: getBackgroundColorForTheTab(darkMode), color: getTextColorForTheTab(darkMode) }}>Test History</Tab>
</TabList>
{/* info tab */}
<TabPanel>
Expand Down Expand Up @@ -169,47 +157,12 @@ export const TestExpanded = function(props: TestProps) {
<TabPanel>
{/* set resolution tab */}
<div style={{ paddingTop: "20px" }}>
{children.resolution === "Not set" ? ( // when resolution is not set - show button
<Typography className={classes.bigMargin}>
<Button
variant="outlined"
color="primary"
onClick={handleResolutionDialogOpen}
className={classes.bigMargin}
>
Set test resolution
</Button>{" "}
<span
style={{
color: "grey",
fontStyle: "italic",
}}
>
{resolutionResponse}
</span>
</Typography>
) : (
<Typography style={{ paddingTop: "10px" }}>
Test Resolution:
<span style={{ color: "grey" }}>
{" "}
{children.resolution}{" "}
</span>
</Typography>
)}

<TestResolution
open={openResolutionDialog}
selectedValue={resolutionResponse}
onClose={handleResolutionDialogClose}
testHistoryId={children.test_history_id}
testResolutions={testResolutions}
/>
<TestResolution resolution = {children.test_history_resolution} testId={children.test_id} testHistoryId={children.test_history_id}></TestResolution>
</div>
</TabPanel>
<TabPanel>
{/* historical info tab */}
<HistoricalTests>{children}</HistoricalTests>
<HistoricalTests darkMode={darkMode}>{children}</HistoricalTests>
</TabPanel>
</Tabs>
</Paper>
Expand Down
22 changes: 17 additions & 5 deletions components/templates/TestHistory.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}`,
Expand Down Expand Up @@ -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)}}
>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography color="textPrimary">
{showStatusText(test.status)}{" "}
{showDateText(test.end_datetime)}
{showResolutionText(test.resolution)}{" "}
<Typography>
{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
<Tooltip title="Current test">
<button
Expand Down
88 changes: 48 additions & 40 deletions components/templates/TestResolution.tsx
View file
Original file line number Diff line number Diff line change
@@ -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)
Expand All @@ -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 (
<Dialog
onClose={handleClose}
aria-labelledby="simple-dialog-title"
open={open}
>
<DialogTitle id="simple-dialog-title">Set resolution:</DialogTitle>
<List>
{testResolutions.map(resolution => (
<ListItem
button
onClick={() => handleListItemClick(resolution)}
key={resolution}
>
<ListItemText primary={resolution} />
</ListItem>
))}
</List>
</Dialog>
<div>
<Typography style={{fontStyle:"italic"}}>
Set or update the resolution for this test:
</Typography>
<FormControl variant="outlined" style={{minWidth: 250, marginTop: "30px"}}>
<InputLabel>Resolution</InputLabel>
<Select
value={resolutionName}
onChange={handleDropdownSelect}
label="Resolution"
>
<MenuItem value={null}></MenuItem>
<MenuItem value={1}>Not set</MenuItem>
<MenuItem value={2}>Test is flaky</MenuItem>
<MenuItem value={3}>Product defect</MenuItem>
<MenuItem value={4}>Test needs to be updated</MenuItem>
<MenuItem value={5}>To investigate</MenuItem>
<MenuItem value={6}>Environment issue</MenuItem>
</Select>
</FormControl>

</div>
)
}
44 changes: 29 additions & 15 deletions components/templates/showDate.js
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,39 @@
import React from "react"
import {Typography, Tooltip} from "@material-ui/core"

export function showDateText(date) {
export function showDateText(date, darkMode) {
let dateBadge
let dateString = new Date(date).toUTCString();
let day = dateString.split(' ').slice(0, 3).join(' ');
let hour = dateString.split(' ').slice(-2)[0];
dateString= day + ", " + hour

dateBadge = (
<Tooltip title="End date">
<button style={
{
color: "#6B8E23",
margin: "5px",
backgroundColor: "white",
border: "none",
}
}>
{dateString} </button>
</Tooltip>
)
if(darkMode) {
dateBadge = (
<Tooltip title="End date">
<button style={
{
color: "#6B8E23",
margin: "5px",
backgroundColor: "#2a2a2a",
border: "1px solid",
}
}>
{dateString} </button>
</Tooltip>
)
} else
dateBadge = (
<Tooltip title="End date">
<button style={
{
color: "#6B8E23",
margin: "5px",
backgroundColor: "white",
border: "none",
}
}>
{dateString} </button>
</Tooltip>
)
return dateBadge
}
Loading

0 comments on commit 7154507

Please sign in to comment.