ref(badges): Move a bunch of badge* components into one folder (#68843)

Moved a bunch of things named `Badge*` and tags.tsx into a happy folder
together. A lot of them render about the same, so I'm thinking there's
loads of duplicate code all over the place.

Lots of teams got tagged because imports got auto fixed for me, so i
grouped up all the moves together into the one PR

Also, I added some stories for AlertBadge which turned out surprising:
<img width="764" alt="SCR-20240412-noza"
src="https://github.com/getsentry/sentry/assets/187460/bfd9c058-581c-4266-baa2-954149bb414a">

Author: ryan953

static/app/components/badge.tsx

@@ -1,31 +1,8 @@
-import type {Theme} from '@emotion/react';
-import styled from '@emotion/styled';
-
-import {space} from 'sentry/styles/space';
-
-interface Props extends React.HTMLAttributes<HTMLSpanElement> {
-  text?: string | number | null;
-  type?: keyof Theme['badge'];
-}
-
-const Badge = styled(({children, text, ...props}: Props) => (
-  <span {...props}>{children ?? text}</span>
-))<Props>`
-  display: inline-block;
-  height: 20px;
-  min-width: 20px;
-  line-height: 20px;
-  border-radius: 20px;
-  padding: 0 5px;
-  margin-left: ${space(0.5)};
-  font-size: 75%;
-  font-weight: 600;
-  text-align: center;
-  color: ${p => p.theme.badge[p.type ?? 'default'].color};
-  background: ${p => p.theme.badge[p.type ?? 'default'].background};
-  transition: background 100ms linear;
-
-  position: relative;
-`;
+import Badge from 'sentry/components/badge/badge';
 
+/**
+ * @deprecated Import from `sentry/components/badge/badge` instead
+ *
+ * TODO(ryan953): remove this shim once getsentry imports are updated
+ */
 export default Badge;

static/app/components/alertBadge.spec.tsx renamed to static/app/components/badge/alertBadge.spec.tsx

@@ -1,6 +1,6 @@
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
-import AlertBadge from 'sentry/components/alertBadge';
+import AlertBadge from 'sentry/components/badge/alertBadge';
 import {IncidentStatus} from 'sentry/views/alerts/types';
 
 describe('AlertBadge', () => {

static/app/components/badge/alertBadge.stories.tsx

@@ -0,0 +1,40 @@
+import {Fragment} from 'react';
+
+import AlertBadge from 'sentry/components/badge/alertBadge';
+import Matrix from 'sentry/components/stories/matrix';
+import storyBook from 'sentry/stories/storyBook';
+import {IncidentStatus} from 'sentry/views/alerts/types';
+
+export default storyBook(AlertBadge, story => {
+  story('Default', () => <AlertBadge />);
+
+  const props = {
+    status: [
+      IncidentStatus.OPENED,
+      IncidentStatus.CLOSED,
+      IncidentStatus.WARNING,
+      IncidentStatus.CRITICAL,
+    ],
+    withText: [false, true],
+    isIssue: [false, true],
+  };
+  story('Props', () => (
+    <Fragment>
+      <Matrix
+        render={AlertBadge}
+        selectedProps={['withText', 'status']}
+        propMatrix={props}
+      />
+      <Matrix
+        render={AlertBadge}
+        selectedProps={['isIssue', 'withText']}
+        propMatrix={props}
+      />
+      <Matrix
+        render={AlertBadge}
+        selectedProps={['isIssue', 'status']}
+        propMatrix={props}
+      />
+    </Fragment>
+  ));
+});

static/app/components/alertBadge.tsx renamed to static/app/components/badge/alertBadge.tsx

@@ -1,4 +1,4 @@
-import Badge from 'sentry/components/badge';
+import Badge from 'sentry/components/badge/badge';
 import JSXProperty from 'sentry/components/stories/jsxProperty';
 import SideBySide from 'sentry/components/stories/sideBySide';
 import storyBook from 'sentry/stories/storyBook';

static/app/components/badge.stories.tsx renamed to static/app/components/badge/badge.stories.tsx

@@ -0,0 +1,31 @@
+import type {Theme} from '@emotion/react';
+import styled from '@emotion/styled';
+
+import {space} from 'sentry/styles/space';
+
+interface Props extends React.HTMLAttributes<HTMLSpanElement> {
+  text?: string | number | null;
+  type?: keyof Theme['badge'];
+}
+
+const Badge = styled(({children, text, ...props}: Props) => (
+  <span {...props}>{children ?? text}</span>
+))<Props>`
+  display: inline-block;
+  height: 20px;
+  min-width: 20px;
+  line-height: 20px;
+  border-radius: 20px;
+  padding: 0 5px;
+  margin-left: ${space(0.5)};
+  font-size: 75%;
+  font-weight: 600;
+  text-align: center;
+  color: ${p => p.theme.badge[p.type ?? 'default'].color};
+  background: ${p => p.theme.badge[p.type ?? 'default'].background};
+  transition: background 100ms linear;
+
+  position: relative;
+`;
+
+export default Badge;

static/app/components/badge/badge.tsx

@@ -2,7 +2,7 @@ import {RouterContextFixture} from 'sentry-fixture/routerContextFixture';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
-import DeployBadge from 'sentry/components/deployBadge';
+import DeployBadge from 'sentry/components/badge/deployBadge';
 import type {Deploy} from 'sentry/types';
 
 const deploy: Deploy = {
@@ -16,14 +16,6 @@ const deploy: Deploy = {
 };
 
 describe('DeployBadge', () => {
-  it('renders', () => {
-    render(<DeployBadge deploy={deploy} />);
-
-    expect(screen.getByText('production')).toBeInTheDocument();
-    expect(screen.queryByRole('link')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('deploy-open-icon')).not.toBeInTheDocument();
-  });
-
   it('renders with link', () => {
     const projectId = 1;
     render(

static/app/components/deployBadge.spec.tsx renamed to static/app/components/badge/deployBadge.spec.tsx

@@ -0,0 +1,19 @@
+import DeployBadge from 'sentry/components/badge/deployBadge';
+import storyBook from 'sentry/stories/storyBook';
+import type {Deploy} from 'sentry/types';
+
+const deploy: Deploy = {
+  name: '85fedddce5a61a58b160fa6b3d6a1a8451e94eb9 to prod',
+  url: '',
+  environment: 'production',
+  dateStarted: '2020-05-11T18:12:00.025928Z',
+  dateFinished: '2020-05-11T18:12:00.025928Z',
+  version: '4.2.0',
+  id: '6348842',
+};
+
+export default storyBook(DeployBadge, story => {
+  story('Renders with a link', () => (
+    <DeployBadge deploy={deploy} orgSlug="sentry" version="1.2.3" projectId={1} />
+  ));
+});

static/app/components/badge/deployBadge.stories.tsx

@@ -0,0 +1,31 @@
+import Link from 'sentry/components/links/link';
+import {Tag} from 'sentry/components/tag';
+import {t} from 'sentry/locale';
+import type {Deploy} from 'sentry/types';
+import {MutableSearch} from 'sentry/utils/tokenizeSearch';
+
+type Props = {
+  deploy: Deploy;
+  orgSlug: string;
+  projectId: number;
+  version: string;
+};
+
+export default function DeployBadge({deploy, orgSlug, projectId, version}: Props) {
+  return (
+    <Link
+      to={{
+        pathname: `/organizations/${orgSlug}/issues/`,
+        query: {
+          project: projectId,
+          environment: deploy.environment,
+          query: new MutableSearch([`release:${version!}`]).formatString(),
+        },
+      }}
+    >
+      <Tag type="highlight" textMaxWidth={80} tooltipText={t('Open In Issues')}>
+        {deploy.environment}
+      </Tag>
+    </Link>
+  );
+}

static/app/components/badge/deployBadge.tsx

@@ -1,6 +1,6 @@
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
-import FeatureBadge from 'sentry/components/featureBadge';
+import FeatureBadge from 'sentry/components/badge/featureBadge';
 
 describe('FeatureBadge', function () {
   it('auto-hides when expired', function () {

static/app/components/featureBadge.spec.tsx renamed to static/app/components/badge/featureBadge.spec.tsx

@@ -1,7 +1,7 @@
 import type {ComponentProps} from 'react';
 import {Fragment} from 'react';
 
-import FeatureBadge from 'sentry/components/featureBadge';
+import FeatureBadge from 'sentry/components/badge/featureBadge';
 import Matrix from 'sentry/components/stories/matrix';
 import SideBySide from 'sentry/components/stories/sideBySide';
 import storyBook from 'sentry/stories/storyBook';

static/app/components/featureBadge.stories.tsx renamed to static/app/components/badge/featureBadge.stories.tsx

@@ -0,0 +1,104 @@
+import {Fragment} from 'react';
+import {useTheme} from '@emotion/react';
+import styled from '@emotion/styled';
+import {captureException, withScope} from '@sentry/react';
+import type {SeverityLevel} from '@sentry/types';
+
+import Badge from 'sentry/components/badge/badge';
+import CircleIndicator from 'sentry/components/circleIndicator';
+import type {TooltipProps} from 'sentry/components/tooltip';
+import {Tooltip} from 'sentry/components/tooltip';
+import {t} from 'sentry/locale';
+import type {ValidSize} from 'sentry/styles/space';
+import {space} from 'sentry/styles/space';
+
+export type BadgeType = 'alpha' | 'beta' | 'new' | 'experimental';
+
+type BadgeProps = {
+  type: BadgeType;
+  condensed?: boolean;
+  expiresAt?: Date;
+  title?: string;
+  tooltipProps?: Partial<TooltipProps>;
+  variant?: 'badge' | 'indicator' | 'short';
+};
+
+type Props = Omit<React.HTMLAttributes<HTMLDivElement>, keyof BadgeProps> & BadgeProps;
+
+const defaultTitles: Record<BadgeType, string> = {
+  alpha: t('This feature is internal and available for QA purposes'),
+  beta: t('This feature is available for early adopters and may change'),
+  new: t('This feature is new! Try it out and let us know what you think'),
+  experimental: t(
+    'This feature is experimental! Try it out and let us know what you think. No promises!'
+  ),
+};
+
+const labels: Record<BadgeType, string> = {
+  alpha: t('alpha'),
+  beta: t('beta'),
+  new: t('new'),
+  experimental: t('experimental'),
+};
+
+const shortLabels: Record<BadgeType, string> = {
+  alpha: 'A',
+  beta: 'B',
+  new: 'N',
+  experimental: 'E',
+};
+
+function BaseFeatureBadge({
+  type,
+  variant = 'badge',
+  title,
+  tooltipProps,
+  expiresAt,
+  ...props
+}: Props) {
+  const theme = useTheme();
+  if (expiresAt && expiresAt.valueOf() < Date.now()) {
+    // Only get 1% of events as we don't need many to know that a badge needs to be cleaned up.
+    if (Math.random() < 0.01) {
+      withScope(scope => {
+        scope.setTag('title', title);
+        scope.setTag('type', type);
+        scope.setLevel('warning' as SeverityLevel);
+        captureException(new Error('Expired Feature Badge'));
+      });
+    }
+    return null;
+  }
+
+  return (
+    <div {...props}>
+      <Tooltip title={title ?? defaultTitles[type]} position="right" {...tooltipProps}>
+        <Fragment>
+          {variant === 'badge' && <StyledBadge type={type} text={labels[type]} />}
+          {variant === 'short' && <StyledBadge type={type} text={shortLabels[type]} />}
+          {variant === 'indicator' && (
+            <CircleIndicator color={theme.badge[type].indicatorColor} size={8} />
+          )}
+        </Fragment>
+      </Tooltip>
+    </div>
+  );
+}
+
+const StyledBadge = styled(Badge)`
+  margin: 0;
+  padding: 0 ${space(0.75)};
+  line-height: ${space(2)};
+  height: ${space(2)};
+  font-weight: normal;
+  font-size: ${p => p.theme.fontSizeExtraSmall};
+  vertical-align: middle;
+`;
+
+const FeatureBadge = styled(BaseFeatureBadge)<{space?: ValidSize}>`
+  display: inline-flex;
+  align-items: center;
+  margin-left: ${p => space(p.space ?? 0.75)};
+`;
+
+export default FeatureBadge;

static/app/components/badge/featureBadge.tsx

@@ -4,7 +4,7 @@ import {UserFixture} from 'sentry-fixture/user';
 import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 import {textWithMarkupMatcher} from 'sentry-test/utils';
 
-import {GroupPriorityDropdown} from 'sentry/components/group/groupPriority';
+import {GroupPriorityDropdown} from 'sentry/components/badge/groupPriority';
 import {GroupActivityType, PriorityLevel} from 'sentry/types';
 
 describe('GroupPriority', () => {

static/app/components/group/groupPriority.spec.tsx renamed to static/app/components/badge/groupPriority.spec.tsx

@@ -3,7 +3,7 @@ import {useState} from 'react';
 import {
   GroupPriorityBadge,
   GroupPriorityDropdown,
-} from 'sentry/components/group/groupPriority';
+} from 'sentry/components/badge/groupPriority';
 import SideBySide from 'sentry/components/stories/sideBySide';
 import storyBook from 'sentry/stories/storyBook';
 import {PriorityLevel} from 'sentry/types';

static/app/components/group/groupPriority.stories.tsx renamed to static/app/components/badge/groupPriority.stories.tsx

@@ -5,6 +5,7 @@ import styled from '@emotion/styled';
 import bannerStar from 'sentry-images/spot/banner-star.svg';
 
 import {usePrompt} from 'sentry/actionCreators/prompts';
+import Tag from 'sentry/components/badge/tag';
 import {Button, LinkButton} from 'sentry/components/button';
 import {Chevron} from 'sentry/components/chevron';
 import type {MenuItemProps} from 'sentry/components/dropdownMenu';
@@ -13,7 +14,6 @@ import {DropdownMenuFooter} from 'sentry/components/dropdownMenu/footer';
 import useFeedbackWidget from 'sentry/components/feedback/widget/useFeedbackWidget';
 import HookOrDefault from 'sentry/components/hookOrDefault';
 import Placeholder from 'sentry/components/placeholder';
-import {Tag} from 'sentry/components/tag';
 import {Tooltip} from 'sentry/components/tooltip';
 import {IconClose} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';

static/app/components/group/groupPriority.tsx renamed to static/app/components/badge/groupPriority.tsx

@@ -2,7 +2,7 @@ import {RouterContextFixture} from 'sentry-fixture/routerContextFixture';
 
 import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
-import {Tag} from 'sentry/components/tag';
+import Tag from 'sentry/components/badge/tag';
 import {IconFire} from 'sentry/icons';
 
 describe('Tag', () => {

static/app/components/tag.spec.tsx renamed to static/app/components/badge/tag.spec.tsx

@@ -1,10 +1,10 @@
 import {Fragment, useState} from 'react';
 
+import Tag from 'sentry/components/badge/tag';
 import {Button} from 'sentry/components/button';
 import JSXNode from 'sentry/components/stories/jsxNode';
 import JSXProperty from 'sentry/components/stories/jsxProperty';
 import SizingWindow from 'sentry/components/stories/sizingWindow';
-import {Tag} from 'sentry/components/tag';
 import {IconCheckmark, IconFire, IconSentry, IconStar} from 'sentry/icons';
 import storyBook from 'sentry/stories/storyBook';
 import useDismissAlert from 'sentry/utils/useDismissAlert';