Add assign self to group boards sidebar

app/assets/javascripts/boards/components/board_assignee_dropdown.vue

 <script>
 import { mapActions, mapGetters } from 'vuex';
+import { cloneDeep } from 'lodash';
 import {
   GlDropdownItem,
   GlDropdownDivider,
@@ -37,7 +38,7 @@ export default {
     return {
       search: '',
       participants: [],
-      selected: this.$store.getters.activeIssue.assignees,
+      selected: [],
     };
   },
   apollo: {
@@ -89,9 +90,20 @@ export default {
     isSearchEmpty() {
       return this.search === '';
     },
+    currentUser() {
+      return gon?.current_username;
+    },
+  },
+  created() {
+    this.selected = cloneDeep(this.activeIssue.assignees);
   },
   methods: {
     ...mapActions(['setAssignees']),
+    async assignSelf() {
+      const [currentUserObject] = await this.setAssignees(this.currentUser);
+
+      this.selectAssignee(currentUserObject);
+    },
     clearSelected() {
       this.selected = [];
     },
@@ -119,7 +131,7 @@ export default {
 <template>
   <board-editable-item :title="assigneeText" @close="saveAssignees">
     <template #collapsed>
-      <issuable-assignees :users="activeIssue.assignees" />
+      <issuable-assignees :users="selected" @assign-self="assignSelf" />
     </template>
 
     <template #default>

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

@@ -325,11 +325,15 @@ export default {
         },
       })
       .then(({ data }) => {
+        const { nodes } = data.issueSetAssignees?.issue?.assignees || [];
+
         commit('UPDATE_ISSUE_BY_ID', {
           issueId: getters.activeIssue.id,
           prop: 'assignees',
-          value: data.issueSetAssignees.issue.assignees.nodes,
+          value: nodes,
         });
+
+        return nodes;
       });
   },
 

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

 <script>
+import { GlButton } from '@gitlab/ui';
 import { n__ } from '~/locale';
 import UncollapsedAssigneeList from '~/sidebar/components/assignees/uncollapsed_assignee_list.vue';
 
 export default {
   components: {
+    GlButton,
     UncollapsedAssigneeList,
   },
   inject: ['rootPath'],
@@ -27,9 +29,15 @@ export default {
 <template>
   <div class="gl-display-flex gl-flex-direction-column">
     <div v-if="emptyUsers" data-testid="none">
-      <span>
-        {{ __('None') }}
-      </span>
+      <span> {{ __('None') }} -</span>
+      <gl-button
+        data-testid="assign-yourself"
+        category="tertiary"
+        variant="link"
+        @click="$emit('assign-self')"
+      >
+        <span class="gl-text-gray-400">{{ __('assign yourself') }}</span>
+      </gl-button>
     </div>
     <uncollapsed-assignee-list v-else :users="users" :root-path="rootPath" />
   </div>

changelogs/unreleased/ss-assign-self.yml

+---
+title: Add assign self to group boards sidebar
+merge_request: 47705
+author:
+type: added

spec/frontend/boards/components/board_assignee_dropdown_spec.js

@@ -20,6 +20,7 @@ describe('BoardCardAssigneeDropdown', () => {
   let fakeApollo;
   let getIssueParticipantsSpy;
   let getSearchUsersSpy;
+  let dispatchSpy;
 
   const iid = '111';
   const activeIssueName = 'test';
@@ -91,10 +92,11 @@ describe('BoardCardAssigneeDropdown', () => {
       },
     };
 
-    jest.spyOn(store, 'dispatch').mockResolvedValue();
+    dispatchSpy = jest.spyOn(store, 'dispatch').mockResolvedValue();
   });
 
   afterEach(() => {
+    window.gon = {};
     jest.restoreAllMocks();
   });
 
@@ -305,4 +307,25 @@ describe('BoardCardAssigneeDropdown', () => {
 
     expect(wrapper.find(GlSearchBoxByType).exists()).toBe(true);
   });
+
+  describe('when assign-self is emitted from IssuableAssignees', () => {
+    const currentUser = { username: 'self', name: '', id: '' };
+
+    beforeEach(() => {
+      window.gon = { current_username: currentUser.username };
+
+      dispatchSpy.mockResolvedValue([currentUser]);
+      createComponent();
+
+      wrapper.find(IssuableAssignees).vm.$emit('assign-self');
+    });
+
+    it('calls setAssignees with currentUser', () => {
+      expect(store.dispatch).toHaveBeenCalledWith('setAssignees', currentUser.username);
+    });
+
+    it('adds the user to the selected list', async () => {
+      expect(findByText(currentUser.username).exists()).toBe(true);
+    });
+  });
 });

spec/frontend/sidebar/issuable_assignees_spec.js

@@ -26,8 +26,8 @@ describe('IssuableAssignees', () => {
       createComponent();
     });
 
-    it('renders "None"', () => {
-      expect(findEmptyAssignee().text()).toBe('None');
+    it('renders "None - assign yourself"', () => {
+      expect(findEmptyAssignee().text()).toBe('None - assign yourself');
     });
   });
 
@@ -38,4 +38,12 @@ describe('IssuableAssignees', () => {
       expect(findUncollapsedAssigneeList().exists()).toBe(true);
     });
   });
+
+  describe('when clicking "assign yourself"', () => {
+    it('emits "assign-self"', () => {
+      createComponent();
+      wrapper.find('[data-testid="assign-yourself"]').vm.$emit('click');
+      expect(wrapper.emitted('assign-self')).toHaveLength(1);
+    });
+  });
 });