-
-
Notifications
You must be signed in to change notification settings - Fork 293
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #466 from ImanMahmoudinasab/feature/migrate-to-mui…
…-run-list-view feat: Migrate run list view to MUI
- Loading branch information
Showing
45 changed files
with
1,213 additions
and
550 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,23 @@ | ||
| import React from 'react'; | ||
| import { Tooltip } from '@mui/material'; | ||
| import { FORMAT, FORMAT_SHORTER } from '@sorry-cypress/dashboard/constants'; | ||
| import { format } from 'date-fns'; | ||
| import { Tooltip } from 'bold-ui'; | ||
|
|
||
| const FORMAT = 'MMM dd yyyy, HH:mm:ss'; | ||
| export const FormattedDate = ({ value }: { value: Date }) => { | ||
| return ( | ||
| <Tooltip text={value.toUTCString()}> | ||
| <span>{format(value, FORMAT)}</span> | ||
| </Tooltip> | ||
| ); | ||
| import React, { FunctionComponent } from 'react'; | ||
|
|
||
| export const FormattedDate: DateComponent = (props) => { | ||
| const { value, showTooltip = true, short = false } = props; | ||
| const render = <span>{format(value, short ? FORMAT_SHORTER : FORMAT)}</span>; | ||
|
|
||
| if (showTooltip) { | ||
| return <Tooltip title={value.toUTCString()}>{render}</Tooltip>; | ||
| } | ||
|
|
||
| return render; | ||
| }; | ||
|
|
||
| type DateProps = { | ||
| value: Date; | ||
| showTooltip?: boolean; | ||
| short?: boolean; | ||
| }; | ||
|
|
||
| type DateComponent = FunctionComponent<DateProps>; |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
159 changes: 91 additions & 68 deletions
159
packages/dashboard/src/components/common/testResults.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,93 +1,116 @@ | ||
| import { HFlow, Icon, Text, Tooltip } from 'bold-ui'; | ||
| import React from 'react'; | ||
| import { | ||
| CheckCircleOutline as CheckCircleOutlineIcon, | ||
| ErrorOutline as ErrorOutlineIcon, | ||
| Flaky as FlakyIcon, | ||
| NextPlanOutlined as NextPlanOutlinedIcon, | ||
| RadioButtonUnchecked as RadioButtonUncheckedIcon, | ||
| } from '@mui/icons-material'; | ||
| import { Box, Tooltip } from '@mui/material'; | ||
| import { padStart } from 'lodash'; | ||
| import React, { FunctionComponent } from 'react'; | ||
| import { Chip } from '..'; | ||
|
|
||
| export const TestSuccessBadge: TestBadgeComponent = (props) => { | ||
| const { value } = props; | ||
|
|
||
| export const TestSuccessBadge = ({ value }: { value: number }) => { | ||
| const color = value ? 'success' : 'disabled'; | ||
| return ( | ||
| <Text color={color}> | ||
| <Tooltip text="Passed Tests"> | ||
| <HFlow alignItems="center" hSpacing={0.5}> | ||
| <Icon icon="checkCircleOutline" size={1} /> | ||
| {value} | ||
| </HFlow> | ||
| </Tooltip> | ||
| </Text> | ||
| <Tooltip title="Passed Tests" arrow> | ||
| <Chip | ||
| size="small" | ||
| color={value ? 'green' : 'grey'} | ||
| shade={!value ? 300 : undefined} | ||
| label={<Pad number={value} />} | ||
| icon={CheckCircleOutlineIcon} | ||
| /> | ||
| </Tooltip> | ||
| ); | ||
| }; | ||
|
|
||
| export const TestFailureBadge = ({ value }: { value: number }) => { | ||
| const color = value ? 'danger' : 'disabled'; | ||
| export const TestFailureBadge: TestBadgeComponent = (props) => { | ||
| const { value } = props; | ||
|
|
||
| return ( | ||
| <Text color={color}> | ||
| <Tooltip text="Failed Tests"> | ||
| <HFlow alignItems="center" hSpacing={0.5}> | ||
| <Icon icon="exclamationTriangleOutline" size={1} /> | ||
| {value} | ||
| </HFlow> | ||
| </Tooltip> | ||
| </Text> | ||
| <Tooltip title="Failed Tests" arrow> | ||
| <Chip | ||
| size="small" | ||
| color={value ? 'red' : 'grey'} | ||
| shade={!value ? 300 : undefined} | ||
| label={<Pad number={value} />} | ||
| icon={ErrorOutlineIcon} | ||
| /> | ||
| </Tooltip> | ||
| ); | ||
| }; | ||
|
|
||
| export const TestRetriesSkippedBadge = ({ | ||
| retries, | ||
| skipped, | ||
| }: { | ||
| retries: number; | ||
| skipped: number; | ||
| }) => { | ||
| export const TestSkippedBadge: TestBadgeComponent = (props) => { | ||
| const { value } = props; | ||
|
|
||
| return ( | ||
| <div style={{ display: 'flex' }}> | ||
| <TestRetriesBadge value={retries} /> | ||
| <TestSkippedBadge value={skipped} style={{ paddingLeft: '1rem' }} /> | ||
| </div> | ||
| <Tooltip title="Skipped Tests" arrow> | ||
| <Chip | ||
| size="small" | ||
| color={value ? 'orange' : 'grey'} | ||
| shade={!value ? 300 : undefined} | ||
| label={<Pad number={value} />} | ||
| icon={NextPlanOutlinedIcon} | ||
| /> | ||
| </Tooltip> | ||
| ); | ||
| }; | ||
|
|
||
| export const TestSkippedBadge = ({ | ||
| value, | ||
| style, | ||
| }: { | ||
| value: number; | ||
| style?: any; | ||
| }) => { | ||
| const color = value ? 'normal' : 'disabled'; | ||
| export const TestRetriesBadge: TestBadgeComponent = (props) => { | ||
| const { value } = props; | ||
|
|
||
| return ( | ||
| <Text color={color} style={style}> | ||
| <Tooltip text="Skipped Tests"> | ||
| <HFlow alignItems="center" hSpacing={0.5}> | ||
| <Icon icon="timesOutline" size={1} /> | ||
| {value} | ||
| </HFlow> | ||
| </Tooltip> | ||
| </Text> | ||
| <Tooltip title="Flaky Tests" arrow> | ||
| <Chip | ||
| size="small" | ||
| color={value ? 'pink' : 'grey'} | ||
| shade={!value ? 300 : undefined} | ||
| label={<Pad number={value} />} | ||
| icon={FlakyIcon} | ||
| /> | ||
| </Tooltip> | ||
| ); | ||
| }; | ||
|
|
||
| export const TestRetriesBadge = ({ value }: { value: number }) => { | ||
| const color = value ? 'alert' : 'disabled'; | ||
| export const TestOverallBadge: TestBadgeComponent = (props) => { | ||
| const { value } = props; | ||
|
|
||
| return ( | ||
| <Text color={color}> | ||
| <Tooltip text="Retried Tests"> | ||
| <HFlow alignItems="center" hSpacing={0.5}> | ||
| <Icon icon="sync" size={1} /> | ||
| {value} | ||
| </HFlow> | ||
| </Tooltip> | ||
| </Text> | ||
| <Tooltip title="Total Tests" arrow> | ||
| <Chip | ||
| size="small" | ||
| color="cyan" | ||
| label={<Pad number={value} />} | ||
| icon={RadioButtonUncheckedIcon} | ||
| /> | ||
| </Tooltip> | ||
| ); | ||
| }; | ||
|
|
||
| export const TestOverallBadge = ({ value }: { value: number }) => { | ||
| const Pad: PadComponent = (props) => { | ||
| const { number } = props; | ||
|
|
||
| return ( | ||
| <Text> | ||
| <Tooltip text="Total Tests"> | ||
| <HFlow alignItems="center" hSpacing={0.5}> | ||
| <Icon icon="fileWithItensOutline" size={1} /> | ||
| {value} | ||
| </HFlow> | ||
| </Tooltip> | ||
| </Text> | ||
| <Box | ||
| component="span" | ||
| whiteSpace="pre" | ||
| sx={{ | ||
| opacity: !number ? 0.4 : undefined, | ||
| }} | ||
| > | ||
| {padStart(number?.toString(), 4)} | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| type PadProps = { | ||
| number: number; | ||
| }; | ||
| type PadComponent = FunctionComponent<PadProps>; | ||
|
|
||
| type TestBadgeProps = { | ||
| value: number; | ||
| }; | ||
| type TestBadgeComponent = FunctionComponent<TestBadgeProps>; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| export * from './common'; | ||
| export * from './ui'; | ||
| export * from './layout'; | ||
| export * from './ui'; |
Oops, something went wrong.