Resolve "Skip fetching project members until assignees dropdown is open"

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

@@ -229,7 +229,7 @@ export default {
           @expand-widget="expandWidget"
         />
       </template>
-      <template #default>
+      <template #default="{ edit }">
         <user-select
           ref="userSelect"
           v-model="selected"
@@ -240,6 +240,7 @@ export default {
           :allow-multiple-assignees="allowMultipleAssignees"
           :current-user="currentUser"
           :issuable-type="issuableType"
+          :is-editing="edit"
           class="gl-w-full dropdown-menu-user"
           @toggle="collapseWidget"
           @error="showError"

app/assets/javascripts/vue_shared/components/user_select/user_select.vue

@@ -60,6 +60,11 @@ export default {
       required: false,
       default: 'issue',
     },
+    isEditing: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
@@ -75,7 +80,7 @@ export default {
         return participantsQueries[this.issuableType].query;
       },
       skip() {
-        return Boolean(participantsQueries[this.issuableType].skipQuery);
+        return Boolean(participantsQueries[this.issuableType].skipQuery) || !this.isEditing;
       },
       variables() {
         return {
@@ -102,6 +107,9 @@ export default {
           first: 20,
         };
       },
+      skip() {
+        return !this.isEditing;
+      },
       update(data) {
         // TODO Remove null filter (BE fix required)
         // https://gitlab.com/gitlab-org/gitlab/-/issues/329750

spec/frontend/vue_shared/components/user_select_spec.js

@@ -49,10 +49,13 @@ describe('User select dropdown', () => {
   const findUnassignLink = () => wrapper.find('[data-testid="unassign"]');
   const findEmptySearchResults = () => wrapper.find('[data-testid="empty-results"]');
 
+  const searchQueryHandlerSuccess = jest.fn().mockResolvedValue(projectMembersResponse);
+  const participantsQueryHandlerSuccess = jest.fn().mockResolvedValue(participantsQueryResponse);
+
   const createComponent = ({
     props = {},
-    searchQueryHandler = jest.fn().mockResolvedValue(projectMembersResponse),
-    participantsQueryHandler = jest.fn().mockResolvedValue(participantsQueryResponse),
+    searchQueryHandler = searchQueryHandlerSuccess,
+    participantsQueryHandler = participantsQueryHandlerSuccess,
   } = {}) => {
     fakeApollo = createMockApollo([
       [searchUsersQuery, searchQueryHandler],
@@ -91,6 +94,14 @@ describe('User select dropdown', () => {
     expect(findParticipantsLoading().exists()).toBe(true);
   });
 
+  it('skips the queries if `isEditing` prop is false', () => {
+    createComponent({ props: { isEditing: false } });
+
+    expect(findParticipantsLoading().exists()).toBe(false);
+    expect(searchQueryHandlerSuccess).not.toHaveBeenCalled();
+    expect(participantsQueryHandlerSuccess).not.toHaveBeenCalled();
+  });
+
   it('emits an `error` event if participants query was rejected', async () => {
     createComponent({ participantsQueryHandler: mockError });
     await waitForPromises();