BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit 3852d404 by Filipa Lacerda
Options

Merge branch 'icons-ci-icons' into 'master'

Convert Icons in CI to SVG Sprite Icons See merge request gitlab-org/gitlab-ce!14567
parents 70c808d2 48834683
Showing with 293 additions and 281 deletions
app/assets/javascripts/droplab/utils.js
......@@ -30,7 +30,7 @@ const utils = {
},
isDropDownParts(target) {
if (!target || target.tagName === 'HTML') return false;
if (!target || !target.hasAttribute || target.tagName === 'HTML') return false;
return target.hasAttribute(DATA_TRIGGER) || target.hasAttribute(DATA_DROPDOWN);
},
};
......
app/assets/javascripts/pipelines/components/graph/action_component.vue
<script>
import getActionIcon from '../../../vue_shared/ci_action_icons';
import tooltip from '../../../vue_shared/directives/tooltip';
import icon from '../../../vue_shared/components/icon.vue';
/**
* Renders either a cancel, retry or play icon pointing to the given path.
......@@ -29,17 +29,18 @@
},
},
components: {
icon,
},
directives: {
tooltip,
},
computed: {
actionIconSvg() {
return getActionIcon(this.actionIcon);
},
cssClass() {
return `js-${gl.text.dasherize(this.actionIcon)}`;
const actionIconDash = gl.text.dasherize(this.actionIcon);
return `${actionIconDash} js-icon-${actionIconDash}`;
},
},
};
......@@ -50,14 +51,9 @@
:data-method="actionMethod"
:title="tooltipText"
:href="link"
class="ci-action-icon-container"
class="ci-action-icon-container ci-action-icon-wrapper"
:class="cssClass"
data-container="body">
<i
class="ci-action-icon-wrapper"
:class="cssClass"
v-html="actionIconSvg"
aria-hidden="true"
/>
<icon :name="actionIcon"/>
</a>
</template>
app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue
<script>
import getActionIcon from '../../../vue_shared/ci_action_icons';
import icon from '../../../vue_shared/components/icon.vue';
import tooltip from '../../../vue_shared/directives/tooltip';
/**
......@@ -29,14 +29,12 @@
},
},
directives: {
tooltip,
components: {
icon,
},
computed: {
actionIconSvg() {
return getActionIcon(this.actionIcon);
},
directives: {
tooltip,
},
};
</script>
......@@ -49,7 +47,7 @@
rel="nofollow"
class="ci-action-icon-wrapper js-ci-status-icon"
data-container="body"
v-html="actionIconSvg"
aria-label="Job's action">
<icon :name="actionIcon"/>
</a>
</template>
app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
......@@ -18,7 +18,7 @@
* "group": "success",
* "details_path": "/root/ci-mock/builds/4256",
* "action": {
* "icon": "icon_action_retry",
* "icon": "retry",
* "title": "Retry",
* "path": "/root/ci-mock/builds/4256/retry",
* "method": "post"
......
app/assets/javascripts/pipelines/components/graph/job_component.vue
......@@ -19,7 +19,7 @@
* "group": "success",
* "details_path": "/root/ci-mock/builds/4256",
* "action": {
* "icon": "icon_action_retry",
* "icon": "retry",
* "title": "Retry",
* "path": "/root/ci-mock/builds/4256/retry",
* "method": "post"
......
app/assets/javascripts/pipelines/components/stage.vue
......@@ -14,7 +14,7 @@
*/
import Flash from '../../flash';
import { borderlessStatusIconEntityMap } from '../../vue_shared/ci_status_icons';
import icon from '../../vue_shared/components/icon.vue';
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import tooltip from '../../vue_shared/directives/tooltip';
......@@ -45,6 +45,7 @@ export default {
components: {
loadingIcon,
icon,
},
updated() {
......@@ -122,8 +123,8 @@ export default {
return `ci-status-icon-${this.stage.status.group}`;
},
svgIcon() {
return borderlessStatusIconEntityMap[this.stage.status.icon];
borderlessIcon() {
return `${this.stage.status.icon}_borderless`;
},
},
};
......@@ -145,9 +146,10 @@ export default {
aria-expanded="false">
<span
v-html="svgIcon"
aria-hidden="true"
:aria-label="stage.title">
<icon
:name="borderlessIcon"/>
</span>
<i
......
app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js
import PipelineStage from '../../pipelines/components/stage.vue';
import ciIcon from '../../vue_shared/components/ci_icon.vue';
import { statusIconEntityMap } from '../../vue_shared/ci_status_icons';
import icon from '../../vue_shared/components/icon.vue';
export default {
name: 'MRWidgetPipeline',
......@@ -10,6 +10,7 @@ export default {
components: {
'pipeline-stage': PipelineStage,
ciIcon,
icon,
},
computed: {
hasPipeline() {
......@@ -20,9 +21,6 @@ export default {
return hasCI && !ciStatus;
},
svg() {
return statusIconEntityMap.icon_status_failed;
},
stageText() {
return this.mr.pipeline.details.stages.length > 1 ? 'stages' : 'stage';
},
......@@ -38,8 +36,10 @@ export default {
<template v-if="hasCIError">
<div class="ci-status-icon ci-status-icon-failed ci-error js-ci-error append-right-10">
<span
v-html="svg"
aria-hidden="true"></span>
aria-hidden="true">
<icon
name="status_failed"/>
</span>
</div>
<div class="media-body">
Could not connect to the CI server. Please check your settings and try again
......
app/assets/javascripts/vue_shared/ci_action_icons.js deleted 100644 → 0
import cancelSVG from 'icons/_icon_action_cancel.svg';
import retrySVG from 'icons/_icon_action_retry.svg';
import playSVG from 'icons/_icon_action_play.svg';
import stopSVG from 'icons/_icon_action_stop.svg';
/**
* For the provided action returns the respective SVG
*
* @param {String} action
* @return {SVG|String}
*/
export default function getActionIcon(action) {
const icons = {
icon_action_cancel: cancelSVG,
icon_action_play: playSVG,
icon_action_retry: retrySVG,
icon_action_stop: stopSVG,
};
return icons[action] || '';
}
app/assets/javascripts/vue_shared/ci_status_icons.js deleted 100644 → 0
import BORDERLESS_CANCELED_SVG from 'icons/_icon_status_canceled_borderless.svg';
import BORDERLESS_CREATED_SVG from 'icons/_icon_status_created_borderless.svg';
import BORDERLESS_FAILED_SVG from 'icons/_icon_status_failed_borderless.svg';
import BORDERLESS_MANUAL_SVG from 'icons/_icon_status_manual_borderless.svg';
import BORDERLESS_PENDING_SVG from 'icons/_icon_status_pending_borderless.svg';
import BORDERLESS_RUNNING_SVG from 'icons/_icon_status_running_borderless.svg';
import BORDERLESS_SKIPPED_SVG from 'icons/_icon_status_skipped_borderless.svg';
import BORDERLESS_SUCCESS_SVG from 'icons/_icon_status_success_borderless.svg';
import BORDERLESS_WARNING_SVG from 'icons/_icon_status_warning_borderless.svg';
import CANCELED_SVG from 'icons/_icon_status_canceled.svg';
import CREATED_SVG from 'icons/_icon_status_created.svg';
import FAILED_SVG from 'icons/_icon_status_failed.svg';
import MANUAL_SVG from 'icons/_icon_status_manual.svg';
import PENDING_SVG from 'icons/_icon_status_pending.svg';
import RUNNING_SVG from 'icons/_icon_status_running.svg';
import SKIPPED_SVG from 'icons/_icon_status_skipped.svg';
import SUCCESS_SVG from 'icons/_icon_status_success.svg';
import WARNING_SVG from 'icons/_icon_status_warning.svg';
export const borderlessStatusIconEntityMap = {
icon_status_canceled: BORDERLESS_CANCELED_SVG,
icon_status_created: BORDERLESS_CREATED_SVG,
icon_status_failed: BORDERLESS_FAILED_SVG,
icon_status_manual: BORDERLESS_MANUAL_SVG,
icon_status_pending: BORDERLESS_PENDING_SVG,
icon_status_running: BORDERLESS_RUNNING_SVG,
icon_status_skipped: BORDERLESS_SKIPPED_SVG,
icon_status_success: BORDERLESS_SUCCESS_SVG,
icon_status_warning: BORDERLESS_WARNING_SVG,
};
export const statusIconEntityMap = {
icon_status_canceled: CANCELED_SVG,
icon_status_created: CREATED_SVG,
icon_status_failed: FAILED_SVG,
icon_status_manual: MANUAL_SVG,
icon_status_pending: PENDING_SVG,
icon_status_running: RUNNING_SVG,
icon_status_skipped: SKIPPED_SVG,
icon_status_success: SUCCESS_SVG,
icon_status_warning: WARNING_SVG,
};
app/assets/javascripts/vue_shared/components/ci_badge_link.vue
......@@ -43,7 +43,6 @@
computed: {
cssClass() {
const className = this.status.group;
return className ? `ci-status ci-${className}` : 'ci-status';
},
},
......
app/assets/javascripts/vue_shared/components/ci_icon.vue
<script>
import { statusIconEntityMap } from '../ci_status_icons';
import icon from '../../vue_shared/components/icon.vue';
/**
* Renders CI icon based on API response shared between all places where it is used.
......@@ -30,11 +30,11 @@
},
},
computed: {
statusIconSvg() {
return statusIconEntityMap[this.status.icon];
},
components: {
icon,
},
computed: {
cssClass() {
const status = this.status.group;
return `ci-status-icon ci-status-icon-${status} js-ci-status-icon-${status}`;
......@@ -44,7 +44,8 @@
</script>
<template>
<span
:class="cssClass"
v-html="statusIconSvg">
:class="cssClass">
<icon
:name="status.icon"/>
</span>
</template>
app/assets/javascripts/vue_shared/components/icon.vue 0 → 100644
<script>
/* This is a re-usable vue component for rendering a svg sprite
icon
Sample configuration:
<icon
:img-src="userAvatarSrc"
:img-alt="tooltipText"
:tooltip-text="tooltipText"
tooltip-placement="top"
/>
*/
export default {
props: {
name: {
type: String,
required: true,
},
size: {
type: Number,
required: false,
default: 0,
},
cssClasses: {
type: String,
required: false,
default: '',
},
},
computed: {
spriteHref() {
return `${gon.sprite_icons}#${this.name}`;
},
iconSizeClass() {
return this.size ? `s${this.size}` : '';
},
},
};
</script>
<template>
<svg
:class="[iconSizeClass, cssClasses]">
<use
v-bind="{'xlink:href':spriteHref}"/>
</svg>
</template>
app/assets/stylesheets/pages/builds.scss
......@@ -333,8 +333,10 @@
svg {
position: relative;
top: 2px;
top: 3px;
margin-right: 3px;
width: 14px;
height: 14px;
}
}
......@@ -348,9 +350,10 @@
svg {
position: relative;
top: 2px;
top: 3px;
margin-right: 3px;
height: 13px;
height: 14px;
width: 14px;
}
a {
......@@ -369,7 +372,7 @@
.build-job {
position: relative;
.fa-arrow-right {
.icon-arrow-right {
position: absolute;
left: 15px;
top: 20px;
......@@ -379,7 +382,7 @@
&.active {
font-weight: $gl-font-weight-bold;
.fa-arrow-right {
.icon-arrow-right {
display: block;
}
}
......@@ -392,8 +395,7 @@
background-color: $row-hover;
}
.fa-refresh {
font-size: 13px;
.icon-retry {
margin-left: 3px;
}
}
......
app/assets/stylesheets/pages/merge_requests.scss
......@@ -165,8 +165,9 @@
z-index: 300;
}
.ci-action-icon-wrapper {
line-height: 16px;
.ci-action-icon-wrapper svg {
width: 16px;
height: 16px;
}
}
......
app/assets/stylesheets/pages/pipelines.scss
......@@ -452,7 +452,7 @@
}
// Action Icons in big pipeline-graph nodes
.ci-action-icon-container .ci-action-icon-wrapper {
.ci-action-icon-container.ci-action-icon-wrapper {
height: 30px;
width: 30px;
background: $white-light;
......@@ -468,8 +468,18 @@
svg {
fill: $gl-text-color-secondary;
position: relative;
left: -1px;
top: -1px;
left: 5px;
top: 2px;
width: 18px;
height: 18px;
}
&.play {
svg {
width: #{$ci-action-icon-size - 8};
height: #{$ci-action-icon-size - 8};
left: 8px;
}
}
&:hover svg {
......@@ -721,17 +731,49 @@ button.mini-pipeline-graph-dropdown-toggle {
svg {
fill: $gl-text-color-secondary;
width: $ci-action-icon-size;
height: $ci-action-icon-size;
left: -6px;
width: #{$ci-action-icon-size - 6};
height: #{$ci-action-icon-size - 6};
left: -3px;
position: relative;
top: -3px;
top: -2px;
}
&:hover svg,
&:focus svg {
fill: $gl-text-color;
}
&.icon-action-retry,
&.icon-action-play {
svg {
width: #{$ci-action-icon-size - 6};
height: #{$ci-action-icon-size - 6};
left: 8px;
}
}
svg.icon-action-stop,
svg.icon-action-cancel {
width: 12px;
height: 12px;
top: 1px;
left: -1px;
}
svg.icon-action-play {
width: 11px;
height: 11px;
top: 1px;
left: 1px;
}
svg.icon-action-retry {
width: 16px;
height: 16px;
top: 0;
left: -3px;
}
}
// link to the build
......
app/helpers/ci_status_helper.rb
......@@ -63,34 +63,34 @@ module CiStatusHelper
def ci_icon_for_status(status)
if detailed_status?(status)
return custom_icon(status.icon)
return sprite_icon(status.icon)
end
icon_name =
case status
when 'success'
'icon_status_success'
'status_success'
when 'success_with_warnings'
'icon_status_warning'
'status_warning'
when 'failed'
'icon_status_failed'
'status_failed'
when 'pending'
'icon_status_pending'
'status_pending'
when 'running'
'icon_status_running'
'status_running'
when 'play'
'icon_play'
'play'
when 'created'
'icon_status_created'
'status_created'
when 'skipped'
'icon_status_skipped'
'status_skipped'
when 'manual'
'icon_status_manual'
'status_manual'
else
'icon_status_canceled'
'status_canceled'
end
custom_icon(icon_name)
sprite_icon(icon_name, size: 16)
end
def pipeline_status_cache_key(pipeline_status)
......
app/views/ci/status/_badge.html.haml
......@@ -5,9 +5,9 @@
- if link && status.has_details?
= link_to status.details_path, class: css_classes, title: title do
= custom_icon(status.icon)
= sprite_icon(status.icon)
= status.text
- else
%span{ class: css_classes, title: title }
= custom_icon(status.icon)
= sprite_icon(status.icon)
= status.text
app/views/ci/status/_dropdown_graph_badge.html.haml
......@@ -7,13 +7,13 @@
- if status.has_details?
= link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item', data: { toggle: 'tooltip', title: tooltip, container: 'body' } do
%span{ class: klass }= custom_icon(status.icon)
%span{ class: klass }= sprite_icon(status.icon)
%span.ci-build-text= subject.name
- else
.menu-item.mini-pipeline-graph-dropdown-item{ data: { toggle: 'tooltip', title: tooltip, container: 'body' } }
%span{ class: klass }= custom_icon(status.icon)
%span{ class: klass }= sprite_icon(status.icon)
%span.ci-build-text= subject.name
- if status.has_action?
= link_to status.action_path, class: 'ci-action-icon-wrapper js-ci-action-icon', method: status.action_method, data: { toggle: 'tooltip', title: status.action_title, container: 'body' } do
= custom_icon(status.action_icon)
= link_to status.action_path, class: "ci-action-icon-wrapper js-ci-action-icon", method: status.action_method, data: { toggle: 'tooltip', title: status.action_title, container: 'body' } do
= sprite_icon(status.action_icon, css_class: "icon-action-#{status.action_icon}")
app/views/projects/jobs/_sidebar.html.haml
......@@ -91,7 +91,7 @@
- builds.select{|build| build.status == build_status}.each do |build|
.build-job{ class: sidebar_build_class(build, @build), data: { stage: build.stage } }
= link_to project_job_path(@project, build) do
= icon('arrow-right')
= sprite_icon('arrow-right', size:16, css_class: 'icon-arrow-right')
%span{ class: "ci-status-icon-#{build.status}" }
= ci_icon_for_status(build.status)
%span
......@@ -100,4 +100,5 @@
- else
= build.id
- if build.retried?
%i.fa.fa-refresh.has-tooltip{ data: { container: 'body', placement: 'bottom' }, title: 'Job was retried' }
%span.has-tooltip{ data: { container: 'body', placement: 'bottom' }, title: 'Job was retried' }
= sprite_icon('retry', size:16, css_class: 'icon-retry')
app/views/shared/_mini_pipeline_graph.html.haml
......@@ -7,7 +7,7 @@
.stage-container.dropdown{ class: klass }
%button.mini-pipeline-graph-dropdown-toggle.has-tooltip.js-builds-dropdown-button{ class: "ci-status-icon-#{detailed_status.group}", type: 'button', data: { toggle: 'dropdown', title: "#{stage.name}: #{detailed_status.label}", placement: 'top', "stage-endpoint" => stage_project_pipeline_path(pipeline.project, pipeline, stage: stage.name) } }
= custom_icon(icon_status)
= sprite_icon(icon_status)
= icon('caret-down')
%ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container
......
lib/gitlab/ci/status/build/cancelable.rb
......@@ -8,7 +8,7 @@ module Gitlab
end
def action_icon
'icon_action_cancel'
'cancel'
end
def action_path
......
lib/gitlab/ci/status/build/failed_allowed.rb
......@@ -8,7 +8,7 @@ module Gitlab
end
def icon
'icon_status_warning'
'warning'
end
def group
......
lib/gitlab/ci/status/build/play.rb
......@@ -12,7 +12,7 @@ module Gitlab
end
def action_icon
'icon_action_play'
'play'
end
def action_title
......
lib/gitlab/ci/status/build/retryable.rb
......@@ -8,7 +8,7 @@ module Gitlab
end
def action_icon
'icon_action_retry'
'retry'
end
def action_title
......
lib/gitlab/ci/status/build/stop.rb
......@@ -12,7 +12,7 @@ module Gitlab
end
def action_icon
'icon_action_stop'
'stop'
end
def action_title
......
lib/gitlab/ci/status/canceled.rb
......@@ -11,7 +11,7 @@ module Gitlab
end
def icon
'icon_status_canceled'
'status_canceled'
end
def favicon
......
lib/gitlab/ci/status/created.rb
......@@ -11,7 +11,7 @@ module Gitlab
end
def icon
'icon_status_created'
'status_created'
end
def favicon
......
lib/gitlab/ci/status/failed.rb
......@@ -11,7 +11,7 @@ module Gitlab
end
def icon
'icon_status_failed'
'status_failed'
end
def favicon
......
lib/gitlab/ci/status/manual.rb
......@@ -11,7 +11,7 @@ module Gitlab
end
def icon
'icon_status_manual'
'status_manual'
end
def favicon
......
lib/gitlab/ci/status/pending.rb
......@@ -11,7 +11,7 @@ module Gitlab
end
def icon
'icon_status_pending'
'status_pending'
end
def favicon
......
lib/gitlab/ci/status/running.rb
......@@ -11,7 +11,7 @@ module Gitlab
end
def icon
'icon_status_running'
'status_running'
end
def favicon
......
lib/gitlab/ci/status/skipped.rb
......@@ -11,7 +11,7 @@ module Gitlab
end
def icon
'icon_status_skipped'
'status_skipped'
end
def favicon
......
lib/gitlab/ci/status/success.rb
......@@ -11,7 +11,7 @@ module Gitlab
end
def icon
'icon_status_success'
'status_success'
end
def favicon
......
lib/gitlab/ci/status/success_warning.rb
......@@ -15,7 +15,7 @@ module Gitlab
end
def icon
'icon_status_warning'
'status_warning'
end
def group
......
spec/features/merge_requests/mini_pipeline_graph_spec.rb
......@@ -83,7 +83,7 @@ feature 'Mini Pipeline Graph', :js do
end
before do
toggle.click
toggle.trigger('click')
wait_for_requests
end
......
spec/features/projects/commit/mini_pipeline_graph_spec.rb
......@@ -18,7 +18,7 @@ feature 'Mini Pipeline Graph in Commit View', :js do
expect(page).to have_selector('.mr-widget-pipeline-graph')
first('.mini-pipeline-graph-dropdown-toggle').click
first('.mini-pipeline-graph-dropdown-toggle').trigger('click')
wait_for_requests
......
spec/features/projects/pipelines/pipeline_spec.rb
......@@ -67,7 +67,7 @@ describe 'Pipeline', :js do
it 'shows a running icon and a cancel action for the running build' do
page.within('#ci-badge-deploy') do
expect(page).to have_selector('.js-ci-status-icon-running')
expect(page).to have_selector('.js-icon-action-cancel')
expect(page).to have_selector('.js-icon-cancel')
expect(page).to have_content('deploy')
end
end
......@@ -86,8 +86,8 @@ describe 'Pipeline', :js do
expect(page).to have_content('build')
end
page.within('#ci-badge-build .ci-action-icon-container') do
expect(page).to have_selector('.js-icon-action-retry')
page.within('#ci-badge-build .ci-action-icon-container.js-icon-retry') do
expect(page).to have_selector('svg')
end
end
......@@ -105,8 +105,8 @@ describe 'Pipeline', :js do
expect(page).to have_content('test')
end
page.within('#ci-badge-test .ci-action-icon-container') do
expect(page).to have_selector('.js-icon-action-retry')
page.within('#ci-badge-test .ci-action-icon-container.js-icon-retry') do
expect(page).to have_selector('svg')
end
end
......@@ -124,8 +124,8 @@ describe 'Pipeline', :js do
expect(page).to have_content('manual')
end
page.within('#ci-badge-manual-build .ci-action-icon-container') do
expect(page).to have_selector('.js-icon-action-play')
page.within('#ci-badge-manual-build .ci-action-icon-container.js-icon-play') do
expect(page).to have_selector('svg')
end
end
......
spec/helpers/ci_status_helper_spec.rb
......@@ -8,17 +8,13 @@ describe CiStatusHelper do
describe '#ci_icon_for_status' do
it 'renders to correct svg on success' do
expect(helper).to receive(:render)
.with('shared/icons/icon_status_success.svg', anything)
helper.ci_icon_for_status(success_commit.status)
expect(helper.ci_icon_for_status('success').to_s)
.to include 'status_success'
end
it 'renders the correct svg on failure' do
expect(helper).to receive(:render)
.with('shared/icons/icon_status_failed.svg', anything)
helper.ci_icon_for_status(failed_commit.status)
expect(helper.ci_icon_for_status('failed').to_s)
.to include 'status_failed'
end
end
......
spec/javascripts/jobs/mock_data.js
......@@ -22,7 +22,7 @@ export default {
details_path: '/root/ci-mock/-/jobs/4757',
favicon: '/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico',
action: {
icon: 'icon_action_retry',
icon: 'retry',
title: 'Retry',
path: '/root/ci-mock/-/jobs/4757/retry',
method: 'post',
......
spec/javascripts/pipelines/graph/action_component_spec.js
......@@ -11,7 +11,7 @@ describe('pipeline graph action component', () => {
tooltipText: 'bar',
link: 'foo',
actionMethod: 'post',
actionIcon: 'icon_action_cancel',
actionIcon: 'cancel',
},
}).$mount();
......
spec/javascripts/pipelines/graph/dropdown_action_component_spec.js
......@@ -11,7 +11,7 @@ describe('action component', () => {
tooltipText: 'bar',
link: 'foo',
actionMethod: 'post',
actionIcon: 'icon_action_cancel',
actionIcon: 'cancel',
},
}).$mount();
......
spec/javascripts/pipelines/graph/job_component_spec.js
......@@ -14,7 +14,7 @@ describe('pipeline graph job component', () => {
group: 'success',
details_path: '/root/ci-mock/builds/4256',
action: {
icon: 'icon_action_retry',
icon: 'retry',
title: 'Retry',
path: '/root/ci-mock/builds/4256/retry',
method: 'post',
......
spec/javascripts/pipelines/graph/mock_data.js
......@@ -39,7 +39,7 @@ export default {
"details_path": "/root/ci-mock/builds/4153",
"favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico",
"action": {
"icon": "icon_action_retry",
"icon": "retry",
"title": "Retry",
"path": "/root/ci-mock/builds/4153/retry",
"method": "post"
......@@ -62,7 +62,7 @@ export default {
"details_path": "/root/ci-mock/builds/4153",
"favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico",
"action": {
"icon": "icon_action_retry",
"icon": "retry",
"title": "Retry",
"path": "/root/ci-mock/builds/4153/retry",
"method": "post"
......@@ -96,7 +96,7 @@ export default {
"details_path": "/root/ci-mock/builds/4166",
"favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico",
"action": {
"icon": "icon_action_retry",
"icon": "retry",
"title": "Retry",
"path": "/root/ci-mock/builds/4166/retry",
"method": "post"
......@@ -119,7 +119,7 @@ export default {
"details_path": "/root/ci-mock/builds/4166",
"favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico",
"action": {
"icon": "icon_action_retry",
"icon": "retry",
"title": "Retry",
"path": "/root/ci-mock/builds/4166/retry",
"method": "post"
......@@ -138,7 +138,7 @@ export default {
"details_path": "/root/ci-mock/builds/4159",
"favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico",
"action": {
"icon": "icon_action_retry",
"icon": "retry",
"title": "Retry",
"path": "/root/ci-mock/builds/4159/retry",
"method": "post"
......@@ -161,7 +161,7 @@ export default {
"details_path": "/root/ci-mock/builds/4159",
"favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico",
"action": {
"icon": "icon_action_retry",
"icon": "retry",
"title": "Retry",
"path": "/root/ci-mock/builds/4159/retry",
"method": "post"
......
spec/javascripts/pipelines/graph/stage_column_component_spec.js
......@@ -13,7 +13,7 @@ describe('stage column component', () => {
group: 'success',
details_path: '/root/ci-mock/builds/4256',
action: {
icon: 'icon_action_retry',
icon: 'retry',
title: 'Retry',
path: '/root/ci-mock/builds/4256/retry',
method: 'post',
......
spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
import Vue from 'vue';
import { statusIconEntityMap } from '~/vue_shared/ci_status_icons';
import pipelineComponent from '~/vue_merge_request_widget/components/mr_widget_pipeline';
import mockData from '../mock_data';
......@@ -29,14 +28,6 @@ describe('MRWidgetPipeline', () => {
});
describe('computed', () => {
describe('svg', () => {
it('should have the proper SVG icon', () => {
const vm = createComponent({ pipeline: mockData.pipeline });
expect(vm.svg).toEqual(statusIconEntityMap.icon_status_failed);
});
});
describe('hasPipeline', () => {
it('should return true when there is a pipeline', () => {
expect(Object.keys(mockData.pipeline).length).toBeGreaterThan(0);
......@@ -142,6 +133,7 @@ describe('MRWidgetPipeline', () => {
Vue.nextTick(() => {
expect(el.querySelectorAll('.js-ci-error').length).toEqual(1);
expect(el.innerText).toContain('Could not connect to the CI server');
expect(el.querySelector('.ci-status-icon svg use').getAttribute('xlink:href')).toContain('status_failed');
done();
});
});
......
spec/javascripts/vue_shared/ci_action_icons_spec.js deleted 100644 → 0
import getActionIcon from '~/vue_shared/ci_action_icons';
import cancelSVG from 'icons/_icon_action_cancel.svg';
import retrySVG from 'icons/_icon_action_retry.svg';
import playSVG from 'icons/_icon_action_play.svg';
import stopSVG from 'icons/_icon_action_stop.svg';
describe('getActionIcon', () => {
it('should return an empty string', () => {
expect(getActionIcon()).toEqual('');
});
it('should return cancel svg', () => {
expect(getActionIcon('icon_action_cancel')).toEqual(cancelSVG);
});
it('should return retry svg', () => {
expect(getActionIcon('icon_action_retry')).toEqual(retrySVG);
});
it('should return play svg', () => {
expect(getActionIcon('icon_action_play')).toEqual(playSVG);
});
it('should render stop svg', () => {
expect(getActionIcon('icon_action_stop')).toEqual(stopSVG);
});
});
spec/javascripts/vue_shared/ci_status_icon_spec.js deleted 100644 → 0
import { borderlessStatusIconEntityMap, statusIconEntityMap } from '~/vue_shared/ci_status_icons';
describe('CI status icons', () => {
const statuses = [
'icon_status_canceled',
'icon_status_created',
'icon_status_failed',
'icon_status_manual',
'icon_status_pending',
'icon_status_running',
'icon_status_skipped',
'icon_status_success',
'icon_status_warning',
];
it('should have a dictionary for borderless icons', () => {
statuses.forEach((status) => {
expect(borderlessStatusIconEntityMap[status]).toBeDefined();
});
});
it('should have a dictionary for icons', () => {
statuses.forEach((status) => {
expect(statusIconEntityMap[status]).toBeDefined();
});
});
});
spec/javascripts/vue_shared/components/ci_badge_link_spec.js
......@@ -11,63 +11,63 @@ describe('CI Badge Link Component', () => {
text: 'canceled',
label: 'canceled',
group: 'canceled',
icon: 'icon_status_canceled',
icon: 'status_canceled',
details_path: 'status/canceled',
},
created: {
text: 'created',
label: 'created',
group: 'created',
icon: 'icon_status_created',
icon: 'status_created',
details_path: 'status/created',
},
failed: {
text: 'failed',
label: 'failed',
group: 'failed',
icon: 'icon_status_failed',
icon: 'status_failed',
details_path: 'status/failed',
},
manual: {
text: 'manual',
label: 'manual action',
group: 'manual',
icon: 'icon_status_manual',
icon: 'status_manual',
details_path: 'status/manual',
},
pending: {
text: 'pending',
label: 'pending',
group: 'pending',
icon: 'icon_status_pending',
icon: 'status_pending',
details_path: 'status/pending',
},
running: {
text: 'running',
label: 'running',
group: 'running',
icon: 'icon_status_running',
icon: 'status_running',
details_path: 'status/running',
},
skipped: {
text: 'skipped',
label: 'skipped',
group: 'skipped',
icon: 'icon_status_skipped',
icon: 'status_skipped',
details_path: 'status/skipped',
},
success_warining: {
text: 'passed',
label: 'passed',
group: 'success_with_warnings',
icon: 'icon_status_warning',
icon: 'status_warning',
details_path: 'status/warning',
},
success: {
text: 'passed',
label: 'passed',
group: 'passed',
icon: 'icon_status_success',
icon: 'status_success',
details_path: 'status/passed',
},
};
......
spec/javascripts/vue_shared/components/icon_spec.js 0 → 100644
import Vue from 'vue';
import Icon from '~/vue_shared/components/icon.vue';
import mountComponent from '../../helpers/vue_mount_component_helper';
describe('Sprite Icon Component', function () {
describe('Initialization', function () {
let icon;
beforeEach(function () {
const IconComponent = Vue.extend(Icon);
icon = mountComponent(IconComponent, {
name: 'test',
size: 99,
cssClasses: 'extraclasses',
});
});
afterEach(() => {
icon.$destroy();
});
it('should return a defined Vue component', function () {
expect(icon).toBeDefined();
});
it('should have <svg> as a child element', function () {
expect(icon.$el.tagName).toBe('svg');
});
it('should have <use> as a child element with the correct href', function () {
expect(icon.$el.firstChild.tagName).toBe('use');
expect(icon.$el.firstChild.getAttribute('xlink:href')).toBe(`${gon.sprite_icons}#test`);
});
it('should properly compute iconSizeClass', function () {
expect(icon.iconSizeClass).toBe('s99');
});
it('should properly render img css', function () {
const classList = icon.$el.classList;
const containsSizeClass = classList.contains('s99');
const containsCustomClass = classList.contains('extraclasses');
expect(containsSizeClass).toBe(true);
expect(containsCustomClass).toBe(true);
});
});
});
spec/lib/gitlab/ci/status/build/cancelable_spec.rb
......@@ -66,7 +66,7 @@ describe Gitlab::Ci::Status::Build::Cancelable do
end
describe '#action_icon' do
it { expect(subject.action_icon).to eq 'icon_action_cancel' }
it { expect(subject.action_icon).to eq 'cancel' }
end
describe '#action_title' do
......
spec/lib/gitlab/ci/status/build/factory_spec.rb
......@@ -30,7 +30,7 @@ describe Gitlab::Ci::Status::Build::Factory do
it 'fabricates status with correct details' do
expect(status.text).to eq 'passed'
expect(status.icon).to eq 'icon_status_success'
expect(status.icon).to eq 'status_success'
expect(status.favicon).to eq 'favicon_status_success'
expect(status.label).to eq 'passed'
expect(status).to have_details
......@@ -57,7 +57,7 @@ describe Gitlab::Ci::Status::Build::Factory do
it 'fabricates status with correct details' do
expect(status.text).to eq 'failed'
expect(status.icon).to eq 'icon_status_failed'
expect(status.icon).to eq 'status_failed'
expect(status.favicon).to eq 'favicon_status_failed'
expect(status.label).to eq 'failed'
expect(status).to have_details
......@@ -84,7 +84,7 @@ describe Gitlab::Ci::Status::Build::Factory do
it 'fabricates status with correct details' do
expect(status.text).to eq 'failed'
expect(status.icon).to eq 'icon_status_warning'
expect(status.icon).to eq 'warning'
expect(status.favicon).to eq 'favicon_status_failed'
expect(status.label).to eq 'failed (allowed to fail)'
expect(status).to have_details
......@@ -113,7 +113,7 @@ describe Gitlab::Ci::Status::Build::Factory do
it 'fabricates status with correct details' do
expect(status.text).to eq 'canceled'
expect(status.icon).to eq 'icon_status_canceled'
expect(status.icon).to eq 'status_canceled'
expect(status.favicon).to eq 'favicon_status_canceled'
expect(status.label).to eq 'canceled'
expect(status).to have_details
......@@ -139,7 +139,7 @@ describe Gitlab::Ci::Status::Build::Factory do
it 'fabricates status with correct details' do
expect(status.text).to eq 'running'
expect(status.icon).to eq 'icon_status_running'
expect(status.icon).to eq 'status_running'
expect(status.favicon).to eq 'favicon_status_running'
expect(status.label).to eq 'running'
expect(status).to have_details
......@@ -165,7 +165,7 @@ describe Gitlab::Ci::Status::Build::Factory do
it 'fabricates status with correct details' do
expect(status.text).to eq 'pending'
expect(status.icon).to eq 'icon_status_pending'
expect(status.icon).to eq 'status_pending'
expect(status.favicon).to eq 'favicon_status_pending'
expect(status.label).to eq 'pending'
expect(status).to have_details
......@@ -190,7 +190,7 @@ describe Gitlab::Ci::Status::Build::Factory do
it 'fabricates status with correct details' do
expect(status.text).to eq 'skipped'
expect(status.icon).to eq 'icon_status_skipped'
expect(status.icon).to eq 'status_skipped'
expect(status.favicon).to eq 'favicon_status_skipped'
expect(status.label).to eq 'skipped'
expect(status).to have_details
......@@ -219,7 +219,7 @@ describe Gitlab::Ci::Status::Build::Factory do
it 'fabricates status with correct details' do
expect(status.text).to eq 'manual'
expect(status.group).to eq 'manual'
expect(status.icon).to eq 'icon_status_manual'
expect(status.icon).to eq 'status_manual'
expect(status.favicon).to eq 'favicon_status_manual'
expect(status.label).to include 'manual play action'
expect(status).to have_details
......@@ -274,7 +274,7 @@ describe Gitlab::Ci::Status::Build::Factory do
it 'fabricates status with correct details' do
expect(status.text).to eq 'manual'
expect(status.group).to eq 'manual'
expect(status.icon).to eq 'icon_status_manual'
expect(status.icon).to eq 'status_manual'
expect(status.favicon).to eq 'favicon_status_manual'
expect(status.label).to eq 'manual stop action (not allowed)'
expect(status).to have_details
......
spec/lib/gitlab/ci/status/build/failed_allowed_spec.rb
......@@ -18,7 +18,7 @@ describe Gitlab::Ci::Status::Build::FailedAllowed do
describe '#icon' do
it 'returns a warning icon' do
expect(subject.icon).to eq 'icon_status_warning'
expect(subject.icon).to eq 'warning'
end
end
......
spec/lib/gitlab/ci/status/build/play_spec.rb
......@@ -46,7 +46,7 @@ describe Gitlab::Ci::Status::Build::Play do
end
describe '#action_icon' do
it { expect(subject.action_icon).to eq 'icon_action_play' }
it { expect(subject.action_icon).to eq 'play' }
end
describe '#action_title' do
......
spec/lib/gitlab/ci/status/build/retryable_spec.rb
......@@ -66,7 +66,7 @@ describe Gitlab::Ci::Status::Build::Retryable do
end
describe '#action_icon' do
it { expect(subject.action_icon).to eq 'icon_action_retry' }
it { expect(subject.action_icon).to eq 'retry' }
end
describe '#action_title' do
......
spec/lib/gitlab/ci/status/build/stop_spec.rb
......@@ -38,7 +38,7 @@ describe Gitlab::Ci::Status::Build::Stop do
end
describe '#action_icon' do
it { expect(subject.action_icon).to eq 'icon_action_stop' }
it { expect(subject.action_icon).to eq 'stop' }
end
describe '#action_title' do
......
spec/lib/gitlab/ci/status/canceled_spec.rb
......@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Canceled do
end
describe '#icon' do
it { expect(subject.icon).to eq 'icon_status_canceled' }
it { expect(subject.icon).to eq 'status_canceled' }
end
describe '#favicon' do
......
spec/lib/gitlab/ci/status/created_spec.rb
......@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Created do
end
describe '#icon' do
it { expect(subject.icon).to eq 'icon_status_created' }
it { expect(subject.icon).to eq 'status_created' }
end
describe '#favicon' do
......
spec/lib/gitlab/ci/status/failed_spec.rb
......@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Failed do
end
describe '#icon' do
it { expect(subject.icon).to eq 'icon_status_failed' }
it { expect(subject.icon).to eq 'status_failed' }
end
describe '#favicon' do
......
spec/lib/gitlab/ci/status/manual_spec.rb
......@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Manual do
end
describe '#icon' do
it { expect(subject.icon).to eq 'icon_status_manual' }
it { expect(subject.icon).to eq 'status_manual' }
end
describe '#favicon' do
......
spec/lib/gitlab/ci/status/pending_spec.rb
......@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Pending do
end
describe '#icon' do
it { expect(subject.icon).to eq 'icon_status_pending' }
it { expect(subject.icon).to eq 'status_pending' }
end
describe '#favicon' do
......
spec/lib/gitlab/ci/status/running_spec.rb
......@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Running do
end
describe '#icon' do
it { expect(subject.icon).to eq 'icon_status_running' }
it { expect(subject.icon).to eq 'status_running' }
end
describe '#favicon' do
......
spec/lib/gitlab/ci/status/skipped_spec.rb
......@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Skipped do
end
describe '#icon' do
it { expect(subject.icon).to eq 'icon_status_skipped' }
it { expect(subject.icon).to eq 'status_skipped' }
end
describe '#favicon' do
......
spec/lib/gitlab/ci/status/success_spec.rb
......@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Success do
end
describe '#icon' do
it { expect(subject.icon).to eq 'icon_status_success' }
it { expect(subject.icon).to eq 'status_success' }
end
describe '#favicon' do
......
spec/lib/gitlab/ci/status/success_warning_spec.rb
......@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::SuccessWarning do
end
describe '#icon' do
it { expect(subject.icon).to eq 'icon_status_warning' }
it { expect(subject.icon).to eq 'status_warning' }
end
describe '#group' do
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment