Next

The file app/assets/javascripts/boards/index.js has differences between CE and EE.

Diferences

diff --git a/home/yorickpeterse/Projects/gitlab/gdk-ce/gitlab/app/assets/javascripts/boards/index.js b/home/yorickpeterse/Projects/gitlab/gdk-ee/gitlab/app/assets/javascripts/boards/index.js
index f88e9b55988..1a328689d03 100644
--- a/home/yorickpeterse/Projects/gitlab/gdk-ce/gitlab/app/assets/javascripts/boards/index.js
+++ b/home/yorickpeterse/Projects/gitlab/gdk-ee/gitlab/app/assets/javascripts/boards/index.js
@@ -10,26 +10,33 @@ import '~/vue_shared/models/assignee';
 import FilteredSearchBoards from './filtered_search_boards';
 import eventHub from './eventhub';
 import sidebarEventHub from '~/sidebar/event_hub';
-import './models/issue';
-import './models/list';
 import './models/milestone';
 import './models/project';
 import boardsStore from './stores/boards_store';
 import ModalStore from './stores/modal_store';
-import BoardService from './services/board_service';
 import modalMixin from './mixins/modal_mixins';
 import './filters/due_date_filters';
-import Board from './components/board';
-import BoardSidebar from './components/board_sidebar';
+import Board from 'ee/boards/components/board';
+import BoardSidebar from 'ee/boards/components/board_sidebar';
 import initNewListDropdown from './components/new_list_dropdown';
-import BoardAddIssuesModal from './components/modal/index.vue';
+import BoardAddIssuesModal from 'ee/boards/components/modal/index';
 import '~/vue_shared/vue_resource_interceptor';
 import { NavigationType, 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 BoardsSelector from 'ee/boards/components/boards_selector.vue';
+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';
+
 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 => {
@@ -114,6 +121,7 @@ export default () => {
           this.state.lists = _.sortBy(this.state.lists, 'position');
 
           boardsStore.addBlankState();
+          boardsStore.addPromotionState();
           this.loading = false;
         })
         .catch(() => {
@@ -128,16 +136,23 @@ export default () => {
         const { sidebarInfoEndpoint } = newIssue;
         if (sidebarInfoEndpoint && newIssue.subscribed === undefined) {
           newIssue.setFetchingState('subscriptions', true);
+          newIssue.setFetchingState('weight', true);
+          newIssue.setFetchingState('epic', true);
           BoardService.getIssueInfo(sidebarInfoEndpoint)
             .then(res => res.data)
             .then(data => {
               newIssue.setFetchingState('subscriptions', false);
+              newIssue.setFetchingState('weight', false);
+              newIssue.setFetchingState('epic', false);
               newIssue.updateData({
                 subscribed: data.subscribed,
+                weight: data.weight,
+                epic: data.epic,
               });
             })
             .catch(() => {
               newIssue.setFetchingState('subscriptions', false);
+              newIssue.setFetchingState('weight', false);
               Flash(__('An error occurred while fetching sidebar data'));
             });
         }
@@ -172,12 +187,56 @@ export default () => {
     el: document.getElementById('js-add-list'),
     data: {
       filters: boardsStore.state.filters,
+      milestoneTitle: $boardApp.dataset.boardMilestoneTitle,
     },
     mounted() {
       initNewListDropdown();
     },
   });
 
+  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 ? 'Edit board' : '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>
+      `,
+    });
+  }
+
   const issueBoardsModal = document.getElementById('js-add-issues-btn');
 
   if (issueBoardsModal) {
@@ -189,6 +248,8 @@ export default () => {
         return {
           modal: ModalStore.store,
           store: boardsStore.state,
+          isFullscreen: false,
+          focusModeAvailable: $boardApp.hasAttribute('data-focus-mode-available'),
           canAdminList: this.$options.el.hasAttribute('data-can-admin-list'),
         };
       },
@@ -251,4 +312,78 @@ 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>
+    `,
+  });
+
+  const boardsSwitcherElement = document.getElementById('js-multiple-boards-switcher');
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: boardsSwitcherElement,
+    components: {
+      BoardsSelector,
+    },
+    data() {
+      const { dataset } = boardsSwitcherElement;
+
+      const boardsSelectorProps = {
+        ...dataset,
+        currentBoard: JSON.parse(dataset.currentBoard),
+        hasMissingBoards: parseBoolean(dataset.hasMissingBoards),
+        canAdminBoard: parseBoolean(dataset.canAdminBoard),
+        multipleIssueBoardsAvailable: parseBoolean(dataset.multipleIssueBoardsAvailable),
+        projectId: Number(dataset.projectId),
+        groupId: Number(dataset.groupId),
+        scopedIssueBoardFeatureEnabled: parseBoolean(dataset.scopedIssueBoardFeatureEnabled),
+        weights: JSON.parse(dataset.weights),
+      };
+
+      return { boardsSelectorProps };
+    },
+    render(createElement) {
+      return createElement(BoardsSelector, {
+        props: this.boardsSelectorProps,
+      });
+    },
+  });
 };

What needs to be done

1. Create a EE version of this file