Merge branch 'ss/add-apply-to-assignees' into 'master'

Add apply to assignees

See merge request gitlab-org/gitlab!44812

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

 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
-import { n__ } from '~/locale';
+import { n__, __ } from '~/locale';
 
 export default {
   name: 'AssigneeTitle',
@@ -26,12 +26,19 @@ export default {
       required: false,
       default: false,
     },
+    changing: {
+      type: Boolean,
+      required: true,
+    },
   },
   computed: {
     assigneeTitle() {
       const assignees = this.numberOfAssignees;
       return n__('Assignee', `%d Assignees`, assignees);
     },
+    titleCopy() {
+      return this.changing ? __('Apply') : __('Edit');
+    },
   },
 };
 </script>
@@ -43,11 +50,12 @@ export default {
       v-if="editable"
       class="js-sidebar-dropdown-toggle edit-link float-right"
       href="#"
+      data-test-id="edit-link"
       data-track-event="click_edit_button"
       data-track-label="right_sidebar"
       data-track-property="assignee"
     >
-      {{ __('Edit') }}
+      {{ titleCopy }}
     </a>
     <a
       v-if="showToggle"

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

@@ -89,6 +89,8 @@ export default {
         .saveAssignees(this.field)
         .then(() => {
           this.loading = false;
+          this.store.resetChanging();
+
           refreshUserMergeRequestCounts();
         })
         .catch(() => {
@@ -113,6 +115,7 @@ export default {
       :loading="loading || store.isFetching.assignees"
       :editable="store.editable"
       :show-toggle="!signedIn"
+      :changing="store.changing"
     />
     <assignees
       v-if="!store.isFetching.assignees"

app/assets/javascripts/sidebar/stores/sidebar_store.js

@@ -33,6 +33,7 @@ export default class SidebarStore {
     this.projectEmailsDisabled = false;
     this.subscribeDisabledDescription = '';
     this.subscribed = null;
+    this.changing = false;
 
     SidebarStore.singleton = this;
   }
@@ -51,6 +52,10 @@ export default class SidebarStore {
     }
   }
 
+  resetChanging() {
+    this.changing = false;
+  }
+
   setTimeTrackingData(data) {
     this.timeEstimate = data.time_estimate;
     this.totalTimeSpent = data.total_time_spent;
@@ -80,6 +85,7 @@ export default class SidebarStore {
 
   addAssignee(assignee) {
     if (!this.findAssignee(assignee)) {
+      this.changing = true;
       this.assignees.push(assignee);
     }
   }
@@ -100,6 +106,7 @@ export default class SidebarStore {
 
   removeAssignee(assignee) {
     if (assignee) {
+      this.changing = true;
       this.assignees = this.assignees.filter(({ id }) => id !== assignee.id);
     }
   }
@@ -111,6 +118,7 @@ export default class SidebarStore {
   }
 
   removeAllAssignees() {
+    this.changing = true;
     this.assignees = [];
   }
 

changelogs/unreleased/ss-add-apply-to-assignees.yml

+---
+title: Add apply button when user changes assignees
+merge_request: 44812
+author:
+type: added

spec/features/issues/issue_sidebar_spec.rb

@@ -140,6 +140,18 @@ RSpec.describe 'Issue Sidebar' do
         end
       end
     end
+
+    it 'shows label text as "Apply" when assignees are changed' do
+      project.add_developer(user)
+      visit_issue(project, issue2)
+
+      find('.block.assignee .edit-link').click
+      wait_for_requests
+
+      click_on 'Unassigned'
+
+      expect(page).to have_link('Apply')
+    end
   end
 
   context 'as a allowed user' do

spec/frontend/sidebar/assignee_title_spec.js

@@ -11,6 +11,7 @@ describe('AssigneeTitle component', () => {
       propsData: {
         numberOfAssignees: 0,
         editable: false,
+        changing: false,
         ...props,
       },
     });
@@ -62,6 +63,22 @@ describe('AssigneeTitle component', () => {
     });
   });
 
+  describe('when changing is false', () => {
+    it('renders "Edit"', () => {
+      wrapper = createComponent({ editable: true });
+
+      expect(wrapper.find('[data-test-id="edit-link"]').text()).toEqual('Edit');
+    });
+  });
+
+  describe('when changing is true', () => {
+    it('renders "Edit"', () => {
+      wrapper = createComponent({ editable: true, changing: true });
+
+      expect(wrapper.find('[data-test-id="edit-link"]').text()).toEqual('Apply');
+    });
+  });
+
   it('does not render spinner by default', () => {
     wrapper = createComponent({
       numberOfAssignees: 0,

spec/frontend/sidebar/sidebar_assignees_spec.js

@@ -20,6 +20,7 @@ describe('sidebar assignees', () => {
         mediator,
         field: '',
         projectPath: 'projectPath',
+        changing: false,
         ...props,
       },
       provide: {

spec/frontend/sidebar/sidebar_store_spec.js

@@ -57,16 +57,40 @@ describe('Sidebar store', () => {
     expect(testContext.store.isFetching.assignees).toBe(true);
   });
 
-  it('adds a new assignee', () => {
-    testContext.store.addAssignee(ASSIGNEE);
+  it('resets changing when resetChanging is called', () => {
+    testContext.store.changing = true;
+
+    testContext.store.resetChanging();
 
-    expect(testContext.store.assignees.length).toEqual(1);
+    expect(testContext.store.changing).toBe(false);
   });
 
-  it('removes an assignee', () => {
-    testContext.store.removeAssignee(ASSIGNEE);
+  describe('when it adds a new assignee', () => {
+    beforeEach(() => {
+      testContext.store.addAssignee(ASSIGNEE);
+    });
 
-    expect(testContext.store.assignees.length).toEqual(0);
+    it('adds a new assignee', () => {
+      expect(testContext.store.assignees).toHaveLength(1);
+    });
+
+    it('sets changing to true', () => {
+      expect(testContext.store.changing).toBe(true);
+    });
+  });
+
+  describe('when it removes an assignee', () => {
+    beforeEach(() => {
+      testContext.store.removeAssignee(ASSIGNEE);
+    });
+
+    it('removes an assignee', () => {
+      expect(testContext.store.assignees).toHaveLength(0);
+    });
+
+    it('sets changing to true', () => {
+      expect(testContext.store.changing).toBe(true);
+    });
   });
 
   it('finds an existent assignee', () => {
@@ -86,6 +110,7 @@ describe('Sidebar store', () => {
     testContext.store.removeAllAssignees();
 
     expect(testContext.store.assignees.length).toEqual(0);
+    expect(testContext.store.changing).toBe(true);
   });
 
   it('sets participants data', () => {

spec/support/shared_examples/features/multiple_assignees_mr_shared_examples.rb

@@ -38,7 +38,7 @@ RSpec.shared_examples 'multiple assignees merge request' do |action, save_button
     page.within '.issuable-sidebar' do
       page.within '.assignee' do
         # Closing dropdown to persist
-        click_link 'Edit'
+        click_link 'Apply'
 
         expect(page).to have_content user2.name
       end