Commit 3852d404 authored by Filipa Lacerda's avatar Filipa Lacerda

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
...@@ -30,7 +30,7 @@ const utils = { ...@@ -30,7 +30,7 @@ const utils = {
}, },
isDropDownParts(target) { 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); return target.hasAttribute(DATA_TRIGGER) || target.hasAttribute(DATA_DROPDOWN);
}, },
}; };
......
<script> <script>
import getActionIcon from '../../../vue_shared/ci_action_icons';
import tooltip from '../../../vue_shared/directives/tooltip'; 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. * Renders either a cancel, retry or play icon pointing to the given path.
...@@ -29,17 +29,18 @@ ...@@ -29,17 +29,18 @@
}, },
}, },
components: {
icon,
},
directives: { directives: {
tooltip, tooltip,
}, },
computed: { computed: {
actionIconSvg() {
return getActionIcon(this.actionIcon);
},
cssClass() { cssClass() {
return `js-${gl.text.dasherize(this.actionIcon)}`; const actionIconDash = gl.text.dasherize(this.actionIcon);
return `${actionIconDash} js-icon-${actionIconDash}`;
}, },
}, },
}; };
...@@ -50,14 +51,9 @@ ...@@ -50,14 +51,9 @@
:data-method="actionMethod" :data-method="actionMethod"
:title="tooltipText" :title="tooltipText"
:href="link" :href="link"
class="ci-action-icon-container" class="ci-action-icon-container ci-action-icon-wrapper"
:class="cssClass"
data-container="body"> data-container="body">
<icon :name="actionIcon"/>
<i
class="ci-action-icon-wrapper"
:class="cssClass"
v-html="actionIconSvg"
aria-hidden="true"
/>
</a> </a>
</template> </template>
<script> <script>
import getActionIcon from '../../../vue_shared/ci_action_icons'; import icon from '../../../vue_shared/components/icon.vue';
import tooltip from '../../../vue_shared/directives/tooltip'; import tooltip from '../../../vue_shared/directives/tooltip';
/** /**
...@@ -29,14 +29,12 @@ ...@@ -29,14 +29,12 @@
}, },
}, },
directives: { components: {
tooltip, icon,
}, },
computed: { directives: {
actionIconSvg() { tooltip,
return getActionIcon(this.actionIcon);
},
}, },
}; };
</script> </script>
...@@ -49,7 +47,7 @@ ...@@ -49,7 +47,7 @@
rel="nofollow" rel="nofollow"
class="ci-action-icon-wrapper js-ci-status-icon" class="ci-action-icon-wrapper js-ci-status-icon"
data-container="body" data-container="body"
v-html="actionIconSvg"
aria-label="Job's action"> aria-label="Job's action">
<icon :name="actionIcon"/>
</a> </a>
</template> </template>
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
* "group": "success", * "group": "success",
* "details_path": "/root/ci-mock/builds/4256", * "details_path": "/root/ci-mock/builds/4256",
* "action": { * "action": {
* "icon": "icon_action_retry", * "icon": "retry",
* "title": "Retry", * "title": "Retry",
* "path": "/root/ci-mock/builds/4256/retry", * "path": "/root/ci-mock/builds/4256/retry",
* "method": "post" * "method": "post"
......
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
* "group": "success", * "group": "success",
* "details_path": "/root/ci-mock/builds/4256", * "details_path": "/root/ci-mock/builds/4256",
* "action": { * "action": {
* "icon": "icon_action_retry", * "icon": "retry",
* "title": "Retry", * "title": "Retry",
* "path": "/root/ci-mock/builds/4256/retry", * "path": "/root/ci-mock/builds/4256/retry",
* "method": "post" * "method": "post"
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
*/ */
import Flash from '../../flash'; 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 loadingIcon from '../../vue_shared/components/loading_icon.vue';
import tooltip from '../../vue_shared/directives/tooltip'; import tooltip from '../../vue_shared/directives/tooltip';
...@@ -45,6 +45,7 @@ export default { ...@@ -45,6 +45,7 @@ export default {
components: { components: {
loadingIcon, loadingIcon,
icon,
}, },
updated() { updated() {
...@@ -122,8 +123,8 @@ export default { ...@@ -122,8 +123,8 @@ export default {
return `ci-status-icon-${this.stage.status.group}`; return `ci-status-icon-${this.stage.status.group}`;
}, },
svgIcon() { borderlessIcon() {
return borderlessStatusIconEntityMap[this.stage.status.icon]; return `${this.stage.status.icon}_borderless`;
}, },
}, },
}; };
...@@ -145,9 +146,10 @@ export default { ...@@ -145,9 +146,10 @@ export default {
aria-expanded="false"> aria-expanded="false">
<span <span
v-html="svgIcon"
aria-hidden="true" aria-hidden="true"
:aria-label="stage.title"> :aria-label="stage.title">
<icon
:name="borderlessIcon"/>
</span> </span>
<i <i
......
import PipelineStage from '../../pipelines/components/stage.vue'; import PipelineStage from '../../pipelines/components/stage.vue';
import ciIcon from '../../vue_shared/components/ci_icon.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 { export default {
name: 'MRWidgetPipeline', name: 'MRWidgetPipeline',
...@@ -10,6 +10,7 @@ export default { ...@@ -10,6 +10,7 @@ export default {
components: { components: {
'pipeline-stage': PipelineStage, 'pipeline-stage': PipelineStage,
ciIcon, ciIcon,
icon,
}, },
computed: { computed: {
hasPipeline() { hasPipeline() {
...@@ -20,9 +21,6 @@ export default { ...@@ -20,9 +21,6 @@ export default {
return hasCI && !ciStatus; return hasCI && !ciStatus;
}, },
svg() {
return statusIconEntityMap.icon_status_failed;
},
stageText() { stageText() {
return this.mr.pipeline.details.stages.length > 1 ? 'stages' : 'stage'; return this.mr.pipeline.details.stages.length > 1 ? 'stages' : 'stage';
}, },
...@@ -38,8 +36,10 @@ export default { ...@@ -38,8 +36,10 @@ export default {
<template v-if="hasCIError"> <template v-if="hasCIError">
<div class="ci-status-icon ci-status-icon-failed ci-error js-ci-error append-right-10"> <div class="ci-status-icon ci-status-icon-failed ci-error js-ci-error append-right-10">
<span <span
v-html="svg" aria-hidden="true">
aria-hidden="true"></span> <icon
name="status_failed"/>
</span>
</div> </div>
<div class="media-body"> <div class="media-body">
Could not connect to the CI server. Please check your settings and try again Could not connect to the CI server. Please check your settings and try again
......
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] || '';
}
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,
};
...@@ -43,7 +43,6 @@ ...@@ -43,7 +43,6 @@
computed: { computed: {
cssClass() { cssClass() {
const className = this.status.group; const className = this.status.group;
return className ? `ci-status ci-${className}` : 'ci-status'; return className ? `ci-status ci-${className}` : 'ci-status';
}, },
}, },
......
<script> <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. * Renders CI icon based on API response shared between all places where it is used.
...@@ -30,11 +30,11 @@ ...@@ -30,11 +30,11 @@
}, },
}, },
computed: { components: {
statusIconSvg() { icon,
return statusIconEntityMap[this.status.icon]; },
},
computed: {
cssClass() { cssClass() {
const status = this.status.group; const status = this.status.group;
return `ci-status-icon ci-status-icon-${status} js-ci-status-icon-${status}`; return `ci-status-icon ci-status-icon-${status} js-ci-status-icon-${status}`;
...@@ -44,7 +44,8 @@ ...@@ -44,7 +44,8 @@
</script> </script>
<template> <template>
<span <span
:class="cssClass" :class="cssClass">
v-html="statusIconSvg"> <icon
:name="status.icon"/>
</span> </span>
</template> </template>
<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>
...@@ -333,8 +333,10 @@ ...@@ -333,8 +333,10 @@
svg { svg {
position: relative; position: relative;
top: 2px; top: 3px;
margin-right: 3px; margin-right: 3px;
width: 14px;
height: 14px;
} }
} }
...@@ -348,9 +350,10 @@ ...@@ -348,9 +350,10 @@
svg { svg {
position: relative; position: relative;
top: 2px; top: 3px;
margin-right: 3px; margin-right: 3px;
height: 13px; height: 14px;
width: 14px;
} }
a { a {
...@@ -369,7 +372,7 @@ ...@@ -369,7 +372,7 @@
.build-job { .build-job {
position: relative; position: relative;
.fa-arrow-right { .icon-arrow-right {
position: absolute; position: absolute;
left: 15px; left: 15px;
top: 20px; top: 20px;
...@@ -379,7 +382,7 @@ ...@@ -379,7 +382,7 @@
&.active { &.active {
font-weight: $gl-font-weight-bold; font-weight: $gl-font-weight-bold;
.fa-arrow-right { .icon-arrow-right {
display: block; display: block;
} }
} }
...@@ -392,8 +395,7 @@ ...@@ -392,8 +395,7 @@
background-color: $row-hover; background-color: $row-hover;
} }
.fa-refresh { .icon-retry {
font-size: 13px;
margin-left: 3px; margin-left: 3px;
} }
} }
......
...@@ -165,8 +165,9 @@ ...@@ -165,8 +165,9 @@
z-index: 300; z-index: 300;
} }
.ci-action-icon-wrapper { .ci-action-icon-wrapper svg {
line-height: 16px; width: 16px;
height: 16px;
} }
} }
......
...@@ -452,7 +452,7 @@ ...@@ -452,7 +452,7 @@
} }
// Action Icons in big pipeline-graph nodes // 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; height: 30px;
width: 30px; width: 30px;
background: $white-light; background: $white-light;
...@@ -468,8 +468,18 @@ ...@@ -468,8 +468,18 @@
svg { svg {
fill: $gl-text-color-secondary; fill: $gl-text-color-secondary;
position: relative; position: relative;
left: -1px; left: 5px;
top: -1px; top: 2px;
width: 18px;
height: 18px;
}
&.play {
svg {
width: #{$ci-action-icon-size - 8};
height: #{$ci-action-icon-size - 8};
left: 8px;
}
} }
&:hover svg { &:hover svg {
...@@ -721,17 +731,49 @@ button.mini-pipeline-graph-dropdown-toggle { ...@@ -721,17 +731,49 @@ button.mini-pipeline-graph-dropdown-toggle {
svg { svg {
fill: $gl-text-color-secondary; fill: $gl-text-color-secondary;
width: $ci-action-icon-size; width: #{$ci-action-icon-size - 6};
height: $ci-action-icon-size; height: #{$ci-action-icon-size - 6};
left: -6px; left: -3px;
position: relative; position: relative;
top: -3px; top: -2px;
} }
&:hover svg, &:hover svg,
&:focus svg { &:focus svg {
fill: $gl-text-color; 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 // link to the build
......
...@@ -63,34 +63,34 @@ module CiStatusHelper ...@@ -63,34 +63,34 @@ module CiStatusHelper
def ci_icon_for_status(status) def ci_icon_for_status(status)
if detailed_status?(status) if detailed_status?(status)
return custom_icon(status.icon) return sprite_icon(status.icon)
end end
icon_name = icon_name =
case status case status
when 'success' when 'success'
'icon_status_success' 'status_success'
when 'success_with_warnings' when 'success_with_warnings'
'icon_status_warning' 'status_warning'
when 'failed' when 'failed'
'icon_status_failed' 'status_failed'
when 'pending' when 'pending'
'icon_status_pending' 'status_pending'
when 'running' when 'running'
'icon_status_running' 'status_running'
when 'play' when 'play'
'icon_play' 'play'
when 'created' when 'created'
'icon_status_created' 'status_created'
when 'skipped' when 'skipped'
'icon_status_skipped' 'status_skipped'
when 'manual' when 'manual'
'icon_status_manual' 'status_manual'
else else
'icon_status_canceled' 'status_canceled'
end end
custom_icon(icon_name) sprite_icon(icon_name, size: 16)
end end
def pipeline_status_cache_key(pipeline_status) def pipeline_status_cache_key(pipeline_status)
......
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
- if link && status.has_details? - if link && status.has_details?
= link_to status.details_path, class: css_classes, title: title do = link_to status.details_path, class: css_classes, title: title do
= custom_icon(status.icon) = sprite_icon(status.icon)
= status.text = status.text
- else - else
%span{ class: css_classes, title: title } %span{ class: css_classes, title: title }
= custom_icon(status.icon) = sprite_icon(status.icon)
= status.text = status.text
...@@ -7,13 +7,13 @@ ...@@ -7,13 +7,13 @@
- if status.has_details? - if status.has_details?
= link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item', data: { toggle: 'tooltip', title: tooltip, container: 'body' } do = 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 %span.ci-build-text= subject.name
- else - else
.menu-item.mini-pipeline-graph-dropdown-item{ data: { toggle: 'tooltip', title: tooltip, container: 'body' } } .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 %span.ci-build-text= subject.name
- if status.has_action? - 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 = 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) = sprite_icon(status.action_icon, css_class: "icon-action-#{status.action_icon}")
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
- builds.select{|build| build.status == build_status}.each do |build| - builds.select{|build| build.status == build_status}.each do |build|
.build-job{ class: sidebar_build_class(build, @build), data: { stage: build.stage } } .build-job{ class: sidebar_build_class(build, @build), data: { stage: build.stage } }
= link_to project_job_path(@project, build) do = 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}" } %span{ class: "ci-status-icon-#{build.status}" }
= ci_icon_for_status(build.status) = ci_icon_for_status(build.status)
%span %span
...@@ -100,4 +100,5 @@ ...@@ -100,4 +100,5 @@
- else - else
= build.id = build.id
- if build.retried? - 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')
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
.stage-container.dropdown{ class: klass } .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) } } %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') = icon('caret-down')
%ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container %ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container
......
...@@ -8,7 +8,7 @@ module Gitlab ...@@ -8,7 +8,7 @@ module Gitlab
end end
def action_icon def action_icon
'icon_action_cancel' 'cancel'
end end
def action_path def action_path
......
...@@ -8,7 +8,7 @@ module Gitlab ...@@ -8,7 +8,7 @@ module Gitlab
end end
def icon def icon
'icon_status_warning' 'warning'
end end
def group def group
......
...@@ -12,7 +12,7 @@ module Gitlab ...@@ -12,7 +12,7 @@ module Gitlab
end end
def action_icon def action_icon
'icon_action_play' 'play'
end end
def action_title def action_title
......
...@@ -8,7 +8,7 @@ module Gitlab ...@@ -8,7 +8,7 @@ module Gitlab
end end
def action_icon def action_icon
'icon_action_retry' 'retry'
end end
def action_title def action_title
......
...@@ -12,7 +12,7 @@ module Gitlab ...@@ -12,7 +12,7 @@ module Gitlab
end end
def action_icon def action_icon
'icon_action_stop' 'stop'
end end
def action_title def action_title
......
...@@ -11,7 +11,7 @@ module Gitlab ...@@ -11,7 +11,7 @@ module Gitlab
end end
def icon def icon
'icon_status_canceled' 'status_canceled'
end end
def favicon def favicon
......
...@@ -11,7 +11,7 @@ module Gitlab ...@@ -11,7 +11,7 @@ module Gitlab
end end
def icon def icon
'icon_status_created' 'status_created'
end end
def favicon def favicon
......
...@@ -11,7 +11,7 @@ module Gitlab ...@@ -11,7 +11,7 @@ module Gitlab
end end
def icon def icon
'icon_status_failed' 'status_failed'
end end
def favicon def favicon
......
...@@ -11,7 +11,7 @@ module Gitlab ...@@ -11,7 +11,7 @@ module Gitlab
end end
def icon def icon
'icon_status_manual' 'status_manual'
end end
def favicon def favicon
......
...@@ -11,7 +11,7 @@ module Gitlab ...@@ -11,7 +11,7 @@ module Gitlab
end end
def icon def icon
'icon_status_pending' 'status_pending'
end end
def favicon def favicon
......
...@@ -11,7 +11,7 @@ module Gitlab ...@@ -11,7 +11,7 @@ module Gitlab
end end
def icon def icon
'icon_status_running' 'status_running'
end end
def favicon def favicon
......
...@@ -11,7 +11,7 @@ module Gitlab ...@@ -11,7 +11,7 @@ module Gitlab
end end
def icon def icon
'icon_status_skipped' 'status_skipped'
end end
def favicon def favicon
......
...@@ -11,7 +11,7 @@ module Gitlab ...@@ -11,7 +11,7 @@ module Gitlab
end end
def icon def icon
'icon_status_success' 'status_success'
end end
def favicon def favicon
......
...@@ -15,7 +15,7 @@ module Gitlab ...@@ -15,7 +15,7 @@ module Gitlab
end end
def icon def icon
'icon_status_warning' 'status_warning'
end end
def group def group
......
...@@ -83,7 +83,7 @@ feature 'Mini Pipeline Graph', :js do ...@@ -83,7 +83,7 @@ feature 'Mini Pipeline Graph', :js do
end end
before do before do
toggle.click toggle.trigger('click')
wait_for_requests wait_for_requests
end end
......
...@@ -18,7 +18,7 @@ feature 'Mini Pipeline Graph in Commit View', :js do ...@@ -18,7 +18,7 @@ feature 'Mini Pipeline Graph in Commit View', :js do
expect(page).to have_selector('.mr-widget-pipeline-graph') 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 wait_for_requests
......
...@@ -67,7 +67,7 @@ describe 'Pipeline', :js do ...@@ -67,7 +67,7 @@ describe 'Pipeline', :js do
it 'shows a running icon and a cancel action for the running build' do it 'shows a running icon and a cancel action for the running build' do
page.within('#ci-badge-deploy') do page.within('#ci-badge-deploy') do
expect(page).to have_selector('.js-ci-status-icon-running') 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') expect(page).to have_content('deploy')
end end
end end
...@@ -86,8 +86,8 @@ describe 'Pipeline', :js do ...@@ -86,8 +86,8 @@ describe 'Pipeline', :js do
expect(page).to have_content('build') expect(page).to have_content('build')
end end
page.within('#ci-badge-build .ci-action-icon-container') do page.within('#ci-badge-build .ci-action-icon-container.js-icon-retry') do
expect(page).to have_selector('.js-icon-action-retry') expect(page).to have_selector('svg')
end end
end end
...@@ -105,8 +105,8 @@ describe 'Pipeline', :js do ...@@ -105,8 +105,8 @@ describe 'Pipeline', :js do
expect(page).to have_content('test') expect(page).to have_content('test')
end end
page.within('#ci-badge-test .ci-action-icon-container') do page.within('#ci-badge-test .ci-action-icon-container.js-icon-retry') do
expect(page).to have_selector('.js-icon-action-retry') expect(page).to have_selector('svg')
end end
end end
...@@ -124,8 +124,8 @@ describe 'Pipeline', :js do ...@@ -124,8 +124,8 @@ describe 'Pipeline', :js do
expect(page).to have_content('manual') expect(page).to have_content('manual')
end end
page.within('#ci-badge-manual-build .ci-action-icon-container') do page.within('#ci-badge-manual-build .ci-action-icon-container.js-icon-play') do
expect(page).to have_selector('.js-icon-action-play') expect(page).to have_selector('svg')
end end
end end
......
...@@ -8,17 +8,13 @@ describe CiStatusHelper do ...@@ -8,17 +8,13 @@ describe CiStatusHelper do
describe '#ci_icon_for_status' do describe '#ci_icon_for_status' do
it 'renders to correct svg on success' do it 'renders to correct svg on success' do
expect(helper).to receive(:render) expect(helper.ci_icon_for_status('success').to_s)
.with('shared/icons/icon_status_success.svg', anything) .to include 'status_success'
helper.ci_icon_for_status(success_commit.status)
end end
it 'renders the correct svg on failure' do it 'renders the correct svg on failure' do
expect(helper).to receive(:render) expect(helper.ci_icon_for_status('failed').to_s)
.with('shared/icons/icon_status_failed.svg', anything) .to include 'status_failed'
helper.ci_icon_for_status(failed_commit.status)
end end
end end
......
...@@ -22,7 +22,7 @@ export default { ...@@ -22,7 +22,7 @@ export default {
details_path: '/root/ci-mock/-/jobs/4757', details_path: '/root/ci-mock/-/jobs/4757',
favicon: '/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico', favicon: '/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico',
action: { action: {
icon: 'icon_action_retry', icon: 'retry',
title: 'Retry', title: 'Retry',
path: '/root/ci-mock/-/jobs/4757/retry', path: '/root/ci-mock/-/jobs/4757/retry',
method: 'post', method: 'post',
......
...@@ -11,7 +11,7 @@ describe('pipeline graph action component', () => { ...@@ -11,7 +11,7 @@ describe('pipeline graph action component', () => {
tooltipText: 'bar', tooltipText: 'bar',
link: 'foo', link: 'foo',
actionMethod: 'post', actionMethod: 'post',
actionIcon: 'icon_action_cancel', actionIcon: 'cancel',
}, },
}).$mount(); }).$mount();
......
...@@ -11,7 +11,7 @@ describe('action component', () => { ...@@ -11,7 +11,7 @@ describe('action component', () => {
tooltipText: 'bar', tooltipText: 'bar',
link: 'foo', link: 'foo',
actionMethod: 'post', actionMethod: 'post',
actionIcon: 'icon_action_cancel', actionIcon: 'cancel',
}, },
}).$mount(); }).$mount();
......
...@@ -14,7 +14,7 @@ describe('pipeline graph job component', () => { ...@@ -14,7 +14,7 @@ describe('pipeline graph job component', () => {
group: 'success', group: 'success',
details_path: '/root/ci-mock/builds/4256', details_path: '/root/ci-mock/builds/4256',
action: { action: {
icon: 'icon_action_retry', icon: 'retry',
title: 'Retry', title: 'Retry',
path: '/root/ci-mock/builds/4256/retry', path: '/root/ci-mock/builds/4256/retry',
method: 'post', method: 'post',
......
...@@ -39,7 +39,7 @@ export default { ...@@ -39,7 +39,7 @@ export default {
"details_path": "/root/ci-mock/builds/4153", "details_path": "/root/ci-mock/builds/4153",
"favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico", "favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico",
"action": { "action": {
"icon": "icon_action_retry", "icon": "retry",
"title": "Retry", "title": "Retry",
"path": "/root/ci-mock/builds/4153/retry", "path": "/root/ci-mock/builds/4153/retry",
"method": "post" "method": "post"
...@@ -62,7 +62,7 @@ export default { ...@@ -62,7 +62,7 @@ export default {
"details_path": "/root/ci-mock/builds/4153", "details_path": "/root/ci-mock/builds/4153",
"favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico", "favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico",
"action": { "action": {
"icon": "icon_action_retry", "icon": "retry",
"title": "Retry", "title": "Retry",
"path": "/root/ci-mock/builds/4153/retry", "path": "/root/ci-mock/builds/4153/retry",
"method": "post" "method": "post"
...@@ -96,7 +96,7 @@ export default { ...@@ -96,7 +96,7 @@ export default {
"details_path": "/root/ci-mock/builds/4166", "details_path": "/root/ci-mock/builds/4166",
"favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico", "favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico",
"action": { "action": {
"icon": "icon_action_retry", "icon": "retry",
"title": "Retry", "title": "Retry",
"path": "/root/ci-mock/builds/4166/retry", "path": "/root/ci-mock/builds/4166/retry",
"method": "post" "method": "post"
...@@ -119,7 +119,7 @@ export default { ...@@ -119,7 +119,7 @@ export default {
"details_path": "/root/ci-mock/builds/4166", "details_path": "/root/ci-mock/builds/4166",
"favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico", "favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico",
"action": { "action": {
"icon": "icon_action_retry", "icon": "retry",
"title": "Retry", "title": "Retry",
"path": "/root/ci-mock/builds/4166/retry", "path": "/root/ci-mock/builds/4166/retry",
"method": "post" "method": "post"
...@@ -138,7 +138,7 @@ export default { ...@@ -138,7 +138,7 @@ export default {
"details_path": "/root/ci-mock/builds/4159", "details_path": "/root/ci-mock/builds/4159",
"favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico", "favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico",
"action": { "action": {
"icon": "icon_action_retry", "icon": "retry",
"title": "Retry", "title": "Retry",
"path": "/root/ci-mock/builds/4159/retry", "path": "/root/ci-mock/builds/4159/retry",
"method": "post" "method": "post"
...@@ -161,7 +161,7 @@ export default { ...@@ -161,7 +161,7 @@ export default {
"details_path": "/root/ci-mock/builds/4159", "details_path": "/root/ci-mock/builds/4159",
"favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico", "favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico",
"action": { "action": {
"icon": "icon_action_retry", "icon": "retry",
"title": "Retry", "title": "Retry",
"path": "/root/ci-mock/builds/4159/retry", "path": "/root/ci-mock/builds/4159/retry",
"method": "post" "method": "post"
......
...@@ -13,7 +13,7 @@ describe('stage column component', () => { ...@@ -13,7 +13,7 @@ describe('stage column component', () => {
group: 'success', group: 'success',
details_path: '/root/ci-mock/builds/4256', details_path: '/root/ci-mock/builds/4256',
action: { action: {
icon: 'icon_action_retry', icon: 'retry',
title: 'Retry', title: 'Retry',
path: '/root/ci-mock/builds/4256/retry', path: '/root/ci-mock/builds/4256/retry',
method: 'post', method: 'post',
......
import Vue from 'vue'; import Vue from 'vue';
import { statusIconEntityMap } from '~/vue_shared/ci_status_icons';
import pipelineComponent from '~/vue_merge_request_widget/components/mr_widget_pipeline'; import pipelineComponent from '~/vue_merge_request_widget/components/mr_widget_pipeline';
import mockData from '../mock_data'; import mockData from '../mock_data';
...@@ -29,14 +28,6 @@ describe('MRWidgetPipeline', () => { ...@@ -29,14 +28,6 @@ describe('MRWidgetPipeline', () => {
}); });
describe('computed', () => { 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', () => { describe('hasPipeline', () => {
it('should return true when there is a pipeline', () => { it('should return true when there is a pipeline', () => {
expect(Object.keys(mockData.pipeline).length).toBeGreaterThan(0); expect(Object.keys(mockData.pipeline).length).toBeGreaterThan(0);
...@@ -142,6 +133,7 @@ describe('MRWidgetPipeline', () => { ...@@ -142,6 +133,7 @@ describe('MRWidgetPipeline', () => {
Vue.nextTick(() => { Vue.nextTick(() => {
expect(el.querySelectorAll('.js-ci-error').length).toEqual(1); expect(el.querySelectorAll('.js-ci-error').length).toEqual(1);
expect(el.innerText).toContain('Could not connect to the CI server'); 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(); done();
}); });
}); });
......
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);
});
});
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();
});
});
});
...@@ -11,63 +11,63 @@ describe('CI Badge Link Component', () => { ...@@ -11,63 +11,63 @@ describe('CI Badge Link Component', () => {
text: 'canceled', text: 'canceled',
label: 'canceled', label: 'canceled',
group: 'canceled', group: 'canceled',
icon: 'icon_status_canceled', icon: 'status_canceled',
details_path: 'status/canceled', details_path: 'status/canceled',
}, },
created: { created: {
text: 'created', text: 'created',
label: 'created', label: 'created',
group: 'created', group: 'created',
icon: 'icon_status_created', icon: 'status_created',
details_path: 'status/created', details_path: 'status/created',
}, },
failed: { failed: {
text: 'failed', text: 'failed',
label: 'failed', label: 'failed',
group: 'failed', group: 'failed',
icon: 'icon_status_failed', icon: 'status_failed',
details_path: 'status/failed', details_path: 'status/failed',
}, },
manual: { manual: {
text: 'manual', text: 'manual',
label: 'manual action', label: 'manual action',
group: 'manual', group: 'manual',
icon: 'icon_status_manual', icon: 'status_manual',
details_path: 'status/manual', details_path: 'status/manual',
}, },
pending: { pending: {
text: 'pending', text: 'pending',
label: 'pending', label: 'pending',
group: 'pending', group: 'pending',
icon: 'icon_status_pending', icon: 'status_pending',
details_path: 'status/pending', details_path: 'status/pending',
}, },
running: { running: {
text: 'running', text: 'running',
label: 'running', label: 'running',
group: 'running', group: 'running',
icon: 'icon_status_running', icon: 'status_running',
details_path: 'status/running', details_path: 'status/running',
}, },
skipped: { skipped: {
text: 'skipped', text: 'skipped',
label: 'skipped', label: 'skipped',
group: 'skipped', group: 'skipped',
icon: 'icon_status_skipped', icon: 'status_skipped',
details_path: 'status/skipped', details_path: 'status/skipped',
}, },
success_warining: { success_warining: {
text: 'passed', text: 'passed',
label: 'passed', label: 'passed',
group: 'success_with_warnings', group: 'success_with_warnings',
icon: 'icon_status_warning', icon: 'status_warning',
details_path: 'status/warning', details_path: 'status/warning',
}, },
success: { success: {
text: 'passed', text: 'passed',
label: 'passed', label: 'passed',
group: 'passed', group: 'passed',
icon: 'icon_status_success', icon: 'status_success',
details_path: 'status/passed', details_path: 'status/passed',
}, },
}; };
......
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);
});
});
});
...@@ -66,7 +66,7 @@ describe Gitlab::Ci::Status::Build::Cancelable do ...@@ -66,7 +66,7 @@ describe Gitlab::Ci::Status::Build::Cancelable do
end end
describe '#action_icon' do describe '#action_icon' do
it { expect(subject.action_icon).to eq 'icon_action_cancel' } it { expect(subject.action_icon).to eq 'cancel' }
end end
describe '#action_title' do describe '#action_title' do
......
...@@ -30,7 +30,7 @@ describe Gitlab::Ci::Status::Build::Factory do ...@@ -30,7 +30,7 @@ describe Gitlab::Ci::Status::Build::Factory do
it 'fabricates status with correct details' do it 'fabricates status with correct details' do
expect(status.text).to eq 'passed' 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.favicon).to eq 'favicon_status_success'
expect(status.label).to eq 'passed' expect(status.label).to eq 'passed'
expect(status).to have_details expect(status).to have_details
...@@ -57,7 +57,7 @@ describe Gitlab::Ci::Status::Build::Factory do ...@@ -57,7 +57,7 @@ describe Gitlab::Ci::Status::Build::Factory do
it 'fabricates status with correct details' do it 'fabricates status with correct details' do
expect(status.text).to eq 'failed' 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.favicon).to eq 'favicon_status_failed'
expect(status.label).to eq 'failed' expect(status.label).to eq 'failed'
expect(status).to have_details expect(status).to have_details
...@@ -84,7 +84,7 @@ describe Gitlab::Ci::Status::Build::Factory do ...@@ -84,7 +84,7 @@ describe Gitlab::Ci::Status::Build::Factory do
it 'fabricates status with correct details' do it 'fabricates status with correct details' do
expect(status.text).to eq 'failed' 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.favicon).to eq 'favicon_status_failed'
expect(status.label).to eq 'failed (allowed to fail)' expect(status.label).to eq 'failed (allowed to fail)'
expect(status).to have_details expect(status).to have_details
...@@ -113,7 +113,7 @@ describe Gitlab::Ci::Status::Build::Factory do ...@@ -113,7 +113,7 @@ describe Gitlab::Ci::Status::Build::Factory do
it 'fabricates status with correct details' do it 'fabricates status with correct details' do
expect(status.text).to eq 'canceled' 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.favicon).to eq 'favicon_status_canceled'
expect(status.label).to eq 'canceled' expect(status.label).to eq 'canceled'
expect(status).to have_details expect(status).to have_details
...@@ -139,7 +139,7 @@ describe Gitlab::Ci::Status::Build::Factory do ...@@ -139,7 +139,7 @@ describe Gitlab::Ci::Status::Build::Factory do
it 'fabricates status with correct details' do it 'fabricates status with correct details' do
expect(status.text).to eq 'running' 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.favicon).to eq 'favicon_status_running'
expect(status.label).to eq 'running' expect(status.label).to eq 'running'
expect(status).to have_details expect(status).to have_details
...@@ -165,7 +165,7 @@ describe Gitlab::Ci::Status::Build::Factory do ...@@ -165,7 +165,7 @@ describe Gitlab::Ci::Status::Build::Factory do
it 'fabricates status with correct details' do it 'fabricates status with correct details' do
expect(status.text).to eq 'pending' 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.favicon).to eq 'favicon_status_pending'
expect(status.label).to eq 'pending' expect(status.label).to eq 'pending'
expect(status).to have_details expect(status).to have_details
...@@ -190,7 +190,7 @@ describe Gitlab::Ci::Status::Build::Factory do ...@@ -190,7 +190,7 @@ describe Gitlab::Ci::Status::Build::Factory do
it 'fabricates status with correct details' do it 'fabricates status with correct details' do
expect(status.text).to eq 'skipped' 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.favicon).to eq 'favicon_status_skipped'
expect(status.label).to eq 'skipped' expect(status.label).to eq 'skipped'
expect(status).to have_details expect(status).to have_details
...@@ -219,7 +219,7 @@ describe Gitlab::Ci::Status::Build::Factory do ...@@ -219,7 +219,7 @@ describe Gitlab::Ci::Status::Build::Factory do
it 'fabricates status with correct details' do it 'fabricates status with correct details' do
expect(status.text).to eq 'manual' expect(status.text).to eq 'manual'
expect(status.group).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.favicon).to eq 'favicon_status_manual'
expect(status.label).to include 'manual play action' expect(status.label).to include 'manual play action'
expect(status).to have_details expect(status).to have_details
...@@ -274,7 +274,7 @@ describe Gitlab::Ci::Status::Build::Factory do ...@@ -274,7 +274,7 @@ describe Gitlab::Ci::Status::Build::Factory do
it 'fabricates status with correct details' do it 'fabricates status with correct details' do
expect(status.text).to eq 'manual' expect(status.text).to eq 'manual'
expect(status.group).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.favicon).to eq 'favicon_status_manual'
expect(status.label).to eq 'manual stop action (not allowed)' expect(status.label).to eq 'manual stop action (not allowed)'
expect(status).to have_details expect(status).to have_details
......
...@@ -18,7 +18,7 @@ describe Gitlab::Ci::Status::Build::FailedAllowed do ...@@ -18,7 +18,7 @@ describe Gitlab::Ci::Status::Build::FailedAllowed do
describe '#icon' do describe '#icon' do
it 'returns a warning icon' do it 'returns a warning icon' do
expect(subject.icon).to eq 'icon_status_warning' expect(subject.icon).to eq 'warning'
end end
end end
......
...@@ -46,7 +46,7 @@ describe Gitlab::Ci::Status::Build::Play do ...@@ -46,7 +46,7 @@ describe Gitlab::Ci::Status::Build::Play do
end end
describe '#action_icon' do describe '#action_icon' do
it { expect(subject.action_icon).to eq 'icon_action_play' } it { expect(subject.action_icon).to eq 'play' }
end end
describe '#action_title' do describe '#action_title' do
......
...@@ -66,7 +66,7 @@ describe Gitlab::Ci::Status::Build::Retryable do ...@@ -66,7 +66,7 @@ describe Gitlab::Ci::Status::Build::Retryable do
end end
describe '#action_icon' do describe '#action_icon' do
it { expect(subject.action_icon).to eq 'icon_action_retry' } it { expect(subject.action_icon).to eq 'retry' }
end end
describe '#action_title' do describe '#action_title' do
......
...@@ -38,7 +38,7 @@ describe Gitlab::Ci::Status::Build::Stop do ...@@ -38,7 +38,7 @@ describe Gitlab::Ci::Status::Build::Stop do
end end
describe '#action_icon' do describe '#action_icon' do
it { expect(subject.action_icon).to eq 'icon_action_stop' } it { expect(subject.action_icon).to eq 'stop' }
end end
describe '#action_title' do describe '#action_title' do
......
...@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Canceled do ...@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Canceled do
end end
describe '#icon' do describe '#icon' do
it { expect(subject.icon).to eq 'icon_status_canceled' } it { expect(subject.icon).to eq 'status_canceled' }
end end
describe '#favicon' do describe '#favicon' do
......
...@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Created do ...@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Created do
end end
describe '#icon' do describe '#icon' do
it { expect(subject.icon).to eq 'icon_status_created' } it { expect(subject.icon).to eq 'status_created' }
end end
describe '#favicon' do describe '#favicon' do
......
...@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Failed do ...@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Failed do
end end
describe '#icon' do describe '#icon' do
it { expect(subject.icon).to eq 'icon_status_failed' } it { expect(subject.icon).to eq 'status_failed' }
end end
describe '#favicon' do describe '#favicon' do
......
...@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Manual do ...@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Manual do
end end
describe '#icon' do describe '#icon' do
it { expect(subject.icon).to eq 'icon_status_manual' } it { expect(subject.icon).to eq 'status_manual' }
end end
describe '#favicon' do describe '#favicon' do
......
...@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Pending do ...@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Pending do
end end
describe '#icon' do describe '#icon' do
it { expect(subject.icon).to eq 'icon_status_pending' } it { expect(subject.icon).to eq 'status_pending' }
end end
describe '#favicon' do describe '#favicon' do
......
...@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Running do ...@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Running do
end end
describe '#icon' do describe '#icon' do
it { expect(subject.icon).to eq 'icon_status_running' } it { expect(subject.icon).to eq 'status_running' }
end end
describe '#favicon' do describe '#favicon' do
......
...@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Skipped do ...@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Skipped do
end end
describe '#icon' do describe '#icon' do
it { expect(subject.icon).to eq 'icon_status_skipped' } it { expect(subject.icon).to eq 'status_skipped' }
end end
describe '#favicon' do describe '#favicon' do
......
...@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Success do ...@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::Success do
end end
describe '#icon' do describe '#icon' do
it { expect(subject.icon).to eq 'icon_status_success' } it { expect(subject.icon).to eq 'status_success' }
end end
describe '#favicon' do describe '#favicon' do
......
...@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::SuccessWarning do ...@@ -14,7 +14,7 @@ describe Gitlab::Ci::Status::SuccessWarning do
end end
describe '#icon' do describe '#icon' do
it { expect(subject.icon).to eq 'icon_status_warning' } it { expect(subject.icon).to eq 'status_warning' }
end end
describe '#group' do 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