Hide board list actions for unauthorized users

Hides `Add issue` and `Settings` buttons from board list header when
user is not logged in.

app/assets/javascripts/boards/components/board_column.vue

@@ -24,11 +24,6 @@ export default {
       type: Boolean,
       required: true,
     },
-    canAdminList: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
   computed: {
     ...mapState(['filterParams', 'highlightedLists']),
@@ -92,14 +87,8 @@ export default {
       class="board-inner gl-display-flex gl-flex-direction-column gl-relative gl-h-full gl-rounded-base"
       :class="{ 'board-column-highlighted': highlighted }"
     >
-      <board-list-header :can-admin-list="canAdminList" :list="list" :disabled="disabled" />
-      <board-list
-        ref="board-list"
-        :disabled="disabled"
-        :board-items="listItems"
-        :list="list"
-        :can-admin-list="canAdminList"
-      />
+      <board-list-header :list="list" :disabled="disabled" />
+      <board-list ref="board-list" :disabled="disabled" :board-items="listItems" :list="list" />
     </div>
   </div>
 </template>

app/assets/javascripts/boards/components/board_column_deprecated.vue

@@ -26,11 +26,6 @@ export default {
       type: Boolean,
       required: true,
     },
-    canAdminList: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
   data() {
     return {
@@ -110,7 +105,7 @@ export default {
       class="board-inner gl-display-flex gl-flex-direction-column gl-relative gl-h-full gl-rounded-base"
       :class="{ 'board-column-highlighted': list.highlighted }"
     >
-      <board-list-header :can-admin-list="canAdminList" :list="list" :disabled="disabled" />
+      <board-list-header :list="list" :disabled="disabled" />
       <board-list ref="board-list" :disabled="disabled" :issues="listIssues" :list="list" />
     </div>
   </div>

app/assets/javascripts/boards/components/board_content.vue

@@ -106,7 +106,6 @@ export default {
         v-for="(list, index) in boardListsToUse"
         :key="index"
         ref="board"
-        :can-admin-list="canAdminList"
         :list="list"
         :disabled="disabled"
       />

app/assets/javascripts/boards/components/board_list.vue

@@ -23,6 +23,11 @@ export default {
     GlLoadingIcon,
     GlIntersectionObserver,
   },
+  inject: {
+    canAdminList: {
+      default: false,
+    },
+  },
   props: {
     disabled: {
       type: Boolean,
@@ -36,11 +41,6 @@ export default {
       type: Array,
       required: true,
     },
-    canAdminList: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
   data() {
     return {

app/assets/javascripts/boards/components/board_list_header.vue

@@ -98,6 +98,12 @@ export default {
     showListDetails() {
       return !this.list.collapsed || !this.isSwimlanesHeader;
     },
+    showListHeaderActions() {
+      if (this.isLoggedIn) {
+        return this.isNewIssueShown || this.isSettingsShown;
+      }
+      return false;
+    },
     itemsCount() {
       return this.list.issuesCount;
     },
@@ -351,10 +357,7 @@ export default {
           <!-- EE end -->
         </span>
       </div>
-      <gl-button-group
-        v-if="isNewIssueShown || isSettingsShown"
-        class="board-list-button-group pl-2"
-      >
+      <gl-button-group v-if="showListHeaderActions" class="board-list-button-group gl-pl-2">
         <gl-button
           v-if="isNewIssueShown"
           v-show="!list.collapsed"

app/assets/javascripts/boards/components/board_list_header_deprecated.vue

@@ -35,6 +35,9 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   inject: {
+    currentUserId: {
+      default: null,
+    },
     boardId: {
       default: '',
     },
@@ -63,7 +66,7 @@ export default {
   computed: {
     ...mapState(['activeId']),
     isLoggedIn() {
-      return Boolean(gon.current_user_id);
+      return Boolean(this.currentUserId);
     },
     listType() {
       return this.list.type;
@@ -89,6 +92,12 @@ export default {
     showListDetails() {
       return this.list.isExpanded || !this.isSwimlanesHeader;
     },
+    showListHeaderActions() {
+      if (this.isLoggedIn) {
+        return this.isNewIssueShown || this.isSettingsShown;
+      }
+      return false;
+    },
     issuesCount() {
       return this.list.issuesSize;
     },
@@ -320,10 +329,7 @@ export default {
           </template>
         </span>
       </div>
-      <gl-button-group
-        v-if="isNewIssueShown || isSettingsShown"
-        class="board-list-button-group pl-2"
-      >
+      <gl-button-group v-if="showListHeaderActions" class="board-list-button-group pl-2">
         <gl-button
           v-if="isNewIssueShown"
           ref="newIssueBtn"

ee/spec/frontend/boards/components/board_list_header_deprecated_spec.js

@@ -41,6 +41,7 @@ describe('Board List Header Component', () => {
     listType = ListType.backlog,
     collapsed = false,
     withLocalStorage = true,
+    currentUserId = 1,
   } = {}) => {
     const boardId = '1';
 
@@ -73,6 +74,7 @@ describe('Board List Header Component', () => {
         list,
       },
       provide: {
+        currentUserId,
         boardId,
       },
     });

ee/spec/frontend/boards/components/board_list_header_spec.js

@@ -33,6 +33,7 @@ describe('Board List Header Component', () => {
     withLocalStorage = true,
     isSwimlanesHeader = false,
     weightFeatureAvailable = false,
+    currentUserId = 1,
   } = {}) => {
     const boardId = '1';
 
@@ -65,6 +66,7 @@ describe('Board List Header Component', () => {
       provide: {
         boardId,
         weightFeatureAvailable,
+        currentUserId,
       },
     });
   };

spec/features/boards/new_issue_spec.rb

@@ -154,8 +154,8 @@ RSpec.describe 'Issue Boards new issue', :js do
       wait_for_requests
     end
 
-    it 'displays new issue button in open list' do
-      expect(first('.board')).to have_button('New issue', count: 1)
+    it 'does not display new issue button in open list' do
+      expect(first('.board')).not_to have_button('New issue')
     end
 
     it 'does not display new issue button in label list' do
@@ -192,8 +192,8 @@ RSpec.describe 'Issue Boards new issue', :js do
       context 'when backlog list already exists' do
         let_it_be(:backlog_list) { create(:backlog_list, board: group_board) }
 
-        it 'displays new issue button in open list' do
-          expect(first('.board')).to have_button('New issue', count: 1)
+        it 'does not display new issue button in open list' do
+          expect(first('.board')).not_to have_button('New issue')
         end
 
         it 'does not display new issue button in label list' do

spec/frontend/boards/board_list_spec.js

@@ -80,6 +80,7 @@ const createComponent = ({
       rootPath: '/',
       weightFeatureAvailable: false,
       boardWeight: null,
+      canAdminList: true,
     },
     stubs: {
       BoardCard,

spec/frontend/boards/components/board_list_header_deprecated_spec.js

@@ -31,6 +31,7 @@ describe('Board List Header Component', () => {
     listType = ListType.backlog,
     collapsed = false,
     withLocalStorage = true,
+    currentUserId = 1,
   } = {}) => {
     const boardId = '1';
 
@@ -62,6 +63,7 @@ describe('Board List Header Component', () => {
       },
       provide: {
         boardId,
+        currentUserId,
       },
     });
   };
@@ -100,10 +102,12 @@ describe('Board List Header Component', () => {
       });
     });
 
-    it('does render when logged out', () => {
-      createComponent();
+    it('does not render when logged out', () => {
+      createComponent({
+        currentUserId: null,
+      });
 
-      expect(findAddIssueButton().exists()).toBe(true);
+      expect(findAddIssueButton().exists()).toBe(false);
     });
   });
 
@@ -143,7 +147,6 @@ describe('Board List Header Component', () => {
 
     it("when logged in it calls list update and doesn't set localStorage", () => {
       jest.spyOn(List.prototype, 'update');
-      window.gon.current_user_id = 1;
 
       createComponent({ withLocalStorage: false });
 
@@ -158,7 +161,7 @@ describe('Board List Header Component', () => {
     it("when logged out it doesn't call list update and sets localStorage", () => {
       jest.spyOn(List.prototype, 'update');
 
-      createComponent();
+      createComponent({ currentUserId: null });
 
       findCaret().vm.$emit('click');
 

spec/frontend/boards/components/board_list_header_spec.js

@@ -28,7 +28,7 @@ describe('Board List Header Component', () => {
     listType = ListType.backlog,
     collapsed = false,
     withLocalStorage = true,
-    currentUserId = null,
+    currentUserId = 1,
   } = {}) => {
     const boardId = '1';
 
@@ -109,10 +109,12 @@ describe('Board List Header Component', () => {
       });
     });
 
-    it('does render when logged out', () => {
-      createComponent();
+    it('does not render when logged out', () => {
+      createComponent({
+        currentUserId: null,
+      });
 
-      expect(findAddIssueButton().exists()).toBe(true);
+      expect(findAddIssueButton().exists()).toBe(false);
     });
   });
 
@@ -153,7 +155,9 @@ describe('Board List Header Component', () => {
     });
 
     it("when logged out it doesn't call list update and sets localStorage", async () => {
-      createComponent();
+      createComponent({
+        currentUserId: null,
+      });
 
       findCaret().vm.$emit('click');
       await wrapper.vm.$nextTick();