From 5c8b89409ef03e29bf8483239fe917c9d6b6c021 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Wed, 11 Apr 2018 11:14:07 +0100
Subject: Reduce usage of global namespace in issue boards

---
 .../boards/components/modal/empty_state.js         | 69 -----------------
 .../boards/components/modal/empty_state.vue        | 72 ++++++++++++++++++
 .../javascripts/boards/components/modal/footer.js  | 82 --------------------
 .../javascripts/boards/components/modal/footer.vue | 87 ++++++++++++++++++++++
 .../javascripts/boards/components/modal/header.js  | 79 --------------------
 .../javascripts/boards/components/modal/header.vue | 83 +++++++++++++++++++++
 .../javascripts/boards/components/modal/index.js   | 14 ++--
 7 files changed, 249 insertions(+), 237 deletions(-)
 delete mode 100644 app/assets/javascripts/boards/components/modal/empty_state.js
 create mode 100644 app/assets/javascripts/boards/components/modal/empty_state.vue
 delete mode 100644 app/assets/javascripts/boards/components/modal/footer.js
 create mode 100644 app/assets/javascripts/boards/components/modal/footer.vue
 delete mode 100644 app/assets/javascripts/boards/components/modal/header.js
 create mode 100644 app/assets/javascripts/boards/components/modal/header.vue

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.js
deleted file mode 100644
index 9735e0ddacc..00000000000
--- a/app/assets/javascripts/boards/components/modal/footer.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import Vue from 'vue';
-import Flash from '../../../flash';
-import { __ } from '../../../locale';
-import './lists_dropdown';
-import { pluralize } from '../../../lib/utils/text_utility';
-import ModalStore from '../../stores/modal_store';
-import modalMixin from '../../mixins/modal_mixins';
-
-gl.issueBoards.ModalFooter = Vue.extend({
-  mixins: [modalMixin],
-  data() {
-    return {
-      modal: ModalStore.store,
-      state: gl.issueBoards.BoardsStore.state,
-    };
-  },
-  computed: {
-    submitDisabled() {
-      return !ModalStore.selectedCount();
-    },
-    submitText() {
-      const count = ModalStore.selectedCount();
-
-      return `Add ${count > 0 ? count : ''} ${pluralize('issue', count)}`;
-    },
-  },
-  methods: {
-    addIssues() {
-      const firstListIndex = 1;
-      const list = this.modal.selectedList || this.state.lists[firstListIndex];
-      const selectedIssues = ModalStore.getSelectedIssues();
-      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.'));
-
-        selectedIssues.forEach((issue) => {
-          list.removeIssue(issue);
-          list.issuesSize -= 1;
-        });
-      });
-
-      // Add the issues on the frontend
-      selectedIssues.forEach((issue) => {
-        list.addIssue(issue);
-        list.issuesSize += 1;
-      });
-
-      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>
-      <button
-        class="btn btn-default pull-right"
-        type="button"
-        @click="toggleModal(false)">
-        Cancel
-      </button>
-    </footer>
-  `,
-});
diff --git a/app/assets/javascripts/boards/components/modal/footer.vue b/app/assets/javascripts/boards/components/modal/footer.vue
new file mode 100644
index 00000000000..b373c65685e
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/footer.vue
@@ -0,0 +1,87 @@
+<script>
+import Flash from '../../../flash';
+import { __ } from '../../../locale';
+import './lists_dropdown';
+import { pluralize } from '../../../lib/utils/text_utility';
+import ModalStore from '../../stores/modal_store';
+import modalMixin from '../../mixins/modal_mixins';
+
+export default {
+  components: {
+    'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown,
+  },
+  mixins: [modalMixin],
+  data() {
+    return {
+      modal: ModalStore.store,
+      state: gl.issueBoards.BoardsStore.state,
+    };
+  },
+  computed: {
+    submitDisabled() {
+      return !ModalStore.selectedCount();
+    },
+    submitText() {
+      const count = ModalStore.selectedCount();
+
+      return `Add ${count > 0 ? count : ''} ${pluralize('issue', count)}`;
+    },
+  },
+  methods: {
+    addIssues() {
+      const firstListIndex = 1;
+      const list = this.modal.selectedList || this.state.lists[firstListIndex];
+      const selectedIssues = ModalStore.getSelectedIssues();
+      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.'));
+
+          selectedIssues.forEach(issue => {
+            list.removeIssue(issue);
+            list.issuesSize -= 1;
+          });
+        });
+
+      // Add the issues on the frontend
+      selectedIssues.forEach(issue => {
+        list.addIssue(issue);
+        list.issuesSize += 1;
+      });
+
+      this.toggleModal(false);
+    },
+  },
+
+};
+</script>
+<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/>
+    </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.js
deleted file mode 100644
index 67c29ebca72..00000000000
--- a/app/assets/javascripts/boards/components/modal/header.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import Vue from 'vue';
-import modalFilters from './filters';
-import './tabs';
-import ModalStore from '../../stores/modal_store';
-import modalMixin from '../../mixins/modal_mixins';
-
-gl.issueBoards.ModalHeader = Vue.extend({
-  mixins: [modalMixin],
-  props: {
-    projectId: {
-      type: Number,
-      required: true,
-    },
-    milestonePath: {
-      type: String,
-      required: true,
-    },
-    labelPath: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return ModalStore.store;
-  },
-  computed: {
-    selectAllText() {
-      if (ModalStore.selectedCount() !== this.issues.length || this.issues.length === 0) {
-        return 'Select all';
-      }
-
-      return 'Deselect all';
-    },
-    showSearch() {
-      return this.activeTab === 'all' && !this.loading && this.issuesCount > 0;
-    },
-  },
-  methods: {
-    toggleAll() {
-      this.$refs.selectAllBtn.blur();
-
-      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" />
-        <button
-          type="button"
-          class="btn btn-success btn-inverted prepend-left-10"
-          ref="selectAllBtn"
-          @click="toggleAll">
-          {{ selectAllText }}
-        </button>
-      </div>
-    </div>
-  `,
-});
diff --git a/app/assets/javascripts/boards/components/modal/header.vue b/app/assets/javascripts/boards/components/modal/header.vue
new file mode 100644
index 00000000000..d880564318a
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/header.vue
@@ -0,0 +1,83 @@
+<script>
+import modalFilters from './filters';
+import './tabs';
+import ModalStore from '../../stores/modal_store';
+import modalMixin from '../../mixins/modal_mixins';
+
+export default {
+  components: {
+    'modal-tabs': gl.issueBoards.ModalTabs,
+    modalFilters,
+  },
+  mixins: [modalMixin],
+  props: {
+    projectId: {
+      type: Number,
+      required: true,
+    },
+    milestonePath: {
+      type: String,
+      required: true,
+    },
+    labelPath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return ModalStore.store;
+  },
+  computed: {
+    selectAllText() {
+      if (ModalStore.selectedCount() !== this.issues.length || this.issues.length === 0) {
+        return 'Select all';
+      }
+
+      return 'Deselect all';
+    },
+    showSearch() {
+      return this.activeTab === 'all' && !this.loading && this.issuesCount > 0;
+    },
+  },
+  methods: {
+    toggleAll() {
+      this.$refs.selectAllBtn.blur();
+
+      ModalStore.toggleAll();
+    },
+  },
+};
+</script>
+<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" />
+    <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>
-- 
cgit v1.2.1