Merge branch 'ee-10009-boards' into 'master'

EE: Moves EE differences for issue boards

See merge request gitlab-org/gitlab-ee!14592

app/assets/javascripts/boards/config_toggle.js

+export default () => {};

app/assets/javascripts/boards/index.js

@@ -3,21 +3,24 @@ import Vue from 'vue';
 
 import mountMultipleBoardsSwitcher from 'ee_else_ce/boards/mount_multiple_boards_switcher';
 import Flash from '~/flash';
-import { s__, __ } from '~/locale';
+import { __ } from '~/locale';
 import './models/label';
 import './models/assignee';
 
-import FilteredSearchBoards from './filtered_search_boards';
-import eventHub from './eventhub';
+import FilteredSearchBoards from '~/boards/filtered_search_boards';
+import eventHub from '~/boards/eventhub';
 import sidebarEventHub from '~/sidebar/event_hub';
-import './models/milestone';
-import './models/project';
-import boardsStore from './stores/boards_store';
-import ModalStore from './stores/modal_store';
-import modalMixin from './mixins/modal_mixins';
-import './filters/due_date_filters';
-import Board from 'ee/boards/components/board';
-import BoardSidebar from 'ee/boards/components/board_sidebar';
+import 'ee_else_ce/boards/models/issue';
+import 'ee_else_ce/boards/models/list';
+import '~/boards/models/milestone';
+import '~/boards/models/project';
+import boardsStore from '~/boards/stores/boards_store';
+import ModalStore from '~/boards/stores/modal_store';
+import BoardService from 'ee_else_ce/boards/services/board_service';
+import modalMixin from '~/boards/mixins/modal_mixins';
+import '~/boards/filters/due_date_filters';
+import Board from 'ee_else_ce/boards/components/board';
+import BoardSidebar from 'ee_else_ce/boards/components/board_sidebar';
 import initNewListDropdown from 'ee_else_ce/boards/components/new_list_dropdown';
 import BoardAddIssuesModal from 'ee/boards/components/modal/index';
 import '~/vue_shared/vue_resource_interceptor';
@@ -26,20 +29,13 @@ import {
   convertObjectPropsToCamelCase,
   parseBoolean,
 } from '~/lib/utils/common_utils';
-
-import 'ee/boards/models/list';
-import 'ee/boards/models/issue';
-import 'ee/boards/models/project';
-import BoardService from 'ee/boards/services/board_service';
-import collapseIcon from 'ee/boards/icons/fullscreen_collapse.svg';
-import expandIcon from 'ee/boards/icons/fullscreen_expand.svg';
-import tooltip from '~/vue_shared/directives/tooltip';
+import boardConfigToggle from 'ee_else_ce/boards/config_toggle';
+import toggleFocusMode from 'ee_else_ce/boards/toggle_focus';
 
 let issueBoardsApp;
 
 export default () => {
   const $boardApp = document.getElementById('board-app');
-  const issueBoardsContent = document.querySelector('.content-wrapper > .js-focus-mode-board');
 
   // check for browser back and trigger a hard reload to circumvent browser caching.
   window.addEventListener('pageshow', event => {
@@ -220,48 +216,7 @@ export default () => {
     },
   });
 
-  const configEl = document.querySelector('.js-board-config');
-
-  if (configEl) {
-    gl.boardConfigToggle = new Vue({
-      el: configEl,
-      directives: {
-        tooltip,
-      },
-      data() {
-        return {
-          canAdminList: this.$options.el.hasAttribute('data-can-admin-list'),
-          hasScope: this.$options.el.hasAttribute('data-has-scope'),
-          state: boardsStore.state,
-        };
-      },
-      computed: {
-        buttonText() {
-          return this.canAdminList ? s__('Boards|Edit board') : s__('Boards|View scope');
-        },
-        tooltipTitle() {
-          return this.hasScope ? __("This board's scope is reduced") : '';
-        },
-      },
-      methods: {
-        showPage: page => boardsStore.showPage(page),
-      },
-      template: `
-        <div class="prepend-left-10">
-          <button
-            v-tooltip
-            :title="tooltipTitle"
-            class="btn btn-inverted"
-            :class="{ 'dot-highlight': hasScope }"
-            type="button"
-            @click.prevent="showPage('edit')"
-          >
-            {{ buttonText }}
-          </button>
-        </div>
-      `,
-    });
-  }
+  boardConfigToggle(boardsStore);
 
   const issueBoardsModal = document.getElementById('js-add-issues-btn');
 
@@ -339,48 +294,6 @@ export default () => {
     });
   }
 
