feat(issue): convert external issue tracking to dropdown (#94509)

natemoo-re · web-flow · commit 518a5b721e80 · 2025-07-21T22:18:30.000Z
Updates the streamlined external issue tracking experience to use a dropdown rather than a row of buttons, per the [Issue Tracking v2 Mockups](https://www.figma.com/design/p2DOzd1RwAHQbq0v6KaYmF/Issue-Details?node-id=8061-42500&t=vu6zKtqxQbn9kqu3-11) in Figma. This closes DE-14, which we hit in UI2 because of the dashed button border. @vuluongj20 put together a new design for this interaction as a solution. ## Pages <details><summary><strong>Issue Details</strong></summary> <img width="318" alt="issue-detail-0" src="https://github.com/user-attachments/assets/298fdaca-7a0e-4bba-985d-e7e989ce6c01" /> <br/> <img width="290" alt="issue-detail-1" src="https://github.com/user-attachments/assets/e99bc17b-aac0-4649-a981-38f5d590c291" /> <img width="478" alt="issue-detail-2" src="https://github.com/user-attachments/assets/c1f88295-a72b-46e1-a47c-e8b46428c230" /> <img width="318" alt="issue-detail-3" src="https://github.com/user-attachments/assets/742ff728-6b5b-4fc6-806a-73ad98e539ba" /> <img width="283" alt="issue-detail-4" src="https://github.com/user-attachments/assets/96c8c01f-8d54-4c8d-8e61-e99d8a2a093a" /> </details> <details><summary><strong>User Feedback</strong></summary> <img width="715" alt="feedback-issue-0" src="https://github.com/user-attachments/assets/1c613928-ca9b-4ba9-8be5-18f0c6ac0a95" /> <img width="323" alt="feedback-issue-1" src="https://github.com/user-attachments/assets/6df68c90-01ef-40b6-9ddb-0dba53dac655" /> <img width="502" alt="feedback-issue-2" src="https://github.com/user-attachments/assets/f33e01d3-6ace-47cf-b840-c05acda7bf27" /> <img width="509" alt="feedback-issue-3" src="https://github.com/user-attachments/assets/346adb8c-f57b-449c-a38c-7e340e0cab6e" /> <img width="597" alt="feedback-issue-4" src="https://github.com/user-attachments/assets/7a22f53d-732a-4f75-8c21-facaa110a5ca" /> </details>
diff --git a/static/app/components/group/externalIssuesList/hooks/types.tsx b/static/app/components/group/externalIssuesList/hooks/types.tsx
@@ -46,7 +46,7 @@ export interface ExternalIssueAction {
  * Integrations, apps, or plugins that can create external issues.
  * Each integration can have one or more configurations.
  */
-interface ExternalIssueIntegration extends BaseIssueAction {
+export interface ExternalIssueIntegration extends BaseIssueAction {
   actions: ExternalIssueAction[];
 }
 
diff --git a/static/app/components/group/externalIssuesList/hooks/usePluginExternalIssues.tsx b/static/app/components/group/externalIssuesList/hooks/usePluginExternalIssues.tsx
@@ -1,4 +1,5 @@
 import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
+import {openNavigateToExternalLinkModal} from 'sentry/actionCreators/modal';
 import {openPluginActionModal} from 'sentry/components/group/pluginActions';
 import {t} from 'sentry/locale';
 import plugins from 'sentry/plugins';
@@ -129,7 +130,7 @@ export function usePluginExternalIssues({
           name: action,
           href: action,
           onClick: () => {
-            // Do nothing
+            openNavigateToExternalLinkModal({linkText: action});
           },
         },
       ],
diff --git a/static/app/components/group/externalIssuesList/streamlinedExternalIssueList.tsx b/static/app/components/group/externalIssuesList/streamlinedExternalIssueList.tsx
@@ -1,16 +1,21 @@
-import {Fragment} from 'react';
+import {Fragment, useContext} from 'react';
 import styled from '@emotion/styled';
 
-import {AlertLink} from 'sentry/components/core/alert/alertLink';
 import {Button, type ButtonProps} from 'sentry/components/core/button';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
+import {CompositeSelect} from 'sentry/components/core/compactSelect/composite';
+import {SelectContext} from 'sentry/components/core/compactSelect/control';
+import {Flex} from 'sentry/components/core/layout';
+import {MenuListItem, type MenuListItemProps} from 'sentry/components/core/menuListItem';
 import {Tooltip} from 'sentry/components/core/tooltip';
-import DropdownButton from 'sentry/components/dropdownButton';
-import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import ErrorBoundary from 'sentry/components/errorBoundary';
-import type {ExternalIssueAction} from 'sentry/components/group/externalIssuesList/hooks/types';
+import type {
+  ExternalIssueAction,
+  ExternalIssueIntegration,
+} from 'sentry/components/group/externalIssuesList/hooks/types';
 import useGroupExternalIssues from 'sentry/components/group/externalIssuesList/hooks/useGroupExternalIssues';
 import Placeholder from 'sentry/components/placeholder';
+import {IconAdd} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Event} from 'sentry/types/event';
@@ -25,7 +30,11 @@ function getActionLabelAndTextValue({
 }: {
   action: ExternalIssueAction;
   integrationDisplayName: string;
-}): {label: string | React.JSX.Element; textValue: string} {
+}): {
+  label: string | React.JSX.Element;
+  textValue: string;
+  details?: string | React.JSX.Element;
+} {
   // If there's no subtext or subtext matches name, just show name
   if (!action.nameSubText || action.nameSubText === action.name) {
     return {
@@ -44,12 +53,8 @@ function getActionLabelAndTextValue({
 
   // Otherwise show both name and subtext
   return {
-    label: (
-      <div>
-        <strong>{action.name}</strong>
-        <div>{action.nameSubText}</div>
-      </div>
-    ),
+    label: action.name,
+    details: action.nameSubText,
     textValue: `${action.name} ${action.nameSubText}`,
   };
 }
@@ -65,7 +70,6 @@ export function StreamlinedExternalIssueList({
   event,
   project,
 }: ExternalIssueListProps) {
-  const organization = useOrganization();
   const {isLoading, integrations, linkedIssues} = useGroupExternalIssues({
     group,
     event,
@@ -76,20 +80,8 @@ export function StreamlinedExternalIssueList({
     return <Placeholder height="25px" testId="issue-tracking-loading" />;
   }
 
-  const hasLinkedIssuesOrIntegrations = integrations.length || linkedIssues.length;
-  if (!hasLinkedIssuesOrIntegrations) {
-    return (
-      <AlertLink
-        type="muted"
-        to={`/settings/${organization.slug}/integrations/?category=issue%20tracking`}
-      >
-        {t('Track this issue in Jira, GitHub, etc.')}
-      </AlertLink>
-    );
-  }
-
   return (
-    <Fragment>
+    <Flex direction="row" wrap="wrap" gap={space(1)} flex={1}>
       {linkedIssues.length > 0 && (
         <IssueActionWrapper>
           {linkedIssues.map(linkedIssue => (
@@ -112,143 +104,157 @@ export function StreamlinedExternalIssueList({
                 }
                 isHoverable
               >
-                <LinkedIssue
+                <LinkButton
                   href={linkedIssue.url}
                   external
                   size="zero"
                   icon={linkedIssue.displayIcon}
                 >
                   <IssueActionName>{linkedIssue.displayName}</IssueActionName>
-                </LinkedIssue>
+                </LinkButton>
               </Tooltip>
             </ErrorBoundary>
           ))}
         </IssueActionWrapper>
       )}
-      {integrations.length > 0 && (
-        <IssueActionWrapper>
-          {integrations.map(integration => {
-            const sharedButtonProps: ButtonProps = {
-              size: 'zero',
-              icon: integration.displayIcon,
-              children: <IssueActionName>{integration.displayName}</IssueActionName>,
-            };
+      <ExternalIssueMenu linkedIssues={linkedIssues} integrations={integrations} />
+    </Flex>
+  );
+}
 
+function ExternalIssueMenu(props: ReturnType<typeof useGroupExternalIssues>) {
+  const organization = useOrganization({allowNull: false});
+
+  return (
+    <Fragment>
+      <CompositeSelect
+        trigger={triggerProps => (
+          <Button {...triggerProps} size="zero" icon={<IconAdd />}>
+            {props.linkedIssues.length === 0 ? t('Add Linked Issue') : null}
+          </Button>
+        )}
+        // Required for submenu interactions
+        isDismissable={false}
+        menuTitle={t('Add Linked Issue')}
+        hideOptions={props.integrations.length === 0}
+        menuBody={props.integrations.length === 0 && <ExternalIssueMenuEmpty />}
+        menuFooter={props.integrations.length > 0 && <ExternalIssueManageLink />}
+      >
+        <CompositeSelect.Region
+          closeOnSelect={({value}) => {
+            const integration = props.integrations.find(({key}) => key === value);
+            if (!integration) {
+              return true;
+            }
+            return integration.actions.length === 1;
+          }}
+          onChange={({value}) => {
+            const integration = props.integrations.find(({key}) => key === value);
+            if (!integration) {
+              return;
+            }
             if (integration.actions.length === 1) {
               const action = integration.actions[0]!;
-              return (
-                <ErrorBoundary key={integration.key} mini>
-                  {action.href ? (
-                    // Exclusively used for group.pluginActions
-                    <IssueActionLinkButton
-                      size="zero"
-                      icon={integration.displayIcon}
-                      disabled={integration.disabled}
-                      title={integration.disabled ? integration.disabledText : undefined}
-                      onClick={() => {
-                        action.onClick();
-                        trackAnalytics('feedback.details-integration-issue-clicked', {
-                          organization,
-                          integration_key: integration.key,
-                        });
-                      }}
-                      href={action.href}
-                      external
-                    >
-                      <IssueActionName>{integration.displayName}</IssueActionName>
-                    </IssueActionLinkButton>
-                  ) : (
-                    <IssueActionButton
-                      {...sharedButtonProps}
-                      disabled={integration.disabled}
-                      title={integration.disabled ? integration.disabledText : undefined}
-                      onClick={() => {
-                        action.onClick();
-                        trackAnalytics('feedback.details-integration-issue-clicked', {
-                          organization,
-                          integration_key: integration.key,
-                        });
-                      }}
-                    />
-                  )}
-                </ErrorBoundary>
-              );
+              trackAnalytics('feedback.details-integration-issue-clicked', {
+                organization,
+                integration_key: integration.key,
+              });
+              action.onClick();
+              return;
             }
-
-            return (
-              <ErrorBoundary key={integration.key} mini>
-                <DropdownMenu
-                  trigger={triggerProps => (
-                    <IssueActionDropdownMenu
-                      {...sharedButtonProps}
-                      {...triggerProps}
-                      showChevron={false}
-                    />
-                  )}
-                  items={integration.actions.map(action => ({
-                    key: action.id,
-                    ...getActionLabelAndTextValue({
-                      action,
-                      integrationDisplayName: integration.displayName,
-                    }),
-                    onAction: action.onClick,
-                    disabled: integration.disabled,
-                  }))}
-                />
-              </ErrorBoundary>
-            );
-          })}
-        </IssueActionWrapper>
-      )}
+          }}
+          options={props.integrations.map(integration => ({
+            key: integration.key,
+            disabled: integration.disabled,
+            leadingItems: (
+              <Flex align="center" justify="center" style={{minHeight: 19}}>
+                {integration.displayIcon}
+              </Flex>
+            ),
+            tooltip: integration.disabled ? integration.disabledText : undefined,
+            label: integration.displayName,
+            hideCheck: true,
+            value: integration.key,
+            textValue: integration.key,
+            details:
+              integration.actions.length > 1 ? (
+                <ExternalIssueSubmenu integration={integration} />
+              ) : undefined,
+            showDetailsInOverlay: true,
+          }))}
+        />
+      </CompositeSelect>
     </Fragment>
   );
 }
 
-const IssueActionWrapper = styled('div')`
-  display: flex;
-  flex-wrap: wrap;
-  gap: ${space(1)};
-  line-height: 1.2;
-`;
+function ExternalIssueSubmenu(props: {integration: ExternalIssueIntegration}) {
+  const organization = useOrganization({allowNull: false});
+  const {integration} = props;
+  const {overlayState} = useContext(SelectContext);
+  return integration.actions.map(action => {
+    const itemProps: MenuListItemProps = {
+      tooltip: action.disabled ? action.disabledText : undefined,
+      disabled: action.disabled,
+      ...getActionLabelAndTextValue({
+        action,
+        integrationDisplayName: integration.displayName,
+      }),
+    };
+    const callbackProps: Record<string, () => void> = {
+      onPointerDown: () => {
+        overlayState?.close();
+        trackAnalytics('feedback.details-integration-issue-clicked', {
+          organization,
+          integration_key: integration.key,
+        });
+        action.onClick();
+      },
+    };
+    return <MenuListItem key={action.id} {...callbackProps} {...itemProps} />;
+  });
+}
 
-const LinkedIssue = styled(LinkButton)`
-  display: flex;
-  align-items: center;
-  padding: ${space(0.5)} ${space(0.75)};
-  border: 1px solid ${p => p.theme.border};
-  border-radius: ${p => p.theme.borderRadius};
-  font-weight: normal;
-`;
+function ExternalIssueMenuEmpty() {
+  return (
+    <Flex
+      style={{padding: space(3)}}
+      direction="column"
+      align="center"
+      justify="center"
+      gap={space(2)}
+    >
+      <EmptyStateText>{t('No issue linking integration installed')}</EmptyStateText>
+      <ExternalIssueManageLink size="sm" priority="primary" />
+    </Flex>
+  );
+}
 
-const IssueActionButton = styled(Button)`
-  display: flex;
-  align-items: center;
-  padding: ${space(0.5)} ${space(0.75)};
-  border: 1px dashed ${p => p.theme.border};
-  border-radius: ${p => p.theme.borderRadius};
-  font-weight: normal;
-`;
+function ExternalIssueManageLink(props: Pick<ButtonProps, 'size' | 'priority'>) {
+  const organization = useOrganization({allowNull: false});
 
-const IssueActionLinkButton = styled(LinkButton)`
-  display: flex;
-  align-items: center;
-  padding: ${space(0.5)} ${space(0.75)};
-  border: 1px dashed ${p => p.theme.border};
-  border-radius: ${p => p.theme.borderRadius};
-  font-weight: normal;
+  return (
+    <LinkButton
+      size="zero"
+      priority="default"
+      {...props}
+      to={`/settings/${organization.slug}/integrations/?category=issue%20tracking`}
+    >
+      {t('Manage Integrations')}
+    </LinkButton>
+  );
+}
+
+const EmptyStateText = styled('span')`
+  text-align: center;
+  color: ${p => p.theme.tokens.content.muted};
 `;
 
-const IssueActionDropdownMenu = styled(DropdownButton)`
+const IssueActionWrapper = styled('div')`
   display: flex;
-  align-items: center;
-  padding: ${space(0.5)} ${space(0.75)};
-  border: 1px dashed ${p => p.theme.border};
-  border-radius: ${p => p.theme.borderRadius};
-  font-weight: normal;
-
-  &[aria-expanded='true'] {
-    border: 1px solid ${p => p.theme.border};
-  }
+  flex-wrap: wrap;
+  gap: ${space(1)};
+  line-height: 1.2;
 `;
 
 const IssueActionName = styled('div')`
diff --git a/static/app/views/issueDetails/streamline/groupDetailsLayout.spec.tsx b/static/app/views/issueDetails/streamline/groupDetailsLayout.spec.tsx
@@ -113,13 +113,13 @@ describe('GroupDetailsLayout', () => {
 
     expect(await screen.findByTestId('children')).toBeInTheDocument();
     expect(
-      await screen.findByText('Track this issue in Jira, GitHub, etc.')
+      await screen.findByRole('button', {name: 'Add Linked Issue'})
     ).toBeInTheDocument();
 
     await userEvent.click(screen.getByRole('button', {name: 'Close sidebar'}));
     expect(await screen.findByTestId('children')).toBeInTheDocument();
     expect(
-      screen.queryByText('Track this issue in Jira, GitHub, etc.')
+      screen.queryByRole('button', {name: 'Add Linked Issue'})
     ).not.toBeInTheDocument();
   });
 });
diff --git a/static/app/views/issueDetails/streamline/sidebar/externalIssueSidebarList.spec.tsx b/static/app/views/issueDetails/streamline/sidebar/externalIssueSidebarList.spec.tsx

Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@ export interface ExternalIssueAction {`
`46`	`46`	`* Integrations, apps, or plugins that can create external issues.`
`47`	`47`	`* Each integration can have one or more configurations.`
`48`	`48`	`*/`
`49`		`-interface ExternalIssueIntegration extends BaseIssueAction {`
	`49`	`+export interface ExternalIssueIntegration extends BaseIssueAction {`
`50`	`50`	`actions: ExternalIssueAction[];`
`51`	`51`	`}`
`52`	`52`