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

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.CLOSED,
+      IncidentStatus.CRITICAL,
+      IncidentStatus.OPENED,
+      IncidentStatus.WARNING,
+    ],
+    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

@@ -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';