Boards - Fix weight assigned to wrong card

Changelog: fixed
EE: true

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

@@ -404,9 +404,9 @@ export default {
     commit(types.RESET_EPICS);
   },
 
-  setActiveItemWeight: async ({ commit, getters }, weight) => {
+  setActiveItemWeight: async ({ commit }, { weight, id }) => {
     commit(typesCE.UPDATE_BOARD_ITEM_BY_ID, {
-      itemId: getters.activeBoardItem.id,
+      itemId: id,
       prop: 'weight',
       value: weight,
     });

ee/app/assets/javascripts/sidebar/components/weight/sidebar_weight_widget.vue

@@ -53,6 +53,7 @@ export default {
     return {
       weight: null,
       loading: false,
+      oldIid: null,
     };
   },
   apollo: {
@@ -70,7 +71,7 @@ export default {
         return data.workspace?.issuable?.weight;
       },
       result({ data }) {
-        this.$emit('weightUpdated', data.workspace?.issuable?.weight);
+        return data.workspace?.issuable?.weight;
       },
       error() {
         createFlash({
@@ -106,10 +107,16 @@ export default {
         : this.$options.i18n.noWeightLabel;
     },
   },
+  watch: {
+    iid(_, oldVal) {
+      this.oldIid = oldVal;
+    },
+  },
   methods: {
     setWeight(remove) {
       const shouldRemoveWeight = remove || this.weight === '';
       const weight = shouldRemoveWeight ? null : this.weight;
+      const currentIid = shouldRemoveWeight ? this.iid : this.oldIid || this.iid;
       this.loading = true;
       this.$apollo
         .mutate({
@@ -117,24 +124,23 @@ export default {
           variables: {
             input: {
               projectPath: this.fullPath,
-              iid: this.iid,
+              iid: currentIid,
               weight,
             },
           },
         })
-        .then(
-          ({
-            data: {
-              issuableSetWeight: { errors },
-            },
-          }) => {
-            if (errors.length) {
-              createFlash({
-                message: errors[0],
-              });
-            }
-          },
-        )
+        .then(({ data: { issuableSetWeight } }) => {
+          if (issuableSetWeight.errors?.length) {
+            createFlash({
+              message: issuableSetWeight.errors[0],
+            });
+          } else {
+            this.$emit('weightUpdated', {
+              weight: issuableSetWeight?.issuable?.weight,
+              id: issuableSetWeight?.issuable?.id,
+            });
+          }
+        })
         .catch(() => {
           createFlash({
             message: sprintf(__('Something went wrong while setting %{issuableType} weight.'), {
@@ -173,6 +179,7 @@ export default {
     :loading="isLoading"
     class="block weight"
     data-testid="sidebar-weight"
+    @open="oldIid = null"
     @close="setWeight()"
   >
     <template #collapsed>

ee/spec/features/boards/sidebar_spec.rb

@@ -265,6 +265,20 @@ RSpec.describe 'Issue Boards', :js do
       expect(weight_value).to have_content 'None'
     end
 
+    it 'updates the original card when another card is clicked' do
+      click_card(card1)
+
+      within weight_widget do
+        click_button 'Edit'
+        find('.weight input').send_keys 1
+      end
+
+      click_card(card2)
+      click_card(card1)
+
+      expect(weight_value).to have_content '1'
+    end
+
     context 'unlicensed' do
       before do
         stub_licensed_features(issue_weights: false)

ee/spec/frontend/boards/stores/actions_spec.js

@@ -685,7 +685,7 @@ describe('setActiveItemWeight', () => {
   const state = { boardItems: { [mockIssue.id]: mockIssue } };
   const getters = { activeBoardItem: mockIssue };
   const testWeight = mockIssue.weight + 1;
-  const input = testWeight;
+  const input = { weight: testWeight, id: mockIssue.id };
 
   it('should commit weight', (done) => {
     const payload = {

ee/spec/frontend/sidebar/components/weight/sidebar_weight_widget_spec.js

+import { GlButton, GlForm, GlFormInput } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import SidebarWeightWidget from 'ee_component/sidebar/components/weight/sidebar_weight_widget.vue';
 import issueWeightQuery from 'ee_component/sidebar/queries/issue_weight.query.graphql';
+import updateIssueWeightMutation from 'ee_component/sidebar/queries/update_issue_weight.mutation.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
+import { preventDefault, stopPropagation } from 'ee_jest/admin/test_helpers';
 import createFlash from '~/flash';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
-import { issueNoWeightResponse, issueWeightResponse } from '../../mock_data';
+import {
+  issueNoWeightResponse,
+  issueWeightResponse,
+  setWeightResponse,
+  removeWeightResponse,
+  mockIssueId,
+} from '../../mock_data';
 
 jest.mock('~/flash');
 
@@ -19,12 +28,20 @@ describe('Sidebar Weight Widget', () => {
   let fakeApollo;
 
   const findEditableItem = () => wrapper.findComponent(SidebarEditableItem);
+  const findRemoveButton = () => wrapper.findComponent(GlButton);
   const findWeightValue = () => wrapper.findByTestId('sidebar-weight-value');
+  const findFormInput = () => wrapper.findComponent(GlFormInput);
+  const findForm = () => wrapper.findComponent(GlForm);
 
+  const createFakeEvent = () => ({ preventDefault, stopPropagation });
   const createComponent = ({
     weightQueryHandler = jest.fn().mockResolvedValue(issueNoWeightResponse()),
+    weightMutationHandler = jest.fn().mockResolvedValue(setWeightResponse()),
   } = {}) => {
-    fakeApollo = createMockApollo([[issueWeightQuery, weightQueryHandler]]);
+    fakeApollo = createMockApollo([
+      [issueWeightQuery, weightQueryHandler],
+      [updateIssueWeightMutation, weightMutationHandler],
+    ]);
 
     wrapper = extendedWrapper(
       shallowMount(SidebarWeightWidget, {
@@ -37,9 +54,6 @@ describe('Sidebar Weight Widget', () => {
           iid: '1',
           issuableType: 'issue',
         },
-        stubs: {
-          SidebarEditableItem,
-        },
       }),
     );
   };
@@ -58,6 +72,7 @@ describe('Sidebar Weight Widget', () => {
   describe('when issue has no weight', () => {
     beforeEach(() => {
       createComponent();
+      wrapper.vm.$refs.editable.collapse = jest.fn();
       return waitForPromises();
     });
 
@@ -69,8 +84,18 @@ describe('Sidebar Weight Widget', () => {
       expect(findWeightValue().text()).toBe('None');
     });
 
-    it('emits `weightUpdated` event with a `null` payload', () => {
-      expect(wrapper.emitted('weightUpdated')).toEqual([[null]]);
+    it('does not display remove option', () => {
+      expect(findRemoveButton().exists()).toBe(false);
+    });
+
+    it('sets weight', async () => {
+      findEditableItem().vm.$emit('open');
+      findFormInput().vm.$emit('input', '2');
+      findForm().vm.$emit('submit', createFakeEvent());
+      await waitForPromises();
+
+      expect(findWeightValue().text()).toBe('2');
+      expect(wrapper.emitted('weightUpdated')).toEqual([[{ id: mockIssueId, weight: 2 }]]);
     });
   });
 
@@ -78,6 +103,7 @@ describe('Sidebar Weight Widget', () => {
     beforeEach(() => {
       createComponent({
         weightQueryHandler: jest.fn().mockResolvedValue(issueWeightResponse(true)),
+        weightMutationHandler: jest.fn().mockResolvedValue(removeWeightResponse()),
       });
       return waitForPromises();
     });
@@ -90,8 +116,13 @@ describe('Sidebar Weight Widget', () => {
       expect(findWeightValue().text()).toBe('0');
     });
 
-    it('emits `weightUpdated` event with a `true` payload', () => {
-      expect(wrapper.emitted('weightUpdated')).toEqual([[0]]);
+    it('displays remove option - removes weight', async () => {
+      expect(findRemoveButton().exists()).toBe(true);
+      findRemoveButton().vm.$emit('click');
+      await waitForPromises();
+
+      expect(findWeightValue().text()).toBe('None');
+      expect(wrapper.emitted('weightUpdated')).toEqual([[{ id: mockIssueId, weight: null }]]);
     });
   });
 

ee/spec/frontend/sidebar/mock_data.js

@@ -193,3 +193,23 @@ export const issueWeightResponse = () => ({
     },
   },
 });
+
+export const setWeightResponse = () => ({
+  data: {
+    issuableSetWeight: {
+      issuable: { id: mockIssueId, weight: 2, __typename: 'Issue' },
+      errors: [],
+      __typename: 'Project',
+    },
+  },
+});
+
+export const removeWeightResponse = () => ({
+  data: {
+    issuableSetWeight: {
+      issuable: { id: mockIssueId, weight: null, __typename: 'Issue' },
+      errors: [],
+      __typename: 'Project',
+    },
+  },
+});