Merge branch '32289-fix-issue-boards-epic-selection' into 'master'

Fix Epic selection for newly created issues within Issue Boards

Closes #32289

See merge request gitlab-org/gitlab!17211

ee/app/assets/javascripts/sidebar/components/sidebar_item_epics_select.vue

@@ -61,7 +61,10 @@ export default {
       if (this.initialEpic) {
         return false;
       } else if (this.sidebarStore.isFetching) {
-        return this.sidebarStore.isFetching.epic;
+        // We need to cast `epic` into boolean as when
+        // new issue is created from board, `isFetching`
+        // does not contain `epic` within it.
+        return Boolean(this.sidebarStore.isFetching.epic);
       }
       return false;
     },

ee/app/assets/javascripts/vue_shared/components/sidebar/epics_select/base.vue

@@ -72,6 +72,22 @@ export default {
     },
   },
   watch: {
+    /**
+     * When Issue is created from Boards
+     * Issue ID is updated post-render
+     * so we need to watch it to update in state
+     */
+    issueId() {
+      this.setIssueId(this.issueId);
+    },
+    /**
+     * When Issues are selected within Boards
+     * `initialEpic` gets updated to reflect
+     * underlying selection.
+     */
+    initialEpic() {
+      this.setSelectedEpic(this.initialEpic);
+    },
     /**
      * Initial Epic is loaded via separate Sidebar store
      * So we need to watch for updates before updating local store.
@@ -93,6 +109,7 @@ export default {
   methods: {
     ...mapActions([
       'setInitialData',
+      'setIssueId',
       'setSearchQuery',
       'setSelectedEpic',
       'fetchEpics',

ee/app/assets/javascripts/vue_shared/components/sidebar/epics_select/store/actions.js

@@ -9,6 +9,7 @@ import { noneEpic } from 'ee/vue_shared/constants';
 import * as types from './mutation_types';
 
 export const setInitialData = ({ commit }, data) => commit(types.SET_INITIAL_DATA, data);
+export const setIssueId = ({ commit }, issueId) => commit(types.SET_ISSUE_ID, issueId);
 
 export const setSearchQuery = ({ commit }, searchQuery) =>
   commit(types.SET_SEARCH_QUERY, searchQuery);

ee/app/assets/javascripts/vue_shared/components/sidebar/epics_select/store/mutation_types.js

 export const SET_INITIAL_DATA = 'SET_INITIAL_DATA';
+export const SET_ISSUE_ID = 'SET_ISSUE_ID';
 
 export const SET_SEARCH_QUERY = 'SET_SEARCH_QUERY';
 

ee/app/assets/javascripts/vue_shared/components/sidebar/epics_select/store/mutations.js

@@ -8,6 +8,10 @@ export default {
     state.selectedEpicIssueId = selectedEpicIssueId;
   },
 
+  [types.SET_ISSUE_ID](state, issueId) {
+    state.issueId = issueId;
+  },
+
   [types.SET_SEARCH_QUERY](state, searchQuery) {
     state.searchQuery = searchQuery;
   },

ee/spec/frontend/vue_shared/components/sidebar/epics_select/base_spec.js

@@ -49,6 +49,38 @@ describe('EpicsSelect', () => {
       wrapper.destroy();
     });
 
+    describe('watchers', () => {
+      describe('issueId', () => {
+        it('should update `issueId` within state when prop is updated', () => {
+          wrapper.setProps({
+            issueId: 123,
+          });
+
+          expect(wrapper.vm.$store.state.issueId).toBe(123);
+        });
+      });
+
+      describe('initialEpic', () => {
+        it('should update `selectedEpic` within state when prop is updated', () => {
+          wrapper.setProps({
+            initialEpic: mockEpic2,
+          });
+
+          expect(wrapper.vm.$store.state.selectedEpic).toBe(mockEpic2);
+        });
+      });
+
+      describe('initialEpicLoading', () => {
+        it('should update `selectedEpic` within state when prop is updated', () => {
+          wrapper.setProps({
+            initialEpic: mockEpic2,
+          });
+
+          expect(wrapper.vm.$store.state.selectedEpic).toBe(mockEpic2);
+        });
+      });
+    });
+
     describe('methods', () => {
       describe('handleDropdownShown', () => {
         it('should call `fetchEpics` when `groupEpics` does not return any epics', done => {

ee/spec/frontend/vue_shared/components/sidebar/epics_select/store/actions_spec.js

@@ -46,6 +46,21 @@ describe('EpicsSelect', () => {
         });
       });
 
+      describe('setIssueId', () => {
+        it('should set `issueId` on state', done => {
+          const issueId = mockIssue.id;
+
+          testAction(
+            actions.setIssueId,
+            issueId,
+            state,
+            [{ type: types.SET_ISSUE_ID, payload: issueId }],
+            [],
+            done,
+          );
+        });
+      });
+
       describe('setSearchQuery', () => {
         it('should set `searchQuery` param on state', done => {
           const searchQuery = 'foo';

ee/spec/frontend/vue_shared/components/sidebar/epics_select/store/mutations_spec.js

@@ -32,6 +32,16 @@ describe('EpicsSelect', () => {
         });
       });
 
+      describe(types.SET_ISSUE_ID, () => {
+        it('should set provided `issueId` param to state.issueId', () => {
+          const issueId = mockIssue.id;
+
+          mutations[types.SET_ISSUE_ID](state, issueId);
+
+          expect(state).toHaveProperty('issueId', issueId);
+        });
+      });
+
       describe(types.SET_SEARCH_QUERY, () => {
         it('should set `searchQuery` param to state', () => {
           const searchQuery = 'foo';