Skip to content

Commit 3a0b218

Browse files
stabarezstabarez
committed
[BA-40] Improve tests executions UI
- Update to last version of mc-components. - Fix issues after update. - Add workaround for the scroll inside modal issue. - Improve tests executions UI: - Reduce the amount of tests metadata that we show by default in order to improve the use of space. - Add 'more' button to full data. - Place toggle results button next to the rerun button to make it more visible, both align to right.
1 parent 6fce438 commit 3a0b218

File tree

12 files changed

+116
-70
lines changed

12 files changed

+116
-70
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
"humps": "2.0.1",
4242
"isomorphic-fetch": "2.2.1",
4343
"lodash": "4.17.11",
44-
"mc-components": "1.1.4",
44+
"mc-components": "^1.8.2",
4545
"normalizr": "3.3.0",
4646
"prop-types": "15.6.2",
4747
"query-string": "5.1.1",

‎src/components/Anchor/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const StyledAnchor = ({
2121
}) => {
2222
const classNames = cn(
2323
'mc-text-h8',
24-
{ 'mc-text--muted': !isActive },
24+
{ 'mc-opacity--muted': !isActive },
2525
{ [className]: !!className }
2626
)
2727
return (

‎src/components/Executions/ExecutionRow.js

+85-60
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ const ExecutionRow = ({
3232
production
3333
}) => {
3434
const [showData, setShowData] = useState(false)
35+
const [showExpanded, setShowExpanded] = useState(false)
3536
const [loadingRerun, setLoadingRerun] = useState(false)
3637

3738
const getDistance = startedAt =>
@@ -54,6 +55,7 @@ const ExecutionRow = ({
5455
}
5556
})
5657

58+
const onExpand = () => setShowExpanded(!showExpanded)
5759
const onToggle = () => setShowData(!showData)
5860

5961
const onRerun = (replaceScreenshots = false, index) => {
@@ -75,73 +77,96 @@ const ExecutionRow = ({
7577

7678
return (
7779
<Fragment>
78-
<div className="mc-mb-3">
79-
<div className="mc-mb-4">
80-
{startedAt && <p>{`${distance} ago`}</p>}
81-
<div>
82-
<span>status: </span>
83-
<StatusBadge status={status} small />
84-
</div>
85-
{startedAt && (
86-
<Timer startDate={startedAt} endDate={endedAt}>
87-
{(minutes, seconds) => (
88-
<p>
89-
duration: {minutes}:{seconds}
90-
</p>
80+
<Flex alignItems="flex-start" justifyContent="space-between">
81+
<div>
82+
<div className="mc-mb-3">
83+
<div className="mc-mb-4">
84+
{startedAt && <p>{`${distance} ago`}</p>}
85+
<p>{`test: ${test}`}</p>
86+
{startedAt && (
87+
<Timer startDate={startedAt} endDate={endedAt}>
88+
{(minutes, seconds) => (
89+
<p>
90+
duration: {minutes}:{seconds}
91+
</p>
92+
)}
93+
</Timer>
9194
)}
92-
</Timer>
93-
)}
95+
<Flex>
96+
<span>status: </span>
97+
<span className="mc-ml-2">
98+
<StatusBadge status={status} small />
99+
</span>
100+
</Flex>
101+
</div>
102+
</div>
103+
104+
<Anchor className="mc-my-4" onClick={onExpand}>
105+
{!showExpanded ? 'More' : 'Less'}
106+
</Anchor>
94107
</div>
95-
<p>{`id: ${id}`}</p>
96-
<p>{`test: ${test}`}</p>
97-
<p>
98-
URL:{' '}
99-
<a
100-
className="mc-text--link"
101-
href={url}
102-
target="_blank"
103-
rel="noopener noreferrer"
104-
>
105-
{url}
106-
</a>
107-
</p>
108-
{repositoryName && repositoryOwner && (
109-
<p>repository: {`${repositoryOwner}/${repositoryName}`}</p>
110-
)}
111-
{repositoryRef && <p>ref: {repositoryRef}</p>}
112-
{user && (
108+
109+
<div>
113110
<Flex>
114-
<span>user: </span>
115-
{user && (
116-
<Fragment>
117-
<Avatar
118-
className="mc-mx-2"
119-
src={`https://github.com/${user}.png`}
120-
width="26px"
121-
height="26px"
122-
/>
123-
<a
124-
className="mc-text--link"
125-
href={`https://github.com/${user}`}
126-
target="_blank"
127-
rel="noopener noreferrer"
128-
>
129-
{user}
130-
</a>
131-
</Fragment>
111+
{rerunEnabled && (
112+
<Button onClick={onRerun} loading={loadingRerun}>
113+
Rerun
114+
</Button>
115+
)}
116+
{!!testResults && (
117+
<Button kind="secondary" className="mc-ml-2" onClick={onToggle}>
118+
Toggle Results
119+
</Button>
132120
)}
133121
</Flex>
134-
)}
135-
{production && <p className="mc-mt-4">Only for production</p>}
136-
{rerunEnabled && (
137-
<Button className="mc-mt-4" onClick={onRerun} loading={loadingRerun}>
138-
RERUN
139-
</Button>
140-
)}
141-
</div>
122+
</div>
123+
</Flex>
124+
{showExpanded && (
125+
<div className="mc-mt-2">
126+
<p>{`id: ${id}`}</p>
127+
<p>
128+
URL:{' '}
129+
<a
130+
className="mc-text--link"
131+
href={url}
132+
target="_blank"
133+
rel="noopener noreferrer"
134+
>
135+
{url}
136+
</a>
137+
</p>
138+
{repositoryName && repositoryOwner && (
139+
<p>repository: {`${repositoryOwner}/${repositoryName}`}</p>
140+
)}
141+
{repositoryRef && <p>ref: {repositoryRef}</p>}
142+
{user && (
143+
<Flex>
144+
<span>user: </span>
145+
{user && (
146+
<Fragment>
147+
<Avatar
148+
className="mc-mx-2"
149+
src={`https://github.com/${user}.png`}
150+
width="26px"
151+
height="26px"
152+
/>
153+
<a
154+
className="mc-text--link"
155+
href={`https://github.com/${user}`}
156+
target="_blank"
157+
rel="noopener noreferrer"
158+
>
159+
{user}
160+
</a>
161+
</Fragment>
162+
)}
163+
</Flex>
164+
)}
165+
{production && <p className="mc-mt-4">Only for production</p>}
166+
</div>
167+
)}
142168
{!!testResults && (
143169
<Fragment>
144-
<Anchor onClick={onToggle}>Toggle results</Anchor>
145170
{showData && (
146171
<ResultWrapper className="mc-p-4 mc-my-3">
147172
<TestResults

‎src/components/Flex/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ const Flex = styled.div`
55
align-items: ${({ alignItems = 'center' }) => alignItems};
66
justify-content: ${({ justifyContent = 'flex-start' }) => justifyContent};
77
flex-direction: ${({ flexDirection = 'row' }) => flexDirection};
8+
flex-wrap: ${({ flexWrap = 'wrap' }) => flexWrap};
89
`
910

1011
export default Flex

‎src/components/RepositoryForm/index.js

+4
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import validate from 'validate.js'
77
const RepositoryForm = ({ submitting, handleSubmit, edit = false }) => (
88
<form onSubmit={handleSubmit} noValidate>
99
<Field
10+
className="mc-mb-6"
1011
component={InputField}
1112
name="owner"
1213
label="Repository Owner *"
@@ -16,6 +17,7 @@ const RepositoryForm = ({ submitting, handleSubmit, edit = false }) => (
1617
/>
1718

1819
<Field
20+
className="mc-mb-6"
1921
component={InputField}
2022
name="name"
2123
label="Repository Name *"
@@ -25,6 +27,7 @@ const RepositoryForm = ({ submitting, handleSubmit, edit = false }) => (
2527
/>
2628

2729
<Field
30+
className="mc-mb-6"
2831
component={InputField}
2932
name="defaultRef"
3033
label="Default git reference *"
@@ -33,6 +36,7 @@ const RepositoryForm = ({ submitting, handleSubmit, edit = false }) => (
3336
/>
3437

3538
<Field
39+
className="mc-mb-6"
3640
component={InputField}
3741
name="baseFolder"
3842
label="Browser automation base folder"

‎src/components/RunAllTests/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const RunAllTests = ({ history, match }) => {
5656

5757
return (
5858
<div className="mc-my-4">
59-
<div className="row">
59+
<div className="row mc-my-2">
6060
<div className="col-8">
6161
<FormGroup
6262
label="URL"

‎src/components/RunGithubCheck/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const RunGithubCheck = ({ match }) => {
4848

4949
return (
5050
<div className="mc-my-4">
51-
<div className="row">
51+
<div className="row mc-my-2">
5252
<div className="col-8">
5353
<FormGroup
5454
label="URL"

‎src/components/RunStressTest/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const RunStressTest = ({ test, lastStressExecution, onSuccess, match }) => {
6060
)}%`}</span>
6161
</div>
6262
)}
63-
<div className="row">
63+
<div className="row mc-my-2">
6464
<div className="col-6">
6565
<FormGroup
6666
label="URL"

‎src/components/RunTest/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const RunTest = ({ test, onSuccess, match }) => {
3737

3838
return (
3939
<div className="mc-my-4">
40-
<div className="row">
40+
<div className="row mc-my-2">
4141
<div className="col-6">
4242
<FormGroup
4343
label="URL"

‎src/components/TestSuiteForm/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import validate from 'validate.js'
77
const TestSuiteForm = ({ submitting, handleSubmit }) => (
88
<form onSubmit={handleSubmit} noValidate>
99
<Field
10+
className="mc-mb-6"
1011
component={InputField}
1112
name="name"
1213
label="Name"
@@ -15,6 +16,7 @@ const TestSuiteForm = ({ submitting, handleSubmit }) => (
1516
/>
1617

1718
<Field
19+
className="mc-mb-6"
1820
component={InputField}
1921
name="url"
2022
label="URL"
@@ -23,6 +25,7 @@ const TestSuiteForm = ({ submitting, handleSubmit }) => (
2325
/>
2426

2527
<Field
28+
className="mc-mb-6"
2629
component={TextareaField}
2730
name="description"
2831
label="Description"

‎src/styles/styles.scss

+7
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@ body {
55
letter-spacing: 0.01em;
66
}
77

8+
// work around scroll issue on mc-components modal
9+
// v1.8.2
10+
.mc-modal > div > div {
11+
height: 100%;
12+
overflow: auto;
13+
}
14+
815
:export {
916
mcColorGray200: $mc-color-gray-200;
1017
mcColorGray400: $mc-color-gray-400;

‎yarn.lock

+10-4
Original file line numberDiff line numberDiff line change
@@ -6569,13 +6569,14 @@ mathml-tag-names@^2.0.1:
65696569
resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.0.tgz#490b70e062ee24636536e3d9481e333733d00f2c"
65706570
integrity sha512-3Zs9P/0zzwTob2pdgT0CHZuMbnSUSp8MB1bddfm+HDmnFWHGT4jvEZRf+2RuPoa+cjdn/z25SEt5gFTqdhvJAg==
65716571

6572-
mc-components@1.1.4:
6573-
version "1.1.4"
6574-
resolved "https://registry.yarnpkg.com/mc-components/-/mc-components-1.1.4.tgz#b9c505b93101306047697c758fb9a297c14d6a4f"
6575-
integrity sha512-mwqWIJqLU4mpe/ZBGYLUbw7RcPnBBHuxksKesyahcH6Te1L6LafWRr6hH10i6yA746Hbu1+U31SpDbvYVHPEWw==
6572+
mc-components@^1.8.2:
6573+
version "1.8.2"
6574+
resolved "https://registry.yarnpkg.com/mc-components/-/mc-components-1.8.2.tgz#b96b550798f0438235468f6b8311da35f64cd1db"
6575+
integrity sha512-0QawbyxpdzeIKFBDE1yQzLClSWnh++L7NdDfHIhLe4rK5ddYGXAY3Nym1HWVCyRIdrxiBSZNWk3j1mAUz5wjOQ==
65766576
dependencies:
65776577
bootstrap "^4.3.0"
65786578
classnames "^2.2.5"
6579+
popper.js "^1.15.0"
65796580
react-select "^2.3.0"
65806581
react-slick "^0.23.1"
65816582
slick-carousel "^1.8.1"
@@ -7807,6 +7808,11 @@ pn@^1.1.0:
78077808
resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
78087809
integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
78097810

7811+
popper.js@^1.15.0:
7812+
version "1.15.0"
7813+
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.15.0.tgz#5560b99bbad7647e9faa475c6b8056621f5a4ff2"
7814+
integrity sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==
7815+
78107816
posix-character-classes@^0.1.0:
78117817
version "0.1.1"
78127818
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"

0 commit comments

Comments
 (0)