diff options
| author | Filipa Lacerda <filipa@gitlab.com> | 2018-06-13 14:36:40 +0100 |
|---|---|---|
| committer | Filipa Lacerda <filipa@gitlab.com> | 2018-06-13 14:36:40 +0100 |
| commit | 3e11cbebb7bd45678dc8f9a2c5e8c4b9018e8bcb (patch) | |
| tree | cabfdabca18169433d11c127ee82f12e6f918a46 /app/assets | |
| parent | 75f692748d853d38494ba93ff15f98475b6c2da7 (diff) | |
| parent | 69228d796c26e71da894c18f157c7f95022f0b6b (diff) | |
| download | gitlab-ce-3e11cbebb7bd45678dc8f9a2c5e8c4b9018e8bcb.tar.gz | |
Merge branch 'master' into gl-remove-window-scope
* master:
Add documentation: Overview of Frontend Testing
Resolve "Add `/confidential` quick action for issues"
i18n: externalize strings from 'app/views/award_emoji'
Fix broken tests due to bad conflict resolution
Updates eslint rules
Documentation does not need an exception to be picked
Fix conflicts caused by vue_shared/components/user_avatar/user_avatar_image.vue
[Rails5] Fix `storage_counter` helper
Adjust SQL and transaction Prometheus buckets
Updates eslint vue plugin version
Diffstat (limited to 'app/assets')
246 files changed, 1148 insertions, 1064 deletions
diff --git a/app/assets/javascripts/badges/components/badge.vue b/app/assets/javascripts/badges/components/badge.vue index d0f60e1d4cb..b4bfaee1d85 100644 --- a/app/assets/javascripts/badges/components/badge.vue +++ b/app/assets/javascripts/badges/components/badge.vue @@ -72,11 +72,11 @@ export default { rel="noopener noreferrer" > <img - class="project-badge" :src="imageUrlWithRetries" + class="project-badge" + aria-hidden="true" @load="onLoad" @error="onError" - aria-hidden="true" /> </a> @@ -91,9 +91,9 @@ export default { > <div class="btn btn-default btn-sm disabled"> <icon + :size="16" class="prepend-left-8 append-right-8" name="doc_image" - :size="16" aria-hidden="true" /> </div> @@ -105,16 +105,16 @@ export default { </div> <button + v-tooltip v-show="hasError" + :title="s__('Badges|Reload badge image')" class="btn btn-transparent btn-sm text-primary" type="button" - v-tooltip - :title="s__('Badges|Reload badge image')" @click="reloadImage" > <icon - name="retry" :size="16" + name="retry" /> </button> </div> diff --git a/app/assets/javascripts/badges/components/badge_form.vue b/app/assets/javascripts/badges/components/badge_form.vue index 5975cb9669e..7a13f74c570 100644 --- a/app/assets/javascripts/badges/components/badge_form.vue +++ b/app/assets/javascripts/badges/components/badge_form.vue @@ -153,10 +153,10 @@ export default { <label for="badge-link-url">{{ s__('Badges|Link') }}</label> <input id="badge-link-url" - type="text" - class="form-control" v-model="linkUrl" :placeholder="$options.badgeLinkUrlPlaceholder" + type="text" + class="form-control" @input="debouncedPreview" /> <span @@ -169,10 +169,10 @@ export default { <label for="badge-image-url">{{ s__('Badges|Badge image URL') }}</label> <input id="badge-image-url" - type="text" - class="form-control" v-model="imageUrl" :placeholder="$options.badgeImageUrlPlaceholder" + type="text" + class="form-control" @input="debouncedPreview" /> <span @@ -184,8 +184,8 @@ export default { <div class="form-group"> <label for="badge-preview">{{ s__('Badges|Badge image preview') }}</label> <badge - id="badge-preview" v-show="renderedBadge && !isRendering" + id="badge-preview" :image-url="renderedImageUrl" :link-url="renderedLinkUrl" /> @@ -202,16 +202,16 @@ export default { <div class="row-content-block"> <loading-button - type="submit" - container-class="btn btn-success" :disabled="!canSubmit" :loading="isSaving" :label="submitButtonLabel" + type="submit" + container-class="btn btn-success" /> <button + v-if="isEditing" class="btn btn-cancel" type="button" - v-if="isEditing" @click="onCancel" >{{ __('Cancel') }}</button> </div> diff --git a/app/assets/javascripts/badges/components/badge_list_row.vue b/app/assets/javascripts/badges/components/badge_list_row.vue index af062bdf8c6..98aa00af0d7 100644 --- a/app/assets/javascripts/badges/components/badge_list_row.vue +++ b/app/assets/javascripts/badges/components/badge_list_row.vue @@ -41,9 +41,9 @@ export default { <template> <div class="gl-responsive-table-row-layout gl-responsive-table-row"> <badge - class="table-section section-30" :image-url="badge.renderedImageUrl" :link-url="badge.renderedLinkUrl" + class="table-section section-30" /> <span class="table-section section-50 str-truncated">{{ badge.linkUrl }}</span> <div class="table-section section-10"> @@ -54,29 +54,29 @@ export default { v-if="canEditBadge" class="table-action-buttons"> <button + :disabled="badge.isDeleting" class="btn btn-default append-right-8" type="button" - :disabled="badge.isDeleting" @click="editBadge(badge)" > <icon - name="pencil" :size="16" :aria-label="__('Edit')" + name="pencil" /> </button> <button + :disabled="badge.isDeleting" class="btn btn-danger" type="button" data-toggle="modal" data-target="#delete-badge-modal" - :disabled="badge.isDeleting" @click="updateBadgeInModal(badge)" > <icon - name="remove" :size="16" :aria-label="__('Delete')" + name="remove" /> </button> <loading-icon diff --git a/app/assets/javascripts/badges/components/badge_settings.vue b/app/assets/javascripts/badges/components/badge_settings.vue index 83f78394238..cc47e56dd1e 100644 --- a/app/assets/javascripts/badges/components/badge_settings.vue +++ b/app/assets/javascripts/badges/components/badge_settings.vue @@ -44,8 +44,8 @@ export default { <gl-modal id="delete-badge-modal" :header-title-text="s__('Badges|Delete badge?')" - footer-primary-button-variant="danger" :footer-primary-button-text="s__('Badges|Delete badge')" + footer-primary-button-variant="danger" @submit="onSubmitModal"> <div class="well"> <badge diff --git a/app/assets/javascripts/boards/components/board.js b/app/assets/javascripts/boards/components/board.js index ac06d79fb60..86b888c66c8 100644 --- a/app/assets/javascripts/boards/components/board.js +++ b/app/assets/javascripts/boards/components/board.js @@ -14,17 +14,28 @@ window.gl = window.gl || {}; window.gl.issueBoards = window.gl.issueBoards || {}; gl.issueBoards.Board = Vue.extend({ - template: '#js-board-template', components: { boardList, 'board-delete': gl.issueBoards.BoardDelete, BoardBlankState, }, props: { - list: Object, - disabled: Boolean, - issueLinkBase: String, - rootPath: String, + list: { + type: Object, + default: () => ({}), + }, + disabled: { + type: Boolean, + required: true, + }, + issueLinkBase: { + type: String, + required: true, + }, + rootPath: { + type: String, + required: true, + }, boardId: { type: String, required: true, @@ -82,20 +93,6 @@ gl.issueBoards.Board = Vue.extend({ deep: true } }, - methods: { - showNewIssueForm() { - this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm; - }, - toggleExpanded(e) { - if (this.list.isExpandable && !e.target.classList.contains('js-no-trigger-collapse')) { - this.list.isExpanded = !this.list.isExpanded; - - if (AccessorUtilities.isLocalStorageAccessSafe()) { - localStorage.setItem(`boards.${this.boardId}.${this.list.type}.expanded`, this.list.isExpanded); - } - } - }, - }, mounted () { this.sortableOptions = gl.issueBoards.getBoardSortableDefaultOptions({ disabled: this.disabled, @@ -125,4 +122,19 @@ gl.issueBoards.Board = Vue.extend({ this.list.isExpanded = !isCollapsed; } }, + methods: { + showNewIssueForm() { + this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm; + }, + toggleExpanded(e) { + if (this.list.isExpandable && !e.target.classList.contains('js-no-trigger-collapse')) { + this.list.isExpanded = !this.list.isExpanded; + + if (AccessorUtilities.isLocalStorageAccessSafe()) { + localStorage.setItem(`boards.${this.boardId}.${this.list.type}.expanded`, this.list.isExpanded); + } + } + }, + }, + template: '#js-board-template', }); diff --git a/app/assets/javascripts/boards/components/board_blank_state.vue b/app/assets/javascripts/boards/components/board_blank_state.vue index 2049eeb9c30..286529b4d13 100644 --- a/app/assets/javascripts/boards/components/board_blank_state.vue +++ b/app/assets/javascripts/boards/components/board_blank_state.vue @@ -72,8 +72,8 @@ export default { :key="index" > <span - class="label-color" - :style="{ backgroundColor: label.color }"> + :style="{ backgroundColor: label.color }" + class="label-color"> </span> {{ label.title }} </li> diff --git a/app/assets/javascripts/boards/components/board_card.vue b/app/assets/javascripts/boards/components/board_card.vue index 33e3369b971..b7d3574bc80 100644 --- a/app/assets/javascripts/boards/components/board_card.vue +++ b/app/assets/javascripts/boards/components/board_card.vue @@ -77,7 +77,6 @@ export default { <template> <li - class="board-card" :class="{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, @@ -85,6 +84,7 @@ export default { }" :index="index" :data-issue-id="issue.id" + class="board-card" @mousedown="mouseDown" @mousemove="mouseMove" @mouseup="showIssue($event)"> diff --git a/app/assets/javascripts/boards/components/board_delete.js b/app/assets/javascripts/boards/components/board_delete.js index 7be98825fda..4482b3b3e70 100644 --- a/app/assets/javascripts/boards/components/board_delete.js +++ b/app/assets/javascripts/boards/components/board_delete.js @@ -8,7 +8,10 @@ window.gl.issueBoards = window.gl.issueBoards || {}; gl.issueBoards.BoardDelete = Vue.extend({ props: { - list: Object + list: { + type: Object, + default: () => ({}), + }, }, methods: { deleteBoard () { diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue index 0692c96e767..5c7565234d8 100644 --- a/app/assets/javascripts/boards/components/board_list.vue +++ b/app/assets/javascripts/boards/components/board_list.vue @@ -205,22 +205,22 @@ export default { <template> <div class="board-list-component"> <div + v-if="loading" class="board-list-loading text-center" - aria-label="Loading issues" - v-if="loading"> + aria-label="Loading issues"> <loading-icon /> </div> <board-new-issue + v-if="list.type !== 'closed' && showIssueForm" :group-id="groupId" - :list="list" - v-if="list.type !== 'closed' && showIssueForm"/> + :list="list"/> <ul - class="board-list js-board-list" v-show="!loading" ref="list" :data-board="list.id" :data-board-type="list.type" - :class="{ 'is-smaller': showIssueForm }"> + :class="{ 'is-smaller': showIssueForm }" + class="board-list js-board-list"> <board-card v-for="(issue, index) in issues" ref="issue" @@ -233,8 +233,8 @@ export default { :disabled="disabled" :key="issue.id" /> <li - class="board-list-count text-center" v-if="showCount" + class="board-list-count text-center" data-issue-id="-1"> <loading-icon v-show="list.loadingMore" diff --git a/app/assets/javascripts/boards/components/board_new_issue.vue b/app/assets/javascripts/boards/components/board_new_issue.vue index 297c9eff38c..ec23b1e7c11 100644 --- a/app/assets/javascripts/boards/components/board_new_issue.vue +++ b/app/assets/javascripts/boards/components/board_new_issue.vue @@ -96,26 +96,26 @@ export default { <div class="board-card"> <form @submit="submit($event)"> <div - class="flash-container" v-if="error" + class="flash-container" > <div class="flash-alert"> An error occurred. Please try again. </div> </div> <label - class="label-light" :for="list.id + '-title'" + class="label-light" > Title </label> <input + ref="input" + v-model="title" + :id="list.id + '-title'" class="form-control" type="text" - v-model="title" - ref="input" autocomplete="off" - :id="list.id + '-title'" /> <project-select v-if="groupId" @@ -123,10 +123,10 @@ export default { /> <div class="clearfix prepend-top-10"> <button + ref="submit-button" + :disabled="disabled" class="btn btn-success float-left" type="submit" - :disabled="disabled" - ref="submit-button" > Submit issue </button> diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js index c4ee4f6c855..82fe6b0c5fb 100644 --- a/app/assets/javascripts/boards/components/board_sidebar.js +++ b/app/assets/javascripts/boards/components/board_sidebar.js @@ -21,8 +21,17 @@ window.gl = window.gl || {}; window.gl.issueBoards = window.gl.issueBoards || {}; gl.issueBoards.BoardSidebar = Vue.extend({ + components: { + assigneeTitle, + assignees, + removeBtn: gl.issueBoards.RemoveIssueBtn, + subscriptions, + }, props: { - currentUser: Object + currentUser: { + type: Object, + default: () => ({}), + }, }, data() { return { @@ -64,6 +73,26 @@ gl.issueBoards.BoardSidebar = Vue.extend({ deep: true }, }, + created () { + // Get events from glDropdown + eventHub.$on('sidebar.removeAssignee', this.removeAssignee); + eventHub.$on('sidebar.addAssignee', this.addAssignee); + eventHub.$on('sidebar.removeAllAssignees', this.removeAllAssignees); + eventHub.$on('sidebar.saveAssignees', this.saveAssignees); + }, + beforeDestroy() { + eventHub.$off('sidebar.removeAssignee', this.removeAssignee); + eventHub.$off('sidebar.addAssignee', this.addAssignee); + eventHub.$off('sidebar.removeAllAssignees', this.removeAllAssignees); + eventHub.$off('sidebar.saveAssignees', this.saveAssignees); + }, + mounted () { + new IssuableContext(this.currentUser); + new MilestoneSelect(); + new DueDateSelectors(); + new LabelsSelect(); + new Sidebar(); + }, methods: { closeSidebar () { this.detail.issue = {}; @@ -97,30 +126,4 @@ gl.issueBoards.BoardSidebar = Vue.extend({ }); }, }, - created () { - // Get events from glDropdown - eventHub.$on('sidebar.removeAssignee', this.removeAssignee); - eventHub.$on('sidebar.addAssignee', this.addAssignee); - eventHub.$on('sidebar.removeAllAssignees', this.removeAllAssignees); - eventHub.$on('sidebar.saveAssignees', this.saveAssignees); - }, - beforeDestroy() { - eventHub.$off('sidebar.removeAssignee', this.removeAssignee); - eventHub.$off('sidebar.addAssignee', this.addAssignee); - eventHub.$off('sidebar.removeAllAssignees', this.removeAllAssignees); - eventHub.$off('sidebar.saveAssignees', this.saveAssignees); - }, - mounted () { - new IssuableContext(this.currentUser); - new MilestoneSelect(); - new DueDateSelectors(); - new LabelsSelect(); - new Sidebar(); - }, - components: { - assigneeTitle, - assignees, - removeBtn: gl.issueBoards.RemoveIssueBtn, - subscriptions, - }, }); diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js b/app/assets/javascripts/boards/components/issue_card_inner.js index dcc07810d01..f7d7b910e2f 100644 --- a/app/assets/javascripts/boards/components/issue_card_inner.js +++ b/app/assets/javascripts/boards/components/issue_card_inner.js @@ -9,6 +9,9 @@ window.gl = window.gl || {}; window.gl.issueBoards = window.gl.issueBoards || {}; gl.issueBoards.IssueCardInner = Vue.extend({ + components: { + UserAvatarLink, + }, props: { issue: { type: Object, @@ -35,6 +38,7 @@ gl.issueBoards.IssueCardInner = Vue.extend({ groupId: { type: Number, required: false, + default: null, }, }, data() { @@ -44,9 +48,6 @@ gl.issueBoards.IssueCardInner = Vue.extend({ maxCounter: 99, }; }, - components: { - UserAvatarLink, - }, computed: { numberOverLimit() { return this.issue.assignees.length - this.limitBeforeCounter; diff --git a/app/assets/javascripts/boards/components/modal/empty_state.js b/app/assets/javascripts/boards/components/modal/empty_state.js index 1e5f2383223..888bc9d7ef2 100644 --- a/app/assets/javascripts/boards/components/modal/empty_state.js +++ b/app/assets/javascripts/boards/components/modal/empty_state.js @@ -4,9 +4,6 @@ import modalMixin from '../../mixins/modal_mixins'; gl.issueBoards.ModalEmptyState = Vue.extend({ mixins: [modalMixin], - data() { - return ModalStore.store; - }, props: { newIssuePath: { type: String, @@ -17,6 +14,9 @@ gl.issueBoards.ModalEmptyState = Vue.extend({ required: true, }, }, + data() { + return ModalStore.store; + }, computed: { contents() { const obj = { diff --git a/app/assets/javascripts/boards/components/modal/footer.js b/app/assets/javascripts/boards/components/modal/footer.js index 11bb3e98334..2745ca219ad 100644 --- a/app/assets/javascripts/boards/components/modal/footer.js +++ b/app/assets/javascripts/boards/components/modal/footer.js @@ -7,6 +7,9 @@ import ModalStore from '../../stores/modal_store'; import modalMixin from '../../mixins/modal_mixins'; gl.issueBoards.ModalFooter = Vue.extend({ + components: { + 'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown, + }, mixins: [modalMixin], data() { return { @@ -52,9 +55,6 @@ gl.issueBoards.ModalFooter = Vue.extend({ this.toggleModal(false); }, }, - components: { - 'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown, - }, template: ` <footer class="form-actions add-issues-footer"> diff --git a/app/assets/javascripts/boards/components/modal/header.js b/app/assets/javascripts/boards/components/modal/header.js index 67c29ebca72..5e511bb8935 100644 --- a/app/assets/javascripts/boards/components/modal/header.js +++ b/app/assets/javascripts/boards/components/modal/header.js @@ -5,6 +5,10 @@ import ModalStore from '../../stores/modal_store'; import modalMixin from '../../mixins/modal_mixins'; gl.issueBoards.ModalHeader = Vue.extend({ + components: { + 'modal-tabs': gl.issueBoards.ModalTabs, + modalFilters, + }, mixins: [modalMixin], props: { projectId: { @@ -42,10 +46,6 @@ gl.issueBoards.ModalHeader = Vue.extend({ ModalStore.toggleAll(); }, }, - components: { - 'modal-tabs': gl.issueBoards.ModalTabs, - modalFilters, - }, template: ` <div> <header class="add-issues-header form-actions"> diff --git a/app/assets/javascripts/boards/components/modal/index.js b/app/assets/javascripts/boards/components/modal/index.js index 3083b3e4405..c8b2f45f177 100644 --- a/app/assets/javascripts/boards/components/modal/index.js +++ b/app/assets/javascripts/boards/components/modal/index.js @@ -10,6 +10,13 @@ import './empty_state'; import ModalStore from '../../stores/modal_store'; gl.issueBoards.IssuesModal = Vue.extend({ + components: { + 'modal-header': gl.issueBoards.ModalHeader, + 'modal-list': gl.issueBoards.ModalList, + 'modal-footer': gl.issueBoards.ModalFooter, + 'empty-state': gl.issueBoards.ModalEmptyState, + loadingIcon, + }, props: { newIssuePath: { type: String, @@ -43,6 +50,22 @@ gl.issueBoards.IssuesModal = Vue.extend({ data() { return ModalStore.store; }, + computed: { + showList() { + if (this.activeTab === 'selected') { + return this.selectedIssues.length > 0; + } + + return this.issuesCount > 0; + }, + showEmptyState() { + if (!this.loading && this.issuesCount === 0) { + return true; + } + + return this.activeTab === 'selected' && this.selectedIssues.length === 0; + }, + }, watch: { page() { this.loadIssues(); @@ -80,6 +103,9 @@ gl.issueBoards.IssuesModal = Vue.extend({ deep: true, }, }, + created() { + this.page = 1; + }, methods: { loadIssues(clearIssues = false) { if (!this.showAddIssuesModal) return false; @@ -112,32 +138,6 @@ gl.issueBoards.IssuesModal = Vue.extend({ }); }, }, - computed: { - showList() { - if (this.activeTab === 'selected') { - return this.selectedIssues.length > 0; - } - - return this.issuesCount > 0; - }, - showEmptyState() { - if (!this.loading && this.issuesCount === 0) { - return true; - } - - return this.activeTab === 'selected' && this.selectedIssues.length === 0; - }, - }, - created() { - this.page = 1; - }, - components: { - 'modal-header': gl.issueBoards.ModalHeader, - 'modal-list': gl.issueBoards.ModalList, - 'modal-footer': gl.issueBoards.ModalFooter, - 'empty-state': gl.issueBoards.ModalEmptyState, - loadingIcon, - }, template: ` <div class="add-issues-modal" diff --git a/app/assets/javascripts/boards/components/modal/list.js b/app/assets/javascripts/boards/components/modal/list.js index f86896d2178..11061c72a7b 100644 --- a/app/assets/javascripts/boards/components/modal/list.js +++ b/app/assets/javascripts/boards/components/modal/list.js @@ -3,6 +3,9 @@ import bp from '../../../breakpoints'; import ModalStore from '../../stores/modal_store'; gl.issueBoards.ModalList = Vue.extend({ + components: { + 'issue-card-inner': gl.issueBoards.IssueCardInner, + }, props: { issueLinkBase: { type: String, @@ -20,13 +23,6 @@ gl.issueBoards.ModalList = Vue.extend({ data() { return ModalStore.store; }, - watch: { - activeTab() { - if (this.activeTab === 'all') { - ModalStore.purgeUnselectedIssues(); - } - }, - }, computed: { loopIssues() { if (this.activeTab === 'all') { @@ -50,6 +46,25 @@ gl.issueBoards.ModalList = Vue.extend({ return groups; }, }, + watch: { + activeTab() { + if (this.activeTab === 'all') { + ModalStore.purgeUnselectedIssues(); + } + }, + }, + mounted() { + this.scrollHandlerWrapper = this.scrollHandler.bind(this); + this.setColumnCountWrapper = this.setColumnCount.bind(this); + this.setColumnCount(); + + this.$refs.list.addEventListener('scroll', this.scrollHandlerWrapper); + window.addEventListener('resize', this.setColumnCountWrapper); + }, + beforeDestroy() { + this.$refs.list.removeEventListener('scroll', this.scrollHandlerWrapper); + window.removeEventListener('resize', this.setColumnCountWrapper); + }, methods: { scrollHandler() { const currentPage = Math.floor(this.issues.length / this.perPage); @@ -96,21 +111,6 @@ gl.issueBoards.ModalList = Vue.extend({ } }, }, - mounted() { - this.scrollHandlerWrapper = this.scrollHandler.bind(this); - this.setColumnCountWrapper = this.setColumnCount.bind(this); - this.setColumnCount(); - - this.$refs.list.addEventListener('scroll', this.scrollHandlerWrapper); - window.addEventListener('resize', this.setColumnCountWrapper); - }, - beforeDestroy() { - this.$refs.list.removeEventListener('scroll', this.scrollHandlerWrapper); - window.removeEventListener('resize', this.setColumnCountWrapper); - }, - components: { - 'issue-card-inner': gl.issueBoards.IssueCardInner, - }, template: ` <section class="add-issues-list add-issues-list-columns" diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue index 98c0b9c22a8..ec52fdfdf32 100644 --- a/app/assets/javascripts/clusters/components/application_row.vue +++ b/app/assets/javascripts/clusters/components/application_row.vue @@ -125,8 +125,8 @@ <template> <div - class="gl-responsive-table-row gl-responsive-table-row-col-span" :class="rowJsClass" + class="gl-responsive-table-row gl-responsive-table-row-col-span" > <div class="gl-responsive-table-row-layout" @@ -155,8 +155,8 @@ <slot name="description"></slot> </div> <div - class="table-section table-button-footer section-align-top" :class="{ 'section-20': showManageButton, 'section-15': !showManageButton }" + class="table-section table-button-footer section-align-top" role="gridcell" > <div @@ -164,18 +164,18 @@ class="btn-group table-action-buttons" > <a - class="btn" :href="manageLink" + class="btn" > {{ manageButtonLabel }} </a> </div> <div class="btn-group table-action-buttons"> <loading-button - class="js-cluster-application-install-button" :loading="installButtonLoading" :disabled="installButtonDisabled" :label="installButtonLabel" + class="js-cluster-application-install-button" @click="installClicked" /> </div> diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue index 9d6be555a2c..8ee7279e544 100644 --- a/app/assets/javascripts/clusters/components/applications.vue +++ b/app/assets/javascripts/clusters/components/applications.vue @@ -152,11 +152,11 @@ export default { <application-row id="helm" :title="applications.helm.title" - title-link="https://docs.helm.sh/" :status="applications.helm.status" :status-reason="applications.helm.statusReason" :request-status="applications.helm.requestStatus" :request-reason="applications.helm.requestReason" + title-link="https://docs.helm.sh/" > <div slot="description"> {{ s__(`ClusterIntegration|Helm streamlines installing @@ -168,11 +168,11 @@ export default { <application-row :id="ingressId" :title="applications.ingress.title" - title-link="https://kubernetes.io/docs/concepts/services-networking/ingress/" :status="applications.ingress.status" :status-reason="applications.ingress.statusReason" :request-status="applications.ingress.requestStatus" :request-reason="applications.ingress.requestReason" + title-link="https://kubernetes.io/docs/concepts/services-networking/ingress/" > <div slot="description"> <p> @@ -191,10 +191,10 @@ export default { class="input-group" > <input - type="text" id="ingress-ip-address" - class="form-control js-ip-address" :value="ingressExternalIp" + type="text" + class="form-control js-ip-address" readonly /> <span class="input-group-append"> @@ -255,12 +255,12 @@ export default { <application-row id="prometheus" :title="applications.prometheus.title" - title-link="https://prometheus.io/docs/introduction/overview/" :manage-link="managePrometheusPath" :status="applications.prometheus.status" :status-reason="applications.prometheus.statusReason" :request-status="applications.prometheus.requestStatus" :request-reason="applications.prometheus.requestReason" + title-link="https://prometheus.io/docs/introduction/overview/" > <div slot="description" @@ -271,11 +271,11 @@ export default { <application-row id="runner" :title="applications.runner.title" - title-link="https://docs.gitlab.com/runner/" :status="applications.runner.status" :status-reason="applications.runner.statusReason" :request-status="applications.runner.requestStatus" :request-reason="applications.runner.requestReason" + title-link="https://docs.gitlab.com/runner/" > <div slot="description"> {{ s__(`ClusterIntegration|GitLab Runner connects to this @@ -287,12 +287,12 @@ export default { <application-row id="jupyter" :title="applications.jupyter.title" - title-link="https://jupyterhub.readthedocs.io/en/stable/" :status="applications.jupyter.status" :status-reason="applications.jupyter.statusReason" :request-status="applications.jupyter.requestStatus" :request-reason="applications.jupyter.requestReason" :install-application-request-params="{ hostname: applications.jupyter.hostname }" + title-link="https://jupyterhub.readthedocs.io/en/stable/" > <div slot="description"> <p> @@ -311,10 +311,10 @@ export default { <div class="input-group"> <input - type="text" - class="form-control js-hostname" v-model="applications.jupyter.hostname" :readonly="jupyterInstalled" + type="text" + class="form-control js-hostname" /> <span class="input-group-btn" diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue index 24d63b99a29..95c4be64d35 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue +++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue @@ -77,9 +77,9 @@ <div class="content-list pipelines"> <loading-icon + v-if="isLoading" :label="s__('Pipelines|Loading Pipelines')" size="3" - v-if="isLoading" class="prepend-top-20" /> @@ -91,8 +91,8 @@ /> <div - class="table-holder" v-else-if="shouldRenderTable" + class="table-holder" > <pipelines-table-component :pipelines="state.pipelines" diff --git a/app/assets/javascripts/cycle_analytics/components/banner.vue b/app/assets/javascripts/cycle_analytics/components/banner.vue index 3204b8dd8e7..410d4873e55 100644 --- a/app/assets/javascripts/cycle_analytics/components/banner.vue +++ b/app/assets/javascripts/cycle_analytics/components/banner.vue @@ -23,9 +23,9 @@ <template> <div class="landing content-block"> <button + :aria-label="__('Dismiss Cycle Analytics introduction box')" class="js-ca-dismiss-button dismiss-button" type="button" - :aria-label="__('Dismiss Cycle Analytics introduction box')" @click="dismissOverviewDialog" > <i diff --git a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue index 5be17081b58..b626b187651 100644 --- a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue +++ b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue @@ -19,14 +19,14 @@ class="events-info float-right" > <i - class="fa fa-warning" v-tooltip - aria-hidden="true" :title="n__( 'Limited to showing %d event at most', 'Limited to showing %d events at most', 50 )" + class="fa fa-warning" + aria-hidden="true" data-placement="top" > </i> diff --git a/app/assets/javascripts/cycle_analytics/components/stage_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_component.vue index 907638d798a..312fe75dde4 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_component.vue +++ b/app/assets/javascripts/cycle_analytics/components/stage_component.vue @@ -38,8 +38,8 @@ <user-avatar-image :img-src="issue.author.avatarUrl"/> <h5 class="item-title issue-title"> <a - class="issue-title" :href="issue.url" + class="issue-title" > {{ issue.title }} </a> diff --git a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue index 34aa04083e6..d4735d030fc 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue +++ b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue @@ -74,12 +74,12 @@ </template> <template v-else> <span - class="merge-request-branch" v-if="mergeRequest.branch" + class="merge-request-branch" > <icon - name="fork" :size="16" + name="fork" /> <a :href="mergeRequest.branch.url"> {{ mergeRequest.branch.name }} diff --git a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue index 92f2a95a66a..22637485c01 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue +++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue @@ -38,8 +38,8 @@ <ul class="stage-event-list"> <li v-for="(build, i) in items" - class="stage-event-item item-build-component" :key="i" + class="stage-event-item item-build-component" > <div class="item-details"> <!-- FIXME: Pass an alt attribute here for accessibility --> @@ -52,8 +52,8 @@ #{{ build.id }} </a> <icon - name="fork" :size="16" + name="fork" /> <a :href="build.branch.url" diff --git a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue index b84bb6ed792..a0796f299e7 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue +++ b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue @@ -64,8 +64,8 @@ #{{ build.id }} </a> <icon - name="fork" :size="16" + name="fork" /> <a :href="build.branch.url" diff --git a/app/assets/javascripts/deploy_keys/components/action_btn.vue b/app/assets/javascripts/deploy_keys/components/action_btn.vue index 67dda0e29cb..7399fc97d45 100644 --- a/app/assets/javascripts/deploy_keys/components/action_btn.vue +++ b/app/assets/javascripts/deploy_keys/components/action_btn.vue @@ -40,9 +40,9 @@ export default { <template> <button - class="btn" :class="[{ disabled: isLoading }, btnCssClass]" :disabled="isLoading" + class="btn" @click="doAction"> <slot></slot> <loading-icon diff --git a/app/assets/javascripts/deploy_keys/components/app.vue b/app/assets/javascripts/deploy_keys/components/app.vue index c41fe55db63..2cfa13fdc75 100644 --- a/app/assets/javascripts/deploy_keys/components/app.vue +++ b/app/assets/javascripts/deploy_keys/components/app.vue @@ -116,8 +116,8 @@ export default { <div class="append-bottom-default deploy-keys"> <loading-icon v-if="isLoading && !hasKeys" - size="2" :label="s__('DeployKeys|Loading deploy keys')" + size="2" /> <template v-else-if="hasKeys"> <div class="top-area scrolling-tabs-container inner-page-scroll-tabs"> @@ -138,16 +138,16 @@ export default { <navigation-tabs :tabs="tabs" - @onChangeTab="onChangeTab" scope="deployKeys" + @onChangeTab="onChangeTab" /> </div> <keys-panel - class="qa-project-deploy-keys" :project-id="projectId" :keys="keys[currentTab]" :store="store" :endpoint="endpoint" + class="qa-project-deploy-keys" /> </template> </div> diff --git a/app/assets/javascripts/deploy_keys/components/key.vue b/app/assets/javascripts/deploy_keys/components/key.vue index 6c2af7fa768..f66ca070445 100644 --- a/app/assets/javascripts/deploy_keys/components/key.vue +++ b/app/assets/javascripts/deploy_keys/components/key.vue @@ -135,9 +135,9 @@ export default { <div class="table-mobile-content deploy-project-list"> <template v-if="projects.length > 0"> <a - class="label deploy-project-label" - :title="projectTooltipTitle(firstProject)" v-tooltip + :title="projectTooltipTitle(firstProject)" + class="label deploy-project-label" > <span> {{ firstProject.project.full_name }} @@ -145,22 +145,22 @@ export default { <icon :name="firstProject.can_push ? 'lock-open' : 'lock'"/> </a> <a + v-tooltip v-if="isExpandable" + :title="restProjectsTooltip" class="label deploy-project-label" @click="toggleExpanded" - :title="restProjectsTooltip" - v-tooltip > <span>{{ restProjectsLabel }}</span> </a> <a - v-else-if="isExpanded" + v-tooltip v-for="deployKeysProject in restProjects" + v-else-if="isExpanded" :key="deployKeysProject.project.full_path" - class="label deploy-project-label" :href="deployKeysProject.project.full_path" :title="projectTooltipTitle(deployKeysProject)" - v-tooltip + class="label deploy-project-label" > <span> {{ deployKeysProject.project.full_name }} @@ -181,8 +181,8 @@ export default { </div> <div class="table-mobile-content text-secondary key-created-at"> <span - :title="tooltipTitle(deployKey.created_at)" - v-tooltip> + v-tooltip + :title="tooltipTitle(deployKey.created_at)"> <icon name="calendar"/> <span>{{ timeFormated(deployKey.created_at) }}</span> </span> @@ -198,34 +198,34 @@ export default { {{ __('Enable') }} </action-btn> <a + v-tooltip v-if="deployKey.can_edit" - class="btn btn-default text-secondary" :href="editDeployKeyPath" :title="__('Edit')" + class="btn btn-default text-secondary" data-container="body" - v-tooltip > <icon name="pencil"/> </a> <action-btn + v-tooltip v-if="isRemovable" :deploy-key="deployKey" + :title="__('Remove')" btn-css-class="btn-danger" type="remove" - :title="__('Remove')" data-container="body" - v-tooltip > <icon name="remove"/> </action-btn> <action-btn + v-tooltip v-else-if="isEnabled" :deploy-key="deployKey" + :title="__('Disable')" btn-css-class="btn-warning" type="disable" - :title="__('Disable')" data-container="body" - v-tooltip > <icon name="cancel"/> </action-btn> diff --git a/app/assets/javascripts/deploy_keys/components/keys_panel.vue b/app/assets/javascripts/deploy_keys/components/keys_panel.vue index 3b146c7389a..2f057ca29f6 100644 --- a/app/assets/javascripts/deploy_keys/components/keys_panel.vue +++ b/app/assets/javascripts/deploy_keys/components/keys_panel.vue @@ -59,8 +59,8 @@ export default { /> </template> <div - class="settings-message text-center" v-else + class="settings-message text-center" > {{ s__('DeployKeys|No deploy keys found. Create one with the form above.') }} </div> diff --git a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js index d1260ff5373..ed24d1775f4 100644 --- a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js +++ b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js @@ -6,7 +6,10 @@ import Vue from 'vue'; const CommentAndResolveBtn = Vue.extend({ props: { - discussionId: String, + discussionId: { + type: String, + required: true, + }, }, data() { return { diff --git a/app/assets/javascripts/diff_notes/components/diff_note_avatars.js b/app/assets/javascripts/diff_notes/components/diff_note_avatars.js index fe9b0795609..40f7c2fe5f3 100644 --- a/app/assets/javascripts/diff_notes/components/diff_note_avatars.js +++ b/app/assets/javascripts/diff_notes/components/diff_note_avatars.js @@ -7,7 +7,15 @@ import Notes from '../../notes'; import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue'; const DiffNoteAvatars = Vue.extend({ - props: ['discussionId'], + components: { + userAvatarImage, + }, + props: { + discussionId: { + type: String, + required: true, + }, + }, data() { return { isVisible: false, @@ -17,77 +25,6 @@ const DiffNoteAvatars = Vue.extend({ collapseIcon, }; }, - components: { - userAvatarImage, - }, - template: ` - <div class="diff-comment-avatar-holders" - :class="discussionClassName" - v-show="notesCount !== 0"> - <div v-if="!isVisible"> - <!-- FIXME: Pass an alt attribute here for accessibility --> - <user-avatar-image - v-for="note in notesSubset" - :key="note.id" - class="diff-comment-avatar js-diff-comment-avatar" - @click.native="clickedAvatar($event)" - :img-src="note.authorAvatar" - :tooltip-text="getTooltipText(note)" - :data-line-type="lineType" - :size="19" - data-html="true" - /> - <span v-if="notesCount > shownAvatars" - class="diff-comments-more-count has-tooltip js-diff-comment-avatar" - data-container="body" - data-placement="top" - ref="extraComments" - role="button" - :data-line-type="lineType" - :title="extraNotesTitle" - @click="clickedAvatar($event)">{{ moreText }}</span> - </div> - <button class="diff-notes-collapse js-diff-comment-avatar" - type="button" - aria-label="Show comments" - :data-line-type="lineType" - @click="clickedAvatar($event)" - v-if="isVisible" - v-html="collapseIcon"> - </button> - </div> - `, - mounted() { - this.$nextTick(() => { - this.addNoCommentClass(); - this.setDiscussionVisible(); - - this.lineType = $(this.$el).closest('.diff-line-num').hasClass('old_line') ? 'old' : 'new'; - }); - - $(document).on('toggle.comments', () => { - this.$nextTick(() => { - this.setDiscussionVisible(); - }); - }); - }, - beforeDestroy() { - this.addNoCommentClass(); - $(document).off('toggle.comments'); - }, - watch: { - storeState: { - handler() { - this.$nextTick(() => { - $('.has-tooltip', this.$el).tooltip('_fixTitle'); - - // We need to add/remove a class to an element that is outside the Vue instance - this.addNoCommentClass(); - }); - }, - deep: true, - }, - }, computed: { discussionClassName() { return `js-diff-avatars-${this.discussionId}`; @@ -128,6 +65,37 @@ const DiffNoteAvatars = Vue.extend({ return `${plusSign}${this.notesCount - this.shownAvatars}`; }, }, + watch: { + storeState: { + handler() { + this.$nextTick(() => { + $('.has-tooltip', this.$el).tooltip('_fixTitle'); + + // We need to add/remove a class to an element that is outside the Vue instance + this.addNoCommentClass(); + }); + }, + deep: true, + }, + }, + mounted() { + this.$nextTick(() => { + this.addNoCommentClass(); + this.setDiscussionVisible(); + + this.lineType = $(this.$el).closest('.diff-line-num').hasClass('old_line') ? 'old' : 'new'; + }); + + $(document).on('toggle.comments', () => { + this.$nextTick(() => { + this.setDiscussionVisible(); + }); + }); + }, + beforeDestroy() { + this.addNoCommentClass(); + $(document).off('toggle.comments'); + }, methods: { clickedAvatar(e) { Notes.instance.onAddDiffNote(e); @@ -164,6 +132,43 @@ const DiffNoteAvatars = Vue.extend({ return `${note.authorName}: ${note.noteTruncated}`; }, }, + template: ` + <div class="diff-comment-avatar-holders" + :class="discussionClassName" + v-show="notesCount !== 0"> + <div v-if="!isVisible"> + <!-- FIXME: Pass an alt attribute here for accessibility --> + <user-avatar-image + v-for="note in notesSubset" + :key="note.id" + class="diff-comment-avatar js-diff-comment-avatar" + @click.native="clickedAvatar($event)" + :img-src="note.authorAvatar" + :tooltip-text="getTooltipText(note)" + :data-line-type="lineType" + :size="19" + data-html="true" + /> + <span v-if="notesCount > shownAvatars" + class="diff-comments-more-count has-tooltip js-diff-comment-avatar" + data-container="body" + data-placement="top" + ref="extraComments" + role="button" + :data-line-type="lineType" + :title="extraNotesTitle" + @click="clickedAvatar($event)">{{ moreText }}</span> + </div> + <button class="diff-notes-collapse js-diff-comment-avatar" + type="button" + aria-label="Show comments" + :data-line-type="lineType" + @click="clickedAvatar($event)" + v-if="isVisible" + v-html="collapseIcon"> + </button> + </div> + `, }); Vue.component('diff-note-avatars', DiffNoteAvatars); diff --git a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js index 8f9186dfb9a..2ce4b050763 100644 --- a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js +++ b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js @@ -10,7 +10,10 @@ import '../mixins/discussion'; const JumpToDiscussion = Vue.extend({ mixins: [DiscussionMixins], props: { - discussionId: String + discussionId: { + type: String, + required: true, + }, }, data: function () { return { @@ -52,6 +55,9 @@ const JumpToDiscussion = Vue.extend({ return lastId; } }, + created() { + this.discussion = this.discussions[this.discussionId]; + }, methods: { jumpToNextUnresolvedDiscussion: function () { let discussionsSelector; @@ -202,9 +208,6 @@ const JumpToDiscussion = Vue.extend({ }); } }, - created() { - this.discussion = this.discussions[this.discussionId]; - }, }); Vue.component('jump-to-discussion', JumpToDiscussion); diff --git a/app/assets/javascripts/diff_notes/components/resolve_btn.js b/app/assets/javascripts/diff_notes/components/resolve_btn.js index 8d66417abac..07f3be29090 100644 --- a/app/assets/javascripts/diff_notes/components/resolve_btn.js +++ b/app/assets/javascripts/diff_notes/components/resolve_btn.js @@ -8,14 +8,38 @@ import Flash from '../../flash'; const ResolveBtn = Vue.extend({ props: { - noteId: Number, - discussionId: String, - resolved: Boolean, - canResolve: Boolean, - resolvedBy: String, - authorName: String, - authorAvatar: String, - noteTruncated: String, + noteId: { + type: Number, + required: true, + }, + discussionId: { + type: String, + required: true, + }, + resolved: { + type: Boolean, + required: true, + }, + canResolve: { + type: Boolean, + required: true, + }, + resolvedBy: { + type: String, + required: true, + }, + authorName: { + type: String, + required: true, + }, + authorAvatar: { + type: String, + required: true, + }, + noteTruncated: { + type: String, + required: true, + }, }, data: function () { return { @@ -23,12 +47,6 @@ const ResolveBtn = Vue.extend({ loading: false }; }, - watch: { - 'discussions': { - handler: 'updateTooltip', - deep: true - } - }, computed: { discussion: function () { return this.discussions[this.discussionId]; @@ -56,6 +74,32 @@ const ResolveBtn = Vue.extend({ return this.note.resolved_by; }, }, + watch: { + 'discussions': { + handler: 'updateTooltip', + deep: true + } + }, + mounted: function () { + $(this.$refs.button).tooltip({ + container: 'body' + }); + }, + beforeDestroy: function () { + CommentsStore.delete(this.discussionId, this.noteId); + }, + created: function () { + CommentsStore.create({ + discussionId: this.discussionId, + noteId: this.noteId, + canResolve: this.canResolve, + resolved: this.resolved, + resolvedBy: this.resolvedBy, + authorName: this.authorName, + authorAvatar: this.authorAvatar, + noteTruncated: this.noteTruncated, + }); + }, methods: { updateTooltip: function () { this.$nextTick(() => { @@ -95,26 +139,6 @@ const ResolveBtn = Vue.extend({ .catch(() => new Flash('An error occurred when trying to resolve a comment. Please try again.')); } }, - mounted: function () { - $(this.$refs.button).tooltip({ - container: 'body' - }); - }, - beforeDestroy: function () { - CommentsStore.delete(this.discussionId, this.noteId); - }, - created: function () { - CommentsStore.create({ - discussionId: this.discussionId, - noteId: this.noteId, - canResolve: this.canResolve, - resolved: this.resolved, - resolvedBy: this.resolvedBy, - authorName: this.authorName, - authorAvatar: this.authorAvatar, - noteTruncated: this.noteTruncated, - }); - } }); Vue.component('resolve-btn', ResolveBtn); diff --git a/app/assets/javascripts/diff_notes/components/resolve_count.js b/app/assets/javascripts/diff_notes/components/resolve_count.js index fe7cf8f5fc1..9f613410e81 100644 --- a/app/assets/javascripts/diff_notes/components/resolve_count.js +++ b/app/assets/javascripts/diff_notes/components/resolve_count.js @@ -9,7 +9,10 @@ import '../mixins/discussion'; window.ResolveCount = Vue.extend({ mixins: [DiscussionMixins], props: { - loggedOut: Boolean + loggedOut: { + type: Boolean, + required: true, + }, }, data: function () { return { diff --git a/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js b/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js index 6a036e96171..210a00c5fc2 100644 --- a/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js +++ b/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js @@ -6,9 +6,18 @@ import Vue from 'vue'; const ResolveDiscussionBtn = Vue.extend({ props: { - discussionId: String, - mergeRequestId: Number, - canResolve: Boolean, + discussionId: { + type: String, + required: true, + }, + mergeRequestId: { + type: Number, + required: true, + }, + canResolve: { + type: Boolean, + required: true, + }, }, data: function() { return { @@ -45,16 +54,16 @@ const ResolveDiscussionBtn = Vue.extend({ } } }, + created: function () { + CommentsStore.createDiscussion(this.discussionId, this.canResolve); + + this.discussion = CommentsStore.state[this.discussionId]; + }, methods: { resolve: function () { ResolveService.toggleResolveForDiscussion(this.mergeRequestId, this.discussionId); } }, - created: function () { - CommentsStore.createDiscussion(this.discussionId, this.canResolve); - - this.discussion = CommentsStore.state[this.discussionId]; - } }); Vue.component('resolve-discussion-btn', ResolveDiscussionBtn); diff --git a/app/assets/javascripts/environments/components/container.vue b/app/assets/javascripts/environments/components/container.vue index 6bd7c6b49cb..9aa224fa407 100644 --- a/app/assets/javascripts/environments/components/container.vue +++ b/app/assets/javascripts/environments/components/container.vue @@ -43,17 +43,17 @@ <div class="environments-container"> <loading-icon + v-if="isLoading" class="prepend-top-default" label="Loading environments" - v-if="isLoading" size="3" /> <slot name="emptyState"></slot> <div - class="table-holder" - v-if="!isLoading && environments.length > 0"> + v-if="!isLoading && environments.length > 0" + class="table-holder"> <environment-table :environments="environments" diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue index 0b3fef9fcca..e3652fe739e 100644 --- a/app/assets/javascripts/environments/components/environment_actions.vue +++ b/app/assets/javascripts/environments/components/environment_actions.vue @@ -52,18 +52,18 @@ role="group"> <button v-tooltip + :title="title" + :aria-label="title" + :disabled="isLoading" type="button" class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container" data-container="body" data-toggle="dropdown" - :title="title" - :aria-label="title" - :disabled="isLoading" > <span> <icon - name="play" :size="12" + name="play" /> <i class="fa fa-caret-down" @@ -79,15 +79,15 @@ v-for="(action, i) in actions" :key="i"> <button + :class="{ disabled: isActionDisabled(action) }" + :disabled="isActionDisabled(action)" type="button" class="js-manual-action-link no-btn btn" @click="onClickAction(action.play_path)" - :class="{ disabled: isActionDisabled(action) }" - :disabled="isActionDisabled(action)" > <icon - name="play" :size="12" + name="play" /> <span> {{ action.name }} diff --git a/app/assets/javascripts/environments/components/environment_external_url.vue b/app/assets/javascripts/environments/components/environment_external_url.vue index ea6f1168c68..68195225d50 100644 --- a/app/assets/javascripts/environments/components/environment_external_url.vue +++ b/app/assets/javascripts/environments/components/environment_external_url.vue @@ -29,17 +29,17 @@ <template> <a v-tooltip + :title="title" + :aria-label="title" + :href="externalUrl" class="btn external-url" data-container="body" target="_blank" rel="noopener noreferrer nofollow" - :title="title" - :aria-label="title" - :href="externalUrl" > <icon - name="external-link" :size="12" + name="external-link" /> </a> </template> diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue index 23aaab2c441..866e91057ec 100644 --- a/app/assets/javascripts/environments/components/environment_item.vue +++ b/app/assets/javascripts/environments/components/environment_item.vue @@ -427,11 +427,11 @@ </script> <template> <div - class="gl-responsive-table-row" :class="{ 'js-child-row environment-child-row': model.isChildren, 'folder-row': model.isFolder, }" + class="gl-responsive-table-row" role="row"> <div class="table-section section-10" @@ -446,19 +446,19 @@ </div> <a v-if="!model.isFolder" - class="environment-name flex-truncate-parent table-mobile-content" - :href="environmentPath"> + :href="environmentPath" + class="environment-name flex-truncate-parent table-mobile-content"> <span - class="flex-truncate-child" v-tooltip :title="model.name" + class="flex-truncate-child" >{{ model.name }}</span> </a> <span v-else class="folder-name" - @click="onClickFolder" - role="button"> + role="button" + @click="onClickFolder"> <span class="folder-icon"> <i @@ -503,11 +503,11 @@ <span v-if="!model.isFolder && deploymentHasUser"> by <user-avatar-link - class="js-deploy-user-container" :link-href="deploymentUser.web_url" :img-src="deploymentUser.avatar_url" :img-alt="userImageAltDescription" :tooltip-text="deploymentUser.username" + class="js-deploy-user-container" /> </span> </div> @@ -518,8 +518,8 @@ > <a v-if="shouldRenderBuildName" - class="build-link flex-truncate-parent" :href="buildPath" + class="build-link flex-truncate-parent" > <span class="flex-truncate-child">{{ buildName }}</span> </a> diff --git a/app/assets/javascripts/environments/components/environment_monitoring.vue b/app/assets/javascripts/environments/components/environment_monitoring.vue index 8df1b6317e3..947e8c901e9 100644 --- a/app/assets/javascripts/environments/components/environment_monitoring.vue +++ b/app/assets/javascripts/environments/components/environment_monitoring.vue @@ -28,16 +28,16 @@ <template> <a v-tooltip - class="btn monitoring-url d-none d-sm-none d-md-block" - data-container="body" - rel="noopener noreferrer nofollow" :href="monitoringUrl" :title="title" :aria-label="title" + class="btn monitoring-url d-none d-sm-none d-md-block" + data-container="body" + rel="noopener noreferrer nofollow" > <icon - name="chart" :size="12" + name="chart" /> </a> </template> diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue index 7515d711c50..310835c5ea9 100644 --- a/app/assets/javascripts/environments/components/environment_rollback.vue +++ b/app/assets/javascripts/environments/components/environment_rollback.vue @@ -39,10 +39,10 @@ </script> <template> <button + :disabled="isLoading" type="button" class="btn d-none d-sm-none d-md-block" @click="onClick" - :disabled="isLoading" > <span v-if="isLastDeployment"> diff --git a/app/assets/javascripts/environments/components/environment_stop.vue b/app/assets/javascripts/environments/components/environment_stop.vue index 7055f208451..faaaf899a0d 100644 --- a/app/assets/javascripts/environments/components/environment_stop.vue +++ b/app/assets/javascripts/environments/components/environment_stop.vue @@ -54,13 +54,13 @@ <template> <button v-tooltip + :disabled="isLoading" + :title="title" + :aria-label="title" type="button" class="btn stop-env-link d-none d-sm-none d-md-block" data-container="body" @click="onClick" - :disabled="isLoading" - :title="title" - :aria-label="title" > <i class="fa fa-stop stop-env-icon" diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.vue b/app/assets/javascripts/environments/components/environment_terminal_button.vue index 0dbbbb75e07..f8e3165f8cd 100644 --- a/app/assets/javascripts/environments/components/environment_terminal_button.vue +++ b/app/assets/javascripts/environments/components/environment_terminal_button.vue @@ -30,15 +30,15 @@ <template> <a v-tooltip - class="btn terminal-button d-none d-sm-none d-md-block" - data-container="body" :title="title" :aria-label="title" :href="terminalPath" + class="btn terminal-button d-none d-sm-none d-md-block" + data-container="body" > <icon - name="terminal" :size="12" + name="terminal" /> </a> </template> diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue index 3da762446c9..b18f02343d6 100644 --- a/app/assets/javascripts/environments/components/environments_app.vue +++ b/app/assets/javascripts/environments/components/environments_app.vue @@ -93,8 +93,8 @@ <div class="top-area"> <tabs :tabs="tabs" - @onChangeTab="onChangeTab" scope="environments" + @onChangeTab="onChangeTab" /> <div @@ -119,8 +119,8 @@ @onChangePage="onChangePage" > <empty-state - slot="emptyState" v-if="!isLoading && state.environments.length === 0" + slot="emptyState" :new-path="newEnvironmentPath" :help-path="helpPagePath" :can-create-environment="canCreateEnvironment" diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.vue b/app/assets/javascripts/environments/folder/environments_folder_view.vue index 5ef5e347387..5f72a39c5cb 100644 --- a/app/assets/javascripts/environments/folder/environments_folder_view.vue +++ b/app/assets/javascripts/environments/folder/environments_folder_view.vue @@ -39,8 +39,8 @@ <template> <div :class="cssContainerClass"> <div - class="top-area" v-if="!isLoading" + class="top-area" > <h4 class="js-folder-name environments-folder-name"> @@ -49,8 +49,8 @@ <tabs :tabs="tabs" - @onChangeTab="onChangeTab" scope="environments" + @onChangeTab="onChangeTab" /> </div> diff --git a/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue b/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue index 26618af9515..a8eb8d94be3 100644 --- a/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue +++ b/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue @@ -72,9 +72,9 @@ export default { @click="onItemActivated(item.text)"> <span> <span - class="filtered-search-history-dropdown-token" v-for="(token, index) in item.tokens" :key="`dropdown-token-${index}`" + class="filtered-search-history-dropdown-token" > <span class="name">{{ token.prefix }}</span> <span class="value">{{ token.suffix }}</span> diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue index 22eb7bd44c5..1def38bb336 100644 --- a/app/assets/javascripts/groups/components/app.vue +++ b/app/assets/javascripts/groups/components/app.vue @@ -216,10 +216,10 @@ export default { <template> <div> <loading-icon - class="loading-animation prepend-top-20" - size="2" v-if="isLoading" :label="s__('GroupsTree|Loading groups')" + class="loading-animation prepend-top-20" + size="2" /> <groups-component v-if="!isLoading" @@ -230,10 +230,10 @@ export default { /> <deprecated-modal v-show="showModal" - kind="warning" :primary-button-label="__('Leave')" :title="__('Are you sure?')" :text="groupLeaveConfirmationMessage" + kind="warning" @cancel="hideLeaveGroupModal" @submit="leaveGroup" /> diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue index 7f64a9bd741..efbf2e3a295 100644 --- a/app/assets/javascripts/groups/components/group_item.vue +++ b/app/assets/javascripts/groups/components/group_item.vue @@ -71,14 +71,14 @@ export default { <template> <li - @click.stop="onClickRowGroup" :id="groupDomId" :class="rowClass" class="group-row" + @click.stop="onClickRowGroup" > <div - class="group-row-contents" - :class="{ 'project-row-contents': !isGroup }"> + :class="{ 'project-row-contents': !isGroup }" + class="group-row-contents"> <item-actions v-if="isGroup" :group="group" @@ -99,8 +99,8 @@ export default { /> </div> <div - class="avatar-container prepend-top-8 prepend-left-5 s24 d-none d-sm-block" :class="{ 'content-loading': group.isChildrenLoading }" + class="avatar-container prepend-top-8 prepend-left-5 s24 d-none d-sm-block" > <a :href="group.relativePath" @@ -108,14 +108,14 @@ export default { > <img v-if="hasAvatar" - class="avatar s24" :src="group.avatarUrl" + class="avatar s24" /> <identicon v-else - size-class="s24" :entity-id="group.id" :entity-name="group.name" + size-class="s24" /> </a> </div> diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue index 87065b3d6e3..24eec4901ec 100644 --- a/app/assets/javascripts/groups/components/item_actions.vue +++ b/app/assets/javascripts/groups/components/item_actions.vue @@ -54,13 +54,13 @@ export default { <a v-tooltip v-if="group.canLeave" - @click.prevent="onLeaveGroup" :href="group.leavePath" :title="leaveBtnTitle" :aria-label="leaveBtnTitle" data-container="body" data-placement="bottom" - class="leave-group btn no-expand"> + class="leave-group btn no-expand" + @click.prevent="onLeaveGroup"> <icon name="leave"/> </a> </div> diff --git a/app/assets/javascripts/groups/components/item_stats.vue b/app/assets/javascripts/groups/components/item_stats.vue index 168b4e4af2c..87ab5480c15 100644 --- a/app/assets/javascripts/groups/components/item_stats.vue +++ b/app/assets/javascripts/groups/components/item_stats.vue @@ -45,44 +45,44 @@ <div class="stats"> <item-stats-value v-if="isGroup" - css-class="number-subgroups" - icon-name="folder" :title="__('Subgroups')" :value="item.subgroupCount" + css-class="number-subgroups" + icon-name="folder" /> <item-stats-value v-if="isGroup" - css-class="number-projects" - icon-name="bookmark" :title="__('Projects')" :value="item.projectCount" + css-class="number-projects" + icon-name="bookmark" /> <item-stats-value v-if="isGroup" - css-class="number-users" - icon-name="users" :title="__('Members')" :value="item.memberCount" + css-class="number-users" + icon-name="users" /> <item-stats-value v-if="isProject" + :value="item.starCount" css-class="project-stars" icon-name="star" - :value="item.starCount" /> <item-stats-value - css-class="item-visibility" - tooltip-placement="left" :icon-name="visibilityIcon" :title="visibilityTooltip" + css-class="item-visibility" + tooltip-placement="left" /> <div - class="last-updated" v-if="isProject" + class="last-updated" > <time-ago-tooltip - tooltip-placement="bottom" :time="item.updatedAt" + tooltip-placement="bottom" /> </div> </div> diff --git a/app/assets/javascripts/groups/components/item_stats_value.vue b/app/assets/javascripts/groups/components/item_stats_value.vue index 4d86ac8023c..ef9f2bca76c 100644 --- a/app/assets/javascripts/groups/components/item_stats_value.vue +++ b/app/assets/javascripts/groups/components/item_stats_value.vue @@ -52,10 +52,10 @@ <template> <span v-tooltip - data-container="body" :data-placement="tooltipPlacement" :class="cssClass" :title="title" + data-container="body" > <icon :name="iconName" /> <span diff --git a/app/assets/javascripts/ide/components/activity_bar.vue b/app/assets/javascripts/ide/components/activity_bar.vue index 6efcad6adea..62697e0ecc3 100644 --- a/app/assets/javascripts/ide/components/activity_bar.vue +++ b/app/assets/javascripts/ide/components/activity_bar.vue @@ -39,12 +39,12 @@ export default { <li v-once> <a v-tooltip - data-container="body" - data-placement="right" :href="goBackUrl" - class="ide-sidebar-link" :title="s__('IDE|Go back')" :aria-label="s__('IDE|Go back')" + data-container="body" + data-placement="right" + class="ide-sidebar-link" > <icon :size="16" @@ -55,16 +55,16 @@ export default { <li> <button v-tooltip - data-container="body" - data-placement="right" - type="button" - class="ide-sidebar-link js-ide-edit-mode" :class="{ active: currentActivityView === $options.activityBarViews.edit }" - @click.prevent="changedActivityView($event, $options.activityBarViews.edit)" :title="s__('IDE|Edit')" :aria-label="s__('IDE|Edit')" + data-container="body" + data-placement="right" + type="button" + class="ide-sidebar-link js-ide-edit-mode" + @click.prevent="changedActivityView($event, $options.activityBarViews.edit)" > <icon name="code" @@ -74,16 +74,16 @@ export default { <li> <button v-tooltip - data-container="body" - data-placement="right" - type="button" - class="ide-sidebar-link js-ide-review-mode" :class="{ active: currentActivityView === $options.activityBarViews.review }" - @click.prevent="changedActivityView($event, $options.activityBarViews.review)" :title="s__('IDE|Review')" :aria-label="s__('IDE|Review')" + data-container="body" + data-placement="right" + type="button" + class="ide-sidebar-link js-ide-review-mode" + @click.prevent="changedActivityView($event, $options.activityBarViews.review)" > <icon name="file-modified" @@ -93,16 +93,16 @@ export default { <li v-show="hasChanges"> <button v-tooltip - data-container="body" - data-placement="right" - type="button" - class="ide-sidebar-link js-ide-commit-mode" :class="{ active: currentActivityView === $options.activityBarViews.commit }" - @click.prevent="changedActivityView($event, $options.activityBarViews.commit)" :title="s__('IDE|Commit')" :aria-label="s__('IDE|Commit')" + data-container="body" + data-placement="right" + type="button" + class="ide-sidebar-link js-ide-commit-mode" + @click.prevent="changedActivityView($event, $options.activityBarViews.commit)" > <icon name="commit" diff --git a/app/assets/javascripts/ide/components/commit_sidebar/form.vue b/app/assets/javascripts/ide/components/commit_sidebar/form.vue index e2b42ab2642..955d9280728 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/form.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/form.vue @@ -91,7 +91,6 @@ export default { <template> <div - class="multi-file-commit-form" :class="{ 'is-compact': isCompact, 'is-full': !isCompact @@ -99,6 +98,7 @@ export default { :style="{ height: componentHeight ? `${componentHeight}px` : null, }" + class="multi-file-commit-form" > <transition name="commit-form-slide-up" @@ -108,12 +108,12 @@ export default { > <div v-if="isCompact" - class="commit-form-compact" ref="compactEl" + class="commit-form-compact" > <button - type="button" :disabled="!hasChanges" + type="button" class="btn btn-primary btn-sm btn-block" @click="toggleIsSmall" > @@ -126,8 +126,8 @@ export default { </div> <form v-if="!isCompact" - @submit.prevent.stop="commitChanges" ref="formEl" + @submit.prevent.stop="commitChanges" > <transition name="fade"> <success-message @@ -143,8 +143,8 @@ export default { <loading-button :loading="submitCommitLoading" :disabled="commitButtonDisabled" - container-class="btn btn-success btn-sm float-left" :label="__('Commit')" + container-class="btn btn-success btn-sm float-left" @click="commitChanges" /> <button diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue index 6c30b2a721d..2ecf9af4bf0 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue @@ -82,10 +82,10 @@ export default { <template> <div - class="multi-file-commit-list-item" :class="{ 'is-active': isActive }" + class="multi-file-commit-list-item" > <button type="button" diff --git a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue index 0ac0af2feaa..40496c80a46 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue @@ -66,10 +66,10 @@ export default { <template> <fieldset class="common-note-form ide-commit-message-field"> <div - class="md-area" :class="{ 'is-focused': isFocused }" + class="md-area" > <div v-once @@ -92,10 +92,10 @@ export default { <div class="ide-commit-message-textarea-container"> <div class="ide-commit-message-highlights-container"> <div - class="note-textarea highlights monospace" :style="{ transform: `translate3d(0, ${-scrollTop}px, 0)` }" + class="note-textarea highlights monospace" > <div v-for="(line, index) in allLines" @@ -113,15 +113,15 @@ export default { </div> </div> <textarea - class="note-textarea ide-commit-message-textarea" - name="commit-message" + ref="textarea" :placeholder="__('Write a commit message...')" :value="text" + class="note-textarea ide-commit-message-textarea" + name="commit-message" @scroll="handleScroll" @input="onInput" @focus="updateIsFocused(true)" @blur="updateIsFocused(false)" - ref="textarea" > </textarea> </div> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue index 00f2312ae51..35ab3fd11df 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue @@ -58,12 +58,12 @@ export default { }" > <input - type="radio" - name="commit-action" :value="value" - @change="updateCommitAction($event.target.value)" :checked="commitAction === value" :disabled="disabled" + type="radio" + name="commit-action" + @change="updateCommitAction($event.target.value)" /> <span class="prepend-left-10"> <span @@ -80,9 +80,9 @@ export default { class="ide-commit-new-branch" > <input + :placeholder="newBranchName" type="text" class="form-control monospace" - :placeholder="newBranchName" @input="updateBranchName($event.target.value)" /> </div> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue b/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue index 52dce8412ab..a786ec80ac2 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue @@ -29,30 +29,30 @@ export default { > <button v-tooltip - type="button" - class="btn btn-blank append-right-5" :aria-label="__('Stage changes')" :title="__('Stage changes')" + type="button" + class="btn btn-blank append-right-5" data-container="body" @click.stop="stageChange(path)" > <icon - name="mobile-issue-close" :size="12" + name="mobile-issue-close" /> </button> <button v-tooltip - type="button" - class="btn btn-blank" :aria-label="__('Discard changes')" :title="__('Discard changes')" + type="button" + class="btn btn-blank" data-container="body" @click.stop="discardFileChanges(path)" > <icon - name="remove" :size="12" + name="remove" /> </button> </div> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue b/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue index 123d60da47e..34b366f63ac 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue @@ -29,16 +29,16 @@ export default { > <button v-tooltip - type="button" - class="btn btn-blank" :aria-label="__('Unstage changes')" :title="__('Unstage changes')" + type="button" + class="btn btn-blank" data-container="body" @click="unstageChange(path)" > <icon - name="history" :size="12" + name="history" /> </button> </div> diff --git a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue index b9af4d27145..95598c9aca6 100644 --- a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue +++ b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue @@ -44,11 +44,11 @@ export default { <ul> <li> <a - href="#" - @click.prevent="changeMode($options.viewerTypes.mr)" :class="{ 'is-active': viewer === $options.viewerTypes.mr, }" + href="#" + @click.prevent="changeMode($options.viewerTypes.mr)" > <strong class="dropdown-menu-inner-title"> {{ mergeReviewLine }} @@ -60,11 +60,11 @@ export default { </li> <li> <a - href="#" - @click.prevent="changeMode($options.viewerTypes.diff)" :class="{ 'is-active': viewer === $options.viewerTypes.diff, }" + href="#" + @click.prevent="changeMode($options.viewerTypes.diff)" > <strong class="dropdown-menu-inner-title">{{ __('Reviewing') }}</strong> <span class="dropdown-menu-inner-content"> diff --git a/app/assets/javascripts/ide/components/external_link.vue b/app/assets/javascripts/ide/components/external_link.vue index cf3316a8179..e24fe5bbccb 100644 --- a/app/assets/javascripts/ide/components/external_link.vue +++ b/app/assets/javascripts/ide/components/external_link.vue @@ -26,15 +26,15 @@ export default { > <a :href="file.permalink" - target="_blank" :title="s__('IDE|Open in file view')" + target="_blank" rel="noopener noreferrer" > <span class="vertical-align-middle">Open in file view</span> <icon + :size="16" name="external-link" css-classes="vertical-align-middle space-right" - :size="16" /> </a> </div> diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue index cabb3f59b17..0ba33053717 100644 --- a/app/assets/javascripts/ide/components/file_finder/index.vue +++ b/app/assets/javascripts/ide/components/file_finder/index.vue @@ -173,38 +173,38 @@ export default { > <div class="dropdown-input"> <input + ref="searchInput" + :placeholder="__('Search files')" + v-model="searchText" type="search" class="dropdown-input-field" - :placeholder="__('Search files')" autocomplete="off" - v-model="searchText" - ref="searchInput" @keydown="onKeydown($event)" @keyup="onKeyup($event)" /> <i - aria-hidden="true" - class="fa fa-search dropdown-input-search" :class="{ hidden: showClearInputButton }" + aria-hidden="true" + class="fa fa-search dropdown-input-search" ></i> <i - role="button" :aria-label="__('Clear search input')" - class="fa fa-times dropdown-input-clear" :class="{ show: showClearInputButton }" + role="button" + class="fa fa-times dropdown-input-clear" @click="clearSearchInput" ></i> </div> <div> <virtual-list + ref="virtualScrollList" :size="listHeight" :remain="listShowCount" wtag="ul" - ref="virtualScrollList" > <template v-if="filteredBlobsLength"> <li @@ -212,11 +212,11 @@ export default { :key="file.key" > <item - class="disable-hover" :file="file" :search-text="searchText" :focused="index === focusedIndex" :index="index" + class="disable-hover" @click="openFile" @mouseover="onMouseOver" @mousemove="onMouseMove" diff --git a/app/assets/javascripts/ide/components/file_finder/item.vue b/app/assets/javascripts/ide/components/file_finder/item.vue index d4427420207..a4cf3edb981 100644 --- a/app/assets/javascripts/ide/components/file_finder/item.vue +++ b/app/assets/javascripts/ide/components/file_finder/item.vue @@ -59,11 +59,11 @@ export default { <template> <button - type="button" - class="diff-changed-file" :class="{ 'is-focused': focused, }" + type="button" + class="diff-changed-file" @click.prevent="clickRow" @mouseover="mouseOverRow" @mousemove="mouseMove" diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue index f5f832521c5..f5f7f967a92 100644 --- a/app/assets/javascripts/ide/components/ide.vue +++ b/app/assets/javascripts/ide/components/ide.vue @@ -93,8 +93,8 @@ export default { :merge-request-id="currentMergeRequestId" /> <repo-editor - class="multi-file-edit-pane-content" :file="activeFile" + class="multi-file-edit-pane-content" /> </template> <template diff --git a/app/assets/javascripts/ide/components/ide_review.vue b/app/assets/javascripts/ide/components/ide_review.vue index 99fa2465a84..f9978762c45 100644 --- a/app/assets/javascripts/ide/components/ide_review.vue +++ b/app/assets/javascripts/ide/components/ide_review.vue @@ -36,8 +36,8 @@ export default { <template> <ide-tree-list :viewer-type="viewer" - header-class="ide-review-header" :disable-action-dropdown="true" + header-class="ide-review-header" > <template slot="header" diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue index 1dc2170edde..21906674c4b 100644 --- a/app/assets/javascripts/ide/components/ide_side_bar.vue +++ b/app/assets/javascripts/ide/components/ide_side_bar.vue @@ -115,17 +115,17 @@ export default { <div class="multi-file-commit-panel-inner"> <template v-if="loading"> <div - class="multi-file-loading-container" v-for="n in 3" :key="n" + class="multi-file-loading-container" > <skeleton-loading-container /> </div> </template> <template v-else> <div - class="context-header ide-context-header dropdown" ref="mergeRequestDropdown" + class="context-header ide-context-header dropdown" > <button type="button" @@ -136,18 +136,18 @@ export default { class="avatar-container s40 project-avatar" > <project-avatar-image - class="avatar-container project-avatar" :link-href="currentProject.path" :img-src="currentProject.avatar_url" :img-alt="currentProject.name" :img-size="40" + class="avatar-container project-avatar" /> </div> <identicon v-else - size-class="s40" :entity-id="currentProject.id" :entity-name="currentProject.name" + size-class="s40" /> <div class="ide-sidebar-project-title"> <div class="sidebar-context-title"> @@ -155,11 +155,11 @@ export default { </div> <div class="d-flex"> <div + v-tooltip v-if="currentBranchId" - class="sidebar-context-title ide-sidebar-branch-title" ref="branchId" - v-tooltip :title="branchTooltipTitle" + class="sidebar-context-title ide-sidebar-branch-title" > <icon name="branch" @@ -168,10 +168,10 @@ export default { </div> <div v-if="currentMergeRequestId" - class="sidebar-context-title ide-sidebar-branch-title" :class="{ 'prepend-left-8': currentBranchId }" + class="sidebar-context-title ide-sidebar-branch-title" > <icon name="git-merge" diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue index e40f137d998..0582ad32e92 100644 --- a/app/assets/javascripts/ide/components/ide_status_bar.vue +++ b/app/assets/javascripts/ide/components/ide_status_bar.vue @@ -75,22 +75,22 @@ export default { <template> <footer class="ide-status-bar"> <div - class="ide-status-branch" v-if="lastCommit && lastCommitFormatedAge" + class="ide-status-branch" > <span - class="ide-status-pipeline" v-if="latestPipeline && latestPipeline.details" + class="ide-status-pipeline" > <ci-icon - :status="latestPipeline.details.status" v-tooltip + :status="latestPipeline.details.status" :title="latestPipeline.details.status.text" /> Pipeline <a - class="monospace" - :href="latestPipeline.details.status.details_path">#{{ latestPipeline.id }}</a> + :href="latestPipeline.details.status.details_path" + class="monospace">#{{ latestPipeline.id }}</a> {{ latestPipeline.details.status.text }} for </span> @@ -100,18 +100,18 @@ export default { /> <a v-tooltip - class="commit-sha" :title="lastCommit.message" :href="getCommitPath(lastCommit.short_id)" + class="commit-sha" >{{ lastCommit.short_id }}</a> by {{ lastCommit.author_name }} <time v-tooltip - data-placement="top" - data-container="body" :datetime="lastCommit.committed_date" :title="tooltipTitle(lastCommit.committed_date)" + data-placement="top" + data-container="body" > {{ lastCommitFormatedAge }} </time> @@ -129,8 +129,8 @@ export default { {{ file.eol }} </div> <div - class="ide-status-file" - v-if="file && !file.binary"> + v-if="file && !file.binary" + class="ide-status-file"> {{ file.editorRow }}:{{ file.editorColumn }} </div> <div diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue index e64a09fcc90..0df99798d21 100644 --- a/app/assets/javascripts/ide/components/ide_tree_list.vue +++ b/app/assets/javascripts/ide/components/ide_tree_list.vue @@ -50,17 +50,17 @@ export default { > <template v-if="showLoading"> <div - class="multi-file-loading-container" v-for="n in 3" :key="n" + class="multi-file-loading-container" > <skeleton-loading-container /> </div> </template> <template v-else> <header - class="ide-tree-header" :class="headerClass" + class="ide-tree-header" > <slot name="header"></slot> </header> diff --git a/app/assets/javascripts/ide/components/jobs/detail.vue b/app/assets/javascripts/ide/components/jobs/detail.vue index 6713b54efae..f39ce545656 100644 --- a/app/assets/javascripts/ide/components/jobs/detail.vue +++ b/app/assets/javascripts/ide/components/jobs/detail.vue @@ -93,10 +93,10 @@ export default { <a v-tooltip :title="__('Show complete raw log')" + :href="detailJob.rawPath" data-placement="top" data-container="body" class="controllers-buttons" - :href="detailJob.rawPath" target="_blank" > <i @@ -105,20 +105,20 @@ export default { ></i> </a> <scroll-button - direction="up" :disabled="isScrolledToTop" + direction="up" @click="scrollUp" /> <scroll-button - direction="down" :disabled="isScrolledToBottom" + direction="down" @click="scrollDown" /> </div> </div> <pre - class="build-trace mb-0 h-100" ref="buildTrace" + class="build-trace mb-0 h-100" @scroll="scrollBuildLog" > <code diff --git a/app/assets/javascripts/ide/components/jobs/detail/description.vue b/app/assets/javascripts/ide/components/jobs/detail/description.vue index def6bac3157..7e24974f7e5 100644 --- a/app/assets/javascripts/ide/components/jobs/detail/description.vue +++ b/app/assets/javascripts/ide/components/jobs/detail/description.vue @@ -24,10 +24,10 @@ export default { <template> <div class="d-flex align-items-center"> <ci-icon - class="d-flex" :status="job.status" :borderless="true" :size="24" + class="d-flex" /> <span class="prepend-left-8"> {{ job.name }} @@ -38,8 +38,8 @@ export default { > {{ jobId }} <icon - name="external-link" :size="12" + name="external-link" /> </a> </span> diff --git a/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue b/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue index 4e19e6e9c84..103a407987f 100644 --- a/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue +++ b/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue @@ -47,15 +47,15 @@ export default { <template> <div v-tooltip + :title="tooltipTitle" class="controllers-buttons" data-container="body" data-placement="top" - :title="tooltipTitle" > <button + :disabled="disabled" class="btn-scroll btn-transparent btn-blank" type="button" - :disabled="disabled" @click="clickedScroll" > <icon diff --git a/app/assets/javascripts/ide/components/jobs/item.vue b/app/assets/javascripts/ide/components/jobs/item.vue index c8e621504f0..7f4695a0451 100644 --- a/app/assets/javascripts/ide/components/jobs/item.vue +++ b/app/assets/javascripts/ide/components/jobs/item.vue @@ -27,8 +27,8 @@ export default { <template> <div class="ide-job-item"> <job-description - class="append-right-default" :job="job" + class="append-right-default" /> <div class="ml-auto align-self-center"> <button diff --git a/app/assets/javascripts/ide/components/jobs/stage.vue b/app/assets/javascripts/ide/components/jobs/stage.vue index b1428f885fb..15e881b7bc8 100644 --- a/app/assets/javascripts/ide/components/jobs/stage.vue +++ b/app/assets/javascripts/ide/components/jobs/stage.vue @@ -60,10 +60,10 @@ export default { class="ide-stage card prepend-top-default" > <div - class="card-header" :class="{ 'border-bottom-0': stage.isCollapsed }" + class="card-header" @click="toggleCollapsed" > <ci-icon @@ -72,10 +72,10 @@ export default { /> <strong v-tooltip="showTooltip" + ref="stageTitle" :title="showTooltip ? stage.name : null" data-container="body" class="prepend-left-8 ide-stage-title" - ref="stageTitle" > {{ stage.name }} </strong> @@ -93,8 +93,8 @@ export default { /> </div> <div - class="card-body" v-show="!stage.isCollapsed" + class="card-body" > <loading-icon v-if="showLoadingIcon" diff --git a/app/assets/javascripts/ide/components/merge_requests/dropdown.vue b/app/assets/javascripts/ide/components/merge_requests/dropdown.vue index 8cc8345db2e..4b9824bf04b 100644 --- a/app/assets/javascripts/ide/components/merge_requests/dropdown.vue +++ b/app/assets/javascripts/ide/components/merge_requests/dropdown.vue @@ -42,8 +42,8 @@ export default { </span> </template> <list - type="created" :empty-text="__('You have not created any merge requests')" + type="created" /> </tab> <tab> @@ -54,8 +54,8 @@ export default { </span> </template> <list - type="assigned" :empty-text="__('You do not have any assigned merge requests')" + type="assigned" /> </tab> </tabs> diff --git a/app/assets/javascripts/ide/components/merge_requests/item.vue b/app/assets/javascripts/ide/components/merge_requests/item.vue index b50fc8a3dbb..4e18376bd48 100644 --- a/app/assets/javascripts/ide/components/merge_requests/item.vue +++ b/app/assets/javascripts/ide/components/merge_requests/item.vue @@ -47,8 +47,8 @@ export default { <span class="d-flex append-right-default ide-merge-request-current-icon"> <icon v-if="isActive" - name="mobile-issue-close" :size="18" + name="mobile-issue-close" /> </span> <span> diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue index 5896e3a147d..19d3e48ee10 100644 --- a/app/assets/javascripts/ide/components/merge_requests/list.vue +++ b/app/assets/javascripts/ide/components/merge_requests/list.vue @@ -80,12 +80,12 @@ export default { <div> <div class="dropdown-input mt-3 pb-3 mb-0 border-bottom"> <input - type="search" - class="dropdown-input-field" + ref="searchInput" :placeholder="__('Search merge requests')" v-model="search" + type="search" + class="dropdown-input-field" @input="searchMergeRequests" - ref="searchInput" /> <i aria-hidden="true" @@ -94,8 +94,8 @@ export default { </div> <div class="dropdown-content ide-merge-requests-dropdown-content d-flex"> <loading-icon - class="mt-3 mb-3 align-self-center ml-auto mr-auto" v-if="isLoading" + class="mt-3 mb-3 align-self-center ml-auto mr-auto" size="2" /> <ul diff --git a/app/assets/javascripts/ide/components/mr_file_icon.vue b/app/assets/javascripts/ide/components/mr_file_icon.vue index 179a589d1ac..821be319cce 100644 --- a/app/assets/javascripts/ide/components/mr_file_icon.vue +++ b/app/assets/javascripts/ide/components/mr_file_icon.vue @@ -14,10 +14,10 @@ export default { <template> <icon - name="git-merge" v-tooltip :title="__('Part of merge request changes')" - css-classes="append-right-8" :size="12" + name="git-merge" + css-classes="append-right-8" /> </template> diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue index f0b29702497..1e398d7e1aa 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/index.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue @@ -55,10 +55,10 @@ export default { <template> <div class="ide-new-btn"> <div - class="dropdown" :class="{ show: dropdownOpen, }" + class="dropdown" > <button type="button" @@ -67,19 +67,19 @@ export default { @click.stop="openDropdown()" > <icon - name="plus" :size="12" + name="plus" css-classes="float-left" /> <icon - name="arrow-down" :size="12" + name="arrow-down" css-classes="float-left" /> </button> <ul - class="dropdown-menu dropdown-menu-right" ref="dropdownMenu" + class="dropdown-menu dropdown-menu-right" > <li> <a diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue index dd2800179ff..1e9668d5154 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue @@ -71,18 +71,18 @@ export default { > <form slot="body" - @submit.prevent="createEntryInStore" class="form-group row" + @submit.prevent="createEntryInStore" > <label class="label-light col-form-label col-sm-3"> {{ __('Name') }} </label> <div class="col-sm-9"> <input + ref="fieldName" + v-model="entryName" type="text" class="form-control" - v-model="entryName" - ref="fieldName" /> </div> </form> diff --git a/app/assets/javascripts/ide/components/new_dropdown/upload.vue b/app/assets/javascripts/ide/components/new_dropdown/upload.vue index c165af5ce52..1814924be39 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/upload.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/upload.vue @@ -67,9 +67,9 @@ </a> <input id="file-upload" + ref="fileUpload" type="file" class="hidden" - ref="fileUpload" /> </div> </template> diff --git a/app/assets/javascripts/ide/components/panes/right.vue b/app/assets/javascripts/ide/components/panes/right.vue index dd7fc8f1e01..dedc2988618 100644 --- a/app/assets/javascripts/ide/components/panes/right.vue +++ b/app/assets/javascripts/ide/components/panes/right.vue @@ -44,10 +44,10 @@ export default { > <resizable-panel v-if="rightPane" - class="multi-file-commit-panel-inner" :collapsible="false" :initial-width="350" :min-size="350" + class="multi-file-commit-panel-inner" side="right" > <component :is="rightPane" /> @@ -57,13 +57,13 @@ export default { <li> <button v-tooltip - data-container="body" - data-placement="left" :title="__('Pipelines')" - class="ide-sidebar-link is-right" :class="{ active: pipelinesActive }" + data-container="body" + data-placement="left" + class="ide-sidebar-link is-right" type="button" @click="clickTab($event, $options.rightSidebarViews.pipelines)" > diff --git a/app/assets/javascripts/ide/components/pipelines/list.vue b/app/assets/javascripts/ide/components/pipelines/list.vue index 06455fac439..4d29e9f8060 100644 --- a/app/assets/javascripts/ide/components/pipelines/list.vue +++ b/app/assets/javascripts/ide/components/pipelines/list.vue @@ -75,8 +75,8 @@ export default { > #{{ latestPipeline.id }} <icon - name="external-link" :size="12" + name="external-link" /> </a> </span> diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue index 46e8ee26d3c..01df0019fd4 100644 --- a/app/assets/javascripts/ide/components/repo_commit_section.vue +++ b/app/assets/javascripts/ide/components/repo_commit_section.vue @@ -77,8 +77,8 @@ export default { <deprecated-modal id="ide-create-branch-modal" :primary-button-label="__('Create new branch')" - kind="success" :title="__('Branch has changed')" + kind="success" @submit="forceCreateNewBranch" > <template slot="body"> @@ -90,26 +90,26 @@ export default { v-if="showStageUnstageArea" > <commit-files-list - class="is-first" - icon-name="unstaged" :title="__('Unstaged')" :key-prefix="$options.stageKeys.unstaged" :file-list="changedFiles" - action="stageAllChanges" :action-btn-text="__('Stage all')" - item-action-component="stage-button" :active-file-key="activeFileKey" + class="is-first" + icon-name="unstaged" + action="stageAllChanges" + item-action-component="stage-button" /> <commit-files-list - icon-name="staged" :title="__('Staged')" :key-prefix="$options.stageKeys.staged" :file-list="stagedFiles" - action="unstageAllChanges" :action-btn-text="__('Unstage all')" - item-action-component="unstage-button" :staged-list="true" :active-file-key="activeFileKey" + icon-name="staged" + action="unstageAllChanges" + item-action-component="unstage-button" /> </template> <empty-state diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue index 96f181ff79d..24b6a4fdea1 100644 --- a/app/assets/javascripts/ide/components/repo_editor.vue +++ b/app/assets/javascripts/ide/components/repo_editor.vue @@ -201,8 +201,8 @@ export default { > <div class="ide-mode-tabs clearfix" > <ul - class="nav-links float-left" v-if="!shouldHideEditor && isEditModeActive" + class="nav-links float-left" > <li :class="editTabCSS"> <a @@ -235,10 +235,10 @@ export default { <div v-show="!shouldHideEditor && file.viewMode ==='editor'" ref="editor" - class="multi-file-editor-holder" :class="{ 'is-readonly': isCommitModeActive, }" + class="multi-file-editor-holder" > </div> <content-viewer diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue index f56aeced806..c34547fcc60 100644 --- a/app/assets/javascripts/ide/components/repo_file.vue +++ b/app/assets/javascripts/ide/components/repo_file.vue @@ -120,17 +120,17 @@ export default { <template> <div> <div - class="file" :class="fileClass" - @click="clickFile" + class="file" role="button" + @click="clickFile" > <div class="file-name" > <span - class="ide-file-name str-truncated" :style="levelIndentation" + class="ide-file-name str-truncated" > <file-icon :file-name="file.name" @@ -156,10 +156,10 @@ export default { <icon v-tooltip :title="folderChangesTooltip" + :size="12" data-container="body" data-placement="right" name="file-modified" - :size="12" css-classes="prepend-left-5 multi-file-modified" /> </span> diff --git a/app/assets/javascripts/ide/components/repo_file_status_icon.vue b/app/assets/javascripts/ide/components/repo_file_status_icon.vue index 97589e116c5..76a3333be50 100644 --- a/app/assets/javascripts/ide/components/repo_file_status_icon.vue +++ b/app/assets/javascripts/ide/components/repo_file_status_icon.vue @@ -26,8 +26,8 @@ export default { <template> <span - v-if="file.file_lock" v-tooltip + v-if="file.file_lock" :title="lockTooltip" data-container="body" > diff --git a/app/assets/javascripts/ide/components/repo_loading_file.vue b/app/assets/javascripts/ide/components/repo_loading_file.vue index 3e47da88050..7a5ede82253 100644 --- a/app/assets/javascripts/ide/components/repo_loading_file.vue +++ b/app/assets/javascripts/ide/components/repo_loading_file.vue @@ -33,8 +33,8 @@ <td class="d-none d-sm-block"> <skeleton-loading-container - class="animation-container-right" :small="true" + class="animation-container-right" /> </td> </template> diff --git a/app/assets/javascripts/ide/components/repo_tab.vue b/app/assets/javascripts/ide/components/repo_tab.vue index fb26b973236..1ad52c1bd83 100644 --- a/app/assets/javascripts/ide/components/repo_tab.vue +++ b/app/assets/javascripts/ide/components/repo_tab.vue @@ -76,8 +76,8 @@ export default { @mouseout="mouseOutTab" > <div - class="multi-file-tab" :title="tab.url" + class="multi-file-tab" > <file-icon :file-name="tab.name" @@ -89,16 +89,16 @@ export default { /> </div> <button + :aria-label="closeLabel" + :disabled="tab.pending" type="button" class="multi-file-tab-close" @click.stop.prevent="closeFile(tab)" - :aria-label="closeLabel" - :disabled="tab.pending" > <icon v-if="!showChangedIcon" - name="close" :size="12" + name="close" /> <changed-file-icon v-else diff --git a/app/assets/javascripts/ide/components/repo_tabs.vue b/app/assets/javascripts/ide/components/repo_tabs.vue index 99e51097e12..c12a63e26be 100644 --- a/app/assets/javascripts/ide/components/repo_tabs.vue +++ b/app/assets/javascripts/ide/components/repo_tabs.vue @@ -52,8 +52,8 @@ export default { <template> <div class="multi-file-tabs"> <ul - class="list-unstyled append-bottom-0" ref="tabsScroller" + class="list-unstyled append-bottom-0" > <repo-tab v-for="tab in files" diff --git a/app/assets/javascripts/ide/components/resizable_panel.vue b/app/assets/javascripts/ide/components/resizable_panel.vue index 5ea2a2f6825..7277fcb7617 100644 --- a/app/assets/javascripts/ide/components/resizable_panel.vue +++ b/app/assets/javascripts/ide/components/resizable_panel.vue @@ -63,11 +63,11 @@ export default { <template> <div - class="multi-file-commit-panel" :class="{ 'is-collapsed': collapsed && collapsible, }" :style="panelStyle" + class="multi-file-commit-panel" @click="toggleFullbarCollapsed" > <slot></slot> @@ -77,9 +77,9 @@ export default { :start-size="initialWidth" :min-size="minSize" :max-size="$options.maxSize" + :side="side === 'right' ? 'left' : 'right'" @resize-start="setResizingStatus(true)" @resize-end="setResizingStatus(false)" - :side="side === 'right' ? 'left' : 'right'" /> </div> </template> diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue index ae577e04a56..1174177f561 100644 --- a/app/assets/javascripts/issue_show/components/description.vue +++ b/app/assets/javascripts/issue_show/components/description.vue @@ -110,25 +110,25 @@ <template> <div v-if="descriptionHtml" - class="description" :class="{ 'js-task-list-container': canUpdate }" + class="description" > <div - class="wiki" + ref="gfm-content" :class="{ 'issue-realtime-pre-pulse': preAnimation, 'issue-realtime-trigger-pulse': pulseAnimation }" - v-html="descriptionHtml" - ref="gfm-content"> + class="wiki" + v-html="descriptionHtml"> </div> <textarea - class="hidden js-task-list-field" v-if="descriptionText" v-model="descriptionText" :data-update-url="updateUrl" + class="hidden js-task-list-field" > </textarea> diff --git a/app/assets/javascripts/issue_show/components/edit_actions.vue b/app/assets/javascripts/issue_show/components/edit_actions.vue index 7ef5e679881..8cb0ab22bfb 100644 --- a/app/assets/javascripts/issue_show/components/edit_actions.vue +++ b/app/assets/javascripts/issue_show/components/edit_actions.vue @@ -51,16 +51,16 @@ <template> <div class="prepend-top-default append-bottom-default clearfix"> <button - class="btn btn-save float-left" :class="{ disabled: formState.updateLoading || !isSubmitEnabled }" - type="submit" :disabled="formState.updateLoading || !isSubmitEnabled" + class="btn btn-save float-left" + type="submit" @click.prevent="updateIssuable"> Save changes <i + v-if="formState.updateLoading" class="fa fa-spinner fa-spin" - aria-hidden="true" - v-if="formState.updateLoading"> + aria-hidden="true"> </i> </button> <button @@ -71,16 +71,16 @@ </button> <button v-if="shouldShowDeleteButton" - class="btn btn-danger float-right append-right-default" :class="{ disabled: deleteLoading }" - type="button" :disabled="deleteLoading" + class="btn btn-danger float-right append-right-default" + type="button" @click="deleteIssuable"> Delete <i + v-if="deleteLoading" class="fa fa-spinner fa-spin" - aria-hidden="true" - v-if="deleteLoading"> + aria-hidden="true"> </i> </button> </div> diff --git a/app/assets/javascripts/issue_show/components/edited.vue b/app/assets/javascripts/issue_show/components/edited.vue index 01097b5b35e..5ff5b1630b1 100644 --- a/app/assets/javascripts/issue_show/components/edited.vue +++ b/app/assets/javascripts/issue_show/components/edited.vue @@ -37,16 +37,16 @@ Edited <time-ago-tooltip v-if="updatedAt" - tooltip-placement="bottom" :time="updatedAt" + tooltip-placement="bottom" /> <span v-if="hasUpdatedBy" > by <a - class="author_link" :href="updatedByPath" + class="author_link" > <span>{{ updatedByName }}</span> </a> diff --git a/app/assets/javascripts/issue_show/components/fields/description.vue b/app/assets/javascripts/issue_show/components/fields/description.vue index 33110d27050..5f58f671c73 100644 --- a/app/assets/javascripts/issue_show/components/fields/description.vue +++ b/app/assets/javascripts/issue_show/components/fields/description.vue @@ -52,12 +52,12 @@ > <textarea id="issue-description" + ref="textarea" + slot="textarea" + v-model="formState.description" class="note-textarea js-gfm-input js-autosize markdown-area" data-supports-quick-actions="false" aria-label="Description" - v-model="formState.description" - ref="textarea" - slot="textarea" placeholder="Write a comment or drag your files here…" @keydown.meta.enter="updateIssuable" @keydown.ctrl.enter="updateIssuable"> diff --git a/app/assets/javascripts/issue_show/components/fields/description_template.vue b/app/assets/javascripts/issue_show/components/fields/description_template.vue index 7db0488e306..e90d9fad94e 100644 --- a/app/assets/javascripts/issue_show/components/fields/description_template.vue +++ b/app/assets/javascripts/issue_show/components/fields/description_template.vue @@ -48,15 +48,15 @@ class="dropdown js-issuable-selector-wrap" data-issuable-type="issue"> <button + ref="toggle" + :data-namespace-path="projectNamespace" + :data-project-path="projectPath" + :data-data="issuableTemplatesJson" class="dropdown-menu-toggle js-issuable-selector" type="button" - ref="toggle" data-field-name="issuable_template" data-selected="null" - data-toggle="dropdown" - :data-namespace-path="projectNamespace" - :data-project-path="projectPath" - :data-data="issuableTemplatesJson"> + data-toggle="dropdown"> <span class="dropdown-toggle-text"> Choose a template </span> diff --git a/app/assets/javascripts/issue_show/components/fields/title.vue b/app/assets/javascripts/issue_show/components/fields/title.vue index c3abb9fd9d5..7d1526a64b4 100644 --- a/app/assets/javascripts/issue_show/components/fields/title.vue +++ b/app/assets/javascripts/issue_show/components/fields/title.vue @@ -21,11 +21,11 @@ </label> <input id="issuable-title" + v-model="formState.title" class="form-control" type="text" placeholder="Title" aria-label="Title" - v-model="formState.title" @keydown.meta.enter="updateIssuable" @keydown.ctrl.enter="updateIssuable" /> </fieldset> diff --git a/app/assets/javascripts/issue_show/components/form.vue b/app/assets/javascripts/issue_show/components/form.vue index ab8bd34762f..5bfc072e3da 100644 --- a/app/assets/javascripts/issue_show/components/form.vue +++ b/app/assets/javascripts/issue_show/components/form.vue @@ -72,8 +72,8 @@ <locked-warning v-if="formState.lockedWarningVisible" /> <div class="row"> <div - class="col-sm-4 col-lg-3" - v-if="hasIssuableTemplates"> + v-if="hasIssuableTemplates" + class="col-sm-4 col-lg-3"> <description-template :form-state="formState" :issuable-templates="issuableTemplates" diff --git a/app/assets/javascripts/issue_show/components/title.vue b/app/assets/javascripts/issue_show/components/title.vue index aec890a2ff6..12101c0daa5 100644 --- a/app/assets/javascripts/issue_show/components/title.vue +++ b/app/assets/javascripts/issue_show/components/title.vue @@ -67,11 +67,11 @@ <template> <div class="title-container"> <h2 - class="title" :class="{ 'issue-realtime-pre-pulse': preAnimation, 'issue-realtime-trigger-pulse': pulseAnimation }" + class="title" v-html="titleHtml" > </h2> @@ -80,11 +80,11 @@ v-if="showInlineEditButton && canUpdate" type="button" class="btn btn-default btn-edit btn-svg js-issuable-edit" - v-html="pencilIcon" title="Edit title and description" data-placement="bottom" data-container="body" @click="edit" + v-html="pencilIcon" > </button> </div> diff --git a/app/assets/javascripts/jobs/components/header.vue b/app/assets/javascripts/jobs/components/header.vue index 5704d753277..1e7f4b2c3f7 100644 --- a/app/assets/javascripts/jobs/components/header.vue +++ b/app/assets/javascripts/jobs/components/header.vue @@ -74,13 +74,13 @@ export default { <ci-header v-if="shouldRenderContent" :status="status" - item-name="Job" :item-id="job.id" :time="headerTime" :user="job.user" :actions="actions" :has-sidebar-button="true" :should-render-triggered-label="jobStarted" + item-name="Job" /> <loading-icon v-if="isLoading" diff --git a/app/assets/javascripts/jobs/components/sidebar_details_block.vue b/app/assets/javascripts/jobs/components/sidebar_details_block.vue index 8f3c66b0cbe..d2adf628050 100644 --- a/app/assets/javascripts/jobs/components/sidebar_details_block.vue +++ b/app/assets/javascripts/jobs/components/sidebar_details_block.vue @@ -101,8 +101,8 @@ export default { {{ __('Retry') }} </a> <button - type="button" :aria-label="__('Toggle Sidebar')" + type="button" class="btn btn-blank gutter-toggle float-right d-block d-md-none js-sidebar-build-toggle" > <i @@ -114,20 +114,20 @@ export default { </div> <template v-if="shouldRenderContent"> <div - class="block retry-link" v-if="job.retry_path || job.new_issue_path" + class="block retry-link" > <a v-if="job.new_issue_path" - class="js-new-issue btn btn-new btn-inverted" :href="job.new_issue_path" + class="js-new-issue btn btn-new btn-inverted" > {{ __('New issue') }} </a> <a v-if="canUserRetry" - class="js-retry-job btn btn-inverted-secondary" :href="job.retry_path" + class="js-retry-job btn btn-inverted-secondary" data-method="post" rel="nofollow" > @@ -136,8 +136,8 @@ export default { </div> <div :class="{block : renderBlock }"> <p - class="build-detail-row js-job-mr" v-if="job.merge_request" + class="build-detail-row js-job-mr" > <span class="build-light-text"> {{ __('Merge Request:') }} @@ -148,51 +148,51 @@ export default { </p> <detail-row - class="js-job-duration" v-if="job.duration" - title="Duration" :value="duration" + class="js-job-duration" + title="Duration" /> <detail-row - class="js-job-finished" v-if="job.finished_at" - title="Finished" :value="timeFormated(job.finished_at)" + class="js-job-finished" + title="Finished" /> <detail-row - class="js-job-erased" v-if="job.erased_at" - title="Erased" :value="timeFormated(job.erased_at)" + class="js-job-erased" + title="Erased" /> <detail-row - class="js-job-queued" v-if="job.queued" - title="Queued" :value="queued" + class="js-job-queued" + title="Queued" /> <detail-row - class="js-job-timeout" v-if="hasTimeout" - title="Timeout" :help-url="runnerHelpUrl" :value="timeout" + class="js-job-timeout" + title="Timeout" /> <detail-row - class="js-job-runner" v-if="job.runner" - title="Runner" :value="runnerId" + class="js-job-runner" + title="Runner" /> <detail-row - class="js-job-coverage" v-if="job.coverage" - title="Coverage" :value="coverage" + class="js-job-coverage" + title="Coverage" /> <p - class="build-detail-row js-job-tags" v-if="job.tags.length" + class="build-detail-row js-job-tags" > <span class="build-light-text"> {{ __('Tags:') }} @@ -210,8 +210,8 @@ export default { class="btn-group prepend-top-5" role="group"> <a - class="js-cancel-job btn btn-sm btn-default" :href="job.cancel_path" + class="js-cancel-job btn btn-sm btn-default" data-method="post" rel="nofollow" > @@ -221,8 +221,8 @@ export default { </div> </template> <loading-icon - class="prepend-top-10" v-if="isLoading" + class="prepend-top-10" size="2" /> </div> diff --git a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js index 2cb238529aa..e4ed8111824 100644 --- a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js +++ b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js @@ -11,9 +11,18 @@ import { __ } from '~/locale'; global.mergeConflicts.diffFileEditor = Vue.extend({ props: { - file: Object, - onCancelDiscardConfirmation: Function, - onAcceptDiscardConfirmation: Function + file: { + type: Object, + required: true, + }, + onCancelDiscardConfirmation: { + type: Function, + required: true, + }, + onAcceptDiscardConfirmation: { + type: Function, + required: true, + }, }, data() { return { diff --git a/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js b/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js index 5bae6d63df6..827cf5f478d 100644 --- a/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js +++ b/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js @@ -8,9 +8,12 @@ import utilsMixin from '../mixins/line_conflict_utils'; global.mergeConflicts = global.mergeConflicts || {}; global.mergeConflicts.inlineConflictLines = Vue.extend({ + mixins: [utilsMixin, actionsMixin], props: { - file: Object, + file: { + type: Object, + required: true, + }, }, - mixins: [utilsMixin, actionsMixin], }); })(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js index 0572a76f2ed..57e73e38d88 100644 --- a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js +++ b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js @@ -8,10 +8,13 @@ import utilsMixin from '../mixins/line_conflict_utils'; global.mergeConflicts = global.mergeConflicts || {}; global.mergeConflicts.parallelConflictLines = Vue.extend({ + mixins: [utilsMixin, actionsMixin], props: { - file: Object + file: { + type: Object, + required: true, + }, }, - mixins: [utilsMixin, actionsMixin], template: ` <table> <tr class="line_holder parallel" v-for="section in file.parallelLines"> diff --git a/app/assets/javascripts/monitoring/components/empty_state.vue b/app/assets/javascripts/monitoring/components/empty_state.vue index c77f451c2d3..82b9a4b1adb 100644 --- a/app/assets/javascripts/monitoring/components/empty_state.vue +++ b/app/assets/javascripts/monitoring/components/empty_state.vue @@ -107,8 +107,8 @@ export default { <div class="state-button"> <a v-if="currentState.buttonPath" - class="btn btn-success" :href="currentState.buttonPath" + class="btn btn-success" > {{ currentState.buttonText }} </a> @@ -116,8 +116,8 @@ export default { <div class="state-button"> <a v-if="currentState.secondaryButtonPath" - class="btn" :href="currentState.secondaryButtonPath" + class="btn" > {{ currentState.secondaryButtonText }} </a> diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue index 503ee1ce3d1..20400154100 100644 --- a/app/assets/javascripts/monitoring/components/graph.vue +++ b/app/assets/javascripts/monitoring/components/graph.vue @@ -241,16 +241,16 @@ export default { </div> </div> <div - class="prometheus-svg-container" :style="paddingBottomRootSvg" + class="prometheus-svg-container" > <svg - :viewBox="outerViewBox" ref="baseSvg" + :viewBox="outerViewBox" > <g - class="x-axis" :transform="axisTransform" + class="x-axis" /> <g class="y-axis" @@ -265,9 +265,9 @@ export default { :unit-of-display="unitOfDisplay" /> <svg - class="graph-data" - :viewBox="innerViewBox" ref="graphData" + :viewBox="innerViewBox" + class="graph-data" > <graph-path v-for="(path, index) in timeSeries" @@ -287,11 +287,11 @@ export default { :graph-height-offset="graphHeightOffset" /> <rect - class="prometheus-graph-overlay" + ref="graphOverlay" :width="(graphWidth - 70)" :height="(graphHeight - 100)" + class="prometheus-graph-overlay" transform="translate(-5, 20)" - ref="graphOverlay" @mousemove="handleMouseOverGraph($event)" /> </svg> diff --git a/app/assets/javascripts/monitoring/components/graph/axis.vue b/app/assets/javascripts/monitoring/components/graph/axis.vue index fc4b3689dfd..8a604a51eb2 100644 --- a/app/assets/javascripts/monitoring/components/graph/axis.vue +++ b/app/assets/javascripts/monitoring/components/graph/axis.vue @@ -92,48 +92,48 @@ export default { <template> <g class="axis-label-container"> <line + :y1="yPosition" + :x2="graphWidth + 20" + :y2="yPosition" class="label-x-axis-line" stroke="#000000" stroke-width="1" x1="10" - :y1="yPosition" - :x2="graphWidth + 20" - :y2="yPosition" /> <line + :x2="10" + :y2="yPosition" class="label-y-axis-line" stroke="#000000" stroke-width="1" x1="10" y1="0" - :x2="10" - :y2="yPosition" /> <rect - class="rect-axis-text" :transform="rectTransform" :width="yLabelWidth" :height="yLabelHeight" + class="rect-axis-text" /> <text + ref="ylabel" + :transform="textTransform" class="label-axis-text y-label-text" text-anchor="middle" - :transform="textTransform" - ref="ylabel" > {{ yAxisLabelSentenceCase }} </text> <rect - class="rect-axis-text" :x="xPosition + 60" :y="graphHeight - 80" + class="rect-axis-text" width="35" height="50" /> <text - class="label-axis-text x-label-text" :x="xPosition + 60" :y="yPosition" + class="label-axis-text x-label-text" dy=".35em" > {{ timeString }} diff --git a/app/assets/javascripts/monitoring/components/graph/deployment.vue b/app/assets/javascripts/monitoring/components/graph/deployment.vue index 4012191ceb9..a7289ed53e8 100644 --- a/app/assets/javascripts/monitoring/components/graph/deployment.vue +++ b/app/assets/javascripts/monitoring/components/graph/deployment.vue @@ -33,18 +33,18 @@ export default { :key="index" :transform="transformDeploymentGroup(deployment)"> <rect + :height="calculatedHeight" x="0" y="0" - :height="calculatedHeight" width="3" fill="url(#shadow-gradient)" /> <line + :y2="calculatedHeight" class="deployment-line" x1="0" y1="0" x2="0" - :y2="calculatedHeight" stroke="#000" /> </g> diff --git a/app/assets/javascripts/monitoring/components/graph/flag.vue b/app/assets/javascripts/monitoring/components/graph/flag.vue index 8a771107de8..282c5c24384 100644 --- a/app/assets/javascripts/monitoring/components/graph/flag.vue +++ b/app/assets/javascripts/monitoring/components/graph/flag.vue @@ -117,13 +117,13 @@ export default { <template> <div - class="prometheus-graph-cursor" :style="cursorStyle" + class="prometheus-graph-cursor" > <div v-if="showFlagContent" - class="prometheus-graph-flag popover" :class="flagOrientation" + class="prometheus-graph-flag popover" > <div class="arrow"></div> <div class="popover-title"> @@ -139,8 +139,8 @@ export default { > <div> <icon - name="commit" :size="12" + name="commit" /> <a :href="deploymentFlagData.commitUrl"> {{ deploymentFlagData.sha.slice(0, 8) }} @@ -150,8 +150,8 @@ export default { v-if="deploymentFlagData.tag" > <icon - name="label" :size="12" + name="label" /> <a :href="deploymentFlagData.tagUrl"> {{ deploymentFlagData.ref }} diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue index da9280cf1f1..3276f3a1ceb 100644 --- a/app/assets/javascripts/monitoring/components/graph/legend.vue +++ b/app/assets/javascripts/monitoring/components/graph/legend.vue @@ -31,8 +31,8 @@ export default { <table class="prometheus-table"> <tr v-for="(series, index) in timeSeries" - :key="index" v-if="series.shouldRenderLegend" + :key="index" :class="isStable(series)" > <td> @@ -40,11 +40,11 @@ export default { </td> <track-line :track="series" /> <td - class="legend-metric-title" - v-if="timeSeries.length > 1"> + v-if="timeSeries.length > 1" + class="legend-metric-title"> <track-info - :track="series" - v-if="series.metricTag" /> + v-if="series.metricTag" + :track="series" /> <track-info v-else :track="series"> @@ -62,8 +62,8 @@ export default { :key="`track-line-${trackIndex}`"/> <td :key="`track-info-${trackIndex}`"> <track-info - class="legend-metric-title" - :track="track" /> + :track="track" + class="legend-metric-title" /> </td> </template> </tr> diff --git a/app/assets/javascripts/monitoring/components/graph/path.vue b/app/assets/javascripts/monitoring/components/graph/path.vue index 52f8aa2ee3f..a9b7ce586ce 100644 --- a/app/assets/javascripts/monitoring/components/graph/path.vue +++ b/app/assets/javascripts/monitoring/components/graph/path.vue @@ -44,26 +44,26 @@ export default { <template> <g transform="translate(-5, 20)"> <circle - class="circle-path" + v-if="showDot" :cx="currentCoordinates.currentX" :cy="currentCoordinates.currentY" :fill="lineColor" :stroke="lineColor" + class="circle-path" r="3" - v-if="showDot" /> <path - class="metric-area" :d="generatedAreaPath" :fill="areaColor" + class="metric-area" /> <path - class="metric-line" :d="generatedLinePath" :stroke="lineColor" + :stroke-dasharray="strokeDashArray" + class="metric-line" fill="none" stroke-width="1" - :stroke-dasharray="strokeDashArray" /> </g> </template> diff --git a/app/assets/javascripts/monitoring/components/graph/track_line.vue b/app/assets/javascripts/monitoring/components/graph/track_line.vue index 18be65fd1ef..ba3f93b39ff 100644 --- a/app/assets/javascripts/monitoring/components/graph/track_line.vue +++ b/app/assets/javascripts/monitoring/components/graph/track_line.vue @@ -24,11 +24,11 @@ export default { <line :stroke-dasharray="stylizedLine" :stroke="track.lineColor" - stroke-width="4" :x1="0" :x2="16" :y1="4" :y2="4" + stroke-width="4" /> </svg> </td> diff --git a/app/assets/javascripts/notebook/cells/code.vue b/app/assets/javascripts/notebook/cells/code.vue index b4067d229aa..18cef82cec0 100644 --- a/app/assets/javascripts/notebook/cells/code.vue +++ b/app/assets/javascripts/notebook/cells/code.vue @@ -39,10 +39,10 @@ export default { <template> <div class="cell"> <code-cell - type="input" :raw-code="rawInputCode" :count="cell.execution_count" - :code-css-class="codeCssClass" /> + :code-css-class="codeCssClass" + type="input" /> <output-cell v-if="hasOutput" :count="cell.execution_count" diff --git a/app/assets/javascripts/notebook/cells/code/index.vue b/app/assets/javascripts/notebook/cells/code/index.vue index 0f3083f05b2..7d2a1a33b98 100644 --- a/app/assets/javascripts/notebook/cells/code/index.vue +++ b/app/assets/javascripts/notebook/cells/code/index.vue @@ -48,9 +48,9 @@ :type="promptType" :count="count" /> <pre - class="language-python" - :class="codeCssClass" ref="code" + :class="codeCssClass" + class="language-python" v-text="code"> </pre> </div> diff --git a/app/assets/javascripts/notebook/cells/output/index.vue b/app/assets/javascripts/notebook/cells/output/index.vue index 91b2269a83a..4183b976814 100644 --- a/app/assets/javascripts/notebook/cells/output/index.vue +++ b/app/assets/javascripts/notebook/cells/output/index.vue @@ -78,10 +78,10 @@ <template> <component :is="componentName" - type="output" :output-type="outputType" :count="count" :raw-code="rawCode" :code-css-class="codeCssClass" + type="output" /> </template> diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue index 17943d7abfb..ad6dd3d9a09 100644 --- a/app/assets/javascripts/notes/components/comment_form.vue +++ b/app/assets/javascripts/notes/components/comment_form.vue @@ -312,8 +312,8 @@ Please check your network connection and try again.`; <div> <note-signed-out-widget v-if="!isLoggedIn" /> <discussion-locked-widget - issuable-type="issue" v-else-if="isLocked(getNoteableData) && !canCreateNote" + issuable-type="issue" /> <ul v-else-if="canCreateNote" @@ -345,22 +345,22 @@ Please check your network connection and try again.`; /> <markdown-field + ref="markdownField" :markdown-preview-path="markdownPreviewPath" :markdown-docs-path="markdownDocsPath" :quick-actions-docs-path="quickActionsDocsPath" - :add-spacing-classes="false" - ref="markdownField"> + :add-spacing-classes="false"> <textarea id="note-body" + ref="textarea" + slot="textarea" + v-model="note" + :disabled="isSubmitting" name="note[note]" class="note-textarea js-vue-comment-form js-gfm-input js-autosize markdown-area js-vue-textarea" data-supports-quick-actions="true" aria-label="Description" - v-model="note" - ref="textarea" - slot="textarea" - :disabled="isSubmitting" placeholder="Write a comment or drag your files here…" @keydown.up="editCurrentUserLastNote()" @keydown.meta.enter="handleSave()" @@ -372,10 +372,10 @@ js-gfm-input js-autosize markdown-area js-vue-textarea" class="float-left btn-group append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"> <button - @click.prevent="handleSave()" :disabled="isSubmitButtonDisabled" class="btn btn-create comment-btn js-comment-button js-comment-submit-button" - type="submit"> + type="submit" + @click.prevent="handleSave()"> {{ __(commentButtonTitle) }} </button> <button @@ -434,20 +434,20 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown" <loading-button v-if="canUpdateIssue" :loading="isToggleStateButtonLoading" - @click="handleSave(true)" :container-class="[ actionButtonClassNames, 'btn btn-comment btn-comment-and-close js-action-button' ]" :disabled="isToggleStateButtonLoading || isSubmitting" :label="issueActionButtonTitle" + @click="handleSave(true)" /> <button - type="button" v-if="note.length" - @click="discard" - class="btn btn-cancel js-note-discard"> + type="button" + class="btn btn-cancel js-note-discard" + @click="discard"> Discard draft </button> </div> diff --git a/app/assets/javascripts/notes/components/diff_file_header.vue b/app/assets/javascripts/notes/components/diff_file_header.vue index 94d9dc69964..fc7b52be241 100644 --- a/app/assets/javascripts/notes/components/diff_file_header.vue +++ b/app/assets/javascripts/notes/components/diff_file_header.vue @@ -29,12 +29,12 @@ export default { <span> <icon name="archive" /> <strong - v-html="diffFile.submoduleLink" class="file-title-name" + v-html="diffFile.submoduleLink" ></strong> <clipboard-button - title="Copy file path to clipboard" :text="diffFile.submoduleLink" + title="Copy file path to clipboard" css-class="btn-default btn-transparent btn-clipboard" /> </span> @@ -48,16 +48,16 @@ export default { <span v-html="diffFile.blobIcon"></span> <span v-if="diffFile.renamedFile"> <strong - class="file-title-name has-tooltip" :title="diffFile.oldPath" + class="file-title-name has-tooltip" data-container="body" > {{ diffFile.oldPath }} </strong> → <strong - class="file-title-name has-tooltip" :title="diffFile.newPath" + class="file-title-name has-tooltip" data-container="body" > {{ diffFile.newPath }} @@ -66,8 +66,8 @@ export default { <strong v-else - class="file-title-name has-tooltip" :title="diffFile.oldPath" + class="file-title-name has-tooltip" data-container="body" > {{ diffFile.filePath }} @@ -78,8 +78,8 @@ export default { </component> <clipboard-button - title="Copy file path to clipboard" :text="diffFile.filePath" + title="Copy file path to clipboard" css-class="btn-default btn-transparent btn-clipboard" /> diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue index ee01ec85bbb..cafb28910eb 100644 --- a/app/assets/javascripts/notes/components/diff_with_note.vue +++ b/app/assets/javascripts/notes/components/diff_with_note.vue @@ -60,8 +60,8 @@ export default { <template> <div ref="fileHolder" - class="diff-file file-holder" :class="diffFileClass" + class="diff-file file-holder" > <div class="js-file-title file-title file-title-flex-parent"> <diff-file-header @@ -74,11 +74,11 @@ export default { > <table> <component + v-for="(html, index) in diffRows" :is="rowTag(html)" :class="html.className" - v-for="(html, index) in diffRows" - v-html="html.outerHTML" :key="index" + v-html="html.outerHTML" /> <tr class="notes_holder"> <td diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue index cbe4774a360..68e17ac8055 100644 --- a/app/assets/javascripts/notes/components/discussion_counter.vue +++ b/app/assets/javascripts/notes/components/discussion_counter.vue @@ -95,8 +95,8 @@ export default { class="btn-group" role="group"> <a - :href="resolveAllDiscussionsIssuePath" v-tooltip + :href="resolveAllDiscussionsIssuePath" title="Resolve all discussions in new issue" data-container="body" class="new-issue-for-discussion btn btn-default discussion-create-issue-btn"> @@ -108,11 +108,11 @@ export default { class="btn-group" role="group"> <button - @click="jumpToFirstDiscussion" v-tooltip title="Jump to first unresolved discussion" data-container="body" - class="btn btn-default discussion-next-btn"> + class="btn btn-default discussion-next-btn" + @click="jumpToFirstDiscussion"> <span v-html="nextDiscussionSvg"></span> </button> </div> diff --git a/app/assets/javascripts/notes/components/discussion_locked_widget.vue b/app/assets/javascripts/notes/components/discussion_locked_widget.vue index 13283b187d1..de0a5f8489b 100644 --- a/app/assets/javascripts/notes/components/discussion_locked_widget.vue +++ b/app/assets/javascripts/notes/components/discussion_locked_widget.vue @@ -14,8 +14,8 @@ export default { <div class="disabled-comment text-center"> <span class="issuable-note-warning inline"> <icon - name="lock" :size="16" + name="lock" class="icon" /> <span> diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue index 626b0799581..0bf4258a257 100644 --- a/app/assets/javascripts/notes/components/note_actions.vue +++ b/app/assets/javascripts/notes/components/note_actions.vue @@ -129,12 +129,12 @@ export default { class="note-actions-item"> <button v-tooltip - @click="onResolve" :class="{ 'is-disabled': !resolvable, 'is-active': isResolved }" :title="resolveButtonTitle" :aria-label="resolveButtonTitle" type="button" - class="line-resolve-btn note-action-button"> + class="line-resolve-btn note-action-button" + @click="onResolve"> <template v-if="!isResolving"> <div v-if="isResolved" @@ -164,16 +164,16 @@ export default { > <loading-icon :inline="true" /> <span - v-html="emojiSmiling" - class="link-highlight award-control-icon-neutral"> + class="link-highlight award-control-icon-neutral" + v-html="emojiSmiling"> </span> <span - v-html="emojiSmiley" - class="link-highlight award-control-icon-positive"> + class="link-highlight award-control-icon-positive" + v-html="emojiSmiley"> </span> <span - v-html="emojiSmile" - class="link-highlight award-control-icon-super-positive"> + class="link-highlight award-control-icon-super-positive" + v-html="emojiSmile"> </span> </a> </div> @@ -181,16 +181,16 @@ export default { v-if="canEdit" class="note-actions-item"> <button - @click="onEdit" v-tooltip type="button" title="Edit comment" class="note-action-button js-note-edit btn btn-transparent" data-container="body" - data-placement="bottom"> + data-placement="bottom" + @click="onEdit"> <span - v-html="editSvg" - class="link-highlight"> + class="link-highlight" + v-html="editSvg"> </span> </button> </div> @@ -218,9 +218,9 @@ export default { </li> <li v-if="canEdit"> <button - @click.prevent="onDelete" class="btn btn-transparent js-note-delete js-note-delete" - type="button"> + type="button" + @click.prevent="onDelete"> <span class="text-danger"> Delete comment </span> diff --git a/app/assets/javascripts/notes/components/note_awards_list.vue b/app/assets/javascripts/notes/components/note_awards_list.vue index e8fd155a1ee..521b4d16286 100644 --- a/app/assets/javascripts/notes/components/note_awards_list.vue +++ b/app/assets/javascripts/notes/components/note_awards_list.vue @@ -199,10 +199,10 @@ export default { :key="index" :class="getAwardClassBindings(awardList, awardName)" :title="awardTitle(awardList)" - @click="handleAward(awardName)" class="btn award-control" data-placement="bottom" - type="button"> + type="button" + @click="handleAward(awardName)"> <span v-html="getAwardHTML(awardName)"></span> <span class="award-control-text js-counter"> {{ awardList.length }} @@ -220,16 +220,16 @@ export default { data-placement="bottom" type="button"> <span - v-html="emojiSmiling" - class="award-control-icon award-control-icon-neutral"> + class="award-control-icon award-control-icon-neutral" + v-html="emojiSmiling"> </span> <span - v-html="emojiSmiley" - class="award-control-icon award-control-icon-positive"> + class="award-control-icon award-control-icon-positive" + v-html="emojiSmiley"> </span> <span - v-html="emojiSmile" - class="award-control-icon award-control-icon-super-positive"> + class="award-control-icon award-control-icon-super-positive" + v-html="emojiSmile"> </span> <i aria-hidden="true" diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue index 0cb626c14f4..864edcd2ec6 100644 --- a/app/assets/javascripts/notes/components/note_body.vue +++ b/app/assets/javascripts/notes/components/note_body.vue @@ -80,20 +80,20 @@ export default { <template> <div - :class="{ 'js-task-list-container': canEdit }" ref="note-body" + :class="{ 'js-task-list-container': canEdit }" class="note-body"> <div - v-html="note.note_html" - class="note-text md"></div> + class="note-text md" + v-html="note.note_html"></div> <note-form v-if="isEditing" ref="noteForm" - @handleFormUpdate="handleFormUpdate" - @cancelFormEdition="formCancelHandler" :is-editing="isEditing" :note-body="noteBody" :note-id="note.id" + @handleFormUpdate="handleFormUpdate" + @cancelFormEdition="formCancelHandler" /> <textarea v-if="canEdit" diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue index 93b66986958..7254ef3357d 100644 --- a/app/assets/javascripts/notes/components/note_form.vue +++ b/app/assets/javascripts/notes/components/note_form.vue @@ -165,14 +165,14 @@ export default { :add-spacing-classes="false"> <textarea id="note_note" + ref="textarea" + slot="textarea" + :data-supports-quick-actions="!isEditing" + v-model="updatedNoteBody" name="note[note]" class="note-textarea js-gfm-input js-autosize markdown-area js-vue-issue-note-form js-vue-textarea" - :data-supports-quick-actions="!isEditing" aria-label="Description" - v-model="updatedNoteBody" - ref="textarea" - slot="textarea" placeholder="Write a comment or drag your files here…" @keydown.meta.enter="handleUpdate()" @keydown.ctrl.enter="handleUpdate()" @@ -182,23 +182,23 @@ js-autosize markdown-area js-vue-issue-note-form js-vue-textarea" </markdown-field> <div class="note-form-actions clearfix"> <button - type="button" - @click="handleUpdate()" :disabled="isDisabled" - class="js-vue-issue-save btn btn-save"> + type="button" + class="js-vue-issue-save btn btn-save" + @click="handleUpdate()"> {{ saveButtonTitle }} </button> <button v-if="note.resolvable" - @click.prevent="handleUpdate(true)" class="btn btn-nr btn-default append-right-10 js-comment-resolve-button" + @click.prevent="handleUpdate(true)" > {{ resolveButtonTitle }} </button> <button - @click="cancelHandler()" class="btn btn-cancel note-edit-cancel" - type="button"> + type="button" + @click="cancelHandler()"> Cancel </button> </div> diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue index a4081957207..ffe3ba9c805 100644 --- a/app/assets/javascripts/notes/components/note_header.vue +++ b/app/assets/javascripts/notes/components/note_header.vue @@ -66,9 +66,9 @@ export default { v-if="includeToggle" class="discussion-actions"> <button - @click="handleToggle" class="note-action-button discussion-toggle-button js-vue-toggle-button" - type="button"> + type="button" + @click="handleToggle"> <i :class="toggleChevronClass" class="fa" @@ -90,16 +90,16 @@ export default { </template> <span v-if="actionTextHtml" - v-html="actionTextHtml" - class="system-note-message"> + class="system-note-message" + v-html="actionTextHtml"> </span> <span class="system-note-separator"> · </span> <a :href="noteTimestampLink" - @click="updateTargetNoteHash" - class="note-timestamp system-note-separator"> + class="note-timestamp system-note-separator" + @click="updateTargetNoteHash"> <time-ago-tooltip :time="createdAt" tooltip-placement="bottom" diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue index 7f5aacaa3a2..f9f5041a9f9 100644 --- a/app/assets/javascripts/notes/components/noteable_discussion.vue +++ b/app/assets/javascripts/notes/components/noteable_discussion.vue @@ -229,9 +229,9 @@ Please check your network connection and try again.`; :note-id="discussion.id" :include-toggle="true" :expanded="note.expanded" - @toggleHandler="toggleDiscussionHandler" action-text="started a discussion" class="discussion" + @toggleHandler="toggleDiscussionHandler" /> <note-edited-text v-if="lastUpdatedAt" @@ -269,19 +269,19 @@ Please check your network connection and try again.`; class="btn-group" role="group"> <button - @click="showReplyForm" type="button" class="js-vue-discussion-reply btn btn-text-field" - title="Add a reply">Reply...</button> + title="Add a reply" + @click="showReplyForm">Reply...</button> </div> <div v-if="note.resolvable" class="btn-group" role="group"> <button - @click="resolveHandler()" type="button" class="btn btn-default" + @click="resolveHandler()" > <i v-if="isResolving" @@ -301,8 +301,8 @@ Please check your network connection and try again.`; class="btn-group" role="group"> <a - :href="note.resolve_with_issue_path" v-tooltip + :href="note.resolve_with_issue_path" class="new-issue-for-discussion btn btn-default discussion-create-issue-btn" title="Resolve this discussion in a new issue" @@ -316,11 +316,11 @@ Please check your network connection and try again.`; class="btn-group" role="group"> <button - @click="jumpToDiscussion" v-tooltip class="btn btn-default discussion-next-btn" title="Jump to next unresolved discussion" data-container="body" + @click="jumpToDiscussion" > <span v-html="nextDiscussionsSvg"></span> </button> @@ -330,12 +330,12 @@ Please check your network connection and try again.`; </template> <note-form v-if="isReplying" - save-button-title="Comment" + ref="noteForm" :note="note" :is-editing="false" + save-button-title="Comment" @handleFormUpdate="saveReply" - @cancelFormEdition="cancelReplyForm" - ref="noteForm" /> + @cancelFormEdition="cancelReplyForm" /> <note-signed-out-widget v-if="!canReply" /> </div> </div> diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue index 566f5c68e66..ec3ee407f0a 100644 --- a/app/assets/javascripts/notes/components/noteable_note.vue +++ b/app/assets/javascripts/notes/components/noteable_note.vue @@ -151,10 +151,10 @@ export default { <template> <li - class="note timeline-entry" :id="noteAnchorId" :class="classNameBindings" - :data-award-url="note.toggle_award_path"> + :data-award-url="note.toggle_award_path" + class="note timeline-entry"> <div class="timeline-entry-inner"> <div class="timeline-icon"> <user-avatar-link @@ -191,12 +191,12 @@ export default { /> </div> <note-body + ref="noteBody" :note="note" :can-edit="note.current_user.can_edit" :is-editing="isEditing" @handleFormUpdate="formUpdateHandler" @cancelFormEdition="formCancelHandler" - ref="noteBody" /> </div> </div> diff --git a/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue b/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue index ba1d8e4d8db..bc84666779e 100644 --- a/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue +++ b/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue @@ -40,8 +40,8 @@ <gl-modal id="stop-jobs-modal" :header-title-text="s__('AdminArea|Stop all jobs?')" - footer-primary-button-variant="danger" :footer-primary-button-text="s__('AdminArea|Stop jobs')" + footer-primary-button-variant="danger" @submit="onSubmit" > {{ text }} diff --git a/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue b/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue index 343c65edb37..ff66d3a8ac4 100644 --- a/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue +++ b/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue @@ -83,9 +83,9 @@ id="delete-project-modal" :title="title" :text="text" - kind="danger" :primary-button-label="primaryButtonLabel" :submit-disabled="!canSubmit" + kind="danger" @submit="onSubmit" @cancel="onCancel" > @@ -107,15 +107,15 @@ value="delete" /> <input + :value="csrfToken" type="hidden" name="authenticity_token" - :value="csrfToken" /> <input + v-model="enteredProjectName" name="projectName" class="form-control" type="text" - v-model="enteredProjectName" aria-labelledby="input-label" autocomplete="off" /> diff --git a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue index 9ce176744ba..cc2805a1901 100644 --- a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue +++ b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue @@ -116,10 +116,10 @@ id="delete-user-modal" :title="title" :text="text" - kind="danger" :primary-button-label="primaryButtonLabel" :secondary-button-label="secondaryButtonLabel" :submit-disabled="!canSubmit" + kind="danger" @submit="onSubmit" @cancel="onCancel" > @@ -141,15 +141,15 @@ value="delete" /> <input + :value="csrfToken" type="hidden" name="authenticity_token" - :value="csrfToken" /> <input + v-model="enteredUsername" type="text" name="username" class="form-control" - v-model="enteredUsername" aria-labelledby="input-label" autocomplete="off" /> @@ -160,11 +160,11 @@ slot-scope="props" > <button + :disabled="!canSubmit" type="button" class="btn js-secondary-button btn-warning" - :disabled="!canSubmit" - @click="onSecondaryAction" data-dismiss="modal" + @click="onSecondaryAction" > {{ secondaryButtonLabel }} </button> diff --git a/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue b/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue index 16f792d635a..4061c11ba8f 100644 --- a/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue +++ b/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue @@ -96,8 +96,8 @@ Once deleted, it cannot be undone or recovered.`), id="delete-milestone-modal" :title="title" :text="text" - kind="danger" :primary-button-label="s__('Milestones|Delete milestone')" + kind="danger" @submit="onSubmit"> <template diff --git a/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue b/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue index 2bda2aeb3a1..2c683a39f42 100644 --- a/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue +++ b/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue @@ -53,8 +53,8 @@ <template> <gl-modal id="promote-milestone-modal" - footer-primary-button-variant="warning" :footer-primary-button-text="s__('Milestones|Promote Milestone')" + footer-primary-button-variant="warning" @submit="onSubmit" > <template diff --git a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue index ad6df51bb7a..5d2247f6c6d 100644 --- a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue +++ b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue @@ -71,8 +71,8 @@ <template> <gl-modal id="promote-label-modal" - footer-primary-button-variant="warning" :footer-primary-button-text="s__('Labels|Promote Label')" + footer-primary-button-variant="warning" @submit="onSubmit" > <div diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue index 2d18fa2044b..d0613804067 100644 --- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue +++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue @@ -65,11 +65,11 @@ <div class="cron-preset-radio-input"> <input id="custom" - class="label-light" - type="radio" :name="inputNameAttribute" :value="cronInterval" :checked="isEditable" + class="label-light" + type="radio" @click="toggleCustomInput(true)" /> @@ -90,11 +90,11 @@ <div class="cron-preset-radio-input"> <input id="every-day" - class="label-light" - type="radio" v-model="cronInterval" :name="inputNameAttribute" :value="cronIntervalPresets.everyDay" + class="label-light" + type="radio" @click="toggleCustomInput(false)" /> @@ -109,11 +109,11 @@ <div class="cron-preset-radio-input"> <input id="every-week" - class="label-light" - type="radio" v-model="cronInterval" :name="inputNameAttribute" :value="cronIntervalPresets.everyWeek" + class="label-light" + type="radio" @click="toggleCustomInput(false)" /> @@ -128,11 +128,11 @@ <div class="cron-preset-radio-input"> <input id="every-month" - class="label-light" - type="radio" v-model="cronInterval" :name="inputNameAttribute" :value="cronIntervalPresets.everyMonth" + class="label-light" + type="radio" @click="toggleCustomInput(false)" /> @@ -147,13 +147,13 @@ <div class="cron-interval-input-wrapper"> <input id="schedule_cron" - class="form-control inline cron-interval-input" - type="text" :placeholder="__('Define a custom pattern with cron syntax')" - required="true" v-model="cronInterval" :name="inputNameAttribute" :disabled="!isEditable" + class="form-control inline cron-interval-input" + type="text" + required="true" /> </div> </div> diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue index 9b13b2a524f..06101290f6c 100644 --- a/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue +++ b/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue @@ -72,25 +72,25 @@ <template> <div - class="project-feature-controls" :data-for="name" + class="project-feature-controls" > <input v-if="name" - type="hidden" :name="name" :value="value" + type="hidden" /> <project-feature-toggle :value="featureEnabled" - @change="toggleFeature" :disabled-input="disabledInput" + @change="toggleFeature" /> <div class="select-wrapper"> <select + :disabled="displaySelectInput" class="form-control project-repo-select select-control" @change="selectOption" - :disabled="displaySelectInput" > <option v-for="[optionValue, optionName] in displayOptions" diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue index 06b0ab184ed..ae88b765abf 100644 --- a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue +++ b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue @@ -175,16 +175,16 @@ <div> <div class="project-visibility-setting"> <project-setting-row - label="Project visibility" :help-path="visibilityHelpPath" + label="Project visibility" > <div class="project-feature-controls"> <div class="select-wrapper"> <select - name="project[visibility_level]" v-model="visibilityLevel" - class="form-control select-control" :disabled="!canChangeVisibilityLevel" + name="project[visibility_level]" + class="form-control select-control" > <option :value="visibilityOptions.PRIVATE" @@ -219,30 +219,30 @@ class="request-access" > <input + :value="requestAccessEnabled" type="hidden" name="project[request_access_enabled]" - :value="requestAccessEnabled" /> <input - type="checkbox" v-model="requestAccessEnabled" + type="checkbox" /> Allow users to request access </label> </project-setting-row> </div> <div - class="project-feature-settings" :class="{ 'highlight-changes': highlightChangesClass }" + class="project-feature-settings" > <project-setting-row label="Issues" help-text="Lightweight issue tracking system for this project" > <project-feature-setting - name="project[project_feature_attributes][issues_access_level]" :options="featureAccessLevelOptions" v-model="issuesAccessLevel" + name="project[project_feature_attributes][issues_access_level]" /> </project-setting-row> <project-setting-row @@ -250,9 +250,9 @@ help-text="View and edit files in this project" > <project-feature-setting - name="project[project_feature_attributes][repository_access_level]" :options="featureAccessLevelOptions" v-model="repositoryAccessLevel" + name="project[project_feature_attributes][repository_access_level]" /> </project-setting-row> <div class="project-feature-setting-group"> @@ -261,10 +261,10 @@ help-text="Submit changes to be merged upstream" > <project-feature-setting - name="project[project_feature_attributes][merge_requests_access_level]" :options="repoFeatureAccessLevelOptions" v-model="mergeRequestsAccessLevel" :disabled-input="!repositoryEnabled" + name="project[project_feature_attributes][merge_requests_access_level]" /> </project-setting-row> <project-setting-row @@ -272,34 +272,34 @@ help-text="Build, test, and deploy your changes" > <project-feature-setting - name="project[project_feature_attributes][builds_access_level]" :options="repoFeatureAccessLevelOptions" v-model="buildsAccessLevel" :disabled-input="!repositoryEnabled" + name="project[project_feature_attributes][builds_access_level]" /> </project-setting-row> <project-setting-row v-if="registryAvailable" - label="Container registry" :help-path="registryHelpPath" + label="Container registry" help-text="Every project can have its own space to store its Docker images" > <project-feature-toggle - name="project[container_registry_enabled]" v-model="containerRegistryEnabled" :disabled-input="!repositoryEnabled" + name="project[container_registry_enabled]" /> </project-setting-row> <project-setting-row v-if="lfsAvailable" - label="Git Large File Storage" :help-path="lfsHelpPath" + label="Git Large File Storage" help-text="Manages large files such as audio, video, and graphics files" > <project-feature-toggle - name="project[lfs_enabled]" v-model="lfsEnabled" :disabled-input="!repositoryEnabled" + name="project[lfs_enabled]" /> </project-setting-row> </div> @@ -308,9 +308,9 @@ help-text="Pages for project documentation" > <project-feature-setting - name="project[project_feature_attributes][wiki_access_level]" :options="featureAccessLevelOptions" v-model="wikiAccessLevel" + name="project[project_feature_attributes][wiki_access_level]" /> </project-setting-row> <project-setting-row @@ -318,9 +318,9 @@ help-text="Share code pastes with others out of Git repository" > <project-feature-setting - name="project[project_feature_attributes][snippets_access_level]" :options="featureAccessLevelOptions" v-model="snippetsAccessLevel" + name="project[project_feature_attributes][snippets_access_level]" /> </project-setting-row> </div> diff --git a/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue b/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue index 5765eed4d45..0289209ff1e 100644 --- a/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue +++ b/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue @@ -50,8 +50,8 @@ export default { <gl-modal id="delete-wiki-modal" :header-title-text="title" - footer-primary-button-variant="danger" :footer-primary-button-text="s__('WikiPageConfirmDelete|Delete page')" + footer-primary-button-variant="danger" @submit="onSubmit" > {{ message }} @@ -68,9 +68,9 @@ export default { value="delete" /> <input + :value="csrfToken" type="hidden" name="authenticity_token" - :value="csrfToken" /> </form> </gl-modal> diff --git a/app/assets/javascripts/pdf/index.vue b/app/assets/javascripts/pdf/index.vue index 00f32d9de78..2f480ecdc69 100644 --- a/app/assets/javascripts/pdf/index.vue +++ b/app/assets/javascripts/pdf/index.vue @@ -56,8 +56,8 @@ <template> <div - class="pdf-viewer" - v-if="hasPDF"> + v-if="hasPDF" + class="pdf-viewer"> <page v-for="(page, index) in pages" :key="index" diff --git a/app/assets/javascripts/pdf/page/index.vue b/app/assets/javascripts/pdf/page/index.vue index fcba819beba..9f06833d560 100644 --- a/app/assets/javascripts/pdf/page/index.vue +++ b/app/assets/javascripts/pdf/page/index.vue @@ -43,9 +43,9 @@ <template> <canvas - class="pdf-page" ref="canvas" :data-page="number" + class="pdf-page" > </canvas> </template> diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue index 96189e7033a..d765ff3b41c 100644 --- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue +++ b/app/assets/javascripts/performance_bar/components/detailed_metric.vue @@ -39,9 +39,9 @@ export default { </script> <template> <div + v-if="currentRequest.details" :id="`peek-view-${metric}`" class="view" - v-if="currentRequest.details" > <button :data-target="`#modal-peek-${metric}-details`" diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue index 82b4ce083fb..db0505a55fe 100644 --- a/app/assets/javascripts/pipelines/components/graph/action_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue @@ -83,15 +83,15 @@ export default { </script> <template> <button - type="button" - @click="onClickAction" v-tooltip :title="tooltipText" + :class="cssClass" + :disabled="isDisabled" + type="button" class="js-ci-action btn btn-blank btn-transparent ci-action-icon-container ci-action-icon-wrapper" - :class="cssClass" data-container="body" - :disabled="isDisabled" + @click="onClickAction" > <icon :name="actionIcon"/> </button> diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue index e64afc94ef9..04120d45834 100644 --- a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue @@ -82,12 +82,12 @@ export default { <div class="ci-job-dropdown-container dropdown dropright"> <button v-tooltip + :title="tooltipText" type="button" data-toggle="dropdown" data-container="body" data-boundary="viewport" class="dropdown-menu-toggle build-content" - :title="tooltipText" > <job-name-component diff --git a/app/assets/javascripts/pipelines/components/graph/job_component.vue b/app/assets/javascripts/pipelines/components/graph/job_component.vue index dc16d395bcb..886e62ab1a7 100644 --- a/app/assets/javascripts/pipelines/components/graph/job_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/job_component.vue @@ -107,11 +107,11 @@ export default { </a> <div - v-else v-tooltip - class="js-job-component-tooltip non-details-job-component" + v-else :title="tooltipText" :class="cssClassJobName" + class="js-job-component-tooltip non-details-job-component" data-html="true" data-container="body" > diff --git a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue index f32368947e8..2c728582b7c 100644 --- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue @@ -52,8 +52,8 @@ export default { </script> <template> <li - class="stage-column" - :class="stageConnectorClass"> + :class="stageConnectorClass" + class="stage-column"> <div class="stage-name"> {{ title }} </div> @@ -62,9 +62,9 @@ export default { <li v-for="(job, index) in jobs" :key="job.id" - class="build" :class="buildConnnectorClass(index)" :id="jobId(job)" + class="build" > <div class="curve"></div> diff --git a/app/assets/javascripts/pipelines/components/header_component.vue b/app/assets/javascripts/pipelines/components/header_component.vue index e08c2092680..5b212ee8931 100644 --- a/app/assets/javascripts/pipelines/components/header_component.vue +++ b/app/assets/javascripts/pipelines/components/header_component.vue @@ -82,11 +82,11 @@ <ci-header v-if="shouldRenderContent" :status="status" - item-name="Pipeline" :item-id="pipeline.id" :time="pipeline.created_at" :user="pipeline.user" :actions="actions" + item-name="Pipeline" @actionClicked="postAction" /> <loading-icon diff --git a/app/assets/javascripts/pipelines/components/nav_controls.vue b/app/assets/javascripts/pipelines/components/nav_controls.vue index eba5678e3e5..1fce9f16ee0 100644 --- a/app/assets/javascripts/pipelines/components/nav_controls.vue +++ b/app/assets/javascripts/pipelines/components/nav_controls.vue @@ -50,10 +50,10 @@ <loading-button v-if="resetCachePath" - @click="onClickResetCache" :loading="isResetCacheButtonLoading" - class="btn btn-default js-clear-cache" :label="s__('Pipelines|Clear Runner Caches')" + class="btn btn-default js-clear-cache" + @click="onClickResetCache" /> <a diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue index 4d965733f95..a107e579457 100644 --- a/app/assets/javascripts/pipelines/components/pipeline_url.vue +++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue @@ -55,10 +55,10 @@ <span>by</span> <user-avatar-link v-if="user" - class="js-pipeline-url-user" :link-href="pipeline.user.path" :img-src="pipeline.user.avatar_url" :tooltip-text="pipeline.user.name" + class="js-pipeline-url-user" /> <span v-if="!user" @@ -67,31 +67,31 @@ </span> <div class="label-container"> <span - v-if="pipeline.flags.latest" v-tooltip + v-if="pipeline.flags.latest" class="js-pipeline-url-latest badge badge-success" title="Latest pipeline for this branch"> latest </span> <span - v-if="pipeline.flags.yaml_errors" v-tooltip - class="js-pipeline-url-yaml badge badge-danger" - :title="pipeline.yaml_errors"> + v-if="pipeline.flags.yaml_errors" + :title="pipeline.yaml_errors" + class="js-pipeline-url-yaml badge badge-danger"> yaml invalid </span> <span - v-if="pipeline.flags.failure_reason" v-tooltip - class="js-pipeline-url-failure badge badge-danger" - :title="pipeline.failure_reason"> + v-if="pipeline.flags.failure_reason" + :title="pipeline.failure_reason" + class="js-pipeline-url-failure badge badge-danger"> error </span> <a + v-popover="popoverOptions" v-if="pipeline.flags.auto_devops" tabindex="0" class="js-pipeline-url-autodevops badge badge-info autodevops-badge" - v-popover="popoverOptions" role="button"> Auto DevOps </a> diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue index 497a09cec65..b31b4bad7a0 100644 --- a/app/assets/javascripts/pipelines/components/pipelines.vue +++ b/app/assets/javascripts/pipelines/components/pipelines.vue @@ -282,8 +282,8 @@ <template> <div class="pipelines-container"> <div - class="top-area scrolling-tabs-container inner-page-scroll-tabs" v-if="shouldRenderTabs || shouldRenderButtons" + class="top-area scrolling-tabs-container inner-page-scroll-tabs" > <div class="fade-left"> <i @@ -303,8 +303,8 @@ <navigation-tabs v-if="shouldRenderTabs" :tabs="tabs" - @onChangeTab="onChangeTab" scope="pipelines" + @onChangeTab="onChangeTab" /> <navigation-controls @@ -312,8 +312,8 @@ :new-pipeline-path="newPipelinePath" :reset-cache-path="resetCachePath" :ci-lint-path="ciLintPath" - @resetRunnersCache="handleResetRunnersCache" :is-reset-cache-button-loading="isResetCacheButtonLoading" + @resetRunnersCache="handleResetRunnersCache" /> </div> @@ -347,8 +347,8 @@ /> <div - class="table-holder" v-else-if="stateToRender === $options.stateMap.tableList" + class="table-holder" > <pipelines-table-component diff --git a/app/assets/javascripts/pipelines/components/pipelines_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_actions.vue index e9bc3cf14ca..5070c253f11 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_actions.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_actions.vue @@ -44,13 +44,13 @@ <div class="btn-group"> <button v-tooltip + :disabled="isLoading" type="button" class="dropdown-new btn btn-default js-pipeline-dropdown-manual-actions" title="Manual job" data-toggle="dropdown" data-placement="top" aria-label="Manual job" - :disabled="isLoading" > <icon name="play" @@ -69,11 +69,11 @@ :key="i" > <button + :class="{ disabled: isActionDisabled(action) }" + :disabled="isActionDisabled(action)" type="button" class="js-pipeline-action-link no-btn btn" @click="onClickAction(action.path)" - :class="{ disabled: isActionDisabled(action) }" - :disabled="isActionDisabled(action)" > {{ action.name }} </button> diff --git a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue index 31fcc9dd412..490df47e154 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue @@ -42,9 +42,9 @@ v-for="(artifact, i) in artifacts" :key="i"> <a + :href="artifact.path" rel="nofollow" download - :href="artifact.path" > Download {{ artifact.name }} artifacts </a> diff --git a/app/assets/javascripts/pipelines/components/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_table.vue index 4318abe97e0..2e777783636 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_table.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_table.vue @@ -114,8 +114,8 @@ <modal id="confirmation-modal" :header-title-text="modalTitle" - footer-primary-button-variant="danger" :footer-primary-button-text="s__('Pipeline|Stop pipeline')" + footer-primary-button-variant="danger" @submit="onSubmit" > <span v-html="modalText"></span> diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue index a3c17479e6f..b2744a30c2a 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue @@ -301,9 +301,9 @@ <div class="table-mobile-content"> <template v-if="pipeline.details.stages.length > 0"> <div - class="stage-container dropdown js-mini-pipeline-graph" v-for="(stage, index) in pipeline.details.stages" - :key="index"> + :key="index" + class="stage-container dropdown js-mini-pipeline-graph"> <pipeline-stage :type="$options.pipelinesTable" :stage="stage" @@ -331,28 +331,28 @@ <pipelines-artifacts-component v-if="pipeline.details.artifacts.length" - class="d-none d-sm-none d-md-block" :artifacts="pipeline.details.artifacts" + class="d-none d-sm-none d-md-block" /> <loading-button v-if="pipeline.flags.retryable" - @click="handleRetryClick" - container-class="js-pipelines-retry-button btn btn-default btn-retry" :loading="isRetrying" :disabled="isRetrying" + container-class="js-pipelines-retry-button btn btn-default btn-retry" + @click="handleRetryClick" > <icon name="repeat" /> </loading-button> <loading-button v-if="pipeline.flags.cancelable" - @click="handleCancelClick" + :loading="isCancelling" + :disabled="isCancelling" data-toggle="modal" data-target="#confirmation-modal" container-class="js-pipelines-cancel-button btn btn-remove" - :loading="isCancelling" - :disabled="isCancelling" + @click="handleCancelClick" > <icon name="close" /> </loading-button> diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue index f9769815796..4dd2fb9fbed 100644 --- a/app/assets/javascripts/pipelines/components/stage.vue +++ b/app/assets/javascripts/pipelines/components/stage.vue @@ -158,22 +158,22 @@ export default { <div class="dropdown"> <button v-tooltip + id="stageDropdown" + ref="dropdown" :class="triggerButtonClass" - @click="onClickStage" - class="mini-pipeline-graph-dropdown-toggle js-builds-dropdown-button" :title="stage.title" + class="mini-pipeline-graph-dropdown-toggle js-builds-dropdown-button" data-placement="top" data-toggle="dropdown" type="button" - id="stageDropdown" aria-haspopup="true" aria-expanded="false" - ref="dropdown" + @click="onClickStage" > <span - aria-hidden="true" :aria-label="stage.title" + aria-hidden="true" > <icon :name="borderlessIcon" /> </span> diff --git a/app/assets/javascripts/pipelines/components/time_ago.vue b/app/assets/javascripts/pipelines/components/time_ago.vue index 79dbdca4010..0a97df2dc18 100644 --- a/app/assets/javascripts/pipelines/components/time_ago.vue +++ b/app/assets/javascripts/pipelines/components/time_ago.vue @@ -66,8 +66,8 @@ </div> <div class="table-mobile-content"> <p - class="duration" v-if="hasDuration" + class="duration" > <span v-html="iconTimerSvg"> </span> @@ -75,8 +75,8 @@ </p> <p - class="finished-at d-none d-sm-none d-md-block" v-if="hasFinishedTime" + class="finished-at d-none d-sm-none d-md-block" > <i @@ -87,9 +87,9 @@ <time v-tooltip + :title="tooltipTitle(finishedTime)" data-placement="top" - data-container="body" - :title="tooltipTitle(finishedTime)"> + data-container="body"> {{ timeFormated(finishedTime) }} </time> </p> diff --git a/app/assets/javascripts/profile/account/components/delete_account_modal.vue b/app/assets/javascripts/profile/account/components/delete_account_modal.vue index f50002afbf2..974629fa2af 100644 --- a/app/assets/javascripts/profile/account/components/delete_account_modal.vue +++ b/app/assets/javascripts/profile/account/components/delete_account_modal.vue @@ -80,10 +80,10 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`), id="delete-account-modal" :title="s__('Profiles|Delete your account?')" :text="text" - kind="danger" :primary-button-label="s__('Profiles|Delete account')" - @submit="onSubmit" - :submit-disabled="!canSubmit()"> + :submit-disabled="!canSubmit()" + kind="danger" + @submit="onSubmit"> <template slot="body" @@ -101,9 +101,9 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`), value="delete" /> <input + :value="csrfToken" type="hidden" name="authenticity_token" - :value="csrfToken" /> <p @@ -114,18 +114,18 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`), <input v-if="confirmWithPassword" + v-model="enteredPassword" name="password" class="form-control" type="password" - v-model="enteredPassword" aria-labelledby="input-label" /> <input v-else + v-model="enteredUsername" name="username" class="form-control" type="text" - v-model="enteredUsername" aria-labelledby="input-label" /> </form> diff --git a/app/assets/javascripts/profile/account/components/update_username.vue b/app/assets/javascripts/profile/account/components/update_username.vue index b37febe523c..ef484ddfd61 100644 --- a/app/assets/javascripts/profile/account/components/update_username.vue +++ b/app/assets/javascripts/profile/account/components/update_username.vue @@ -93,10 +93,10 @@ Please update your Git repository remotes as soon as possible.`), </div> <input :id="$options.inputId" - class="form-control" - required="required" v-model="newUsername" :disabled="isRequestPending" + class="form-control" + required="required" /> </div> <p class="form-text text-muted"> @@ -105,18 +105,18 @@ Please update your Git repository remotes as soon as possible.`), </div> <button :data-target="`#${$options.modalId}`" + :disabled="isRequestPending || newUsername === username" class="btn btn-warning" type="button" data-toggle="modal" - :disabled="isRequestPending || newUsername === username" > {{ $options.buttonText }} </button> <gl-modal :id="$options.modalId" :header-title-text="s__('Profiles|Change username') + '?'" - footer-primary-button-variant="warning" :footer-primary-button-text="$options.buttonText" + footer-primary-button-variant="warning" @submit="onConfirm" > <span v-html="modalText"></span> diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue index 6ed35c0a981..d4497924ad8 100644 --- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue @@ -131,12 +131,12 @@ export default { </div> </div> <span - class="form-text" + v-if="hasErrors" :class="{ 'text-danger': hasErrors, 'text-muted': !hasErrors }" - v-if="hasErrors" + class="form-text" > {{ errorMessage }} </span> diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue index 542d4d21a22..08d0a122579 100644 --- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue @@ -192,11 +192,11 @@ export default { </div> </div> <span - class="form-text" :class="{ 'text-danger': hasErrors, 'text-muted': !hasErrors }" + class="form-text" v-html="helpText" ></span> </div> diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue index bc28f8b5df4..b5476684c6a 100644 --- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue @@ -105,12 +105,12 @@ export default { </div> </div> <span - class="form-text" + v-if="hasErrors" :class="{ 'text-danger': hasErrors, 'text-muted': !hasErrors }" - v-if="hasErrors" + class="form-text" > {{ errorMessage }} </span> diff --git a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue index 63f20a0041d..c772fca14bb 100644 --- a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue +++ b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue @@ -100,9 +100,9 @@ <template> <div> <loading-icon + v-if="isLoading" label="Loading pipeline status" size="3" - v-if="isLoading" /> <a v-else @@ -112,8 +112,8 @@ v-tooltip :title="statusTitle" :aria-label="statusTitle" - data-container="body" :status="ciStatus" + data-container="body" /> </a> </div> diff --git a/app/assets/javascripts/projects_dropdown/components/app.vue b/app/assets/javascripts/projects_dropdown/components/app.vue index 0bbd8a41753..73d49488299 100644 --- a/app/assets/javascripts/projects_dropdown/components/app.vue +++ b/app/assets/javascripts/projects_dropdown/components/app.vue @@ -132,14 +132,14 @@ export default { <div> <search/> <loading-icon - class="loading-animation prepend-top-20" - size="2" v-if="isLoadingProjects" :label="s__('ProjectsDropdown|Loading projects')" + class="loading-animation prepend-top-20" + size="2" /> <div - class="section-header" v-if="isFrequentsListVisible" + class="section-header" > {{ s__('ProjectsDropdown|Frequently visited') }} </div> diff --git a/app/assets/javascripts/projects_dropdown/components/projects_list_frequent.vue b/app/assets/javascripts/projects_dropdown/components/projects_list_frequent.vue index 246dbeaaded..625e0aa548c 100644 --- a/app/assets/javascripts/projects_dropdown/components/projects_list_frequent.vue +++ b/app/assets/javascripts/projects_dropdown/components/projects_list_frequent.vue @@ -37,14 +37,14 @@ class="list-unstyled" > <li - class="section-empty" v-if="isListEmpty" + class="section-empty" > {{ listEmptyMessage }} </li> <projects-list-item - v-else v-for="(project, index) in projects" + v-else :key="index" :project-id="project.id" :project-name="project.name" diff --git a/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue b/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue index 759cdd1ded9..eafbf6c99e2 100644 --- a/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue +++ b/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue @@ -79,36 +79,36 @@ class="projects-list-item-container" > <a - class="clearfix" :href="webUrl" + class="clearfix" > <div class="project-item-avatar-container" > <img v-if="hasAvatar" - class="avatar s32" :src="avatarUrl" + class="avatar s32" /> <identicon v-else - size-class="s32" :entity-id="projectId" :entity-name="projectName" + size-class="s32" /> </div> <div class="project-item-metadata-container" > <div - class="project-title" :title="projectName" + class="project-title" v-html="highlightedProjectName" > </div> <div - class="project-namespace" :title="namespace" + class="project-namespace" >{{ truncatedNamespace }}</div> </div> </a> diff --git a/app/assets/javascripts/projects_dropdown/components/projects_list_search.vue b/app/assets/javascripts/projects_dropdown/components/projects_list_search.vue index 8d0c29177e6..76e9cb9e53f 100644 --- a/app/assets/javascripts/projects_dropdown/components/projects_list_search.vue +++ b/app/assets/javascripts/projects_dropdown/components/projects_list_search.vue @@ -48,8 +48,8 @@ export default { {{ listEmptyMessage }} </li> <projects-list-item - v-else v-for="(project, index) in projects" + v-else :key="index" :project-id="project.id" :project-name="project.name" diff --git a/app/assets/javascripts/projects_dropdown/components/search.vue b/app/assets/javascripts/projects_dropdown/components/search.vue index 7fcd62dcdb8..28f2a18f2a6 100644 --- a/app/assets/javascripts/projects_dropdown/components/search.vue +++ b/app/assets/javascripts/projects_dropdown/components/search.vue @@ -49,11 +49,11 @@ class="search-input-container d-none d-sm-block" > <input - type="search" - class="form-control" ref="search" v-model="searchQuery" :placeholder="s__('ProjectsDropdown|Search your projects')" + type="search" + class="form-control" /> <i v-if="!searchQuery" diff --git a/app/assets/javascripts/registry/components/app.vue b/app/assets/javascripts/registry/components/app.vue index ea0f7199a70..31f88675912 100644 --- a/app/assets/javascripts/registry/components/app.vue +++ b/app/assets/javascripts/registry/components/app.vue @@ -48,8 +48,8 @@ /> <collapsible-container - v-else-if="!isLoading && repos.length" v-for="(item, index) in repos" + v-else-if="!isLoading && repos.length" :key="index" :repo="item" /> diff --git a/app/assets/javascripts/registry/components/collapsible_container.vue b/app/assets/javascripts/registry/components/collapsible_container.vue index 2fc3778820b..4116c4a0489 100644 --- a/app/assets/javascripts/registry/components/collapsible_container.vue +++ b/app/assets/javascripts/registry/components/collapsible_container.vue @@ -62,15 +62,15 @@ <div class="container-image-head"> <button type="button" - @click="toggleRepo" class="js-toggle-repo btn-link" + @click="toggleRepo" > <i - class="fa" :class="{ 'fa-chevron-right': !isOpen, 'fa-chevron-up': isOpen, }" + class="fa" aria-hidden="true" > </i> @@ -86,12 +86,12 @@ <div class="controls d-none d-sm-block float-right"> <button + v-tooltip v-if="repo.canDelete" - type="button" - class="js-remove-repo btn btn-danger" :title="s__('ContainerRegistry|Remove repository')" :aria-label="s__('ContainerRegistry|Remove repository')" - v-tooltip + type="button" + class="js-remove-repo btn btn-danger" @click="handleDeleteRepository" > <i diff --git a/app/assets/javascripts/registry/components/table_registry.vue b/app/assets/javascripts/registry/components/table_registry.vue index e4a4b3bb129..9f4973c3490 100644 --- a/app/assets/javascripts/registry/components/table_registry.vue +++ b/app/assets/javascripts/registry/components/table_registry.vue @@ -118,13 +118,13 @@ <td class="content"> <button + v-tooltip v-if="item.canDelete" - type="button" - class="js-delete-registry btn btn-danger d-none d-sm-block float-right" :title="s__('ContainerRegistry|Remove tag')" :aria-label="s__('ContainerRegistry|Remove tag')" + type="button" + class="js-delete-registry btn btn-danger d-none d-sm-block float-right" data-container="body" - v-tooltip @click="handleDeleteRegistry(item)" > <i diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees.vue b/app/assets/javascripts/sidebar/components/assignees/assignees.vue index 5a374d84796..d22a1e1ac66 100644 --- a/app/assets/javascripts/sidebar/components/assignees/assignees.vue +++ b/app/assets/javascripts/sidebar/components/assignees/assignees.vue @@ -125,13 +125,13 @@ export default { <template> <div> <div - class="sidebar-collapsed-icon sidebar-collapsed-user" - :class="{ 'multiple-users': hasMoreThanOneAssignee }" v-tooltip + :class="{ 'multiple-users': hasMoreThanOneAssignee }" + :title="collapsedTooltipTitle" + class="sidebar-collapsed-icon sidebar-collapsed-user" data-container="body" data-placement="left" data-boundary="viewport" - :title="collapsedTooltipTitle" > <i v-if="hasNoUsers" @@ -140,17 +140,17 @@ export default { > </i> <button - type="button" - class="btn-link" v-for="(user, index) in users" v-if="shouldRenderCollapsedAssignee(index)" :key="user.id" + type="button" + class="btn-link" > <img - width="24" - class="avatar avatar-inline s24" :alt="assigneeAlt(user)" :src="avatarUrl(user)" + width="24" + class="avatar avatar-inline s24" /> <span class="author"> {{ user.name }} @@ -186,14 +186,14 @@ export default { </template> <template v-else-if="hasOneUser"> <a - class="author_link bold" :href="assigneeUrl(firstUser)" + class="author_link bold" > <img - width="32" - class="avatar avatar-inline s32" :alt="assigneeAlt(firstUser)" :src="avatarUrl(firstUser)" + width="32" + class="avatar avatar-inline s32" /> <span class="author"> {{ firstUser.name }} @@ -206,23 +206,23 @@ export default { <template v-else> <div class="user-list"> <div - class="user-item" v-for="(user, index) in users" v-if="renderAssignee(index)" :key="user.id" + class="user-item" > <a + :href="assigneeUrl(user)" + :data-title="user.name" class="user-link has-tooltip" data-container="body" data-placement="bottom" - :href="assigneeUrl(user)" - :data-title="user.name" > <img - width="32" - class="avatar avatar-inline s32" :alt="assigneeAlt(user)" :src="avatarUrl(user)" + width="32" + class="avatar avatar-inline s32" /> </a> </div> diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue index b04a2eff798..123c92aff64 100644 --- a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue +++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue @@ -90,12 +90,12 @@ export default { /> <assignees v-if="!store.isFetching.assignees" - class="value" :root-path="store.rootPath" :users="store.assignees" :editable="store.editable" - @assign-self="assignSelf" :issuable-type="issuableType" + class="value" + @assign-self="assignSelf" /> </div> </template> diff --git a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue index 3f6e2f05396..1b866cca4b1 100644 --- a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue +++ b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue @@ -70,13 +70,13 @@ export default { <template> <div class="block issuable-sidebar-item confidentiality"> <div - class="sidebar-collapsed-icon" - @click="toggleForm" v-tooltip + :title="tooltipLabel" + class="sidebar-collapsed-icon" data-container="body" data-placement="left" data-boundary="viewport" - :title="tooltipLabel" + @click="toggleForm" > <icon :name="confidentialityIcon" @@ -104,8 +104,8 @@ export default { v-if="!isConfidential" class="no-value sidebar-item-value"> <icon - name="eye" :size="16" + name="eye" aria-hidden="true" class="sidebar-item-icon inline" /> @@ -115,8 +115,8 @@ export default { v-else class="value sidebar-item-value hide-collapsed"> <icon - name="eye-slash" :size="16" + name="eye-slash" aria-hidden="true" class="sidebar-item-icon inline is-active" /> diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form.vue b/app/assets/javascripts/sidebar/components/lock/edit_form.vue index d392977e5e2..4906dad22e1 100644 --- a/app/assets/javascripts/sidebar/components/lock/edit_form.vue +++ b/app/assets/javascripts/sidebar/components/lock/edit_form.vue @@ -44,14 +44,14 @@ export default { <div class="dropdown show"> <div class="dropdown-menu sidebar-item-warning-message"> <p - class="text" v-if="isLocked" + class="text" v-html="unlockWarning"> </p> <p - class="text" v-else + class="text" v-html="lockWarning"> </p> diff --git a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue index fb69c741dcd..10bedf8af1f 100644 --- a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue +++ b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue @@ -94,13 +94,13 @@ export default { <template> <div class="block issuable-sidebar-item lock"> <div - class="sidebar-collapsed-icon" - @click="toggleForm" v-tooltip + :title="tooltipLabel" + class="sidebar-collapsed-icon" data-container="body" data-placement="left" data-boundary="viewport" - :title="tooltipLabel" + @click="toggleForm" > <icon :name="lockIcon" @@ -134,8 +134,8 @@ export default { class="value sidebar-item-value" > <icon - name="lock" :size="16" + name="lock" aria-hidden="true" class="sidebar-item-icon inline is-active" /> @@ -147,8 +147,8 @@ export default { class="no-value sidebar-item-value hide-collapsed" > <icon - name="lock-open" :size="16" + name="lock-open" aria-hidden="true" class="sidebar-item-icon inline" /> diff --git a/app/assets/javascripts/sidebar/components/participants/participants.vue b/app/assets/javascripts/sidebar/components/participants/participants.vue index 0a945fc7fd5..33dd6c981b6 100644 --- a/app/assets/javascripts/sidebar/components/participants/participants.vue +++ b/app/assets/javascripts/sidebar/components/participants/participants.vue @@ -80,12 +80,12 @@ <template> <div> <div - class="sidebar-collapsed-icon" v-tooltip + :title="participantLabel" + class="sidebar-collapsed-icon" data-container="body" data-placement="left" data-boundary="viewport" - :title="participantLabel" @click="onClickCollapsedIcon" > <i @@ -119,15 +119,15 @@ class="participants-author js-participants-author" > <a - class="author_link" :href="participant.web_url" + class="author_link" > <user-avatar-image :lazy="true" :img-src="participant.avatar_url" - css-classes="avatar-inline" :size="24" :tooltip-text="participant.name" + css-classes="avatar-inline" tooltip-placement="bottom" /> </a> diff --git a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue index 6745c1aafff..448c8fc3602 100644 --- a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue +++ b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue @@ -97,9 +97,9 @@ </span> <toggle-button ref="toggleButton" - class="float-right hide-collapsed js-issuable-subscribe-button" :is-loading="showLoadingState" :value="subscribed" + class="float-right hide-collapsed js-issuable-subscribe-button" @change="toggleSubscription" /> </div> diff --git a/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue b/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue index 209af1ce152..1d030c4f67f 100644 --- a/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue +++ b/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue @@ -110,12 +110,12 @@ <template> <div - class="sidebar-collapsed-icon" v-tooltip + :title="tooltipText" + class="sidebar-collapsed-icon" data-container="body" data-placement="left" data-boundary="viewport" - :title="tooltipText" > <icon name="timer" /> <div class="time-tracking-collapsed-summary"> diff --git a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue index 0e139cd7f5e..d335c3f55af 100644 --- a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue +++ b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue @@ -54,14 +54,17 @@ export default { <template> <div class="time-tracking-comparison-pane"> <div - class="compare-meter" - :title="timeRemainingTooltip" v-tooltip + :title="timeRemainingTooltip" :class="timeRemainingStatusClass" + class="compare-meter" + data-toggle="tooltip" + data-placement="top" + role="timeRemainingDisplay" > <div - class="meter-container" :aria-valuenow="timeRemainingPercent" + class="meter-container" > <div :style="{ width: timeRemainingPercent }" diff --git a/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue index 825063d9ba6..19ec0f05a26 100644 --- a/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue +++ b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue @@ -45,8 +45,8 @@ export default { <p v-html="spendText"> </p> <a - class="btn btn-default learn-more-button" :href="href" + class="btn btn-default learn-more-button" > {{ __('Learn more') }} </a> diff --git a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue index 7d56d2fa5ee..ca3b9338c29 100644 --- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue +++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue @@ -101,8 +101,8 @@ export default { <template> <div - class="time_tracker time-tracking-component-wrap" v-cloak + class="time_tracker time-tracking-component-wrap" > <time-tracking-collapsed-state :show-comparison-state="showComparisonState" @@ -116,8 +116,8 @@ export default { <div class="title hide-collapsed"> {{ __('Time tracking') }} <div - class="help-button float-right" v-if="!showHelpState" + class="help-button float-right" @click="toggleHelpState(true)" > <i @@ -127,8 +127,8 @@ export default { </i> </div> <div - class="close-help-button float-right" v-if="showHelpState" + class="close-help-button float-right" @click="toggleHelpState(false)" > <i diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue index 1608858da22..c44419d24e6 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue @@ -118,8 +118,8 @@ export default { </a> </template> <span - v-if="hasDeploymentTime" v-tooltip + v-if="hasDeploymentTime" :title="deployment.deployed_at_formatted" class="js-deploy-time" > @@ -127,9 +127,9 @@ export default { </span> <loading-button v-if="deployment.stop_url" + :loading="isStopping" container-class="btn btn-default btn-sm prepend-left-default" label="Stop environment" - :loading="isStopping" @click="stopEnvironment" /> </div> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue index 8338fde61c7..22c2f74f900 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue @@ -35,17 +35,17 @@ <template> <a :href="authorUrl" - class="author-link inline" :v-tooltip="showAuthorTooltip" :title="author.name" + class="author-link inline" > <img :src="avatarUrl" class="avatar avatar-inline s16" /> <span - class="author" v-if="showAuthorName" + class="author" > {{ author.name }} </span> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue index a9868486e83..ba16cb9e2c8 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue @@ -35,8 +35,8 @@ {{ actionText }} <mr-widget-author :author="author" /> <time - :title="dateTitle" v-tooltip + :title="dateTitle" data-container="body" > {{ dateReadable }} diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue index 51a0fda6555..3ce9d8dc26a 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue @@ -59,11 +59,11 @@ export default { <strong> {{ s__("mrWidget|Request to merge") }} <span - class="label-branch js-source-branch" :class="{ 'label-truncated': isSourceBranchLong }" :title="isSourceBranchLong ? mr.sourceBranch : ''" - data-placement="bottom" :v-tooltip="isSourceBranchLong" + class="label-branch js-source-branch" + data-placement="bottom" v-html="mr.sourceBranchLink" > </span> @@ -77,10 +77,10 @@ export default { {{ s__("mrWidget|into") }} <span - class="label-branch" :v-tooltip="isTargetBranchLong" :class="{ 'label-truncatedtooltip': isTargetBranchLong }" :title="isTargetBranchLong ? mr.targetBranch : ''" + class="label-branch" data-placement="bottom" > <a @@ -108,9 +108,9 @@ export default { {{ s__("mrWidget|Web IDE") }} </a> <button + :disabled="mr.sourceBranchRemoved" data-target="#modal_merge_info" data-toggle="modal" - :disabled="mr.sourceBranchRemoved" class="btn btn-sm btn-default inline js-check-out-branch" type="button" > @@ -134,8 +134,8 @@ export default { <ul class="dropdown-menu dropdown-menu-right"> <li> <a - class="js-download-email-patches" :href="mr.emailPatchesPath" + class="js-download-email-patches" download > {{ s__("mrWidget|Email patches") }} @@ -143,8 +143,8 @@ export default { </li> <li> <a - class="js-download-plain-diff" :href="mr.plainDiffPath" + class="js-download-plain-diff" download > {{ s__("mrWidget|Plain diff") }} diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue index 48dff8c4916..2f0b5e12c12 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue @@ -67,8 +67,8 @@ export default { </template> <template v-else-if="hasPipeline"> <a - class="append-right-10" :href="status.details_path" + class="append-right-10" > <ci-icon :status="status" /> </a> @@ -96,8 +96,8 @@ export default { <span class="mr-widget-pipeline-graph"> <span - class="stage-cell" v-if="hasStages" + class="stage-cell" > <div v-for="(stage, i) in pipeline.details.stages" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue index 460437ceeff..56879c04d16 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue @@ -25,9 +25,9 @@ </span> <i v-tooltip - class="fa fa-question-circle" :title="tooltipTitle" :aria-label="tooltipTitle" + class="fa fa-question-circle" > </i> </p> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue index b404a592234..2133124347c 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue @@ -39,10 +39,10 @@ {{ s__("mrWidget|This merge request failed to be merged automatically") }} </span> <button - @click="refreshWidget" :disabled="isRefreshing" type="button" class="btn btn-sm btn-default" + @click="refreshWidget" > <loading-icon v-if="isRefreshing" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue index caeaac75b45..ae6630dcd6f 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue @@ -11,8 +11,8 @@ <template> <div class="mr-widget-body media"> <status-icon - status="loading" :show-disabled-button="true" + status="loading" /> <div class="media-body space-children"> <span class="bold"> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue index 5c1500ab801..dff9ec657b9 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue @@ -20,8 +20,8 @@ <template> <div class="mr-widget-body media"> <status-icon - status="warning" :show-disabled-button="true" + status="warning" /> <div class="media-body space-children"> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue index df866ed5706..c302960f16e 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue @@ -80,14 +80,14 @@ export default { </template> <template v-else> <status-icon - status="warning" :show-disabled-button="true" + status="warning" /> <div class="media-body space-children"> <span class="bold"> <span + v-if="mr.mergeError" class="has-error-message" - v-if="mergeError" > {{ mergeError }}. </span> @@ -101,9 +101,9 @@ export default { </span> </span> <button - @click="refresh" class="btn btn-default btn-sm js-refresh-button" type="button" + @click="refresh" > {{ s__("mrWidget|Refresh now") }} </button> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue index e8352c362d6..0d9a560c88e 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue @@ -90,11 +90,11 @@ </span> <a v-if="mr.canCancelAutomaticMerge" - @click.prevent="cancelAutomaticMerge" :disabled="isCancellingAutoMerge" role="button" href="#" - class="btn btn-sm btn-default js-cancel-auto-merge"> + class="btn btn-sm btn-default js-cancel-auto-merge" + @click.prevent="cancelAutomaticMerge"> <i v-if="isCancellingAutoMerge" class="fa fa-spinner fa-spin" @@ -127,10 +127,10 @@ <a v-if="canRemoveSourceBranch" :disabled="isRemovingSourceBranch" - @click.prevent="removeSourceBranch" role="button" class="btn btn-sm btn-default js-remove-source-branch" href="#" + @click.prevent="removeSourceBranch" > <i v-if="isRemovingSourceBranch" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue index bc95706f47d..985f44dee97 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue @@ -116,44 +116,44 @@ :date-readable="mr.metrics.readableMergedAt" /> <a - v-if="mr.canRevertInCurrentMR" v-tooltip + v-if="mr.canRevertInCurrentMR" + :title="revertTitle" class="btn btn-close btn-sm" href="#modal-revert-commit" data-toggle="modal" data-container="body" - :title="revertTitle" > {{ revertLabel }} </a> <a - v-else-if="mr.revertInForkPath" v-tooltip - class="btn btn-close btn-sm" - data-method="post" + v-else-if="mr.revertInForkPath" :href="mr.revertInForkPath" :title="revertTitle" + class="btn btn-close btn-sm" + data-method="post" > {{ revertLabel }} </a> <a - v-if="mr.canCherryPickInCurrentMR" v-tooltip + v-if="mr.canCherryPickInCurrentMR" + :title="cherryPickTitle" class="btn btn-default btn-sm" href="#modal-cherry-pick-commit" data-toggle="modal" data-container="body" - :title="cherryPickTitle" > {{ cherryPickLabel }} </a> <a - v-else-if="mr.cherryPickInForkPath" v-tooltip - class="btn btn-default btn-sm" - data-method="post" + v-else-if="mr.cherryPickInForkPath" :href="mr.cherryPickInForkPath" :title="cherryPickTitle" + class="btn btn-default btn-sm" + data-method="post" > {{ cherryPickLabel }} </a> @@ -186,10 +186,10 @@ > <span>{{ s__("mrWidget|You can remove source branch now") }}</span> <button - @click="removeSourceBranch" :disabled="isMakingRequest" type="button" class="btn btn-sm btn-default js-remove-branch-button" + @click="removeSourceBranch" > {{ s__("mrWidget|Remove Source Branch") }} </button> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue index 718c0e4b3c6..b0e96f74626 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue @@ -39,8 +39,8 @@ <template> <div class="mr-widget-body media"> <status-icon - status="warning" :show-disabled-button="true" + status="warning" /> <div class="media-body space-children"> @@ -51,9 +51,9 @@ {{ missingBranchNameMessage }} <i v-tooltip - class="fa fa-question-circle" :title="message" :aria-label="message" + class="fa fa-question-circle" > </i> </span> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue index e4af50b09f8..92eee2cf5dd 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue @@ -12,8 +12,8 @@ <template> <div class="mr-widget-body media"> <status-icon - status="success" :show-disabled-button="true" + status="success" /> <div class="media-body space-children"> <span class="bold"> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue index 6d7cc03f7ad..37ee5215cea 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue @@ -11,8 +11,8 @@ <template> <div class="mr-widget-body media"> <status-icon - status="warning" :show-disabled-button="true" + status="warning" /> <div class="media-body space-children"> <span class="bold"> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue index 143fd328d88..2d8c3d6be87 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue @@ -110,9 +110,9 @@ js-toggle-container accept-action media space-children" > <button + :disabled="isMakingRequest" type="button" class="btn btn-sm btn-reopen btn-success qa-mr-rebase-button" - :disabled="isMakingRequest" @click="rebase" > <loading-icon v-if="isMakingRequest" /> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue index 875c3323dbb..25c1044fe2b 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue @@ -37,23 +37,23 @@ export default { <div class="accept-control inline"> <label class="merge-param-checkbox"> <input + :disabled="isMergeButtonDisabled" + v-model="squashBeforeMerge" type="checkbox" name="squash" class="qa-squash-checkbox" - :disabled="isMergeButtonDisabled" - v-model="squashBeforeMerge" @change="updateSquashModel" /> {{ __('Squash commits') }} </label> <a + v-tooltip :href="mr.squashBeforeMergeHelpPath" data-title="About this feature" data-placement="bottom" target="_blank" rel="noopener noreferrer nofollow" data-container="body" - v-tooltip > <icon name="question-o" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue index 8d55477929f..2bb1a34412e 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue @@ -12,8 +12,8 @@ export default { <template> <div class="mr-widget-body media"> <status-icon - status="warning" :show-disabled-button="true" + status="warning" /> <div class="media-body space-children"> <span class="bold"> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue index 3a194320bd8..fe777a07189 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue @@ -235,11 +235,11 @@ export default { <div class="mr-widget-body-controls media space-children"> <span class="btn-group append-bottom-5"> <button - @click="handleMergeButtonClick()" :disabled="isMergeButtonDisabled" :class="mergeButtonClass" type="button" - class="qa-merge-button"> + class="qa-merge-button" + @click="handleMergeButtonClick()"> <i v-if="isMakingRequest" class="fa fa-spinner fa-spin" @@ -265,28 +265,28 @@ export default { role="menu"> <li> <a - @click.prevent="handleMergeButtonClick(true)" class="merge_when_pipeline_succeeds" - href="#"> + href="#" + @click.prevent="handleMergeButtonClick(true)"> <span class="media"> <span - v-html="successSvg" class="merge-opt-icon" - aria-hidden="true"></span> + aria-hidden="true" + v-html="successSvg"></span> <span class="media-body merge-opt-title">Merge when pipeline succeeds</span> </span> </a> </li> <li> <a - @click.prevent="handleMergeButtonClick(false, true)" class="accept-merge-request" - href="#"> + href="#" + @click.prevent="handleMergeButtonClick(false, true)"> <span class="media"> <span - v-html="warningSvg" class="merge-opt-icon" - aria-hidden="true"></span> + aria-hidden="true" + v-html="warningSvg"></span> <span class="media-body merge-opt-title">Merge immediately</span> </span> </a> @@ -299,8 +299,8 @@ export default { <input id="remove-source-branch-input" v-model="removeSourceBranch" - class="js-remove-source-branch-checkbox" :disabled="isRemoveSourceBranchButtonDisabled" + class="js-remove-source-branch-checkbox" type="checkbox"/> Remove source branch </label> @@ -317,10 +317,10 @@ export default { </span> <button v-else - @click="toggleCommitMessageEditor" :disabled="isMergeButtonDisabled" class="js-modify-commit-message-button btn btn-default btn-sm" - type="button"> + type="button" + @click="toggleCommitMessageEditor"> Modify commit message </button> </template> @@ -356,8 +356,8 @@ export default { </p> <div class="hint"> <a - @click.prevent="updateCommitMessage" href="#" + @click.prevent="updateCommitMessage" > {{ commitMessageLinkTitle }} </a> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue index 7cc07401911..16c903c923f 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue @@ -12,8 +12,8 @@ export default { <template> <div class="mr-widget-body media"> <status-icon - status="warning" :show-disabled-button="true" + status="warning" /> <div class="media-body space-children"> <span class="bold"> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue index 8ea3f22ecc2..5eb2058a03b 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue @@ -18,8 +18,8 @@ export default { <template> <div class="mr-widget-body media"> <status-icon - status="warning" :show-disabled-button="true" + status="warning" /> <div class="media-body space-children"> <span class="bold"> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue index fe2608e8212..7078e19d8bf 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue @@ -43,8 +43,8 @@ export default { <template> <div class="mr-widget-body media"> <status-icon - status="warning" :show-disabled-button="Boolean(mr.removeWIPPath)" + status="warning" /> <div class="media-body space-children"> <span class="bold"> @@ -60,10 +60,10 @@ export default { </span> <button v-if="mr.removeWIPPath" - @click="removeWIP" :disabled="isMakingRequest" type="button" - class="btn btn-default btn-xs js-remove-wip"> + class="btn btn-default btn-xs js-remove-wip" + @click="removeWIP"> <i v-if="isMakingRequest" class="fa fa-spinner fa-spin" diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue index 098e8178265..bc4ba3d050b 100644 --- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue +++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue @@ -283,8 +283,8 @@ export default { /> </div> <div - class="mr-widget-footer" v-if="shouldRenderMergeHelp" + class="mr-widget-footer" > <mr-widget-merge-help /> </div> diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue index 0d64efcbf68..a2518e2a611 100644 --- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue +++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue @@ -50,9 +50,9 @@ export default { </script> <template> <a + v-tooltip :href="status.details_path" :class="cssClass" - v-tooltip :title="!showText ? status.text : ''" > <ci-icon :status="status" /> diff --git a/app/assets/javascripts/vue_shared/components/clipboard_button.vue b/app/assets/javascripts/vue_shared/components/clipboard_button.vue index cb2cc3901ad..dc5760bce28 100644 --- a/app/assets/javascripts/vue_shared/components/clipboard_button.vue +++ b/app/assets/javascripts/vue_shared/components/clipboard_button.vue @@ -49,14 +49,14 @@ export default { <template> <button - type="button" - class="btn" + v-tooltip :class="cssClass" :title="title" :data-clipboard-text="text" - v-tooltip :data-container="tooltipContainer" :data-placement="tooltipPlacement" + type="button" + class="btn" > <i aria-hidden="true" diff --git a/app/assets/javascripts/vue_shared/components/commit.vue b/app/assets/javascripts/vue_shared/components/commit.vue index 8f250a6c989..13bca99dcb3 100644 --- a/app/assets/javascripts/vue_shared/components/commit.vue +++ b/app/assets/javascripts/vue_shared/components/commit.vue @@ -124,11 +124,11 @@ export default { </div> <a - class="ref-name" - :href="commitRef.ref_url" v-tooltip - data-container="body" + :href="commitRef.ref_url" :title="commitRef.name" + class="ref-name" + data-container="body" > {{ commitRef.name }} </a> @@ -139,8 +139,8 @@ export default { /> <a - class="commit-sha" :href="commitUrl" + class="commit-sha" > {{ shortSha }} </a> @@ -152,15 +152,15 @@ export default { > <user-avatar-link v-if="hasAuthor" - class="avatar-image-container" :link-href="author.path" :img-src="author.avatar_url" :img-alt="userImageAltDescription" :tooltip-text="author.username" + class="avatar-image-container" /> <a - class="commit-row-message" :href="commitUrl" + class="commit-row-message" > {{ title }} </a> diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue index c274d3ab590..f1ef50d0e3d 100644 --- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue @@ -44,9 +44,9 @@ export default { download target="_blank"> <icon + :size="16" name="download" css-classes="float-left append-right-8" - :size="16" /> {{ __('Download') }} </a> diff --git a/app/assets/javascripts/vue_shared/components/deprecated_modal.vue b/app/assets/javascripts/vue_shared/components/deprecated_modal.vue index 424af5a0293..9c1e5c68649 100644 --- a/app/assets/javascripts/vue_shared/components/deprecated_modal.vue +++ b/app/assets/javascripts/vue_shared/components/deprecated_modal.vue @@ -86,8 +86,8 @@ <div class="modal-open"> <div :id="id" - class="modal" :class="id ? '' : 'd-block'" + class="modal" role="dialog" tabindex="-1" > @@ -105,9 +105,9 @@ <button type="button" class="close float-right" - @click="emitCancel($event)" data-dismiss="modal" aria-label="Close" + @click="emitCancel($event)" > <span aria-hidden="true">×</span> </button> @@ -115,22 +115,22 @@ </div> <div class="modal-body"> <slot - name="body" :text="text" + name="body" > <p>{{ text }}</p> </slot> </div> <div - class="modal-footer" v-if="!hideFooter" + class="modal-footer" > <button + :class="btnCancelKindClass" type="button" class="btn" - :class="btnCancelKindClass" - @click="emitCancel($event)" data-dismiss="modal" + @click="emitCancel($event)" > {{ closeButtonLabel }} </button> @@ -151,12 +151,12 @@ <button v-if="primaryButtonLabel" - type="button" - class="btn js-primary-button" :disabled="submitDisabled" :class="btnKindClass" - @click="emitSubmit($event)" + type="button" + class="btn js-primary-button" data-dismiss="modal" + @click="emitSubmit($event)" > {{ primaryButtonLabel }} </button> diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue index 4eca3fd4e97..2c47f5b9b35 100644 --- a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue @@ -57,8 +57,8 @@ export default { <template> <div - class="diff-file preview-container" - v-if="viewer"> + v-if="viewer" + class="diff-file preview-container"> <component :is="viewer" :diff-mode="diffMode" diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue index efcc39197b0..38e881d17a2 100644 --- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue @@ -104,18 +104,18 @@ export default { <template> <div class="onion-skin view"> <div - class="onion-skin-frame" :style="{ 'width': onionMaxPixelWidth, 'height': onionMaxPixelHeight, 'user-select': dragging === true ? 'none' : '', - }"> + }" + class="onion-skin-frame"> <div - class="frame deleted" :style="{ 'width': onionMaxPixelWidth, 'height': onionMaxPixelHeight, - }"> + }" + class="frame deleted"> <image-viewer key="onionOldImg" :render-info="false" @@ -125,13 +125,13 @@ export default { /> </div> <div - class="added frame" ref="addedFrame" :style="{ 'opacity': onionOpacity, 'width': onionMaxPixelWidth, 'height': onionMaxPixelHeight, - }"> + }" + class="added frame"> <image-viewer key="onionNewImg" :render-info="false" @@ -143,14 +143,14 @@ export default { <div class="controls"> <div class="transparent"></div> <div - class="drag-track" ref="dragTrack" + class="drag-track" @mousedown="startDrag" @mouseup="stopDrag"> <div - class="dragger" ref="dragger" - :style="{ 'left': onionDraggerPixelPos }"> + :style="{ 'left': onionDraggerPixelPos }" + class="dragger"> </div> </div> <div class="opaque"></div> diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue index fc513ebfce1..86366c799a2 100644 --- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue @@ -111,12 +111,12 @@ export default { <template> <div class="swipe view"> <div - class="swipe-frame" ref="swipeFrame" :style="{ 'width': swipeMaxPixelWidth, 'height': swipeMaxPixelHeight, - }"> + }" + class="swipe-frame"> <div class="frame deleted"> <image-viewer key="swipeOldImg" @@ -128,12 +128,12 @@ export default { /> </div> <div - class="swipe-wrap" ref="swipeWrap" :style="{ 'width': swipeWrapPixelWidth, 'height': swipeMaxPixelHeight, - }"> + }" + class="swipe-wrap"> <div class="frame added"> <image-viewer key="swipeNewImg" @@ -145,11 +145,11 @@ export default { </div> </div> <span - class="swipe-bar" ref="swipeBar" + :style="{ 'left': swipeBarPixelPos }" + class="swipe-bar" @mousedown="startDrag" - @mouseup="stopDrag" - :style="{ 'left': swipeBarPixelPos }"> + @mouseup="stopDrag"> <span class="top-handle"></span> <span class="bottom-handle"></span> </span> diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue index 43b28f96a06..1af85283277 100644 --- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue @@ -49,8 +49,8 @@ export default { <template> <div class="diff-file-container"> <div - class="diff-viewer" - v-if="diffMode === $options.diffModes.replaced"> + v-if="diffMode === $options.diffModes.replaced" + class="diff-viewer"> <div class="image js-replaced-image"> <two-up-viewer v-if="mode === $options.imageViewMode.twoup" diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue index c159333d89a..3cba0c5e633 100644 --- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue +++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue @@ -28,11 +28,11 @@ export default { <template> <button + :disabled="isDisabled || isLoading" class="dropdown-menu-toggle dropdown-menu-full-width" type="button" data-toggle="dropdown" aria-expanded="false" - :disabled="isDisabled || isLoading" > <loading-icon v-show="isLoading" @@ -42,8 +42,8 @@ export default { {{ toggleText }} </span> <span - class="dropdown-toggle-icon" v-show="!isLoading" + class="dropdown-toggle-icon" > <i class="fa fa-chevron-down" diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue index 1fe27eb97ab..b7a4613bdd2 100644 --- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue +++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue @@ -15,8 +15,8 @@ export default { <template> <input - type="hidden" :name="name" :value="value" + type="hidden" /> </template> diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue index c2145a26e64..7f1912f6405 100644 --- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue +++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue @@ -23,10 +23,10 @@ export default { <template> <div class="dropdown-input"> <input - class="dropdown-input-field" - type="search" v-model="searchQuery" :placeholder="placeholderText" + class="dropdown-input-field" + type="search" autocomplete="off" /> <i diff --git a/app/assets/javascripts/vue_shared/components/expand_button.vue b/app/assets/javascripts/vue_shared/components/expand_button.vue index 9295be3e2b2..0fdea651130 100644 --- a/app/assets/javascripts/vue_shared/components/expand_button.vue +++ b/app/assets/javascripts/vue_shared/components/expand_button.vue @@ -32,10 +32,10 @@ export default { <template> <span> <button - type="button" v-show="isCollapsed" - class="text-expander btn-blank" :aria-label="ariaLabel" + type="button" + class="text-expander btn-blank" @click="onClick"> ... </button> diff --git a/app/assets/javascripts/vue_shared/components/file_icon.vue b/app/assets/javascripts/vue_shared/components/file_icon.vue index be2755452e2..878c805ada5 100644 --- a/app/assets/javascripts/vue_shared/components/file_icon.vue +++ b/app/assets/javascripts/vue_shared/components/file_icon.vue @@ -73,8 +73,8 @@ export default { <template> <span> <svg - :class="[iconSizeClass, cssClasses]" v-if="!loading && !folder" + :class="[iconSizeClass, cssClasses]" > <use v-bind="{ 'xlink:href':spriteHref }" /> </svg> diff --git a/app/assets/javascripts/vue_shared/components/gl_modal.vue b/app/assets/javascripts/vue_shared/components/gl_modal.vue index 7ba58bd5959..c03a342e777 100644 --- a/app/assets/javascripts/vue_shared/components/gl_modal.vue +++ b/app/assets/javascripts/vue_shared/components/gl_modal.vue @@ -57,8 +57,8 @@ export default { role="dialog" > <div - class="modal-dialog" :class="modalSizeClass" + class="modal-dialog" role="document" > <div class="modal-content"> @@ -70,10 +70,10 @@ export default { </slot> </h4> <button + :aria-label="s__('Modal|Close')" type="button" class="close js-modal-close-action" data-dismiss="modal" - :aria-label="s__('Modal|Close')" @click="emitCancel($event)" > <span aria-hidden="true">×</span> @@ -96,9 +96,9 @@ export default { {{ s__('Modal|Cancel') }} </button> <button + :class="`btn-${footerPrimaryButtonVariant}`" type="button" class="btn js-modal-primary-action" - :class="`btn-${footerPrimaryButtonVariant}`" data-dismiss="modal" @click="emitSubmit($event)" > diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue index ca17fa06a00..62d35f6547d 100644 --- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue +++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue @@ -117,8 +117,8 @@ export default { </section> <section - class="header-action-buttons" v-if="actions.length" + class="header-action-buttons" > <template v-for="(action, i) in actions" @@ -135,21 +135,21 @@ export default { <a v-else-if="action.type === 'ujs-link'" :href="action.path" - data-method="post" - rel="nofollow" :class="action.cssClass" :key="i" + data-method="post" + rel="nofollow" > {{ action.label }} </a> <button v-else-if="action.type === 'button'" - @click="onClickAction(action)" :disabled="action.isLoading" :class="action.cssClass" - type="button" :key="i" + type="button" + @click="onClickAction(action)" > {{ action.label }} <i @@ -162,11 +162,11 @@ export default { </template> <button v-if="hasSidebarButton" + id="toggleSidebar" type="button" class="btn btn-default d-block d-sm-none d-md-none sidebar-toggle-btn js-sidebar-build-toggle js-sidebar-build-toggle-header" aria-label="Toggle Sidebar" - id="toggleSidebar" > <i class="fa fa-angle-double-left" diff --git a/app/assets/javascripts/vue_shared/components/identicon.vue b/app/assets/javascripts/vue_shared/components/identicon.vue index 23010f40f26..4ffc811e714 100644 --- a/app/assets/javascripts/vue_shared/components/identicon.vue +++ b/app/assets/javascripts/vue_shared/components/identicon.vue @@ -43,9 +43,9 @@ export default { <template> <div - class="avatar identicon" :class="sizeClass" - :style="identiconStyles"> + :style="identiconStyles" + class="avatar identicon"> {{ identiconTitle }} </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue index 3d39b3ab173..ca8ce554588 100644 --- a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue +++ b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue @@ -33,11 +33,11 @@ <template> <div class="issuable-note-warning"> <icon + v-if="!isLockedAndConfidential" :name="warningIcon" :size="16" class="icon inline" aria-hidden="true" - v-if="!isLockedAndConfidential" /> <span v-if="isLockedAndConfidential"> diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue index 88c13a1f340..2ff0c056b9c 100644 --- a/app/assets/javascripts/vue_shared/components/loading_button.vue +++ b/app/assets/javascripts/vue_shared/components/loading_button.vue @@ -54,19 +54,19 @@ <template> <button - @click="onClick" - type="button" :class="containerClass" :disabled="loading || disabled" + type="button" + @click="onClick" > <transition name="fade"> <loading-icon v-if="loading" :inline="true" - class="js-loading-button-icon" :class="{ 'append-right-5': label }" + class="js-loading-button-icon" /> </transition> <transition name="fade"> diff --git a/app/assets/javascripts/vue_shared/components/loading_icon.vue b/app/assets/javascripts/vue_shared/components/loading_icon.vue index 12a75e016d7..db22c5f02cd 100644 --- a/app/assets/javascripts/vue_shared/components/loading_icon.vue +++ b/app/assets/javascripts/vue_shared/components/loading_icon.vue @@ -35,10 +35,10 @@ :is="rootElementType" class="loading-container text-center"> <i - class="fa fa-spin fa-spinner" :class="cssClass" - aria-hidden="true" :aria-label="label" + class="fa fa-spin fa-spinner" + aria-hidden="true" > </i> </component> diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue index 12c7d125062..05e8ed2da2c 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/field.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue @@ -117,17 +117,17 @@ <template> <div - class="md-area js-vue-markdown-field" + ref="gl-form" :class="{ 'prepend-top-default append-bottom-default': addSpacingClasses }" - ref="gl-form"> + class="md-area js-vue-markdown-field"> <markdown-header :preview-markdown="previewMarkdown" @preview-markdown="showPreviewTab" @write-markdown="showWriteTab" /> <div - class="md-write-holder" v-show="!previewMarkdown" + class="md-write-holder" > <div class="zen-backdrop"> <slot name="textarea"></slot> @@ -137,8 +137,8 @@ aria-label="Enter zen mode" > <icon - name="screen-normal" :size="32" + name="screen-normal" /> </a> <markdown-toolbar @@ -149,8 +149,8 @@ </div> </div> <div - class="md md-preview-holder md-preview" v-show="previewMarkdown" + class="md md-preview-holder md-preview" > <div ref="markdown-preview" @@ -164,8 +164,8 @@ <template v-if="previewMarkdown && !markdownPreviewLoading"> <div v-if="referencedCommands" - v-html="referencedCommands" class="referenced-commands" + v-html="referencedCommands" > </div> <div diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue index db453c30576..ee3628b1e3f 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/header.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue @@ -54,8 +54,8 @@ <div class="md-header"> <ul class="nav-links clearfix"> <li - class="md-header-tab" :class="{ active: !previewMarkdown }" + class="md-header-tab" > <a class="js-write-link" @@ -67,8 +67,8 @@ </a> </li> <li - class="md-header-tab" :class="{ active: previewMarkdown }" + class="md-header-tab" > <a class="js-preview-link" @@ -80,8 +80,8 @@ </a> </li> <li - class="md-header-toolbar" :class="{ active: !previewMarkdown }" + class="md-header-toolbar" > <toolbar-button tag="**" @@ -94,8 +94,8 @@ icon="italic" /> <toolbar-button - tag="> " :prepend="true" + tag="> " button-title="Insert a quote" icon="quote" /> @@ -106,20 +106,20 @@ icon="code" /> <toolbar-button - tag="* " :prepend="true" + tag="* " button-title="Add a bullet list" icon="list-bulleted" /> <toolbar-button - tag="1. " :prepend="true" + tag="1. " button-title="Add a numbered list" icon="list-numbered" /> <toolbar-button - tag="* [ ] " :prepend="true" + tag="* [ ] " button-title="Add a task list" icon="task-done" /> diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue index 2d2d69ebeb2..9f1e009efdd 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue @@ -39,15 +39,15 @@ <template> <button v-tooltip - type="button" - class="toolbar-btn js-md" - tabindex="-1" - data-container="body" :data-md-tag="tag" :data-md-block="tagBlock" :data-md-prepend="prepend" :title="buttonTitle" :aria-label="buttonTitle" + type="button" + class="toolbar-btn js-md" + tabindex="-1" + data-container="body" > <icon :name="icon" diff --git a/app/assets/javascripts/vue_shared/components/memory_graph.vue b/app/assets/javascripts/vue_shared/components/memory_graph.vue index b07f6b07afe..522091ea889 100644 --- a/app/assets/javascripts/vue_shared/components/memory_graph.vue +++ b/app/assets/javascripts/vue_shared/components/memory_graph.vue @@ -113,19 +113,19 @@ export default { <template> <div class="memory-graph-container"> <svg - class="has-tooltip" :title="getFormattedMedian" :width="width" :height="height" + class="has-tooltip" xmlns="http://www.w3.org/2000/svg"> <path :d="pathD" :viewBox="pathViewBox" /> <circle - r="1.5" :cx="dotX" :cy="dotY" + r="1.5" tranform="translate(0 -1)" /> </svg> diff --git a/app/assets/javascripts/vue_shared/components/navigation_tabs.vue b/app/assets/javascripts/vue_shared/components/navigation_tabs.vue index 08d4936f480..99d61b5639d 100644 --- a/app/assets/javascripts/vue_shared/components/navigation_tabs.vue +++ b/app/assets/javascripts/vue_shared/components/navigation_tabs.vue @@ -59,9 +59,9 @@ export default { }" > <a + :class="`js-${scope}-tab-${tab.scope}`" role="button" @click="onTabClick(tab)" - :class="`js-${scope}-tab-${tab.scope}`" > {{ tab.name }} diff --git a/app/assets/javascripts/vue_shared/components/panel_resizer.vue b/app/assets/javascripts/vue_shared/components/panel_resizer.vue index abbe9a22717..8c2dcc2d902 100644 --- a/app/assets/javascripts/vue_shared/components/panel_resizer.vue +++ b/app/assets/javascripts/vue_shared/components/panel_resizer.vue @@ -82,9 +82,9 @@ <template> <div - class="dragHandle" :class="className" :style="cursorStyle" + class="dragHandle" @mousedown="startDrag" @dblclick="resetSize" ></div> diff --git a/app/assets/javascripts/vue_shared/components/project_avatar/image.vue b/app/assets/javascripts/vue_shared/components/project_avatar/image.vue index 279cc1de5bb..97ca4d93bd7 100644 --- a/app/assets/javascripts/vue_shared/components/project_avatar/image.vue +++ b/app/assets/javascripts/vue_shared/components/project_avatar/image.vue @@ -85,7 +85,6 @@ <template> <img v-tooltip - class="avatar" :class="{ lazy: lazy, [avatarSizeClass]: true, @@ -99,5 +98,6 @@ :data-container="tooltipContainer" :data-placement="tooltipPlacement" :title="tooltipText" + class="avatar" /> </template> diff --git a/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue index 21ffdc1dc86..a2a9a5e6987 100644 --- a/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue +++ b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue @@ -66,10 +66,10 @@ <template> <deprecated-modal - kind="warning" - class="recaptcha-modal js-recaptcha-modal" :hide-footer="true" :title="__('Please solve the reCAPTCHA')" + kind="warning" + class="recaptcha-modal js-recaptcha-modal" @cancel="close" > <div slot="body"> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue index 71ec34f2c7a..74998a4787d 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue @@ -97,8 +97,8 @@ <template> <div - class="block" :class="blockClass" + class="block" > <div class="issuable-sidebar-header"> <toggle-sidebar @@ -107,8 +107,8 @@ /> </div> <collapsed-calendar-icon - class="sidebar-collapsed-icon" :text="collapsedText" + class="sidebar-collapsed-icon" /> <div class="title"> {{ label }} diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue index f155ac2be02..a3fc358130f 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue @@ -143,8 +143,8 @@ export default { :value="label.id" /> <div - class="dropdown" ref="dropdown" + class="dropdown" > <dropdown-button :ability-name="abilityName" diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue index 47497c1de98..48d2f16f554 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue @@ -53,10 +53,7 @@ export default { <template> <button - type="button" ref="dropdownButton" - class="dropdown-menu-toggle wide js-label-select js-multiselect js-context-config-modal" - data-toggle="dropdown" :class="{ 'js-extra-options': showExtraOptions }" :data-ability-name="abilityName" :data-field-name="fieldName" @@ -64,6 +61,9 @@ export default { :data-labels="labelsPath" :data-namespace-path="namespace" :data-show-any="showExtraOptions" + type="button" + class="dropdown-menu-toggle wide js-label-select js-multiselect js-context-config-modal" + data-toggle="dropdown" > <span class="dropdown-toggle-text"> {{ dropdownToggleText }} diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue index 3c400afdc1d..fe895136ccc 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue @@ -19,9 +19,9 @@ export default { <div class="dropdown-page-two dropdown-new-label"> <div class="dropdown-title"> <button + :aria-label="__('Go back')" type="button" class="dropdown-title-button dropdown-menu-back" - :aria-label="__('Go back')" > <i aria-hidden="true" @@ -32,9 +32,9 @@ export default { </button> {{ headerTitle }} <button + :aria-label="__('Close')" type="button" class="dropdown-title-button dropdown-menu-close" - :aria-label="__('Close')" > <i aria-hidden="true" @@ -48,19 +48,19 @@ export default { <div class="dropdown-labels-error js-label-error"></div> <input id="new_label_name" + :placeholder="__('Name new label')" type="text" class="default-dropdown-input" - :placeholder="__('Name new label')" /> <div class="suggest-colors suggest-colors-dropdown"> <a v-for="(color, index) in suggestedColors" - href="#" :key="index" :data-color="color" :style="{ backgroundColor: color, }" + href="#" > </a> @@ -69,9 +69,9 @@ export default { <div class="dropdown-label-color-preview js-dropdown-label-color-preview"></div> <input id="new_label_color" + :placeholder="__('Assign custom color like #FF0000')" type="text" class="default-dropdown-input" - :placeholder="__('Assign custom color like #FF0000')" /> </div> <div class="clearfix"> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue index 5f61e9fbe80..d64ad016f9b 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue @@ -34,9 +34,9 @@ export default { </li> <li> <a + :href="labelsWebUrl" data-is-link="true" class="dropdown-external-link" - :href="labelsWebUrl" > {{ manageLabelsTitle }} </a> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue index 7664acdf19c..e98b6392827 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue @@ -6,9 +6,9 @@ export default {}; <div class="dropdown-title"> <span>{{ __('Assign labels') }}</span> <button + :aria-label="__('Close')" type="button" class="dropdown-title-button dropdown-menu-close" - :aria-label="__('Close')" > <i aria-hidden="true" diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue index ae633460c95..80d65a2a534 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue @@ -5,10 +5,10 @@ export default {}; <template> <div class="dropdown-input"> <input + :placeholder="__('Search')" autocomplete="off" class="dropdown-input-field" type="search" - :placeholder="__('Search')" /> <i aria-hidden="true" diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue index 88360b46f24..10e990f8a80 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue @@ -36,10 +36,10 @@ export default { <template> <div - class="hide-collapsed value issuable-show-labels js-value" :class="{ 'has-labels':!isEmpty, }" + class="hide-collapsed value issuable-show-labels js-value" > <span v-if="isEmpty" @@ -48,18 +48,18 @@ export default { <slot>{{ __('None') }}</slot> </span> <a - v-else v-for="label in labels" + v-else :key="label.id" :href="labelFilterUrl(label)" > <span v-tooltip + :style="labelStyle(label)" + :title="label.description" class="badge color-label" data-placement="bottom" data-container="body" - :style="labelStyle(label)" - :title="label.description" > {{ label.title }} </span> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue index 68fa2ab8d01..af297f3c408 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue @@ -37,10 +37,10 @@ export default { <template> <div v-tooltip + :title="labelsList" class="sidebar-collapsed-icon" data-placement="left" data-container="body" - :title="labelsList" @click="handleClick" > <i diff --git a/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue b/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue index de6f8c32e74..ac2e99abe77 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue @@ -28,21 +28,21 @@ export default { <template> <button + v-tooltip + :title="tooltipLabel" type="button" class="btn btn-blank gutter-toggle btn-sidebar-action" - @click="toggle" - v-tooltip data-container="body" data-placement="left" - :title="tooltipLabel" + @click="toggle" > <i - aria-label="toggle collapse" - class="fa" :class="{ 'fa-angle-double-right': !collapsed, 'fa-angle-double-left': collapsed }" + aria-label="toggle collapse" + class="fa" > </i> </button> diff --git a/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue b/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue index 16304e4815d..4a5ffbe5d5a 100644 --- a/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue +++ b/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue @@ -22,10 +22,10 @@ <template> <div - class="animation-container" :class="{ 'animation-container-small': small, }" + class="animation-container" > <div v-for="(css, index) in lineClasses" diff --git a/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue b/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue index 86f06c8d266..b1c2df54ef6 100644 --- a/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue +++ b/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue @@ -84,8 +84,8 @@ export default { <template> <div - class="stacked-progress-bar" :class="cssClass" + class="stacked-progress-bar" > <span v-if="!totalCount" @@ -96,30 +96,30 @@ export default { <span v-tooltip v-if="successPercent" - class="status-green" - data-placement="bottom" :title="successTooltip" :style="successBarStyle" + class="status-green" + data-placement="bottom" > {{ successPercent }}% </span> <span v-tooltip v-if="neutralPercent" - class="status-neutral" - data-placement="bottom" :title="neutralTooltip" :style="neutralBarStyle" + class="status-neutral" + data-placement="bottom" > {{ neutralPercent }}% </span> <span v-tooltip v-if="failurePercent" - class="status-red" - data-placement="bottom" :title="failureTooltip" :style="failureBarStyle" + class="status-red" + data-placement="bottom" > {{ failurePercent }}% </span> diff --git a/app/assets/javascripts/vue_shared/components/table_pagination.vue b/app/assets/javascripts/vue_shared/components/table_pagination.vue index 6f231619f26..2370e59d017 100644 --- a/app/assets/javascripts/vue_shared/components/table_pagination.vue +++ b/app/assets/javascripts/vue_shared/components/table_pagination.vue @@ -153,8 +153,8 @@ class="page-item" > <a - @click.prevent="changePage(item.title, item.disabled)" class="page-link" + @click.prevent="changePage(item.title, item.disabled)" > {{ item.title }} </a> diff --git a/app/assets/javascripts/vue_shared/components/tabs/tab.vue b/app/assets/javascripts/vue_shared/components/tabs/tab.vue index 9b2f46186ac..1c6011dcfd0 100644 --- a/app/assets/javascripts/vue_shared/components/tabs/tab.vue +++ b/app/assets/javascripts/vue_shared/components/tabs/tab.vue @@ -36,10 +36,10 @@ export default { <template> <div - class="tab-pane" :class="{ active: localActive }" + class="tab-pane" role="tabpanel" > <slot></slot> diff --git a/app/assets/javascripts/vue_shared/components/toggle_button.vue b/app/assets/javascripts/vue_shared/components/toggle_button.vue index 09031d3ffa1..a897300b62b 100644 --- a/app/assets/javascripts/vue_shared/components/toggle_button.vue +++ b/app/assets/javascripts/vue_shared/components/toggle_button.vue @@ -63,26 +63,26 @@ <label class="toggle-wrapper"> <input v-if="name" - type="hidden" :name="name" :value="value" + type="hidden" /> <button - type="button" - class="project-feature-toggle" :aria-label="ariaLabel" :class="{ 'is-checked': value, 'is-disabled': disabledInput, 'is-loading': isLoading }" + type="button" + class="project-feature-toggle" @click="toggleFeature" > <loadingIcon class="loading-icon" /> <span class="toggle-icon"> <icon - css-classes="toggle-icon-svg" - :name="toggleIcon"/> + :name="toggleIcon" + css-classes="toggle-icon-svg"/> </span> </button> </label> diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue index a5c4fbcce31..3a413c74410 100644 --- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue +++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue @@ -85,8 +85,6 @@ export default { <template> <img v-tooltip - class="avatar" - data-boundary="window" :class="{ lazy: lazy, [avatarSizeClass]: true, @@ -100,5 +98,7 @@ export default { :data-container="tooltipContainer" :data-placement="tooltipPlacement" :title="tooltipText" + class="avatar" + data-boundary="window" /> </template> diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue index 6955d164def..01c36fec41a 100644 --- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue +++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue @@ -84,8 +84,8 @@ export default { <template> <a - class="user-avatar-link" - :href="linkHref"> + :href="linkHref" + class="user-avatar-link"> <user-avatar-image :img-src="imgSrc" :img-alt="imgAlt" @@ -94,8 +94,8 @@ export default { :tooltip-text="avatarTooltipText" :tooltip-placement="tooltipPlacement" /><span - v-if="shouldShowUsername" v-tooltip + v-if="shouldShowUsername" :title="tooltipText" :tooltip-placement="tooltipPlacement" >{{ username }}</span> |