Added stateful Apply button to assignees

WIP

Add GlDropdownForm from gitlab ui

Add assignee dropdown multiselect wrapper

Add changelog for assignees multiselect wrapper

Replace component with gitlab ui comp

WIP

Change approach

Add specs

Add spec

Add changelog

remove unused files

Fix jest spec

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