Reduce usage of global namespace in issue boards44224-reduce-gl

5 files changed, 157 insertions, 145 deletions

diff --git a/app/assets/javascripts/boards/components/modal/empty_state.js b/app/assets/javascripts/boards/components/modal/empty_state.js
deleted file mode 100644
index 9e37f95cdd6..00000000000
--- a/app/assets/javascripts/boards/components/modal/empty_state.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import Vue from 'vue';
-import ModalStore from '../../stores/modal_store';
-import modalMixin from '../../mixins/modal_mixins';
-
-gl.issueBoards.ModalEmptyState = Vue.extend({
-  mixins: [modalMixin],
-  data() {
-    return ModalStore.store;
-  },
-  props: {
-    newIssuePath: {
-      type: String,
-      required: true,
-    },
-    emptyStateSvg: {
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    contents() {
-      const obj = {
-        title: 'You haven\'t added any issues to your project yet',
-        content: `
-          An issue can be a bug, a todo or a feature request that needs to be
-          discussed in a project. Besides, issues are searchable and filterable.
-        `,
-      };
-
-      if (this.activeTab === 'selected') {
-        obj.title = 'You haven\'t selected any issues yet';
-        obj.content = `
-          Go back to <strong>Open issues</strong> and select some issues
-          to add to your board.
-        `;
-      }
-
-      return obj;
-    },
-  },
-  template: `
-    <section class="empty-state">
-      <div class="row">
-        <div class="col-xs-12 col-sm-6 col-sm-push-6">
-          <aside class="svg-content"><img :src="emptyStateSvg"/></aside>
-        </div>
-        <div class="col-xs-12 col-sm-6 col-sm-pull-6">
-          <div class="text-content">
-            <h4>{{ contents.title }}</h4>
-            <p v-html="contents.content"></p>
-            <a
-              :href="newIssuePath"
-              class="btn btn-success btn-inverted"
-              v-if="activeTab === 'all'">
-              New issue
-            </a>
-            <button
-              type="button"
-              class="btn btn-default"
-              @click="changeTab('all')"
-              v-if="activeTab === 'selected'">
-              Open issues
-            </button>
-          </div>
-        </div>
-      </div>
-    </section>
-  `,
-});
diff --git a/app/assets/javascripts/boards/components/modal/empty_state.vue b/app/assets/javascripts/boards/components/modal/empty_state.vue
new file mode 100644
index 00000000000..4e45a30d044
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/empty_state.vue
@@ -0,0 +1,72 @@
+<script>
+import ModalStore from '../../stores/modal_store';
+import modalMixin from '../../mixins/modal_mixins';
+
+export default {
+  mixins: [modalMixin],
+  props: {
+    newIssuePath: {
+      type: String,
+      required: true,
+    },
+    emptyStateSvg: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return ModalStore.store;
+  },
+  computed: {
+    contents() {
+      const obj = {
+        title: "You haven't added any issues to your project yet",
+        content: `
+          An issue can be a bug, a todo or a feature request that needs to be
+          discussed in a project. Besides, issues are searchable and filterable.
+        `,
+      };
+
+      if (this.activeTab === 'selected') {
+        obj.title = "You haven't selected any issues yet";
+        obj.content = `
+          Go back to <strong>Open issues</strong> and select some issues
+          to add to your board.
+        `;
+      }
+
+      return obj;
+    },
+  },
+};
+</script>
+<template>
+  <section class="empty-state">
+    <div class="row">
+      <div class="col-xs-12 col-sm-6 col-sm-push-6">
+        <aside class="svg-content"><img :src="emptyStateSvg"/></aside>
+      </div>
+      <div class="col-xs-12 col-sm-6 col-sm-pull-6">
+        <div class="text-content">
+          <h4>{{ contents.title }}</h4>
+          <p v-html="contents.content"></p>
+          <a
+            :href="newIssuePath"
+            class="btn btn-success btn-inverted"
+            v-if="activeTab === 'all'"
+          >
+            New issue
+          </a>
+          <button
+            type="button"
+            class="btn btn-default"
+            @click="changeTab('all')"
+            v-if="activeTab === 'selected'"
+          >
+            Open issues
+          </button>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/app/assets/javascripts/boards/components/modal/footer.js b/app/assets/javascripts/boards/components/modal/footer.vue
index 9735e0ddacc..b373c65685e 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js
+++ b/app/assets/javascripts/boards/components/modal/footer.vue
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+<script>
 import Flash from '../../../flash';
 import { __ } from '../../../locale';
 import './lists_dropdown';
@@ -6,7 +6,10 @@ import { pluralize } from '../../../lib/utils/text_utility';
 import ModalStore from '../../stores/modal_store';
 import modalMixin from '../../mixins/modal_mixins';
 
-gl.issueBoards.ModalFooter = Vue.extend({
+export default {
+  components: {
+    'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown,
+  },
   mixins: [modalMixin],
   data() {
     return {
@@ -32,19 +35,21 @@ gl.issueBoards.ModalFooter = Vue.extend({
       const issueIds = selectedIssues.map(issue => issue.id);
 
       // Post the data to the backend
-      gl.boardService.bulkUpdate(issueIds, {
-        add_label_ids: [list.label.id],
-      }).catch(() => {
-        Flash(__('Failed to update issues, please try again.'));
+      gl.boardService
+        .bulkUpdate(issueIds, {
+          add_label_ids: [list.label.id],
+        })
+        .catch(() => {
+          Flash(__('Failed to update issues, please try again.'));
 
-        selectedIssues.forEach((issue) => {
-          list.removeIssue(issue);
-          list.issuesSize -= 1;
+          selectedIssues.forEach(issue => {
+            list.removeIssue(issue);
+            list.issuesSize -= 1;
+          });
         });
-      });
 
       // Add the issues on the frontend
-      selectedIssues.forEach((issue) => {
+      selectedIssues.forEach(issue => {
         list.addIssue(issue);
         list.issuesSize += 1;
       });
@@ -52,31 +57,31 @@ gl.issueBoards.ModalFooter = Vue.extend({
       this.toggleModal(false);
     },
   },
-  components: {
-    'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown,
-  },
-  template: `
-    <footer
-      class="form-actions add-issues-footer">
-      <div class="pull-left">
-        <button
-          class="btn btn-success"
-          type="button"
-          :disabled="submitDisabled"
-          @click="addIssues">
-          {{ submitText }}
-        </button>
-        <span class="inline add-issues-footer-to-list">
-          to list
-        </span>
-        <lists-dropdown></lists-dropdown>
-      </div>
+
+};
+</script>
+<template>
+  <footer class="form-actions add-issues-footer">
+    <div class="pull-left">
       <button
-        class="btn btn-default pull-right"
+        class="btn btn-success"
         type="button"
-        @click="toggleModal(false)">
-        Cancel
+        :disabled="submitDisabled"
+        @click="addIssues"
+      >
+        {{ submitText }}
       </button>
-    </footer>
-  `,
-});
+      <span class="inline add-issues-footer-to-list">
+        to list
+      </span>
+      <lists-dropdown/>
+    </div>
+    <button
+      class="btn btn-default pull-right"
+      type="button"
+      @click="toggleModal(false)"
+    >
+      Cancel
+    </button>
+  </footer>
+</template>
diff --git a/app/assets/javascripts/boards/components/modal/header.js b/app/assets/javascripts/boards/components/modal/header.vue
index 67c29ebca72..d880564318a 100644
--- a/app/assets/javascripts/boards/components/modal/header.js
+++ b/app/assets/javascripts/boards/components/modal/header.vue
@@ -1,10 +1,14 @@
-import Vue from 'vue';
+<script>
 import modalFilters from './filters';
 import './tabs';
 import ModalStore from '../../stores/modal_store';
 import modalMixin from '../../mixins/modal_mixins';
 
-gl.issueBoards.ModalHeader = Vue.extend({
+export default {
+  components: {
+    'modal-tabs': gl.issueBoards.ModalTabs,
+    modalFilters,
+  },
   mixins: [modalMixin],
   props: {
     projectId: {
@@ -42,38 +46,38 @@ gl.issueBoards.ModalHeader = Vue.extend({
       ModalStore.toggleAll();
     },
   },
-  components: {
-    'modal-tabs': gl.issueBoards.ModalTabs,
-    modalFilters,
-  },
-  template: `
-    <div>
-      <header class="add-issues-header form-actions">
-        <h2>
-          Add issues
-          <button
-            type="button"
-            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"></modal-tabs>
-      <div
-        class="add-issues-search append-bottom-10"
-        v-if="showSearch">
-        <modal-filters :store="filter" />
+};
+</script>
+<template>
+  <div>
+    <header class="add-issues-header form-actions">
+      <h2>
+        Add issues
         <button
           type="button"
-          class="btn btn-success btn-inverted prepend-left-10"
-          ref="selectAllBtn"
-          @click="toggleAll">
-          {{ selectAllText }}
+          class="close"
+          data-dismiss="modal"
+          aria-label="Close"
+          @click="toggleModal(false)"
+        >
+          <span aria-hidden="true">×</span>
         </button>
-      </div>
+      </h2>
+    </header>
+    <modal-tabs v-if="!loading && issuesCount > 0" />
+    <div
+      class="add-issues-search append-bottom-10"
+      v-if="showSearch"
+    >
+      <modal-filters :store="filter" />
+      <button
+        type="button"
+        class="btn btn-success btn-inverted prepend-left-10"
+        ref="selectAllBtn"
+        @click="toggleAll"
+      >
+        {{ selectAllText }}
+      </button>
     </div>
-  `,
-});
+  </div>
+</template>
diff --git a/app/assets/javascripts/boards/components/modal/index.js b/app/assets/javascripts/boards/components/modal/index.js
index 3083b3e4405..ecf06f6fdd5 100644
--- a/app/assets/javascripts/boards/components/modal/index.js
+++ b/app/assets/javascripts/boards/components/modal/index.js
@@ -3,10 +3,10 @@
 import Vue from 'vue';
 import queryData from '~/boards/utils/query_data';
 import loadingIcon from '~/vue_shared/components/loading_icon.vue';
-import './header';
+import ModalHeader from './header.vue';
 import './list';
-import './footer';
-import './empty_state';
+import ModalFooter from './footer.vue';
+import ModalEmptyState from './empty_state.vue';
 import ModalStore from '../../stores/modal_store';
 
 gl.issueBoards.IssuesModal = Vue.extend({
@@ -132,10 +132,10 @@ gl.issueBoards.IssuesModal = Vue.extend({
     this.page = 1;
   },
   components: {
-    'modal-header': gl.issueBoards.ModalHeader,
+    ModalHeader,
     'modal-list': gl.issueBoards.ModalList,
-    'modal-footer': gl.issueBoards.ModalFooter,
-    'empty-state': gl.issueBoards.ModalEmptyState,
+    ModalFooter,
+    ModalEmptyState,
     loadingIcon,
   },
   template: `
@@ -153,7 +153,7 @@ gl.issueBoards.IssuesModal = Vue.extend({
           :root-path="rootPath"
           :empty-state-svg="emptyStateSvg"
           v-if="!loading && showList && !filterLoading"></modal-list>
-        <empty-state
+        <modal-empty-state
           v-if="showEmptyState"
           :new-issue-path="newIssuePath"
           :empty-state-svg="emptyStateSvg"></empty-state>