feat(issue-progress): Add actions to issue preview

Author: malwilley

static/app/views/issueDetails/issuePreview/issuePreviewDrawer.spec.tsx

@@ -0,0 +1,102 @@
+import {GroupFixture} from 'sentry-fixture/group';
+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 {ConfigStore} from 'sentry/stores/configStore';
+import {ProjectsStore} from 'sentry/stores/projectsStore';
+import {IssueCategory} from 'sentry/types/group';
+import {IssuePreviewDrawer} from 'sentry/views/issueDetails/issuePreview/issuePreviewDrawer';
+
+const organization = OrganizationFixture({id: '4660', slug: 'org'});
+
+const project = ProjectFixture({
+  id: '2448',
+  name: 'project name',
+  slug: 'project',
+  teams: [TeamFixture({id: '3', slug: 'frontend', name: 'Frontend'})],
+});
+
+const group = GroupFixture({
+  id: '1337',
+  issueCategory: IssueCategory.ERROR,
+  project,
+});
+
+describe('IssuePreviewDrawer', () => {
+  beforeEach(() => {
+    ConfigStore.init();
+    ConfigStore.set('user', UserFixture());
+    ProjectsStore.reset();
+    ProjectsStore.loadInitialData([project]);
+
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/issues/${group.id}/`,
+      body: group,
+    });
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/users/`,
+      body: [],
+    });
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/issues/${group.id}/autofix/setup/`,
+      body: {
+        billing: null,
+        integration: {ok: false, reason: null},
+        seerReposLinked: false,
+        githubWriteIntegration: null,
+      },
+    });
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/integrations/coding-agents/`,
+      body: {integrations: []},
+    });
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/replay-count/`,
+      body: {},
+    });
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/issues/${group.id}/attachments/`,
+      body: [],
+    });
+  });
+
+  afterEach(() => {
+    MockApiClient.clearMockResponses();
+    jest.clearAllMocks();
+  });
+
+  it('resolves the issue', async () => {
+    const updateRequest = MockApiClient.addMockResponse({
+      url: `/projects/${organization.slug}/${project.slug}/issues/`,
+      method: 'PUT',
+      body: {...group, status: 'resolved'},
+    });
+
+    render(<IssuePreviewDrawer groupId={group.id} />, {organization});
+
+    const resolveButton = await screen.findByRole('button', {name: 'Resolve'});
+
+    // The drawer refetches the group after the update; return the resolved group.
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/issues/${group.id}/`,
+      body: {...group, status: 'resolved'},
+    });
+
+    await userEvent.click(resolveButton);
+
+    await waitFor(() => {
+      expect(updateRequest).toHaveBeenCalledWith(
+        `/projects/${organization.slug}/${project.slug}/issues/`,
+        expect.objectContaining({
+          data: {status: 'resolved', statusDetails: {}, substatus: null},
+        })
+      );
+    });
+
+    expect(await screen.findAllByText('Resolved')).not.toHaveLength(0);
+  });
+});

static/app/views/issueDetails/issuePreview/issuePreviewDrawer.tsx

@@ -3,7 +3,7 @@ import {Fragment} from 'react';
 import {LinkButton} from '@sentry/scraps/button';
 import {DrawerBody, DrawerHeader} from '@sentry/scraps/drawer';
 import {Container, Flex} from '@sentry/scraps/layout';
-import {Heading} from '@sentry/scraps/text';
+import {Heading, Text} from '@sentry/scraps/text';
 import {Tooltip} from '@sentry/scraps/tooltip';
 
 import {ErrorBoundary} from 'sentry/components/errorBoundary';
@@ -18,6 +18,8 @@ import {normalizeUrl} from 'sentry/utils/url/normalizeUrl';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {useProjects} from 'sentry/utils/useProjects';
 import {GroupActions} from 'sentry/views/issueDetails/actions/index';
+import {GroupPriority} from 'sentry/views/issueDetails/groupPriority';
+import {GroupHeaderAssigneeSelector} from 'sentry/views/issueDetails/header/assigneeSelector';
 import {GroupStatusSubtitle} from 'sentry/views/issueDetails/header/groupStatusSubtitle';
 import {IssueIdBreadcrumb} from 'sentry/views/issueDetails/header/issueIdBreadcrumb';
 import {useGroup} from 'sentry/views/issueDetails/useGroup';
@@ -99,8 +101,30 @@ function IssuePreviewContent({
           <GroupStatusSubtitle group={group} project={project} />
         </Flex>
       </Container>
-      <Flex paddingTop="lg" align="center" wrap="wrap" gap="xs">
+      <Flex
+        paddingTop="lg"
+        paddingBottom="lg"
+        borderBottom="muted"
+        justify="between"
+        align="center"
+        wrap="wrap"
+        gap="md"
+      >
         <GroupActions group={group} project={project} disabled={false} event={null} />
+        <Flex align="center" wrap="wrap" gap="lg">
+          <Flex align="center" gap="xs">
+            <Text size="sm" variant="muted">
+              {t('Priority')}
+            </Text>
+            <GroupPriority group={group} />
+          </Flex>
+          <Flex align="center" gap="xs">
+            <Text size="sm" variant="muted">
+              {t('Assignee')}
+            </Text>
+            <GroupHeaderAssigneeSelector group={group} project={project} event={null} />
+          </Flex>
+        </Flex>
       </Flex>
     </Fragment>
   );