-  // eslint-disable-next-line no-new
-  new Vue({
-    el: document.getElementById('js-toggle-focus-btn'),
-    data: {
-      modal: ModalStore.store,
-      store: boardsStore.state,
-      isFullscreen: false,
-      focusModeAvailable: $boardApp.hasAttribute('data-focus-mode-available'),
-    },
-    methods: {
-      toggleFocusMode() {
-        if (!this.focusModeAvailable) {
-          return;
-        }
-
-        $(this.$refs.toggleFocusModeButton).tooltip('hide');
-        issueBoardsContent.classList.toggle('is-focused');
-
-        this.isFullscreen = !this.isFullscreen;
-      },
-    },
-    template: `
-      <div class="board-extra-actions">
-        <a
-          href="#"
-          class="btn btn-default has-tooltip prepend-left-10 js-focus-mode-btn"
-          role="button"
-          aria-label="Toggle focus mode"
-          title="Toggle focus mode"
-          ref="toggleFocusModeButton"
-          v-if="focusModeAvailable"
-          @click="toggleFocusMode">
-          <span v-show="isFullscreen">
-            ${collapseIcon}
-          </span>
-          <span v-show="!isFullscreen">
-            ${expandIcon}
-          </span>
-        </a>
-      </div>
-    `,
-  });
-
+  toggleFocusMode(ModalStore, boardsStore, $boardApp);
   mountMultipleBoardsSwitcher();
 };

app/assets/javascripts/boards/toggle_focus.js

+export default () => {};

ee/app/assets/javascripts/boards/config_toggle.js

+import Vue from 'vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import { s__, __ } from '~/locale';
+
+export default boardsStore => {
+  const configEl = document.querySelector('.js-board-config');
+
+  if (configEl) {
+    gl.boardConfigToggle = new Vue({
+      el: configEl,
+      directives: {
+        tooltip,
+      },
+      data() {
+        return {
+          canAdminList: this.$options.el.hasAttribute('data-can-admin-list'),
+          hasScope: this.$options.el.hasAttribute('data-has-scope'),
+          state: boardsStore.state,
+        };
+      },
+      computed: {
+        buttonText() {
+          return this.canAdminList ? s__('Boards|Edit board') : s__('Boards|View scope');
+        },
+        tooltipTitle() {
+          return this.hasScope ? __("This board's scope is reduced") : '';
+        },
+      },
+      methods: {
+        showPage: page => boardsStore.showPage(page),
+      },
+      template: `
+        <div class="prepend-left-10">
+          <button
+            v-tooltip
+            :title="tooltipTitle"
+            class="btn btn-inverted"
+            :class="{ 'dot-highlight': hasScope }"
+            type="button"
+            @click.prevent="showPage('edit')"
+          >
+            {{ buttonText }}
+          </button>
+        </div>
+      `,
+    });
+  }
+};

ee/app/assets/javascripts/boards/models/issue.js

 import ListIssue from '~/boards/models/issue';
-import IssueProjectEE from './project';
+import IssueProject from '~/boards/models/project';
 
 class ListIssueEE extends ListIssue {
   constructor(obj, defaultAvatar) {
     super(obj, defaultAvatar, {
-      IssueProject: IssueProjectEE,
+      IssueProject,
     });
 
     this.isFetching.weight = true;
@@ -12,7 +12,7 @@ class ListIssueEE extends ListIssue {
     this.weight = obj.weight;
 
     if (obj.project) {
-      this.project = new IssueProjectEE(obj.project);
+      this.project = new IssueProject(obj.project);
     }
   }
 }

ee/app/assets/javascripts/boards/models/project.js

-export default class IssueProject {
-  constructor(obj) {
-    this.id = obj.id;
-    this.path = obj.path;
-  }
-}

ee/app/assets/javascripts/boards/toggle_focus.js

+import $ from 'jquery';
+import Vue from 'vue';
+import collapseIcon from 'ee/boards/icons/fullscreen_collapse.svg';
+import expandIcon from 'ee/boards/icons/fullscreen_expand.svg';
+
+export default (ModalStore, boardsStore, $boardApp) => {
+  const issueBoardsContent = document.querySelector('.content-wrapper > .js-focus-mode-board');
+
+  return new Vue({
+    el: document.getElementById('js-toggle-focus-btn'),
+    data: {
+      modal: ModalStore.store,
+      store: boardsStore.state,
+      isFullscreen: false,
+      focusModeAvailable: $boardApp.hasAttribute('data-focus-mode-available'),
+    },
+    methods: {
+      toggleFocusMode() {
+        if (!this.focusModeAvailable) {
+          return;
+        }
+
+        $(this.$refs.toggleFocusModeButton).tooltip('hide');
+        issueBoardsContent.classList.toggle('is-focused');
+
+        this.isFullscreen = !this.isFullscreen;
+      },
+    },
+    template: `
+      <div class="board-extra-actions">
+        <a
+          href="#"
+          class="btn btn-default has-tooltip prepend-left-10 js-focus-mode-btn"
+          role="button"
+          aria-label="Toggle focus mode"
+          title="Toggle focus mode"
+          ref="toggleFocusModeButton"
+          v-if="focusModeAvailable"
+          @click="toggleFocusMode">
+          <span v-show="isFullscreen">
+            ${collapseIcon}
+          </span>
+          <span v-show="!isFullscreen">
+            ${expandIcon}
+          </span>
+        </a>
+      </div>
+    `,
+  });
+};