feat(issues): GA streamlined issue actions, backport to old ui (#105863)

Replaces the old issue ui actions with the new issue actions UI which
lets us clean up a bunch of duplicate code we had to support both UIs.

Fixes a bug where they would overflow after a change in
#99177
<img width="374" height="204" alt="image"
src="https://github.com/user-attachments/assets/900f0d4b-b22a-4e28-b213-54139ae7f955"
/>


old issue ui before
<img width="369" height="273" alt="image"
src="https://github.com/user-attachments/assets/2467715e-1182-4ce8-989b-c093812caab6"
/>

old issue ui after
<img width="364" height="117" alt="image"
src="https://github.com/user-attachments/assets/474d93b9-83c0-4693-8cbd-0a848cc88e23"
/>


old issue ui empty state after
<img width="371" height="139" alt="image"
src="https://github.com/user-attachments/assets/f6a40220-fe37-4e52-aa76-f0abf367fdbf"
/>

Author: scttcper

static/app/components/externalIssues/externalIssueForm.spec.tsx

@@ -4,7 +4,7 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 
 import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
-import ExternalIssueForm from 'sentry/components/externalIssues/externalIssueForm';
+import {ExternalIssueForm} from 'sentry/components/externalIssues/externalIssueForm';
 import {
   makeClosableHeader,
   makeCloseButton,

static/app/components/externalIssues/externalIssueForm.tsx

@@ -4,7 +4,7 @@ import type {Span} from '@sentry/core';
 import * as Sentry from '@sentry/react';
 
 import {addSuccessMessage} from 'sentry/actionCreators/indicator';
-import type {ModalRenderProps} from 'sentry/actionCreators/modal';
+import {openModal, type ModalRenderProps} from 'sentry/actionCreators/modal';
 import type {RequestOptions, ResponseMeta} from 'sentry/api';
 import {TabList, Tabs} from 'sentry/components/core/tabs';
 import {ExternalForm} from 'sentry/components/externalIssues/externalForm';
@@ -26,11 +26,13 @@ import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Group} from 'sentry/types/group';
 import type {
+  GroupIntegration,
   Integration,
   IntegrationExternalIssue,
   IntegrationIssueConfig,
   IssueConfigField,
 } from 'sentry/types/integrations';
+import type {Organization} from 'sentry/types/organization';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {getAnalyticsDataForGroup} from 'sentry/utils/events';
 import {
@@ -42,6 +44,32 @@ import {
 import useApi from 'sentry/utils/useApi';
 import useOrganization from 'sentry/utils/useOrganization';
 
+export const openExternalIssueModal = ({
+  group,
+  integration,
+  onChange,
+  organization,
+}: {
+  group: Group;
+  integration: GroupIntegration;
+  onChange: () => void;
+  organization: Organization;
+}) => {
+  trackAnalytics('issue_details.external_issue_modal_opened', {
+    organization,
+    ...getAnalyticsDataForGroup(group),
+    external_issue_provider: integration.provider.key,
+    external_issue_type: 'first_party',
+  });
+
+  openModal(
+    deps => (
+      <ExternalIssueForm {...deps} {...{group, onChange, integration, organization}} />
+    ),
+    {closeEvents: 'escape-key'}
+  );
+};
+
 const MESSAGES_BY_ACTION = {
   link: t('Successfully linked issue.'),
   create: t('Successfully created issue.'),
@@ -75,7 +103,7 @@ function makeIntegrationIssueConfigQueryKey({
   ];
 }
 
-export default function ExternalIssueForm({
+export function ExternalIssueForm({
   group,
   integration,
   onChange,

static/app/components/feedback/feedbackItem/feedbackItemHeader.tsx

@@ -67,11 +67,13 @@ export default function FeedbackItemHeader({
       {eventData && feedbackItem.project ? (
         <ErrorBoundary mini>
           <Flex wrap="wrap" justify="between" align="center" gap="md">
-            <StreamlinedExternalIssueList
-              group={feedbackItem as unknown as Group}
-              project={feedbackItem.project}
-              event={eventData}
-            />
+            <Flex direction="row" gap="md">
+              <StreamlinedExternalIssueList
+                group={feedbackItem as unknown as Group}
+                project={feedbackItem.project}
+                event={eventData}
+              />
+            </Flex>
             {feedbackItem.seenBy.length ? (
               <Flex justify="end">
                 <Flex gap="md" align="center">