Add latest changes from gitlab-org/gitlab@13-4-stable-ee

6 files changed, 44 insertions, 64 deletions

diff --git a/app/assets/javascripts/boards/components/modal/empty_state.vue b/app/assets/javascripts/boards/components/modal/empty_state.vue
index 66f59009714..cd4512f320f 100644
--- a/app/assets/javascripts/boards/components/modal/empty_state.vue
+++ b/app/assets/javascripts/boards/components/modal/empty_state.vue
@@ -1,9 +1,14 @@
 <script>
+/* eslint-disable vue/no-v-html */
+import { GlButton } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import ModalStore from '../../stores/modal_store';
 import modalMixin from '../../mixins/modal_mixins';
 
 export default {
+  components: {
+    GlButton,
+  },
   mixins: [modalMixin],
   props: {
     newIssuePath: {
@@ -53,17 +58,22 @@ export default {
         <div class="text-content">
           <h4>{{ contents.title }}</h4>
           <p v-html="contents.content"></p>
-          <a v-if="activeTab === 'all'" :href="newIssuePath" class="btn btn-success btn-inverted">{{
-            __('New issue')
-          }}</a>
-          <button
+          <gl-button
+            v-if="activeTab === 'all'"
+            :href="newIssuePath"
+            category="secondary"
+            variant="success"
+          >
+            {{ __('New issue') }}
+          </gl-button>
+          <gl-button
             v-if="activeTab === 'selected'"
-            class="btn btn-default"
-            type="button"
+            category="primary"
+            variant="default"
             @click="changeTab('all')"
           >
             {{ __('Open issues') }}
-          </button>
+          </gl-button>
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/boards/components/modal/footer.vue b/app/assets/javascripts/boards/components/modal/footer.vue
index c4953dda793..d28a03da97f 100644
--- a/app/assets/javascripts/boards/components/modal/footer.vue
+++ b/app/assets/javascripts/boards/components/modal/footer.vue
@@ -1,4 +1,5 @@
 <script>
+import { GlButton } from '@gitlab/ui';
 import footerEEMixin from 'ee_else_ce/boards/mixins/modal_footer';
 import { deprecatedCreateFlash as Flash } from '../../../flash';
 import { __, n__ } from '../../../locale';
@@ -10,6 +11,7 @@ import boardsStore from '../../stores/boards_store';
 export default {
   components: {
     ListsDropdown,
+    GlButton,
   },
   mixins: [modalMixin, footerEEMixin],
   data() {
@@ -65,14 +67,14 @@ export default {
 <template>
   <footer class="form-actions add-issues-footer">
     <div class="float-left">
-      <button :disabled="submitDisabled" class="btn btn-success" type="button" @click="addIssues">
+      <gl-button :disabled="submitDisabled" category="primary" variant="success" @click="addIssues">
         {{ submitText }}
-      </button>
+      </gl-button>
       <span class="inline add-issues-footer-to-list">{{ __('to list') }}</span>
       <lists-dropdown />
     </div>
-    <button class="btn btn-default float-right" type="button" @click="toggleModal(false)">
+    <gl-button class="float-right" @click="toggleModal(false)">
       {{ __('Cancel') }}
-    </button>
+    </gl-button>
   </footer>
 </template>
diff --git a/app/assets/javascripts/boards/components/modal/header.vue b/app/assets/javascripts/boards/components/modal/header.vue
index 573284d2b44..3e96ecca24c 100644
--- a/app/assets/javascripts/boards/components/modal/header.vue
+++ b/app/assets/javascripts/boards/components/modal/header.vue
@@ -1,5 +1,6 @@
 <script>
 /* eslint-disable @gitlab/vue-require-i18n-strings */
+import { GlButton } from '@gitlab/ui';
 import { __ } from '~/locale';
 import ModalFilters from './filters';
 import ModalTabs from './tabs.vue';
@@ -10,6 +11,7 @@ export default {
   components: {
     ModalTabs,
     ModalFilters,
+    GlButton,
   },
   mixins: [modalMixin],
   props: {
@@ -17,10 +19,6 @@ export default {
       type: Number,
       required: true,
     },
-    milestonePath: {
-      type: String,
-      required: true,
-    },
     labelPath: {
       type: String,
       required: true,
@@ -43,7 +41,7 @@ export default {
   },
   methods: {
     toggleAll() {
-      this.$refs.selectAllBtn.blur();
+      this.$refs.selectAllBtn.$el.blur();
 
       ModalStore.toggleAll();
     },
@@ -55,28 +53,28 @@ export default {
     <header class="add-issues-header border-top-0 form-actions">
       <h2 class="m-0">
         Add issues
-        <button
-          type="button"
+        <gl-button
+          category="tertiary"
+          icon="close"
           class="close"
           data-dismiss="modal"
           :aria-label="__('Close')"
           @click="toggleModal(false)"
-        >
-          <span aria-hidden="true">×</span>
-        </button>
+        />
       </h2>
     </header>
     <modal-tabs v-if="!loading && issuesCount > 0" />
     <div v-if="showSearch" class="d-flex gl-mb-3">
       <modal-filters :store="filter" />
-      <button
+      <gl-button
         ref="selectAllBtn"
-        type="button"
-        class="btn btn-success btn-inverted gl-ml-3"
+        category="secondary"
+        variant="success"
+        class="gl-ml-3"
         @click="toggleAll"
       >
         {{ selectAllText }}
-      </button>
+      </gl-button>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/boards/components/modal/index.vue b/app/assets/javascripts/boards/components/modal/index.vue
index 20344b66140..817b3bdddb0 100644
--- a/app/assets/javascripts/boards/components/modal/index.vue
+++ b/app/assets/javascripts/boards/components/modal/index.vue
@@ -26,22 +26,10 @@ export default {
       type: String,
       required: true,
     },
-    issueLinkBase: {
-      type: String,
-      required: true,
-    },
-    rootPath: {
-      type: String,
-      required: true,
-    },
     projectId: {
       type: Number,
       required: true,
     },
-    milestonePath: {
-      type: String,
-      required: true,
-    },
     labelPath: {
       type: String,
       required: true,
@@ -149,17 +137,8 @@ export default {
     class="add-issues-modal d-flex position-fixed position-top-0 position-bottom-0 position-left-0 position-right-0 h-100"
   >
     <div class="add-issues-container d-flex flex-column m-auto rounded">
-      <modal-header
-        :project-id="projectId"
-        :milestone-path="milestonePath"
-        :label-path="labelPath"
-      />
-      <modal-list
-        v-if="!loading && showList && !filterLoading"
-        :issue-link-base="issueLinkBase"
-        :root-path="rootPath"
-        :empty-state-svg="emptyStateSvg"
-      />
+      <modal-header :project-id="projectId" :label-path="labelPath" />
+      <modal-list v-if="!loading && showList && !filterLoading" :empty-state-svg="emptyStateSvg" />
       <empty-state
         v-if="showEmptyState"
         :new-issue-path="newIssuePath"
diff --git a/app/assets/javascripts/boards/components/modal/list.vue b/app/assets/javascripts/boards/components/modal/list.vue
index 78e3351a79e..219263bd9b9 100644
--- a/app/assets/javascripts/boards/components/modal/list.vue
+++ b/app/assets/javascripts/boards/components/modal/list.vue
@@ -1,23 +1,15 @@
 <script>
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import ModalStore from '../../stores/modal_store';
 import IssueCardInner from '../issue_card_inner.vue';
 
 export default {
   components: {
     IssueCardInner,
-    Icon,
+    GlIcon,
   },
   props: {
-    issueLinkBase: {
-      type: String,
-      required: true,
-    },
-    rootPath: {
-      type: String,
-      required: true,
-    },
     emptyStateSvg: {
       type: String,
       required: true,
@@ -134,8 +126,8 @@ export default {
           class="board-card position-relative p-3 rounded"
           @click="toggleIssue($event, issue)"
         >
-          <issue-card-inner :issue="issue" :issue-link-base="issueLinkBase" :root-path="rootPath" />
-          <icon
+          <issue-card-inner :issue="issue" />
+          <gl-icon
             v-if="issue.selected"
             :aria-label="'Issue #' + issue.id + ' selected'"
             name="mobile-issue-close"
diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
index 3fbe8fe1be7..fe10e7fb856 100644
--- a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
+++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
@@ -1,13 +1,12 @@
 <script>
-import { GlLink } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlLink, GlIcon } from '@gitlab/ui';
 import ModalStore from '../../stores/modal_store';
 import boardsStore from '../../stores/boards_store';
 
 export default {
   components: {
     GlLink,
-    Icon,
+    GlIcon,
   },
   data() {
     return {
@@ -29,7 +28,7 @@ export default {
   <div class="dropdown inline">
     <button class="dropdown-menu-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
       <span :style="{ backgroundColor: selected.label.color }" class="dropdown-label-box"> </span>
-      {{ selected.title }} <icon name="chevron-down" />
+      {{ selected.title }} <gl-icon name="chevron-down" class="dropdown-menu-toggle-icon" />
     </button>
     <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
       <ul>