Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
heptapod
heptapod
Commits
bbb2d8b4719a
Commit
8bfe5473
authored
Aug 16, 2018
by
Filipa Lacerda
Committed by
Phil Hughes
Aug 16, 2018
Browse files
Creates empty state component for job log view
parent
28b99cda41b3
Changes
3
Hide whitespace changes
Inline
Side-by-side
app/assets/javascripts/jobs/components/empty_state.vue
0 → 100644
View file @
bbb2d8b4
<
script
>
export
default
{
props
:
{
illustrationPath
:
{
type
:
String
,
required
:
true
,
},
illustrationSizeClass
:
{
type
:
String
,
required
:
true
,
},
title
:
{
type
:
String
,
required
:
true
,
},
content
:
{
type
:
String
,
required
:
false
,
default
:
null
,
},
action
:
{
type
:
Object
,
required
:
false
,
default
:
null
,
validator
(
value
)
{
return
(
value
===
null
||
(
Object
.
prototype
.
hasOwnProperty
.
call
(
value
,
'
link
'
)
&&
Object
.
prototype
.
hasOwnProperty
.
call
(
value
,
'
method
'
)
&&
Object
.
prototype
.
hasOwnProperty
.
call
(
value
,
'
title
'
))
);
},
},
},
};
</
script
>
<
template
>
<div
class=
"row empty-state"
>
<div
class=
"col-12"
>
<div
:class=
"illustrationSizeClass"
class=
"svg-content"
>
<img
:src=
"illustrationPath"
/>
</div>
</div>
<div
class=
"col-12"
>
<div
class=
"text-content"
>
<h4
class=
"js-job-empty-state-title text-center"
>
{{
title
}}
</h4>
<p
v-if=
"content"
class=
"js-job-empty-state-content"
>
{{
content
}}
</p>
<div
v-if=
"action"
class=
"text-center"
>
<a
:href=
"action.link"
:data-method=
"action.method"
class=
"js-job-empty-state-action btn btn-primary"
>
{{
action
.
title
}}
</a>
</div>
</div>
</div>
</div>
</
template
>
changelogs/unreleased/50101-empty-state-component.yml
0 → 100644
View file @
bbb2d8b4
---
title
:
Creates empty state vue component for job view
merge_request
:
author
:
type
:
other
spec/javascripts/jobs/empty_state_spec.js
0 → 100644
View file @
bbb2d8b4
import
Vue
from
'
vue
'
;
import
component
from
'
~/jobs/components/empty_state.vue
'
;
import
mountComponent
from
'
../helpers/vue_mount_component_helper
'
;
describe
(
'
Empty State
'
,
()
=>
{
const
Component
=
Vue
.
extend
(
component
);
let
vm
;
const
props
=
{
illustrationPath
:
'
illustrations/pending_job_empty.svg
'
,
illustrationSizeClass
:
'
svg-430
'
,
title
:
'
This job has not started yet
'
,
};
const
content
=
'
This job is in pending state and is waiting to be picked by a runner
'
;
afterEach
(()
=>
{
vm
.
$destroy
();
});
describe
(
'
renders image and title
'
,
()
=>
{
beforeEach
(()
=>
{
vm
=
mountComponent
(
Component
,
{
...
props
,
content
,
});
});
it
(
'
renders img with provided path and size
'
,
()
=>
{
expect
(
vm
.
$el
.
querySelector
(
'
img
'
).
getAttribute
(
'
src
'
)).
toEqual
(
props
.
illustrationPath
);
expect
(
vm
.
$el
.
querySelector
(
'
.svg-content
'
).
classList
).
toContain
(
props
.
illustrationSizeClass
);
});
it
(
'
renders provided title
'
,
()
=>
{
expect
(
vm
.
$el
.
querySelector
(
'
.js-job-empty-state-title
'
).
textContent
.
trim
()).
toEqual
(
props
.
title
,
);
});
});
describe
(
'
with content
'
,
()
=>
{
it
(
'
renders content
'
,
()
=>
{
vm
=
mountComponent
(
Component
,
{
...
props
,
content
,
});
expect
(
vm
.
$el
.
querySelector
(
'
.js-job-empty-state-content
'
).
textContent
.
trim
()).
toEqual
(
content
,
);
});
});
describe
(
'
without content
'
,
()
=>
{
it
(
'
does not render content
'
,
()
=>
{
vm
=
mountComponent
(
Component
,
{
...
props
,
});
expect
(
vm
.
$el
.
querySelector
(
'
.js-job-empty-state-content
'
)).
toBeNull
();
});
});
describe
(
'
with action
'
,
()
=>
{
it
(
'
renders action
'
,
()
=>
{
vm
=
mountComponent
(
Component
,
{
...
props
,
content
,
action
:
{
link
:
'
runner
'
,
title
:
'
Check runner
'
,
method
:
'
post
'
,
},
});
expect
(
vm
.
$el
.
querySelector
(
'
.js-job-empty-state-action
'
).
getAttribute
(
'
href
'
)).
toEqual
(
'
runner
'
,
);
});
});
describe
(
'
without action
'
,
()
=>
{
it
(
'
does not render action
'
,
()
=>
{
vm
=
mountComponent
(
Component
,
{
...
props
,
content
,
});
expect
(
vm
.
$el
.
querySelector
(
'
.js-job-empty-state-action
'
)).
toBeNull
();
});
});
});
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment