Boards - Do no use groupId to check if board is for group

Create and use isGroupBoard and isProjectBoard getters

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

@@ -27,7 +27,7 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   mixins: [boardCardInner],
-  inject: ['groupId', 'rootPath', 'scopedLabelsAvailable'],
+  inject: ['rootPath', 'scopedLabelsAvailable'],
   props: {
     item: {
       type: Object,

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

@@ -107,7 +107,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['isEpicBoard']),
+    ...mapGetters(['isEpicBoard', 'isGroupBoard', 'isProjectBoard']),
     isNewForm() {
       return this.currentPage === formType.new;
     },
@@ -178,8 +178,8 @@ export default {
           }
         : {
             ...variables,
-            projectPath: this.projectId ? this.fullPath : undefined,
-            groupPath: this.groupId ? this.fullPath : undefined,
+            projectPath: this.isProjectBoard ? this.fullPath : undefined,
+            groupPath: this.isGroupBoard ? this.fullPath : undefined,
           };
     },
     boardScopeMutationVariables() {

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

 <script>
 import { GlButton } from '@gitlab/ui';
-import { mapActions, mapState } from 'vuex';
+import { mapActions, mapGetters, mapState } from 'vuex';
 import { getMilestone } from 'ee_else_ce/boards/boards_util';
 import { __ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -32,8 +32,9 @@ export default {
   },
   computed: {
     ...mapState(['selectedProject']),
+    ...mapGetters(['isGroupBoard']),
     disabled() {
-      if (this.groupId) {
+      if (this.isGroupBoard) {
         return this.title === '' || !this.selectedProject.name;
       }
       return this.title === '';
@@ -98,7 +99,7 @@ export default {
           name="issue_title"
           autocomplete="off"
         />
-        <project-select v-if="groupId" :group-id="groupId" :list="list" />
+        <project-select v-if="isGroupBoard" :group-id="groupId" :list="list" />
         <div class="clearfix gl-mt-3">
           <gl-button
             ref="submitButton"

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

 <script>
 import { GlButton } from '@gitlab/ui';
+import { mapGetters } from 'vuex';
 import { getMilestone } from 'ee_else_ce/boards/boards_util';
 import ListIssue from 'ee_else_ce/boards/models/issue';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -31,8 +32,9 @@ export default {
     };
   },
   computed: {
+    ...mapGetters(['isGroupBoard']),
     disabled() {
-      if (this.groupId) {
+      if (this.isGroupBoard) {
         return this.title === '' || !this.selectedProject.name;
       }
       return this.title === '';
@@ -110,7 +112,7 @@ export default {
           name="issue_title"
           autocomplete="off"
         />
-        <project-select v-if="groupId" :group-id="groupId" :list="list" />
+        <project-select v-if="isGroupBoard" :group-id="groupId" :list="list" />
         <div class="clearfix gl-mt-3">
           <gl-button
             ref="submitButton"

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

@@ -9,6 +9,7 @@ import {
   GlModalDirective,
 } from '@gitlab/ui';
 import { throttle } from 'lodash';
+import { mapGetters, mapState } from 'vuex';
 
 import BoardForm from 'ee_else_ce/boards/components/board_form.vue';
 
@@ -109,8 +110,10 @@ export default {
     };
   },
   computed: {
+    ...mapState(['boardType']),
+    ...mapGetters(['isGroupBoard']),
     parentType() {
-      return this.groupId ? 'group' : 'project';
+      return this.boardType;
     },
     loading() {
       return this.loadingRecentBoards || Boolean(this.loadingBoards);
@@ -171,7 +174,7 @@ export default {
       }));
     },
     boardQuery() {
-      return this.groupId ? groupQuery : projectQuery;
+      return this.isGroupBoard ? groupQuery : projectQuery;
     },
     loadBoards(toggleDropdown = true) {
       if (toggleDropdown && this.boards.length > 0) {

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

@@ -9,6 +9,7 @@ import {
   GlModalDirective,
 } from '@gitlab/ui';
 import { throttle } from 'lodash';
+import { mapGetters, mapState } from 'vuex';
 
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import httpStatusCodes from '~/lib/utils/http_status';
@@ -108,8 +109,10 @@ export default {
     };
   },
   computed: {
+    ...mapState(['boardType']),
+    ...mapGetters(['isGroupBoard']),
     parentType() {
-      return this.groupId ? 'group' : 'project';
+      return this.boardType;
     },
     loading() {
       return this.loadingRecentBoards || Boolean(this.loadingBoards);
@@ -167,7 +170,7 @@ export default {
           return { fullPath: this.state.endpoints.fullPath };
         },
         query() {
-          return this.groupId ? groupQuery : projectQuery;
+          return this.isGroupBoard ? groupQuery : projectQuery;
         },
         loadingKey: 'loadingBoards',
         update(data) {

app/assets/javascripts/boards/stores/getters.js

 import { find } from 'lodash';
-import { inactiveId } from '../constants';
+import { BoardType, inactiveId } from '../constants';
 
 export default {
+  isGroupBoard: (state) => state.boardType === BoardType.group,
+  isProjectBoard: (state) => state.boardType === BoardType.project,
   isSidebarOpen: (state) => state.activeId !== inactiveId,
   isSwimlanesOn: () => false,
   getBoardItemById: (state) => (id) => {

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

@@ -56,6 +56,8 @@ describe('BoardForm', () => {
     return new Vuex.Store({
       getters: {
         isEpicBoard: () => true,
+        isGroupBoard: () => true,
+        isProjectBoard: () => false,
       },
     });
   };

spec/frontend/boards/board_card_inner_spec.js

@@ -42,7 +42,6 @@ describe('Board card component', () => {
         GlLabel: true,
       },
       provide: {
-        groupId: null,
         rootPath: '/',
         scopedLabelsAvailable: false,
       },

spec/frontend/boards/board_list_spec.js

@@ -19,7 +19,11 @@ const createStore = (state = defaultState) => {
   return new Vuex.Store({
     state,
     actions,
-    getters: { isEpicBoard: () => false },
+    getters: {
+      isGroupBoard: () => false,
+      isProjectBoard: () => true,
+      isEpicBoard: () => false,
+    },
   });
 };
 

spec/frontend/boards/board_new_issue_deprecated_spec.js

 /* global List */
 
-import { mount } from '@vue/test-utils';
+import { mount, createLocalVue } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import Vue from 'vue';
+import Vuex from 'vuex';
 import boardNewIssue from '~/boards/components/board_new_issue_deprecated.vue';
 import boardsStore from '~/boards/stores/boards_store';
 import axios from '~/lib/utils/axios_utils';
@@ -10,6 +11,10 @@ import axios from '~/lib/utils/axios_utils';
 import '~/boards/models/list';
 import { listObj, boardsMockInterceptor } from './mock_data';
 
+const localVue = createLocalVue();
+
+localVue.use(Vuex);
+
 describe('Issue boards new issue form', () => {
   let wrapper;
   let vm;
@@ -43,11 +48,17 @@ describe('Issue boards new issue form', () => {
     newIssueMock = Promise.resolve(promiseReturn);
     jest.spyOn(list, 'newIssue').mockImplementation(() => newIssueMock);
 
+    const store = new Vuex.Store({
+      getters: { isGroupBoard: () => false },
+    });
+
     wrapper = mount(BoardNewIssueComp, {
       propsData: {
         disabled: false,
         list,
       },
+      store,
+      localVue,
       provide: {
         groupId: null,
       },

spec/frontend/boards/components/board_form_spec.js

@@ -8,6 +8,7 @@ import { formType } from '~/boards/constants';
 import createBoardMutation from '~/boards/graphql/board_create.mutation.graphql';
 import destroyBoardMutation from '~/boards/graphql/board_destroy.mutation.graphql';
 import updateBoardMutation from '~/boards/graphql/board_update.mutation.graphql';
+import { createStore } from '~/boards/stores';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { visitUrl } from '~/lib/utils/url_utility';
 
@@ -48,6 +49,13 @@ describe('BoardForm', () => {
   const findDeleteConfirmation = () => wrapper.find('[data-testid="delete-confirmation-message"]');
   const findInput = () => wrapper.find('#board-new-name');
 
+  const store = createStore({
+    getters: {
+      isGroupBoard: () => true,
+      isProjectBoard: () => false,
+    },
+  });
+
   const createComponent = (props, data) => {
     wrapper = shallowMount(BoardForm, {
       propsData: { ...defaultProps, ...props },
@@ -64,6 +72,7 @@ describe('BoardForm', () => {
           mutate,
         },
       },
+      store,
       attachTo: document.body,
     });
   };

spec/frontend/boards/components/board_new_issue_spec.js

@@ -2,7 +2,6 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import BoardNewIssue from '~/boards/components/board_new_issue.vue';
 
-import '~/boards/models/list';
 import { mockList, mockGroupProjects } from '../mock_data';
 
 const localVue = createLocalVue();
@@ -31,7 +30,7 @@ describe('Issue boards new issue form', () => {
     const store = new Vuex.Store({
       state: { selectedProject: mockGroupProjects[0] },
       actions: { addListNewIssue: addListNewIssuesSpy },
-      getters: {},
+      getters: { isGroupBoard: () => false },
     });
 
     wrapper = shallowMount(BoardNewIssue, {

spec/frontend/boards/stores/getters_spec.js

@@ -10,6 +10,42 @@ import {
 } from '../mock_data';
 
 describe('Boards - Getters', () => {
+  describe('isGroupBoard', () => {
+    it('returns true when boardType on state is group', () => {
+      const state = {
+        boardType: 'group',
+      };
+
+      expect(getters.isGroupBoard(state)).toBe(true);
+    });
+
+    it('returns false when boardType on state is not group', () => {
+      const state = {
+        boardType: 'project',
+      };
+
+      expect(getters.isGroupBoard(state)).toBe(false);
+    });
+  });
+
+  describe('isProjectBoard', () => {
+    it('returns true when boardType on state is project', () => {
+      const state = {
+        boardType: 'project',
+      };
+
+      expect(getters.isProjectBoard(state)).toBe(true);
+    });
+
+    it('returns false when boardType on state is not project', () => {
+      const state = {
+        boardType: 'group',
+      };
+
+      expect(getters.isProjectBoard(state)).toBe(false);
+    });
+  });
+
   describe('isSidebarOpen', () => {
     it('returns true when activeId is not equal to 0', () => {
       const state = {