Merge branch 'ntepluhina-fix-sidebar-events' into 'master'

Fix assignees on GraphQL boards

See merge request gitlab-org/gitlab!64940

app/assets/javascripts/boards/components/board_sidebar.js

@@ -105,7 +105,7 @@ export default Vue.extend({
     closeSidebar() {
       this.detail.issue = {};
     },
-    setAssignees(assignees) {
+    setAssignees({ assignees }) {
       boardsStore.detail.issue.setAssignees(assignees);
     },
     showScopedLabels(label) {

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

@@ -472,11 +472,11 @@ export default {
     }
   },
 
-  setAssignees: ({ commit, getters }, assigneeUsernames) => {
+  setAssignees: ({ commit }, { id, assignees }) => {
     commit('UPDATE_BOARD_ITEM_BY_ID', {
-      itemId: getters.activeBoardItem.id,
+      itemId: id,
       prop: 'assignees',
-      value: assigneeUsernames,
+      value: assignees,
     });
   },
 

app/assets/javascripts/sidebar/components/assignees/sidebar_assignees_widget.vue

@@ -3,6 +3,7 @@ import { GlDropdownItem } from '@gitlab/ui';
 import { cloneDeep } from 'lodash';
 import Vue from 'vue';
 import createFlash from '~/flash';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { IssuableType } from '~/issue_show/constants';
 import { __, n__ } from '~/locale';
 import SidebarAssigneesRealtime from '~/sidebar/components/assignees/assignees_realtime.vue';
@@ -80,6 +81,8 @@ export default {
       selected: [],
       isSettingAssignees: false,
       isDirty: false,
+      oldIid: null,
+      oldSelected: null,
     };
   },
   apollo: {
@@ -142,6 +145,14 @@ export default {
       return this.currentUser.username !== undefined;
     },
   },
+  watch: {
+    iid(_, oldIid) {
+      if (this.isDirty) {
+        this.oldIid = oldIid;
+        this.oldSelected = this.selected;
+      }
+    },
+  },
   created() {
     assigneesWidget.updateAssignees = this.updateAssignees;
   },
@@ -157,10 +168,14 @@ export default {
           variables: {
             ...this.queryVariables,
             assigneeUsernames,
+            iid: this.oldIid || this.iid,
           },
         })
         .then(({ data }) => {
-          this.$emit('assignees-updated', data.issuableSetAssignees.issuable.assignees.nodes);
+          this.$emit('assignees-updated', {
+            id: getIdFromGraphQLId(data.issuableSetAssignees.issuable.id),
+            assignees: data.issuableSetAssignees.issuable.assignees.nodes,
+          });
           return data;
         })
         .catch(() => {
@@ -176,7 +191,10 @@ export default {
     saveAssignees() {
       if (this.isDirty) {
         this.isDirty = false;
-        this.updateAssignees(this.selected.map(({ username }) => username));
+        const usernames = this.oldSelected || this.selected;
+        this.updateAssignees(usernames.map(({ username }) => username));
+        this.oldIid = null;
+        this.oldSelected = null;
       }
       this.$el.dispatchEvent(hideDropdownEvent);
     },

spec/frontend/boards/stores/actions_spec.js

@@ -1111,16 +1111,13 @@ describe('updateIssueOrder', () => {
 
 describe('setAssignees', () => {
   const node = { username: 'name' };
-  const projectPath = 'h/h';
-  const refPath = `${projectPath}#3`;
-  const iid = '1';
 
   describe('when succeeds', () => {
     it('calls the correct mutation with the correct values', (done) => {
       testAction(
         actions.setAssignees,
-        [node],
-        { activeBoardItem: { iid, referencePath: refPath }, commit: () => {} },
+        { assignees: [node], iid: '1' },
+        { commit: () => {} },
         [
           {
             type: 'UPDATE_BOARD_ITEM_BY_ID',

spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js

@@ -176,7 +176,7 @@ describe('Sidebar assignees widget', () => {
       ).toBe(true);
     });
 
-    it('emits an event with assignees list on successful mutation', async () => {
+    it('emits an event with assignees list and issuable id on successful mutation', async () => {
       createComponent();
 
       await waitForPromises();
@@ -193,18 +193,21 @@ describe('Sidebar assignees widget', () => {
 
       expect(wrapper.emitted('assignees-updated')).toEqual([
         [
-          [
-            {
-              __typename: 'User',
-              avatarUrl:
-                'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
-              id: 'gid://gitlab/User/1',
-              name: 'Administrator',
-              username: 'root',
-              webUrl: '/root',
-              status: null,
-            },
-          ],
+          {
+            assignees: [
+              {
+                __typename: 'User',
+                avatarUrl:
+                  'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+                id: 'gid://gitlab/User/1',
+                name: 'Administrator',
+                username: 'root',
+                webUrl: '/root',
+                status: null,
+              },
+            ],
+            id: 1,
+          },
         ],
       ]);
     });
@@ -285,6 +288,21 @@ describe('Sidebar assignees widget', () => {
         expect(updateIssueAssigneesMutationSuccess).not.toHaveBeenCalled();
         expect(findUserSelect().isVisible()).toBe(true);
       });
+
+      it('calls the mutation old issuable id if `iid` prop was changed', async () => {
+        findUserSelect().vm.$emit('input', [{ username: 'francina.skiles' }]);
+        wrapper.setProps({
+          iid: '2',
+        });
+        await nextTick();
+        findEditableItem().vm.$emit('close');
+
+        expect(updateIssueAssigneesMutationSuccess).toHaveBeenCalledWith({
+          assigneeUsernames: ['francina.skiles'],
+          fullPath: '/mygroup/myProject',
+          iid: '1',
+        });
+      });
     });
 
     it('shows an error if update assignees mutation is rejected', async () => {