diff options
5 files changed, 14 insertions, 21 deletions
diff --git a/app/assets/javascripts/pipelines/components/async_button.vue b/app/assets/javascripts/pipelines/components/async_button.vue index 4ad3f66ee8c..77553ca67cc 100644 --- a/app/assets/javascripts/pipelines/components/async_button.vue +++ b/app/assets/javascripts/pipelines/components/async_button.vue @@ -3,6 +3,7 @@ import eventHub from '../event_hub'; import loadingIcon from '../../vue_shared/components/loading_icon.vue'; + import icon from '../../vue_shared/components/icon.vue'; import tooltip from '../../vue_shared/directives/tooltip'; export default { @@ -11,6 +12,7 @@ }, components: { loadingIcon, + icon, }, props: { endpoint: { @@ -41,9 +43,6 @@ }; }, computed: { - iconClass() { - return `fa fa-${this.icon}`; - }, buttonClass() { return `btn ${this.cssClass}`; }, @@ -76,10 +75,9 @@ data-container="body" data-placement="top" :disabled="isLoading"> - <i - :class="iconClass" - aria-hidden="true"> - </i> + <icon + :name="icon" + /> <loading-icon v-if="isLoading" /> </button> </template> diff --git a/app/assets/javascripts/pipelines/components/pipelines_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_actions.vue index efda36c12d6..4d4b6b1776d 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_actions.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_actions.vue @@ -1,7 +1,7 @@ <script> - import playIconSvg from 'icons/_icon_play.svg'; import eventHub from '../event_hub'; import loadingIcon from '../../vue_shared/components/loading_icon.vue'; + import icon from '../../vue_shared/components/icon.vue'; import tooltip from '../../vue_shared/directives/tooltip'; export default { @@ -10,6 +10,7 @@ }, components: { loadingIcon, + icon, }, props: { actions: { @@ -19,7 +20,6 @@ }, data() { return { - playIconSvg, isLoading: false, }; }, @@ -52,7 +52,9 @@ aria-label="Manual job" :disabled="isLoading" > - <span v-html="playIconSvg"></span> + <icon + name="play" + /> <i class="fa fa-caret-down" aria-hidden="true"> diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue index 670b777199c..d87e24cc8a7 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue @@ -312,7 +312,7 @@ :endpoint="pipeline.cancel_path" css-class="js-pipelines-cancel-button btn-remove" title="Cancel" - icon="remove" + icon="close" confirm-action-message="Are you sure you want to cancel this pipeline?" /> </div> diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 370b07663fd..766e02b12ea 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -69,13 +69,6 @@ border-color: $border-white-normal; } } - - .btn { - .icon-play { - height: 13px; - width: 12px; - } - } } .btn .text-center { diff --git a/spec/javascripts/pipelines/async_button_spec.js b/spec/javascripts/pipelines/async_button_spec.js index 48620898357..d010d897642 100644 --- a/spec/javascripts/pipelines/async_button_spec.js +++ b/spec/javascripts/pipelines/async_button_spec.js @@ -13,7 +13,7 @@ describe('Pipelines Async Button', () => { propsData: { endpoint: '/foo', title: 'Foo', - icon: 'fa fa-foo', + icon: 'repeat', cssClass: 'bar', }, }).$mount(); @@ -23,8 +23,8 @@ describe('Pipelines Async Button', () => { expect(component.$el.tagName).toEqual('BUTTON'); }); - it('should render the provided icon', () => { - expect(component.$el.querySelector('i').getAttribute('class')).toContain('fa fa-foo'); + it('should render svg icon', () => { + expect(component.$el.querySelector('svg')).not.toBeNull(); }); it('should render the provided title', () => { |