Move issue board focus mode into Core

to be avilable for everyone

app/assets/javascripts/boards/index.js

@@ -6,7 +6,6 @@ import 'ee_else_ce/boards/models/list';
 import BoardSidebar from 'ee_else_ce/boards/components/board_sidebar';
 import initNewListDropdown from 'ee_else_ce/boards/components/new_list_dropdown';
 import boardConfigToggle from 'ee_else_ce/boards/config_toggle';
-import toggleFocusMode from 'ee_else_ce/boards/toggle_focus';
 import toggleLabels from 'ee_else_ce/boards/toggle_labels';
 import {
   setPromotionState,
@@ -24,6 +23,7 @@ import './models/label';
 import './models/assignee';
 import { BoardType } from './constants';
 
+import toggleFocusMode from '~/boards/toggle_focus';
 import FilteredSearchBoards from '~/boards/filtered_search_boards';
 import eventHub from '~/boards/eventhub';
 import sidebarEventHub from '~/sidebar/event_hub';
@@ -305,7 +305,7 @@ export default () => {
         return {
           modal: ModalStore.store,
           store: boardsStore.state,
-          ...getBoardsModalData($boardApp),
+          ...getBoardsModalData(),
           canAdminList: this.$options.el.hasAttribute('data-can-admin-list'),
         };
       },
@@ -369,7 +369,7 @@ export default () => {
     });
   }
 
-  toggleFocusMode(ModalStore, boardsStore, $boardApp);
+  toggleFocusMode(ModalStore, boardsStore);
   toggleLabels();
   mountMultipleBoardsSwitcher();
 };

app/assets/javascripts/boards/toggle_focus.js

-export default () => {};
+import $ from 'jquery';
+import Vue from 'vue';
+import collapseIcon from './icons/fullscreen_collapse.svg';
+import expandIcon from './icons/fullscreen_expand.svg';
+
+export default (ModalStore, boardsStore) => {
+  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,
+    },
+    methods: {
+      toggleFocusMode() {
+        $(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"
+          data-qa-selector="focus_mode_button"
+          role="button"
+          aria-label="Toggle focus mode"
+          title="Toggle focus mode"
+          ref="toggleFocusModeButton"
+          @click="toggleFocusMode">
+          <span v-show="isFullscreen">
+            ${collapseIcon}
+          </span>
+          <span v-show="!isFullscreen">
+            ${expandIcon}
+          </span>
+        </a>
+      </div>
+    `,
+  });
+};

app/assets/stylesheets/pages/boards.scss

@@ -548,3 +548,27 @@
    */
   height: $input-height;
 }
+
+.issue-boards-content.is-focused {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: $white;
+  z-index: 9000;
+
+  @include media-breakpoint-down(sm) {
+    padding-top: 10px;
+  }
+
+  .boards-list {
+    height: calc(100vh - #{$issue-boards-filter-height});
+    overflow-x: scroll;
+  }
+
+  .issue-boards-sidebar {
+    height: 100%;
+    top: 0;
+  }
+}

changelogs/unreleased/212331-move-features-to-core-issue-board-focus-mode.yml

+---
+title: Moved issue board focus mode to Core and available for for everyone
+merge_request: 29200
+author:
+type: added

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

@@ -13,7 +13,6 @@ export const getMilestoneTitle = $boardApp => ({
   milestoneTitle: $boardApp.dataset.boardMilestoneTitle,
 });
 
-export const getBoardsModalData = $boardApp => ({
+export const getBoardsModalData = () => ({
   isFullscreen: false,
-  focusModeAvailable: $boardApp.hasAttribute('data-focus-mode-available'),
 });

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"
-          data-qa-selector="focus_mode_button"
-          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>
-    `,
-  });
-};

ee/app/assets/stylesheets/pages/boards.scss

@@ -84,30 +84,6 @@
   }
 }
 
-.issue-boards-content.is-focused {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  background: $white;
-  z-index: 9000;
-
-  @include media-breakpoint-down(sm) {
-    padding-top: 10px;
-  }
-
-  .boards-list {
-    height: calc(100vh - #{$issue-boards-filter-height});
-    overflow-x: scroll;
-  }
-
-  .issue-boards-sidebar {
-    height: 100%;
-    top: 0;
-  }
-}
-
 
 .form-section-title {
   font-size: 16px;

ee/app/helpers/ee/boards_helper.rb

@@ -22,7 +22,6 @@ module EE
         label_ids: board.label_ids,
         labels: board.labels.to_json(only: [:id, :title, :color, :text_color] ),
         board_weight: board.weight,
-        focus_mode_available: true,
         weight_feature_available: current_board_parent.feature_available?(:issue_weights).to_s,
         show_promotion: show_feature_promotion,
         scoped_labels: current_board_parent.feature_available?(:scoped_labels)&.to_s

ee/spec/features/boards/boards_spec.rb

@@ -11,19 +11,6 @@ describe 'issue boards', :js do
   let(:milestone) { create(:milestone, title: "v2.2", project: project) }
   let!(:board_with_milestone) { create(:board, project: project, milestone: milestone) }
 
-  context 'issue board focus mode' do
-    before do
-      project.add_developer(user)
-      login_as(user)
-    end
-
-    it 'shows the button' do
-      visit_board_page
-
-      expect(page).to have_link('Toggle focus mode')
-    end
-  end
-
   context 'with group and reporter' do
     let(:group) { create(:group) }
     let(:project) { create(:project, :public, namespace: group) }

spec/features/boards/boards_spec.rb

@@ -549,6 +549,17 @@ describe 'Issue Boards', :js do
     end
   end
 
+  context 'issue board focus mode' do
+    before do
+      visit project_board_path(project, board)
+      wait_for_requests
+    end
+
+    it 'shows the button' do
+      expect(page).to have_link('Toggle focus mode')
+    end
+  end
+
   context 'keyboard shortcuts' do
     before do
       visit project_board_path(project, board)

ee/spec/features/boards/focus_mode_spec.rb → spec/features/boards/focus_mode_spec.rb

@@ -11,7 +11,7 @@ describe 'Issue Boards focus mode', :js do
     wait_for_requests
   end
 
-  it "shows focus mode button to guest users" do
+  it 'shows focus mode button to guest users' do
     expect(page).to have_selector('.board-extra-actions .js-focus-mode-btn')
   end
 end