feat(issues): Add new-feature badge for the Recommended sort default

static/app/views/issueList/actions/sortOptions.tsx

@@ -1,5 +1,8 @@
+import {FeatureBadge} from '@sentry/scraps/badge';
 import {CompactSelect} from '@sentry/scraps/compactSelect';
+import {Flex} from '@sentry/scraps/layout';
 import {OverlayTrigger} from '@sentry/scraps/overlayTrigger';
+import {Text} from '@sentry/scraps/text';
 
 import type {DropdownButtonProps} from 'sentry/components/dropdownButton';
 import {IconSort} from 'sentry/icons/iconSort';
@@ -99,7 +102,29 @@ export function IssueListSortOptions({
           {...triggerProps}
           size={triggerSize}
           icon={showIcon && <IconSort />}
-        />
+        >
+          {organization.features.includes('issue-stream-recommended-sort-default') &&
+          sortKey === IssueSortOptions.RECOMMENDED ? (
+            <Flex as="span" gap="sm" align="center">
+              {triggerProps.children}
+              <FeatureBadge
+                type="new"
+                tooltipProps={{
+                  position: 'bottom',
+                  title: (
+                    <Text as="div" align="left">
+                      {t(
+                        "Issues now default to the Recommended sort. Pick a different sort and we'll remember your choice."
+                      )}
+                    </Text>
+                  ),
+                }}
+              />
+            </Flex>
+          ) : (
+            triggerProps.children
+          )}
+        </OverlayTrigger.Button>
       )}
     />
   );

static/app/views/issueList/overview.spec.tsx

@@ -373,11 +373,24 @@ describe('IssueList', () => {
       });
       render(<IssueListOverview />, {organization: featureOrg, initialRouterConfig});
 
-      await userEvent.click(await screen.findByRole('button', {name: 'Recommended'}));
+      await userEvent.click(await screen.findByRole('button', {name: /Recommended/}));
       await userEvent.click(screen.getByRole('option', {name: 'Events'}));
 
       expect(getStoredIssueSort(featureOrg.slug)).toBe(IssueSortOptions.FREQ);
     });
+
+    it('shows the new-feature badge next to the sort dropdown with the recommended-sort-default feature', async () => {
+      const featureOrg = OrganizationFixture({
+        ...organization,
+        features: ['issue-stream-recommended-sort-default'],
+      });
+      render(<IssueListOverview />, {organization: featureOrg, initialRouterConfig});
+
+      expect(
+        await screen.findByRole('button', {name: /Recommended/})
+      ).toBeInTheDocument();
+      expect(screen.getByLabelText('new')).toBeInTheDocument();
+    });
   });
 
   describe('transitionTo', () => {