Merge branch 'boards/bug-fix-list-setting-and-tooltip' into 'master'

Boards - Fix button closing tag

See merge request gitlab-org/gitlab!45608

app/assets/javascripts/boards/components/board_extra_actions.vue

+<script>
+import { GlTooltip, GlButton } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  name: 'BoardExtraActions',
+  components: {
+    GlTooltip,
+    GlButton,
+  },
+  props: {
+    canAdminList: {
+      type: Boolean,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
+    openModal: {
+      type: Function,
+      required: true,
+    },
+  },
+  computed: {
+    tooltipTitle() {
+      if (this.disabled) {
+        return __('Please add a list to your board first');
+      }
+
+      return '';
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="board-extra-actions">
+    <span ref="addIssuesButtonTooltip" class="gl-ml-3">
+      <gl-button
+        v-if="canAdminList"
+        type="button"
+        data-placement="bottom"
+        data-track-event="click_button"
+        data-track-label="board_add_issues"
+        :disabled="disabled"
+        :aria-disabled="disabled"
+        @click="openModal"
+      >
+        {{ __('Add issues') }}
+      </gl-button>
+    </span>
+    <gl-tooltip v-if="disabled" :target="() => $refs.addIssuesButtonTooltip" placement="bottom">
+      {{ tooltipTitle }}
+    </gl-tooltip>
+  </div>
+</template>

app/assets/javascripts/boards/components/board_settings_sidebar.vue

@@ -34,14 +34,14 @@ export default {
     },
   },
   computed: {
-    ...mapGetters(['isSidebarOpen']),
+    ...mapGetters(['isSidebarOpen', 'shouldUseGraphQL']),
     ...mapState(['activeId', 'sidebarType', 'boardLists']),
     activeList() {
       /*
         Warning: Though a computed property it is not reactive because we are
         referencing a List Model class. Reactivity only applies to plain JS objects
       */
-      if (this.glFeatures.graphqlBoardLists) {
+      if (this.shouldUseGraphQL) {
         return this.boardLists[this.activeId];
       }
       return boardsStore.state.lists.find(({ id }) => id === this.activeId);

app/assets/javascripts/boards/index.js

 import Vue from 'vue';
 import { mapActions, mapState } from 'vuex';
-import { GlTooltip, GlButton } from '@gitlab/ui';
 
 import 'ee_else_ce/boards/models/issue';
 import 'ee_else_ce/boards/models/list';
@@ -19,6 +18,7 @@ import {
 
 import VueApollo from 'vue-apollo';
 import BoardContent from '~/boards/components/board_content.vue';
+import BoardExtraActions from '~/boards/components/board_extra_actions.vue';
 import createDefaultClient from '~/lib/graphql';
 import { deprecatedCreateFlash as Flash } from '~/flash';
 import { __ } from '~/locale';
@@ -299,10 +299,6 @@ export default () => {
     // eslint-disable-next-line no-new
     new Vue({
       el: issueBoardsModal,
-      components: {
-        GlTooltip,
-        GlButton,
-      },
       mixins: [modalMixin],
       data() {
         return {
@@ -319,13 +315,6 @@ export default () => {
           }
           return !this.store.lists.filter(list => !list.preset).length;
         },
-        tooltipTitle() {
-          if (this.disabled) {
-            return __('Please add a list to your board first');
-          }
-
-          return '';
-        },
       },
       methods: {
         openModal() {
@@ -334,29 +323,15 @@ export default () => {
           }
         },
       },
-      template: `
-        <div class="board-extra-actions">
-          <span ref="addIssuesButtonTooltip" class="gl-ml-3">
-            <gl-button
-              type="button"
-              data-placement="bottom"
-              data-track-event="click_button"
-              data-track-label="board_add_issues"
-              :disabled="disabled"
-              :aria-disabled="disabled"
-              v-if="canAdminList"
-              @click="openModal">
-              Add issues
-            </button>
-          </span>
-          <gl-tooltip
-            v-if="disabled"
-            :target="() => $refs.addIssuesButtonTooltip"
-            placement="bottom">
-            {{tooltipTitle}}
-          </gl-tooltip>
-        </div>
-      `,
+      render(createElement) {
+        return createElement(BoardExtraActions, {
+          props: {
+            canAdminList: this.$options.el.hasAttribute('data-can-admin-list'),
+            openModal: this.openModal,
+            disabled: this.disabled,
+          },
+        });
+      },
     });
   }