ref(grouplist): Refactor GroupList to use useApiQuery

static/app/components/issues/groupList.spec.tsx

@@ -1,11 +1,15 @@
-import * as qs from 'query-string';
 import {GroupFixture} from 'sentry-fixture/group';
 import {MemberFixture} from 'sentry-fixture/member';
 import {OrganizationFixture} from 'sentry-fixture/organization';
+import {ProjectFixture} from 'sentry-fixture/project';
+import {TeamFixture} from 'sentry-fixture/team';
+import {UserFixture} from 'sentry-fixture/user';
 
 import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import GroupStore from 'sentry/stores/groupStore';
+import MemberListStore from 'sentry/stores/memberListStore';
+import TeamStore from 'sentry/stores/teamStore';
 import {RELATED_ISSUES_BOOLEAN_QUERY_ERROR} from 'sentry/views/alerts/rules/metric/details/relatedIssuesNotAvailable';
 
 import GroupList from './groupList';
@@ -16,7 +20,6 @@ describe('GroupList', () => {
   const membersUrl = `/organizations/${organization.slug}/users/`;
   const issuesUrl = `/organizations/${organization.slug}/issues/`;
   const defaultQueryParams = {query: '', sort: 'new', limit: '50'};
-  const issuesUrlWithDefaultQuery = `${issuesUrl}?${qs.stringify(defaultQueryParams)}`;
   const initialRouterConfig = {
     location: {
       pathname: `/organizations/${organization.slug}/issues/`,
@@ -31,14 +34,16 @@ describe('GroupList', () => {
 
     MockApiClient.addMockResponse({url: membersUrl, body: [MemberFixture()]});
     MockApiClient.addMockResponse({
-      url: issuesUrlWithDefaultQuery,
+      url: issuesUrl,
       method: 'GET',
       body: [group],
     });
   });
 
   afterEach(() => {
     GroupStore.reset();
+    TeamStore.reset();
+    MemberListStore.reset();
   });
 
   it('renders the group list', async () => {
@@ -59,7 +64,7 @@ describe('GroupList', () => {
   it('renders empty state when no groups are returned', async () => {
     MockApiClient.addMockResponse({url: membersUrl, body: []});
     MockApiClient.addMockResponse({
-      url: issuesUrlWithDefaultQuery,
+      url: issuesUrl,
       method: 'GET',
       body: [],
     });
@@ -77,7 +82,7 @@ describe('GroupList', () => {
   it('renders custom error when query has boolean logic', async () => {
     const renderErrorMessage = jest.fn(() => <div>custom error</div>);
     const issuesRequest = MockApiClient.addMockResponse({
-      url: `${issuesUrl}?${qs.stringify({...defaultQueryParams, query: 'issue.id:1'})}`,
+      url: issuesUrl,
       method: 'GET',
       body: [],
     });
@@ -113,7 +118,7 @@ describe('GroupList', () => {
     MockApiClient.addMockResponse({url: membersUrl, body: []});
     const linkHeader = '<https://sentry.io/?cursor=next>; rel="next"';
     MockApiClient.addMockResponse({
-      url: issuesUrlWithDefaultQuery,
+      url: issuesUrl,
       method: 'GET',
       body: [group],
       headers: {Link: linkHeader},
@@ -140,7 +145,7 @@ describe('GroupList', () => {
           groups: [group],
           loading: false,
           pageLinks: linkHeader,
-          memberList: undefined,
+          memberList: {},
         }),
         expect.any(Function)
       )
@@ -154,7 +159,7 @@ describe('GroupList', () => {
 
     MockApiClient.addMockResponse({url: membersUrl, body: []});
     MockApiClient.addMockResponse({
-      url: issuesUrlWithDefaultQuery,
+      url: issuesUrl,
       method: 'GET',
       body: [GroupFixture()],
       headers: {Link: pageLinks},
@@ -182,4 +187,51 @@ describe('GroupList', () => {
 
     expect(router.location.query.page).toBe('1');
   });
+
+  it('updates the assignee when changed', async () => {
+    const user = UserFixture({id: '2', name: 'Jane Doe', email: 'jane@example.com'});
+    const team = TeamFixture({id: '1', slug: 'cool-team'});
+    const project = ProjectFixture({teams: [team]});
+    const groupWithProject = GroupFixture({project, assignedTo: null});
+
+    TeamStore.loadInitialData([team]);
+    MemberListStore.loadInitialData([user]);
+
+    MockApiClient.addMockResponse({url: membersUrl, body: [MemberFixture({user})]});
+    MockApiClient.addMockResponse({
+      url: issuesUrl,
+      method: 'GET',
+      body: [groupWithProject],
+    });
+
+    const assignMock = MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/issues/${groupWithProject.id}/`,
+      method: 'PUT',
+      body: {...groupWithProject, assignedTo: {...user, type: 'user'}},
+    });
+
+    render(<GroupList numPlaceholderRows={1} queryParams={defaultQueryParams} />, {
+      organization,
+      initialRouterConfig,
+    });
+
+    expect(await screen.findByText('RequestError')).toBeInTheDocument();
+
+    // Open the assignee dropdown and select a user
+    await userEvent.click(
+      await screen.findByRole('button', {name: 'Modify issue assignee'})
+    );
+    await userEvent.click(await screen.findByRole('option', {name: /Jane Doe/}));
+
+    // Should make the API call and display the new assignee
+    await waitFor(() => {
+      expect(assignMock).toHaveBeenCalledWith(
+        `/organizations/${organization.slug}/issues/${groupWithProject.id}/`,
+        expect.objectContaining({
+          data: {assignedTo: 'user:2', assignedBy: 'assignee_selector'},
+        })
+      );
+    });
+    expect(await screen.findByTestId('assigned-avatar')).toBeInTheDocument();
+  });
 });