Fixed issue boards focus mode not being visible to guest users

Closes #3182

app/assets/javascripts/boards/boards_bundle.js

@@ -140,11 +140,18 @@ $(() => {
   gl.IssueBoardsModalAddBtn = new Vue({
     mixins: [gl.issueBoards.ModalMixins],
     el: document.getElementById('js-add-issues-btn'),
-    data: {
-      modal: ModalStore.store,
-      store: Store.state,
-      isFullscreen: false,
-      focusModeAvailable: gl.utils.convertPermissionToBoolean($boardApp.dataset.focusModeAvailable),
+    data() {
+      return {
+        modal: ModalStore.store,
+        store: Store.state,
+        isFullscreen: false,
+        focusModeAvailable: gl.utils.convertPermissionToBoolean(
+          $boardApp.dataset.focusModeAvailable,
+        ),
+        canAdminList: gl.utils.convertPermissionToBoolean(
+          this.$options.el.dataset.canAdminList,
+        ),
+      };
     },
     watch: {
       disabled() {
@@ -202,12 +209,13 @@ $(() => {
           :class="{ 'disabled': disabled }"
           :title="tooltipTitle"
           :aria-disabled="disabled"
+          v-if="canAdminList"
           @click="openModal">
           Add issues
         </button>
         <a
           href="#"
-          class="btn btn-default has-tooltip prepend-left-10"
+          class="btn btn-default has-tooltip prepend-left-10 js-focus-mode-btn"
           role="button"
           aria-label="Toggle focus mode"
           title="Toggle focus mode"

app/assets/stylesheets/pages/boards.scss

@@ -75,7 +75,7 @@
     top: 0;
     left: 0;
     background: $white-light;
-    z-index: 500;
+    z-index: 9000;
 
     .boards-list {
       height: calc(100vh - 50px);

app/views/shared/issuable/_search_bar.html.haml

@@ -126,6 +126,6 @@
                   - if can?(current_user, :admin_label, @project)
                     = render partial: "shared/issuable/label_page_create"
                   = dropdown_loading
-              #js-add-issues-btn.prepend-left-10
+            #js-add-issues-btn.prepend-left-10{ data: { can_admin_list: can?(current_user, :admin_list, @project).to_s } }
           - elsif type != :boards_modal
             = render 'shared/sort_dropdown'

changelogs/unreleased-ee/guest-focus-mode.yml

+---
+title: Fix issue boards focus button not being visible to guest users
+merge_request:
+author:
+type: fixed

spec/features/boards/focus_mode_spec.rb

+require 'rails_helper'
+
+describe 'Issue Boards focus mode', :js do
+  let(:project) { create(:project, :public) }
+
+  before do
+    visit project_boards_path(project)
+
+    wait_for_requests
+  end
+
+  it "shows focus mode button to guest users" do
+    expect(page).to have_selector('.board-extra-actions .js-focus-mode-btn')
+  end
+end