From 48a9b89a228fbd198c42702b6d73c16ebb461d6a Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Fri, 12 Apr 2024 15:15:14 -0700 Subject: [PATCH 1/4] ref(badges): Move a bunch of badge* components into one folder --- static/app/components/badge.tsx | 35 +--- .../{ => badge}/alertBadge.spec.tsx | 2 +- .../components/badge/alertBadge.stories.tsx | 40 ++++ .../app/components/{ => badge}/alertBadge.tsx | 0 .../components/{ => badge}/badge.stories.tsx | 2 +- static/app/components/badge/badge.tsx | 31 +++ .../{ => badge}/featureBadge.spec.tsx | 2 +- .../{ => badge}/featureBadge.stories.tsx | 2 +- static/app/components/badge/featureBadge.tsx | 104 ++++++++++ .../{group => badge}/groupPriority.spec.tsx | 2 +- .../groupPriority.stories.tsx | 2 +- .../{group => badge}/groupPriority.tsx | 2 +- .../app/components/{ => badge}/tag.spec.tsx | 2 +- .../components/{ => badge}/tag.stories.tsx | 2 +- static/app/components/badge/tag.tsx | 179 +++++++++++++++++ .../app/components/charts/optionSelector.tsx | 2 +- .../app/components/compactSelect/control.tsx | 2 +- static/app/components/deployBadge.tsx | 2 +- .../experimentalFeatureBadge.tsx | 2 +- .../components/events/eventViewHierarchy.tsx | 2 +- .../breadcrumbs/breadcrumb/level.tsx | 2 +- .../debugMeta/debugImage/status.tsx | 2 +- .../candidate/information/features.tsx | 2 +- .../candidate/status/index.tsx | 2 +- .../interfaces/frame/deprecatedLine.tsx | 2 +- .../events/interfaces/nativeFrame.tsx | 2 +- .../interfaces/sourceMapsDebuggerModal.tsx | 2 +- static/app/components/featureBadge.tsx | 108 +--------- .../feedback/list/mailboxPicker.tsx | 2 +- .../group/inboxBadges/groupStatusTag.tsx | 2 +- .../modals/sentryAppDetailsModal.tsx | 2 +- .../notificationActionItem.tsx | 2 +- .../environmentPageFilter/trigger.tsx | 2 +- .../projectPageFilter/trigger.tsx | 2 +- static/app/components/quickTrace/styles.tsx | 2 +- .../breadcrumbs/replayComparisonModal.tsx | 2 +- .../components/replays/header/errorCounts.tsx | 2 +- .../components/replays/replayCountBadge.tsx | 2 +- .../sidebar/broadcastSdkUpdates.tsx | 2 +- static/app/components/sidebar/sidebarItem.tsx | 2 +- .../smartSearchBar/searchDropdown.tsx | 2 +- static/app/components/tag.tsx | 188 +----------------- .../metricsEnhancedPerformanceDataContext.tsx | 2 +- static/app/utils/replays/getFrameDetails.tsx | 2 +- .../app/views/alerts/list/incidents/row.tsx | 2 +- static/app/views/alerts/list/rules/row.tsx | 2 +- .../views/alerts/list/rules/teamFilter.tsx | 2 +- .../alerts/rules/metric/details/sidebar.tsx | 2 +- .../views/alerts/rules/metric/mriField.tsx | 2 +- static/app/views/dashboards/addWidget.tsx | 2 +- .../dashboards/releasesSelectControl.tsx | 2 +- .../widgetCard/widgetCardContextMenu.tsx | 2 +- .../app/views/discover/table/queryField.tsx | 2 +- .../app/views/issueDetails/groupPriority.tsx | 2 +- static/app/views/issueDetails/header.tsx | 4 +- .../app/views/issueList/actions/actionSet.tsx | 2 +- static/app/views/issueList/header.tsx | 2 +- .../views/metrics/dashboardImportModal.tsx | 2 +- static/app/views/metrics/layout.tsx | 2 +- .../overviewTimeline/overviewRow.tsx | 2 +- .../browser/interactionSummary/index.tsx | 2 +- .../browser/interactionsLandingPage.tsx | 2 +- .../browser/resources/resourceView/index.tsx | 2 +- .../performance/cache/cacheLandingPage.tsx | 2 +- .../app/views/performance/cache/settings.ts | 2 +- .../http/httpDomainSummaryPage.tsx | 2 +- .../performance/http/httpLandingPage.tsx | 2 +- static/app/views/performance/http/settings.ts | 2 +- .../widgets/components/widgetHeader.tsx | 2 +- .../performance/transactionDetails/styles.tsx | 2 +- .../performance/transactionSummary/header.tsx | 2 +- .../views/performance/vitalDetail/table.tsx | 2 +- .../projectDetail/projectLatestAlerts.tsx | 2 +- .../app/views/releases/components/header.tsx | 2 +- .../releases/detail/header/releaseHeader.tsx | 2 +- .../overview/sidebar/releaseAdoption.tsx | 2 +- .../releaseCard/releaseCardProjectRow.tsx | 2 +- .../views/replays/detail/layout/focusTabs.tsx | 2 +- .../views/settings/account/accountEmails.tsx | 2 +- .../settings/account/accountIdentities.tsx | 2 +- .../settings/components/settingsNavItem.tsx | 4 +- .../organization/navigationConfiguration.tsx | 2 +- .../organizationAuditLog/auditLogList.tsx | 2 +- .../organizationAuth/providerItem.tsx | 2 +- .../sentryApplicationDashboard/requestLog.tsx | 2 +- .../subscriptionBox.tsx | 2 +- .../organizationSettingsForm.tsx | 2 +- .../abstractIntegrationDetailedView.tsx | 2 +- .../organizationMembers/inviteRequestRow.tsx | 2 +- .../projectOwnership/ownershipOwnerFilter.tsx | 2 +- .../projectOwnership/ownershipRulesTable.tsx | 2 +- .../project/projectProcessingIssues.tsx | 2 +- .../projectDebugFiles/debugFileRow.tsx | 2 +- .../projectMetrics/projectMetrics.tsx | 2 +- .../projectSourceMapsArtifacts.tsx | 2 +- .../sharedGroupDetails/sharedGroupHeader.tsx | 2 +- 96 files changed, 464 insertions(+), 401 deletions(-) rename static/app/components/{ => badge}/alertBadge.spec.tsx (91%) create mode 100644 static/app/components/badge/alertBadge.stories.tsx rename static/app/components/{ => badge}/alertBadge.tsx (100%) rename static/app/components/{ => badge}/badge.stories.tsx (93%) create mode 100644 static/app/components/badge/badge.tsx rename static/app/components/{ => badge}/featureBadge.spec.tsx (93%) rename static/app/components/{ => badge}/featureBadge.stories.tsx (95%) create mode 100644 static/app/components/badge/featureBadge.tsx rename static/app/components/{group => badge}/groupPriority.spec.tsx (98%) rename static/app/components/{group => badge}/groupPriority.stories.tsx (94%) rename static/app/components/{group => badge}/groupPriority.tsx (99%) rename static/app/components/{ => badge}/tag.spec.tsx (98%) rename static/app/components/{ => badge}/tag.stories.tsx (99%) create mode 100644 static/app/components/badge/tag.tsx diff --git a/static/app/components/badge.tsx b/static/app/components/badge.tsx index 6a3a5ab4c37426..649f16643d99d3 100644 --- a/static/app/components/badge.tsx +++ b/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 { - text?: string | number | null; - type?: keyof Theme['badge']; -} - -const Badge = styled(({children, text, ...props}: Props) => ( - {children ?? text} -))` - 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; diff --git a/static/app/components/alertBadge.spec.tsx b/static/app/components/badge/alertBadge.spec.tsx similarity index 91% rename from static/app/components/alertBadge.spec.tsx rename to static/app/components/badge/alertBadge.spec.tsx index 757485eeb1a432..5a5e55fce66c5e 100644 --- a/static/app/components/alertBadge.spec.tsx +++ b/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', () => { diff --git a/static/app/components/badge/alertBadge.stories.tsx b/static/app/components/badge/alertBadge.stories.tsx new file mode 100644 index 00000000000000..c0cf38e47063e3 --- /dev/null +++ b/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', () => ); + + const props = { + status: [ + IncidentStatus.OPENED, + IncidentStatus.CLOSED, + IncidentStatus.WARNING, + IncidentStatus.CRITICAL, + ], + withText: [false, true], + isIssue: [false, true], + }; + story('Props', () => ( + + + + + + )); +}); diff --git a/static/app/components/alertBadge.tsx b/static/app/components/badge/alertBadge.tsx similarity index 100% rename from static/app/components/alertBadge.tsx rename to static/app/components/badge/alertBadge.tsx diff --git a/static/app/components/badge.stories.tsx b/static/app/components/badge/badge.stories.tsx similarity index 93% rename from static/app/components/badge.stories.tsx rename to static/app/components/badge/badge.stories.tsx index 8a26f9e23aaaa0..479038dc05c1ac 100644 --- a/static/app/components/badge.stories.tsx +++ b/static/app/components/badge/badge.stories.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'; diff --git a/static/app/components/badge/badge.tsx b/static/app/components/badge/badge.tsx new file mode 100644 index 00000000000000..6a3a5ab4c37426 --- /dev/null +++ b/static/app/components/badge/badge.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 { + text?: string | number | null; + type?: keyof Theme['badge']; +} + +const Badge = styled(({children, text, ...props}: Props) => ( + {children ?? text} +))` + 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; diff --git a/static/app/components/featureBadge.spec.tsx b/static/app/components/badge/featureBadge.spec.tsx similarity index 93% rename from static/app/components/featureBadge.spec.tsx rename to static/app/components/badge/featureBadge.spec.tsx index 68ff2319224218..069a43acea7b7d 100644 --- a/static/app/components/featureBadge.spec.tsx +++ b/static/app/components/badge/featureBadge.spec.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 () { diff --git a/static/app/components/featureBadge.stories.tsx b/static/app/components/badge/featureBadge.stories.tsx similarity index 95% rename from static/app/components/featureBadge.stories.tsx rename to static/app/components/badge/featureBadge.stories.tsx index 54a64eb870eb2a..e332faabbb625a 100644 --- a/static/app/components/featureBadge.stories.tsx +++ b/static/app/components/badge/featureBadge.stories.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'; diff --git a/static/app/components/badge/featureBadge.tsx b/static/app/components/badge/featureBadge.tsx new file mode 100644 index 00000000000000..5cbdde80f6e6ee --- /dev/null +++ b/static/app/components/badge/featureBadge.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; + variant?: 'badge' | 'indicator' | 'short'; +}; + +type Props = Omit, keyof BadgeProps> & BadgeProps; + +const defaultTitles: Record = { + 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 = { + alpha: t('alpha'), + beta: t('beta'), + new: t('new'), + experimental: t('experimental'), +}; + +const shortLabels: Record = { + 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 ( +
+ + + {variant === 'badge' && } + {variant === 'short' && } + {variant === 'indicator' && ( + + )} + + +
+ ); +} + +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; diff --git a/static/app/components/group/groupPriority.spec.tsx b/static/app/components/badge/groupPriority.spec.tsx similarity index 98% rename from static/app/components/group/groupPriority.spec.tsx rename to static/app/components/badge/groupPriority.spec.tsx index b514283cccf25a..fde65f51712fe0 100644 --- a/static/app/components/group/groupPriority.spec.tsx +++ b/static/app/components/badge/groupPriority.spec.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', () => { diff --git a/static/app/components/group/groupPriority.stories.tsx b/static/app/components/badge/groupPriority.stories.tsx similarity index 94% rename from static/app/components/group/groupPriority.stories.tsx rename to static/app/components/badge/groupPriority.stories.tsx index 6cd95561a725a1..73b456d3f58a16 100644 --- a/static/app/components/group/groupPriority.stories.tsx +++ b/static/app/components/badge/groupPriority.stories.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'; diff --git a/static/app/components/group/groupPriority.tsx b/static/app/components/badge/groupPriority.tsx similarity index 99% rename from static/app/components/group/groupPriority.tsx rename to static/app/components/badge/groupPriority.tsx index 5d3ffe4e4d2fa1..6065c5e1e91aa5 100644 --- a/static/app/components/group/groupPriority.tsx +++ b/static/app/components/badge/groupPriority.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'; diff --git a/static/app/components/tag.spec.tsx b/static/app/components/badge/tag.spec.tsx similarity index 98% rename from static/app/components/tag.spec.tsx rename to static/app/components/badge/tag.spec.tsx index 0db59dc1f530a0..034e37f2dcc90a 100644 --- a/static/app/components/tag.spec.tsx +++ b/static/app/components/badge/tag.spec.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', () => { diff --git a/static/app/components/tag.stories.tsx b/static/app/components/badge/tag.stories.tsx similarity index 99% rename from static/app/components/tag.stories.tsx rename to static/app/components/badge/tag.stories.tsx index f7a88638eab5b2..b59c318a1f3966 100644 --- a/static/app/components/tag.stories.tsx +++ b/static/app/components/badge/tag.stories.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'; diff --git a/static/app/components/badge/tag.tsx b/static/app/components/badge/tag.tsx new file mode 100644 index 00000000000000..a541e7fb8a0156 --- /dev/null +++ b/static/app/components/badge/tag.tsx @@ -0,0 +1,179 @@ +import {useCallback} from 'react'; +import type {Theme} from '@emotion/react'; +import styled from '@emotion/styled'; + +import {Button} from 'sentry/components/button'; +import ExternalLink from 'sentry/components/links/externalLink'; +import type {LinkProps} from 'sentry/components/links/link'; +import Link from 'sentry/components/links/link'; +import type {TooltipProps} from 'sentry/components/tooltip'; +import {Tooltip} from 'sentry/components/tooltip'; +import {IconClose, IconOpen} from 'sentry/icons'; +import type {SVGIconProps} from 'sentry/icons/svgIcon'; +import {IconDefaultsProvider} from 'sentry/icons/useIconDefaults'; +import {t} from 'sentry/locale'; +import {space} from 'sentry/styles/space'; +import {trackAnalytics} from 'sentry/utils/analytics'; +import type {Color} from 'sentry/utils/theme'; +import theme from 'sentry/utils/theme'; + +export interface TagProps extends React.HTMLAttributes { + /** + * Makes the tag clickable. Use for external links. + * If no icon is passed, it defaults to IconOpen (can be removed by passing icon={null}) + */ + href?: string; + /** + * Icon on the left side. + */ + icon?: React.ReactNode; + /** + * Triggered when the item is clicked + */ + onClick?: (eventKey: any) => void; + /** + * Shows clickable IconClose on the right side. + */ + onDismiss?: () => void; + /** + * Max width of the tag's text + */ + textMaxWidth?: number; + /** + * Makes the tag clickable. Use for internal links handled by react router. + * If no icon is passed, it defaults to IconOpen (can be removed by passing icon={null}) + */ + to?: LinkProps['to']; + /** + * Additional properites for the Tooltip when `tooltipText` is set. + */ + tooltipProps?: Omit; + /** + * Text to show up on a hover. + */ + tooltipText?: TooltipProps['title']; + /** + * Dictates color scheme of the tag. + */ + type?: keyof Theme['tag']; +} + +function BaseTag({ + type = 'default', + icon, + tooltipText, + tooltipProps, + to, + onClick, + href, + onDismiss, + children, + textMaxWidth = 150, + ...props +}: TagProps) { + const iconsProps: SVGIconProps = { + size: 'xs', + color: theme.tag[type].color as Color, + }; + + const isLink = href !== undefined || to !== undefined; + + // Links use the IconOpen by default + const linkIcon = isLink ? : null; + const tagIcon = icon || icon === null ? icon : linkIcon; + + const handleDismiss = useCallback( + event => { + event.preventDefault(); + onDismiss?.(); + }, + [onDismiss] + ); + + const trackClickEvent = useCallback(() => { + trackAnalytics('tag.clicked', { + is_clickable: onClick !== undefined || isLink, + organization: null, + }); + }, [isLink, onClick]); + + const tag = ( + + + {tagIcon && ( + + {tagIcon} + + )} + + + {children} + + + {onDismiss !== undefined && ( + } + /> + )} + + + ); + + const tagWithParent = + href !== undefined ? ( + {tag} + ) : to !== undefined ? ( + + {tag} + + ) : ( + tag + ); + + return ( + + {tagWithParent} + + ); +} + +const Tag = styled(BaseTag)` + font-size: ${p => p.theme.fontSizeSmall}; +`; +export default Tag; + +const TAG_HEIGHT = '20px'; + +export const Background = styled('div')<{type: keyof Theme['tag']}>` + display: inline-flex; + align-items: center; + height: ${TAG_HEIGHT}; + border-radius: ${TAG_HEIGHT}; + background-color: ${p => p.theme.tag[p.type].background}; + border: solid 1px ${p => p.theme.tag[p.type].border}; + padding: 0 ${space(1)}; +`; + +const IconWrapper = styled('span')` + margin-right: ${space(0.5)}; + display: inline-flex; +`; + +const Text = styled('span')<{maxWidth: number; type: keyof Theme['tag']}>` + color: ${p => p.theme.tag[p.type].color}; + max-width: ${p => p.maxWidth}px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + line-height: ${TAG_HEIGHT}; +`; + +const DismissButton = styled(Button)` + margin-left: ${space(0.5)}; + margin-right: -${space(0.5)}; + border: none; +`; diff --git a/static/app/components/charts/optionSelector.tsx b/static/app/components/charts/optionSelector.tsx index f60b1592e61efe..a905acb6717097 100644 --- a/static/app/components/charts/optionSelector.tsx +++ b/static/app/components/charts/optionSelector.tsx @@ -1,13 +1,13 @@ import {Fragment, useMemo} from 'react'; import styled from '@emotion/styled'; +import FeatureBadge from 'sentry/components/badge/featureBadge'; import type { MultipleSelectProps, SelectOption, SingleSelectProps, } from 'sentry/components/compactSelect'; import {CompactSelect} from 'sentry/components/compactSelect'; -import FeatureBadge from 'sentry/components/featureBadge'; import Truncate from 'sentry/components/truncate'; import {defined} from 'sentry/utils'; diff --git a/static/app/components/compactSelect/control.tsx b/static/app/components/compactSelect/control.tsx index b0fa8d9013c6c6..7f8e1db8f0bd25 100644 --- a/static/app/components/compactSelect/control.tsx +++ b/static/app/components/compactSelect/control.tsx @@ -16,7 +16,7 @@ import {mergeProps} from '@react-aria/utils'; import type {ListState} from '@react-stately/list'; import type {OverlayTriggerState} from '@react-stately/overlays'; -import Badge from 'sentry/components/badge'; +import Badge from 'sentry/components/badge/badge'; import {Button} from 'sentry/components/button'; import type {DropdownButtonProps} from 'sentry/components/dropdownButton'; import DropdownButton from 'sentry/components/dropdownButton'; diff --git a/static/app/components/deployBadge.tsx b/static/app/components/deployBadge.tsx index bc7ced6a8b51eb..dc781e19db1ac4 100644 --- a/static/app/components/deployBadge.tsx +++ b/static/app/components/deployBadge.tsx @@ -1,5 +1,5 @@ +import Tag from 'sentry/components/badge/tag'; 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'; diff --git a/static/app/components/events/aiSuggestedSolution/experimentalFeatureBadge.tsx b/static/app/components/events/aiSuggestedSolution/experimentalFeatureBadge.tsx index e4b6000581d2bb..02833aeef3d376 100644 --- a/static/app/components/events/aiSuggestedSolution/experimentalFeatureBadge.tsx +++ b/static/app/components/events/aiSuggestedSolution/experimentalFeatureBadge.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -import FeatureBadge from 'sentry/components/featureBadge'; +import FeatureBadge from 'sentry/components/badge/featureBadge'; import {space} from 'sentry/styles/space'; export function ExperimentalFeatureBadge() { diff --git a/static/app/components/events/eventViewHierarchy.tsx b/static/app/components/events/eventViewHierarchy.tsx index 6cdaf6db68f24e..ad55be930c0e6e 100644 --- a/static/app/components/events/eventViewHierarchy.tsx +++ b/static/app/components/events/eventViewHierarchy.tsx @@ -2,9 +2,9 @@ import {Fragment, useMemo} from 'react'; import * as Sentry from '@sentry/react'; import {useFetchEventAttachments} from 'sentry/actionCreators/events'; +import FeatureBadge from 'sentry/components/badge/featureBadge'; import ErrorBoundary from 'sentry/components/errorBoundary'; import {getAttachmentUrl} from 'sentry/components/events/attachmentViewers/utils'; -import FeatureBadge from 'sentry/components/featureBadge'; import LoadingIndicator from 'sentry/components/loadingIndicator'; import {t} from 'sentry/locale'; import type {Event, IssueAttachment, Project} from 'sentry/types'; diff --git a/static/app/components/events/interfaces/breadcrumbs/breadcrumb/level.tsx b/static/app/components/events/interfaces/breadcrumbs/breadcrumb/level.tsx index 278e705be34313..cceeba4037b6b0 100644 --- a/static/app/components/events/interfaces/breadcrumbs/breadcrumb/level.tsx +++ b/static/app/components/events/interfaces/breadcrumbs/breadcrumb/level.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; +import Tag, {Background} from 'sentry/components/badge/tag'; import Highlight from 'sentry/components/highlight'; -import {Background, Tag} from 'sentry/components/tag'; import {t} from 'sentry/locale'; import {BreadcrumbLevelType} from 'sentry/types/breadcrumbs'; diff --git a/static/app/components/events/interfaces/debugMeta/debugImage/status.tsx b/static/app/components/events/interfaces/debugMeta/debugImage/status.tsx index 7b2c1f68c2fce9..c6213bd73a38e4 100644 --- a/static/app/components/events/interfaces/debugMeta/debugImage/status.tsx +++ b/static/app/components/events/interfaces/debugMeta/debugImage/status.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import * as Sentry from '@sentry/react'; -import {Tag} from 'sentry/components/tag'; +import Tag from 'sentry/components/badge/tag'; import {t} from 'sentry/locale'; import {ImageStatus} from 'sentry/types/debugImage'; diff --git a/static/app/components/events/interfaces/debugMeta/debugImageDetails/candidate/information/features.tsx b/static/app/components/events/interfaces/debugMeta/debugImageDetails/candidate/information/features.tsx index 02ca5f8980077b..6ce94688b374bb 100644 --- a/static/app/components/events/interfaces/debugMeta/debugImageDetails/candidate/information/features.tsx +++ b/static/app/components/events/interfaces/debugMeta/debugImageDetails/candidate/information/features.tsx @@ -1,7 +1,7 @@ import {Fragment} from 'react'; import styled from '@emotion/styled'; -import {Tag} from 'sentry/components/tag'; +import Tag from 'sentry/components/badge/tag'; import type {CandidateDownload} from 'sentry/types/debugImage'; import {CandidateDownloadStatus, ImageFeature} from 'sentry/types/debugImage'; diff --git a/static/app/components/events/interfaces/debugMeta/debugImageDetails/candidate/status/index.tsx b/static/app/components/events/interfaces/debugMeta/debugImageDetails/candidate/status/index.tsx index 2e90cd2a39316d..6fcefaa8e0113f 100644 --- a/static/app/components/events/interfaces/debugMeta/debugImageDetails/candidate/status/index.tsx +++ b/static/app/components/events/interfaces/debugMeta/debugImageDetails/candidate/status/index.tsx @@ -1,6 +1,6 @@ import * as Sentry from '@sentry/react'; -import {Tag} from 'sentry/components/tag'; +import Tag from 'sentry/components/badge/tag'; import {t} from 'sentry/locale'; import {CandidateDownloadStatus} from 'sentry/types/debugImage'; diff --git a/static/app/components/events/interfaces/frame/deprecatedLine.tsx b/static/app/components/events/interfaces/frame/deprecatedLine.tsx index b4a53fa9fdc59a..b09b4177142b3a 100644 --- a/static/app/components/events/interfaces/frame/deprecatedLine.tsx +++ b/static/app/components/events/interfaces/frame/deprecatedLine.tsx @@ -4,6 +4,7 @@ import classNames from 'classnames'; import scrollToElement from 'scroll-to-element'; import {openModal} from 'sentry/actionCreators/modal'; +import Tag from 'sentry/components/badge/tag'; import {Button} from 'sentry/components/button'; import {Chevron} from 'sentry/components/chevron'; import ErrorBoundary from 'sentry/components/errorBoundary'; @@ -15,7 +16,6 @@ import {SourceMapsDebuggerModal} from 'sentry/components/events/interfaces/sourc import {getThreadById} from 'sentry/components/events/interfaces/utils'; import InteractionStateLayer from 'sentry/components/interactionStateLayer'; import StrictClick from 'sentry/components/strictClick'; -import {Tag} from 'sentry/components/tag'; import {IconFix, IconRefresh} from 'sentry/icons'; import {t, tn} from 'sentry/locale'; import DebugMetaStore from 'sentry/stores/debugMetaStore'; diff --git a/static/app/components/events/interfaces/nativeFrame.tsx b/static/app/components/events/interfaces/nativeFrame.tsx index 1213d94cbd6a5a..29f16a8afb0b04 100644 --- a/static/app/components/events/interfaces/nativeFrame.tsx +++ b/static/app/components/events/interfaces/nativeFrame.tsx @@ -3,6 +3,7 @@ import {Fragment, useContext, useState} from 'react'; import styled from '@emotion/styled'; import scrollToElement from 'scroll-to-element'; +import Tag from 'sentry/components/badge/tag'; import {Button} from 'sentry/components/button'; import {Chevron} from 'sentry/components/chevron'; import ErrorBoundary from 'sentry/components/errorBoundary'; @@ -22,7 +23,6 @@ import {AnnotatedText} from 'sentry/components/events/meta/annotatedText'; import {TraceEventDataSectionContext} from 'sentry/components/events/traceEventDataSection'; import InteractionStateLayer from 'sentry/components/interactionStateLayer'; import StrictClick from 'sentry/components/strictClick'; -import {Tag} from 'sentry/components/tag'; import {Tooltip} from 'sentry/components/tooltip'; import {SLOW_TOOLTIP_DELAY} from 'sentry/constants'; import {IconFileBroken} from 'sentry/icons/iconFileBroken'; diff --git a/static/app/components/events/interfaces/sourceMapsDebuggerModal.tsx b/static/app/components/events/interfaces/sourceMapsDebuggerModal.tsx index 1f84442282ca26..ecae1865224c56 100644 --- a/static/app/components/events/interfaces/sourceMapsDebuggerModal.tsx +++ b/static/app/components/events/interfaces/sourceMapsDebuggerModal.tsx @@ -6,8 +6,8 @@ import styled from '@emotion/styled'; import type {ModalRenderProps} from 'sentry/actionCreators/modal'; import {openModal} from 'sentry/actionCreators/modal'; import Alert from 'sentry/components/alert'; +import FeatureBadge from 'sentry/components/badge/featureBadge'; import {CodeSnippet} from 'sentry/components/codeSnippet'; -import FeatureBadge from 'sentry/components/featureBadge'; import {FeedbackModal} from 'sentry/components/featureFeedback/feedbackModal'; import ExternalLink from 'sentry/components/links/externalLink'; import Link from 'sentry/components/links/link'; diff --git a/static/app/components/featureBadge.tsx b/static/app/components/featureBadge.tsx index 3ecf5876133f9c..553d4c12bef19a 100644 --- a/static/app/components/featureBadge.tsx +++ b/static/app/components/featureBadge.tsx @@ -1,104 +1,8 @@ -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'; -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; - variant?: 'badge' | 'indicator' | 'short'; -}; - -type Props = Omit, keyof BadgeProps> & BadgeProps; - -const defaultTitles: Record = { - 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 = { - alpha: t('alpha'), - beta: t('beta'), - new: t('new'), - experimental: t('experimental'), -}; - -const shortLabels: Record = { - 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 ( -
- - - {variant === 'badge' && } - {variant === 'short' && } - {variant === 'indicator' && ( - - )} - - -
- ); -} - -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)}; -`; +import FeatureBadge from 'sentry/components/badge/featureBadge'; +/** + * @deprecated Import from `sentry/components/badge/featureBadge` instead + * + * TODO(ryan953): remove this shim once getsentry imports are updated + */ export default FeatureBadge; diff --git a/static/app/components/feedback/list/mailboxPicker.tsx b/static/app/components/feedback/list/mailboxPicker.tsx index 67fbd21a642e1d..54427310d1cf6f 100644 --- a/static/app/components/feedback/list/mailboxPicker.tsx +++ b/static/app/components/feedback/list/mailboxPicker.tsx @@ -1,4 +1,4 @@ -import Badge from 'sentry/components/badge'; +import Badge from 'sentry/components/badge/badge'; import type decodeMailbox from 'sentry/components/feedback/decodeMailbox'; import useMailboxCounts from 'sentry/components/feedback/list/useMailboxCounts'; import {Flex} from 'sentry/components/profiling/flex'; diff --git a/static/app/components/group/inboxBadges/groupStatusTag.tsx b/static/app/components/group/inboxBadges/groupStatusTag.tsx index b9be4572c89606..321271d5432e34 100644 --- a/static/app/components/group/inboxBadges/groupStatusTag.tsx +++ b/static/app/components/group/inboxBadges/groupStatusTag.tsx @@ -2,7 +2,7 @@ import {Fragment} from 'react'; import type {Theme} from '@emotion/react'; import styled from '@emotion/styled'; -import {Tag} from 'sentry/components/tag'; +import Tag from 'sentry/components/badge/tag'; import TimeSince from 'sentry/components/timeSince'; interface GroupStatusBadgeProps { diff --git a/static/app/components/modals/sentryAppDetailsModal.tsx b/static/app/components/modals/sentryAppDetailsModal.tsx index b71608f19e0c63..77915eaf9c5638 100644 --- a/static/app/components/modals/sentryAppDetailsModal.tsx +++ b/static/app/components/modals/sentryAppDetailsModal.tsx @@ -2,11 +2,11 @@ import {Fragment} from 'react'; import styled from '@emotion/styled'; import Access from 'sentry/components/acl/access'; +import Tag from 'sentry/components/badge/tag'; import {Button} from 'sentry/components/button'; import CircleIndicator from 'sentry/components/circleIndicator'; import DeprecatedAsyncComponent from 'sentry/components/deprecatedAsyncComponent'; import SentryAppIcon from 'sentry/components/sentryAppIcon'; -import {Tag} from 'sentry/components/tag'; import {IconFlag} from 'sentry/icons'; import {t, tct} from 'sentry/locale'; import {space} from 'sentry/styles/space'; diff --git a/static/app/components/notificationActions/notificationActionItem.tsx b/static/app/components/notificationActions/notificationActionItem.tsx index 13109ecfca0999..b1953d27acfc38 100644 --- a/static/app/components/notificationActions/notificationActionItem.tsx +++ b/static/app/components/notificationActions/notificationActionItem.tsx @@ -6,7 +6,7 @@ import { addLoadingMessage, addSuccessMessage, } from 'sentry/actionCreators/indicator'; -import Badge from 'sentry/components/badge'; +import Badge from 'sentry/components/badge/badge'; import {Button} from 'sentry/components/button'; import ButtonBar from 'sentry/components/buttonBar'; import Card from 'sentry/components/card'; diff --git a/static/app/components/organizations/environmentPageFilter/trigger.tsx b/static/app/components/organizations/environmentPageFilter/trigger.tsx index 79704550cccfd4..2151d6fa1edf57 100644 --- a/static/app/components/organizations/environmentPageFilter/trigger.tsx +++ b/static/app/components/organizations/environmentPageFilter/trigger.tsx @@ -1,7 +1,7 @@ import {forwardRef} from 'react'; import styled from '@emotion/styled'; -import Badge from 'sentry/components/badge'; +import Badge from 'sentry/components/badge/badge'; import type {DropdownButtonProps} from 'sentry/components/dropdownButton'; import DropdownButton from 'sentry/components/dropdownButton'; import {IconWindow} from 'sentry/icons'; diff --git a/static/app/components/organizations/projectPageFilter/trigger.tsx b/static/app/components/organizations/projectPageFilter/trigger.tsx index 9187f315095328..45b9748ade0d69 100644 --- a/static/app/components/organizations/projectPageFilter/trigger.tsx +++ b/static/app/components/organizations/projectPageFilter/trigger.tsx @@ -1,7 +1,7 @@ import {forwardRef} from 'react'; import styled from '@emotion/styled'; -import Badge from 'sentry/components/badge'; +import Badge from 'sentry/components/badge/badge'; import type {DropdownButtonProps} from 'sentry/components/dropdownButton'; import DropdownButton from 'sentry/components/dropdownButton'; import PlatformList from 'sentry/components/platformList'; diff --git a/static/app/components/quickTrace/styles.tsx b/static/app/components/quickTrace/styles.tsx index 48aac3182f45dd..7c5a26cfc8c55e 100644 --- a/static/app/components/quickTrace/styles.tsx +++ b/static/app/components/quickTrace/styles.tsx @@ -3,9 +3,9 @@ import styled from '@emotion/styled'; import type {LocationDescriptor} from 'history'; import MenuHeader from 'sentry/components/actions/menuHeader'; +import Tag, {Background} from 'sentry/components/badge/tag'; import ExternalLink from 'sentry/components/links/externalLink'; import MenuItem from 'sentry/components/menuItem'; -import {Background, Tag} from 'sentry/components/tag'; import Truncate from 'sentry/components/truncate'; import {space} from 'sentry/styles/space'; import {getDuration} from 'sentry/utils/formatters'; diff --git a/static/app/components/replays/breadcrumbs/replayComparisonModal.tsx b/static/app/components/replays/breadcrumbs/replayComparisonModal.tsx index 263840ecac04d9..f9b83d38928109 100644 --- a/static/app/components/replays/breadcrumbs/replayComparisonModal.tsx +++ b/static/app/components/replays/breadcrumbs/replayComparisonModal.tsx @@ -4,8 +4,8 @@ import beautify from 'js-beautify'; import type {ModalRenderProps} from 'sentry/actionCreators/modal'; import Alert from 'sentry/components/alert'; +import FeatureBadge from 'sentry/components/badge/featureBadge'; import {CopyToClipboardButton} from 'sentry/components/copyToClipboardButton'; -import FeatureBadge from 'sentry/components/featureBadge'; import {GithubFeedbackButton} from 'sentry/components/githubFeedbackButton'; import {Flex} from 'sentry/components/profiling/flex'; import {StaticReplayPreferences} from 'sentry/components/replays/preferences/replayPreferences'; diff --git a/static/app/components/replays/header/errorCounts.tsx b/static/app/components/replays/header/errorCounts.tsx index 3e4192e4fe1483..5160a072b8bed7 100644 --- a/static/app/components/replays/header/errorCounts.tsx +++ b/static/app/components/replays/header/errorCounts.tsx @@ -2,7 +2,7 @@ import {Fragment, useCallback} from 'react'; import styled from '@emotion/styled'; import ProjectAvatar from 'sentry/components/avatar/projectAvatar'; -import Badge from 'sentry/components/badge'; +import Badge from 'sentry/components/badge/badge'; import Link from 'sentry/components/links/link'; import CountTooltipContent from 'sentry/components/replays/countTooltipContent'; import useErrorCountPerProject from 'sentry/components/replays/header/useErrorCountPerProject'; diff --git a/static/app/components/replays/replayCountBadge.tsx b/static/app/components/replays/replayCountBadge.tsx index 6ccc86eba4881b..9fbeaea0774762 100644 --- a/static/app/components/replays/replayCountBadge.tsx +++ b/static/app/components/replays/replayCountBadge.tsx @@ -1,4 +1,4 @@ -import Badge from 'sentry/components/badge'; +import Badge from 'sentry/components/badge/badge'; function ReplayCountBadge({count}: {count: undefined | number}) { const display = count && count > 50 ? '50+' : count ?? null; diff --git a/static/app/components/sidebar/broadcastSdkUpdates.tsx b/static/app/components/sidebar/broadcastSdkUpdates.tsx index 4f5a1b075085a4..5f345149cb5ec9 100644 --- a/static/app/components/sidebar/broadcastSdkUpdates.tsx +++ b/static/app/components/sidebar/broadcastSdkUpdates.tsx @@ -3,8 +3,8 @@ import groupBy from 'lodash/groupBy'; import partition from 'lodash/partition'; import {Alert} from 'sentry/components/alert'; +import Tag from 'sentry/components/badge/tag'; import ProjectBadge from 'sentry/components/idBadge/projectBadge'; -import {Tag} from 'sentry/components/tag'; import {t, tct, tn} from 'sentry/locale'; import {space} from 'sentry/styles/space'; import type {ProjectSdkUpdates, SDKUpdatesSuggestion} from 'sentry/types'; diff --git a/static/app/components/sidebar/sidebarItem.tsx b/static/app/components/sidebar/sidebarItem.tsx index 2768a89ce10773..d793cd08edecb8 100644 --- a/static/app/components/sidebar/sidebarItem.tsx +++ b/static/app/components/sidebar/sidebarItem.tsx @@ -5,7 +5,7 @@ import {css} from '@emotion/react'; import styled from '@emotion/styled'; import type {LocationDescriptor} from 'history'; -import FeatureBadge from 'sentry/components/featureBadge'; +import FeatureBadge from 'sentry/components/badge/featureBadge'; import HookOrDefault from 'sentry/components/hookOrDefault'; import InteractionStateLayer from 'sentry/components/interactionStateLayer'; import Link from 'sentry/components/links/link'; diff --git a/static/app/components/smartSearchBar/searchDropdown.tsx b/static/app/components/smartSearchBar/searchDropdown.tsx index 943e9e9ab150f7..8f2df218b63628 100644 --- a/static/app/components/smartSearchBar/searchDropdown.tsx +++ b/static/app/components/smartSearchBar/searchDropdown.tsx @@ -1,6 +1,7 @@ import {Fragment} from 'react'; import styled from '@emotion/styled'; +import Tag from 'sentry/components/badge/tag'; import {Button} from 'sentry/components/button'; import ButtonBar from 'sentry/components/buttonBar'; import HotkeysLabel from 'sentry/components/hotkeysLabel'; @@ -9,7 +10,6 @@ import {Overlay} from 'sentry/components/overlay'; import type {BooleanOperator, SearchConfig} from 'sentry/components/searchSyntax/parser'; import {parseSearch} from 'sentry/components/searchSyntax/parser'; import HighlightQuery from 'sentry/components/searchSyntax/renderer'; -import {Tag} from 'sentry/components/tag'; import {IconOpen} from 'sentry/icons'; import {t, tct} from 'sentry/locale'; import {space} from 'sentry/styles/space'; diff --git a/static/app/components/tag.tsx b/static/app/components/tag.tsx index 86ab22f1366f94..e3e20ebb2406b6 100644 --- a/static/app/components/tag.tsx +++ b/static/app/components/tag.tsx @@ -1,180 +1,8 @@ -import {useCallback} from 'react'; -import type {Theme} from '@emotion/react'; -import styled from '@emotion/styled'; - -import {Button} from 'sentry/components/button'; -import ExternalLink from 'sentry/components/links/externalLink'; -import type {LinkProps} from 'sentry/components/links/link'; -import Link from 'sentry/components/links/link'; -import type {TooltipProps} from 'sentry/components/tooltip'; -import {Tooltip} from 'sentry/components/tooltip'; -import {IconClose, IconOpen} from 'sentry/icons'; -import type {SVGIconProps} from 'sentry/icons/svgIcon'; -import {IconDefaultsProvider} from 'sentry/icons/useIconDefaults'; -import {t} from 'sentry/locale'; -import {space} from 'sentry/styles/space'; -import {trackAnalytics} from 'sentry/utils/analytics'; -import type {Color} from 'sentry/utils/theme'; -import theme from 'sentry/utils/theme'; - -interface TagProps extends React.HTMLAttributes { - /** - * Makes the tag clickable. Use for external links. - * If no icon is passed, it defaults to IconOpen (can be removed by passing icon={null}) - */ - href?: string; - /** - * Icon on the left side. - */ - icon?: React.ReactNode; - /** - * Triggered when the item is clicked - */ - onClick?: (eventKey: any) => void; - /** - * Shows clickable IconClose on the right side. - */ - onDismiss?: () => void; - /** - * Max width of the tag's text - */ - textMaxWidth?: number; - /** - * Makes the tag clickable. Use for internal links handled by react router. - * If no icon is passed, it defaults to IconOpen (can be removed by passing icon={null}) - */ - to?: LinkProps['to']; - /** - * Additional properites for the Tooltip when `tooltipText` is set. - */ - tooltipProps?: Omit; - /** - * Text to show up on a hover. - */ - tooltipText?: TooltipProps['title']; - /** - * Dictates color scheme of the tag. - */ - type?: keyof Theme['tag']; -} - -function BaseTag({ - type = 'default', - icon, - tooltipText, - tooltipProps, - to, - onClick, - href, - onDismiss, - children, - textMaxWidth = 150, - ...props -}: TagProps) { - const iconsProps: SVGIconProps = { - size: 'xs', - color: theme.tag[type].color as Color, - }; - - const isLink = href !== undefined || to !== undefined; - - // Links use the IconOpen by default - const linkIcon = isLink ? : null; - const tagIcon = icon || icon === null ? icon : linkIcon; - - const handleDismiss = useCallback( - event => { - event.preventDefault(); - onDismiss?.(); - }, - [onDismiss] - ); - - const trackClickEvent = useCallback(() => { - trackAnalytics('tag.clicked', { - is_clickable: onClick !== undefined || isLink, - organization: null, - }); - }, [isLink, onClick]); - - const tag = ( - - - {tagIcon && ( - - {tagIcon} - - )} - - - {children} - - - {onDismiss !== undefined && ( - } - /> - )} - - - ); - - const tagWithParent = - href !== undefined ? ( - {tag} - ) : to !== undefined ? ( - - {tag} - - ) : ( - tag - ); - - return ( - - {tagWithParent} - - ); -} - -const Tag = styled(BaseTag)` - font-size: ${p => p.theme.fontSizeSmall}; -`; - -const TAG_HEIGHT = '20px'; - -export const Background = styled('div')<{type: keyof Theme['tag']}>` - display: inline-flex; - align-items: center; - height: ${TAG_HEIGHT}; - border-radius: ${TAG_HEIGHT}; - background-color: ${p => p.theme.tag[p.type].background}; - border: solid 1px ${p => p.theme.tag[p.type].border}; - padding: 0 ${space(1)}; -`; - -const IconWrapper = styled('span')` - margin-right: ${space(0.5)}; - display: inline-flex; -`; - -const Text = styled('span')<{maxWidth: number; type: keyof Theme['tag']}>` - color: ${p => p.theme.tag[p.type].color}; - max-width: ${p => p.maxWidth}px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - line-height: ${TAG_HEIGHT}; -`; - -const DismissButton = styled(Button)` - margin-left: ${space(0.5)}; - margin-right: -${space(0.5)}; - border: none; -`; - -export {Tag, type TagProps}; +import Tag from 'sentry/components/badge/tag'; + +/** + * @deprecated Import from `sentry/components/badge/tag` instead + * + * TODO(ryan953): remove this shim once getsentry imports are updated + */ +export {Tag}; diff --git a/static/app/utils/performance/contexts/metricsEnhancedPerformanceDataContext.tsx b/static/app/utils/performance/contexts/metricsEnhancedPerformanceDataContext.tsx index e3b21455ab0ba8..8377de29a09a6d 100644 --- a/static/app/utils/performance/contexts/metricsEnhancedPerformanceDataContext.tsx +++ b/static/app/utils/performance/contexts/metricsEnhancedPerformanceDataContext.tsx @@ -1,7 +1,7 @@ import type {ReactNode} from 'react'; import {useCallback, useState} from 'react'; -import {Tag} from 'sentry/components/tag'; +import Tag from 'sentry/components/badge/tag'; import {t} from 'sentry/locale'; import useOrganization from 'sentry/utils/useOrganization'; import type {Widget} from 'sentry/views/dashboards/types'; diff --git a/static/app/utils/replays/getFrameDetails.tsx b/static/app/utils/replays/getFrameDetails.tsx index 49af260b72ead0..17342e9549fa68 100644 --- a/static/app/utils/replays/getFrameDetails.tsx +++ b/static/app/utils/replays/getFrameDetails.tsx @@ -1,7 +1,7 @@ import type {ReactNode} from 'react'; import {Fragment} from 'react'; -import FeatureBadge from 'sentry/components/featureBadge'; +import FeatureBadge from 'sentry/components/badge/featureBadge'; import ExternalLink from 'sentry/components/links/externalLink'; import CrumbErrorTitle from 'sentry/components/replays/breadcrumbs/errorTitle'; import SelectorList from 'sentry/components/replays/breadcrumbs/selectorList'; diff --git a/static/app/views/alerts/list/incidents/row.tsx b/static/app/views/alerts/list/incidents/row.tsx index 0fea8f1cfe8fed..b9bed443c7f287 100644 --- a/static/app/views/alerts/list/incidents/row.tsx +++ b/static/app/views/alerts/list/incidents/row.tsx @@ -3,11 +3,11 @@ import styled from '@emotion/styled'; import moment from 'moment'; import ActorAvatar from 'sentry/components/avatar/actorAvatar'; +import Tag from 'sentry/components/badge/tag'; import Duration from 'sentry/components/duration'; import ErrorBoundary from 'sentry/components/errorBoundary'; import IdBadge from 'sentry/components/idBadge'; import Link from 'sentry/components/links/link'; -import {Tag} from 'sentry/components/tag'; import TimeSince from 'sentry/components/timeSince'; import {t} from 'sentry/locale'; import TeamStore from 'sentry/stores/teamStore'; diff --git a/static/app/views/alerts/list/rules/row.tsx b/static/app/views/alerts/list/rules/row.tsx index 4cfda3dfd5cc91..cc7861310983a1 100644 --- a/static/app/views/alerts/list/rules/row.tsx +++ b/static/app/views/alerts/list/rules/row.tsx @@ -2,9 +2,9 @@ import {useState} from 'react'; import styled from '@emotion/styled'; import Access from 'sentry/components/acl/access'; -import AlertBadge from 'sentry/components/alertBadge'; import ActorAvatar from 'sentry/components/avatar/actorAvatar'; import TeamAvatar from 'sentry/components/avatar/teamAvatar'; +import AlertBadge from 'sentry/components/badge/alertBadge'; import {openConfirmModal} from 'sentry/components/confirm'; import DropdownAutoComplete from 'sentry/components/dropdownAutoComplete'; import type {ItemsBeforeFilter} from 'sentry/components/dropdownAutoComplete/types'; diff --git a/static/app/views/alerts/list/rules/teamFilter.tsx b/static/app/views/alerts/list/rules/teamFilter.tsx index 8f3d849d8fa7e5..c72046076de7ea 100644 --- a/static/app/views/alerts/list/rules/teamFilter.tsx +++ b/static/app/views/alerts/list/rules/teamFilter.tsx @@ -3,7 +3,7 @@ import styled from '@emotion/styled'; import debounce from 'lodash/debounce'; import TeamAvatar from 'sentry/components/avatar/teamAvatar'; -import Badge from 'sentry/components/badge'; +import Badge from 'sentry/components/badge/badge'; import {CompactSelect} from 'sentry/components/compactSelect'; import {DEFAULT_DEBOUNCE_DURATION} from 'sentry/constants'; import {IconUser} from 'sentry/icons'; diff --git a/static/app/views/alerts/rules/metric/details/sidebar.tsx b/static/app/views/alerts/rules/metric/details/sidebar.tsx index 83dcfb1b61141f..aabdcbdc40ba86 100644 --- a/static/app/views/alerts/rules/metric/details/sidebar.tsx +++ b/static/app/views/alerts/rules/metric/details/sidebar.tsx @@ -1,9 +1,9 @@ import {Fragment} from 'react'; import styled from '@emotion/styled'; -import AlertBadge from 'sentry/components/alertBadge'; import {OnDemandWarningIcon} from 'sentry/components/alerts/onDemandMetricAlert'; import ActorAvatar from 'sentry/components/avatar/actorAvatar'; +import AlertBadge from 'sentry/components/badge/alertBadge'; import {SectionHeading} from 'sentry/components/charts/styles'; import {DateTime} from 'sentry/components/dateTime'; import Duration from 'sentry/components/duration'; diff --git a/static/app/views/alerts/rules/metric/mriField.tsx b/static/app/views/alerts/rules/metric/mriField.tsx index 1c5226936ba05f..684d633e3f0b29 100644 --- a/static/app/views/alerts/rules/metric/mriField.tsx +++ b/static/app/views/alerts/rules/metric/mriField.tsx @@ -1,8 +1,8 @@ import {Fragment, useCallback, useEffect, useMemo} from 'react'; import styled from '@emotion/styled'; +import Tag from 'sentry/components/badge/tag'; import SelectControl from 'sentry/components/forms/controls/selectControl'; -import {Tag} from 'sentry/components/tag'; import {t} from 'sentry/locale'; import {space} from 'sentry/styles/space'; import type {MetricMeta, MRI, ParsedMRI, Project} from 'sentry/types'; diff --git a/static/app/views/dashboards/addWidget.tsx b/static/app/views/dashboards/addWidget.tsx index 375928492c6d38..300dcc30fede02 100644 --- a/static/app/views/dashboards/addWidget.tsx +++ b/static/app/views/dashboards/addWidget.tsx @@ -2,12 +2,12 @@ import {useCallback, useMemo} from 'react'; import {useSortable} from '@dnd-kit/sortable'; import styled from '@emotion/styled'; +import FeatureBadge from 'sentry/components/badge/featureBadge'; import type {ButtonProps} from 'sentry/components/button'; import {Button} from 'sentry/components/button'; import DropdownButton from 'sentry/components/dropdownButton'; import type {MenuItemProps} from 'sentry/components/dropdownMenu'; import {DropdownMenu} from 'sentry/components/dropdownMenu'; -import FeatureBadge from 'sentry/components/featureBadge'; import ExternalLink from 'sentry/components/links/externalLink'; import {IconAdd} from 'sentry/icons'; import {t} from 'sentry/locale'; diff --git a/static/app/views/dashboards/releasesSelectControl.tsx b/static/app/views/dashboards/releasesSelectControl.tsx index 71497a6026b8f9..b41c5142d93031 100644 --- a/static/app/views/dashboards/releasesSelectControl.tsx +++ b/static/app/views/dashboards/releasesSelectControl.tsx @@ -2,7 +2,7 @@ import {useEffect, useState} from 'react'; import styled from '@emotion/styled'; import debounce from 'lodash/debounce'; -import Badge from 'sentry/components/badge'; +import Badge from 'sentry/components/badge/badge'; import {CompactSelect} from 'sentry/components/compactSelect'; import TextOverflow from 'sentry/components/textOverflow'; import {DEFAULT_DEBOUNCE_DURATION} from 'sentry/constants'; diff --git a/static/app/views/dashboards/widgetCard/widgetCardContextMenu.tsx b/static/app/views/dashboards/widgetCard/widgetCardContextMenu.tsx index c35adc6785d549..139475c6e4b3c0 100644 --- a/static/app/views/dashboards/widgetCard/widgetCardContextMenu.tsx +++ b/static/app/views/dashboards/widgetCard/widgetCardContextMenu.tsx @@ -3,12 +3,12 @@ import styled from '@emotion/styled'; import type {Location} from 'history'; import {openDashboardWidgetQuerySelectorModal} from 'sentry/actionCreators/modal'; +import Tag from 'sentry/components/badge/tag'; import {Button} from 'sentry/components/button'; import {openConfirmModal} from 'sentry/components/confirm'; import type {MenuItemProps} from 'sentry/components/dropdownMenu'; import {DropdownMenu} from 'sentry/components/dropdownMenu'; import {isWidgetViewerPath} from 'sentry/components/modals/widgetViewerModal/utils'; -import {Tag} from 'sentry/components/tag'; import {IconEdit, IconEllipsis, IconExpand} from 'sentry/icons'; import {t} from 'sentry/locale'; import {space} from 'sentry/styles/space'; diff --git a/static/app/views/discover/table/queryField.tsx b/static/app/views/discover/table/queryField.tsx index 1d5710fd470c81..d2171c3711c068 100644 --- a/static/app/views/discover/table/queryField.tsx +++ b/static/app/views/discover/table/queryField.tsx @@ -4,11 +4,11 @@ import {components} from 'react-select'; import styled from '@emotion/styled'; import cloneDeep from 'lodash/cloneDeep'; +import Tag from 'sentry/components/badge/tag'; import type {ControlProps} from 'sentry/components/forms/controls/selectControl'; import SelectControl from 'sentry/components/forms/controls/selectControl'; import type {InputProps} from 'sentry/components/input'; import Input from 'sentry/components/input'; -import {Tag} from 'sentry/components/tag'; import {Tooltip} from 'sentry/components/tooltip'; import {IconWarning} from 'sentry/icons'; import {t} from 'sentry/locale'; diff --git a/static/app/views/issueDetails/groupPriority.tsx b/static/app/views/issueDetails/groupPriority.tsx index f96dfd525d3db3..9e9f56f3af30bb 100644 --- a/static/app/views/issueDetails/groupPriority.tsx +++ b/static/app/views/issueDetails/groupPriority.tsx @@ -4,7 +4,7 @@ import { addLoadingMessage, clearIndicators, } from 'sentry/actionCreators/indicator'; -import {GroupPriorityDropdown} from 'sentry/components/group/groupPriority'; +import {GroupPriorityDropdown} from 'sentry/components/badge/groupPriority'; import {t} from 'sentry/locale'; import IssueListCacheStore from 'sentry/stores/IssueListCacheStore'; import {type Group, PriorityLevel} from 'sentry/types'; diff --git a/static/app/views/issueDetails/header.tsx b/static/app/views/issueDetails/header.tsx index 65cfe08acfad76..1dcb7dd65e456f 100644 --- a/static/app/views/issueDetails/header.tsx +++ b/static/app/views/issueDetails/header.tsx @@ -4,12 +4,12 @@ import type {LocationDescriptor} from 'history'; import omit from 'lodash/omit'; import GuideAnchor from 'sentry/components/assistant/guideAnchor'; -import Badge from 'sentry/components/badge'; +import Badge from 'sentry/components/badge/badge'; +import FeatureBadge from 'sentry/components/badge/featureBadge'; import {Breadcrumbs} from 'sentry/components/breadcrumbs'; import Count from 'sentry/components/count'; import EventOrGroupTitle from 'sentry/components/eventOrGroupTitle'; import EventMessage from 'sentry/components/events/eventMessage'; -import FeatureBadge from 'sentry/components/featureBadge'; import {GroupStatusBadge} from 'sentry/components/group/inboxBadges/statusBadge'; import * as Layout from 'sentry/components/layouts/thirds'; import Link from 'sentry/components/links/link'; diff --git a/static/app/views/issueList/actions/actionSet.tsx b/static/app/views/issueList/actions/actionSet.tsx index 36569bd2f9c3dd..e7369ed53b6268 100644 --- a/static/app/views/issueList/actions/actionSet.tsx +++ b/static/app/views/issueList/actions/actionSet.tsx @@ -2,11 +2,11 @@ import {Fragment} from 'react'; import ActionLink from 'sentry/components/actions/actionLink'; import ArchiveActions from 'sentry/components/actions/archive'; +import {makeGroupPriorityDropdownOptions} from 'sentry/components/badge/groupPriority'; import {Button} from 'sentry/components/button'; import {openConfirmModal} from 'sentry/components/confirm'; import type {MenuItemProps} from 'sentry/components/dropdownMenu'; import {DropdownMenu} from 'sentry/components/dropdownMenu'; -import {makeGroupPriorityDropdownOptions} from 'sentry/components/group/groupPriority'; import {IconEllipsis} from 'sentry/icons'; import {t} from 'sentry/locale'; import GroupStore from 'sentry/stores/groupStore'; diff --git a/static/app/views/issueList/header.tsx b/static/app/views/issueList/header.tsx index 2e0a8d43621949..7aafeed6b4df86 100644 --- a/static/app/views/issueList/header.tsx +++ b/static/app/views/issueList/header.tsx @@ -3,7 +3,7 @@ import type {InjectedRouter} from 'react-router'; import styled from '@emotion/styled'; import GuideAnchor from 'sentry/components/assistant/guideAnchor'; -import Badge from 'sentry/components/badge'; +import Badge from 'sentry/components/badge/badge'; import {Button} from 'sentry/components/button'; import ButtonBar from 'sentry/components/buttonBar'; import GlobalEventProcessingAlert from 'sentry/components/globalEventProcessingAlert'; diff --git a/static/app/views/metrics/dashboardImportModal.tsx b/static/app/views/metrics/dashboardImportModal.tsx index 2496de54919c53..af163bbe405848 100644 --- a/static/app/views/metrics/dashboardImportModal.tsx +++ b/static/app/views/metrics/dashboardImportModal.tsx @@ -5,11 +5,11 @@ import styled from '@emotion/styled'; import {createDashboard} from 'sentry/actionCreators/dashboards'; import type {ModalRenderProps} from 'sentry/actionCreators/modal'; import {openModal} from 'sentry/actionCreators/modal'; +import Tag from 'sentry/components/badge/tag'; import {Button} from 'sentry/components/button'; import TextArea from 'sentry/components/forms/controls/textarea'; import LoadingIndicator from 'sentry/components/loadingIndicator'; import {PanelTable} from 'sentry/components/panels/panelTable'; -import {Tag} from 'sentry/components/tag'; import {Tooltip} from 'sentry/components/tooltip'; import {t} from 'sentry/locale'; import {space} from 'sentry/styles/space'; diff --git a/static/app/views/metrics/layout.tsx b/static/app/views/metrics/layout.tsx index fb7b555c50bc43..f780a20528ec71 100644 --- a/static/app/views/metrics/layout.tsx +++ b/static/app/views/metrics/layout.tsx @@ -4,8 +4,8 @@ import * as Sentry from '@sentry/react'; import emptyStateImg from 'sentry-images/spot/custom-metrics-empty-state.svg'; +import FeatureBadge from 'sentry/components/badge/featureBadge'; import {Button} from 'sentry/components/button'; -import FeatureBadge from 'sentry/components/featureBadge'; import FloatingFeedbackWidget from 'sentry/components/feedback/widget/floatingFeedbackWidget'; import * as Layout from 'sentry/components/layouts/thirds'; import OnboardingPanel from 'sentry/components/onboardingPanel'; diff --git a/static/app/views/monitors/components/overviewTimeline/overviewRow.tsx b/static/app/views/monitors/components/overviewTimeline/overviewRow.tsx index f0394921192665..12dd9690a9df54 100644 --- a/static/app/views/monitors/components/overviewTimeline/overviewRow.tsx +++ b/static/app/views/monitors/components/overviewTimeline/overviewRow.tsx @@ -3,11 +3,11 @@ import {Link} from 'react-router'; import {css} from '@emotion/react'; import styled from '@emotion/styled'; +import Tag from 'sentry/components/badge/tag'; import {Button} from 'sentry/components/button'; import {openConfirmModal} from 'sentry/components/confirm'; import {DropdownMenu} from 'sentry/components/dropdownMenu'; import ProjectBadge from 'sentry/components/idBadge/projectBadge'; -import {Tag} from 'sentry/components/tag'; import {IconEllipsis} from 'sentry/icons'; import {t, tct} from 'sentry/locale'; import {fadeIn} from 'sentry/styles/animations'; diff --git a/static/app/views/performance/browser/interactionSummary/index.tsx b/static/app/views/performance/browser/interactionSummary/index.tsx index 55045342e40e34..c9071747ddcc90 100644 --- a/static/app/views/performance/browser/interactionSummary/index.tsx +++ b/static/app/views/performance/browser/interactionSummary/index.tsx @@ -1,5 +1,5 @@ +import FeatureBadge from 'sentry/components/badge/featureBadge'; import {Breadcrumbs} from 'sentry/components/breadcrumbs'; -import FeatureBadge from 'sentry/components/featureBadge'; import * as Layout from 'sentry/components/layouts/thirds'; import {DatePageFilter} from 'sentry/components/organizations/datePageFilter'; import PageFilterBar from 'sentry/components/organizations/pageFilterBar'; diff --git a/static/app/views/performance/browser/interactionsLandingPage.tsx b/static/app/views/performance/browser/interactionsLandingPage.tsx index 164554a4704a99..e9ad375e0050db 100644 --- a/static/app/views/performance/browser/interactionsLandingPage.tsx +++ b/static/app/views/performance/browser/interactionsLandingPage.tsx @@ -1,8 +1,8 @@ import {browserHistory} from 'react-router'; import styled from '@emotion/styled'; +import FeatureBadge from 'sentry/components/badge/featureBadge'; import {Breadcrumbs} from 'sentry/components/breadcrumbs'; -import FeatureBadge from 'sentry/components/featureBadge'; import type {ControlProps} from 'sentry/components/forms/controls/selectControl'; import SelectControl from 'sentry/components/forms/controls/selectControl'; import * as Layout from 'sentry/components/layouts/thirds'; diff --git a/static/app/views/performance/browser/resources/resourceView/index.tsx b/static/app/views/performance/browser/resources/resourceView/index.tsx index 72e8631dc57111..15e014aa75bf24 100644 --- a/static/app/views/performance/browser/resources/resourceView/index.tsx +++ b/static/app/views/performance/browser/resources/resourceView/index.tsx @@ -3,7 +3,7 @@ import {browserHistory} from 'react-router'; import styled from '@emotion/styled'; import debounce from 'lodash/debounce'; -import FeatureBadge from 'sentry/components/featureBadge'; +import FeatureBadge from 'sentry/components/badge/featureBadge'; import {t} from 'sentry/locale'; import {space} from 'sentry/styles/space'; import {useLocation} from 'sentry/utils/useLocation'; diff --git a/static/app/views/performance/cache/cacheLandingPage.tsx b/static/app/views/performance/cache/cacheLandingPage.tsx index 66ab1cbc0f6313..5814939852208f 100644 --- a/static/app/views/performance/cache/cacheLandingPage.tsx +++ b/static/app/views/performance/cache/cacheLandingPage.tsx @@ -1,7 +1,7 @@ import React from 'react'; +import FeatureBadge from 'sentry/components/badge/featureBadge'; import {Breadcrumbs} from 'sentry/components/breadcrumbs'; -import FeatureBadge from 'sentry/components/featureBadge'; import FloatingFeedbackWidget from 'sentry/components/feedback/widget/floatingFeedbackWidget'; import * as Layout from 'sentry/components/layouts/thirds'; import {t} from 'sentry/locale'; diff --git a/static/app/views/performance/cache/settings.ts b/static/app/views/performance/cache/settings.ts index 0f81121d056c6c..03907cf4a75465 100644 --- a/static/app/views/performance/cache/settings.ts +++ b/static/app/views/performance/cache/settings.ts @@ -1,4 +1,4 @@ -import type {BadgeType} from 'sentry/components/featureBadge'; +import type {BadgeType} from 'sentry/components/badge/featureBadge'; import {t} from 'sentry/locale'; export const RELEASE_LEVEL: BadgeType = 'alpha'; diff --git a/static/app/views/performance/http/httpDomainSummaryPage.tsx b/static/app/views/performance/http/httpDomainSummaryPage.tsx index b5611d4839fa25..e264786a399ddb 100644 --- a/static/app/views/performance/http/httpDomainSummaryPage.tsx +++ b/static/app/views/performance/http/httpDomainSummaryPage.tsx @@ -2,8 +2,8 @@ import React from 'react'; import styled from '@emotion/styled'; import ProjectAvatar from 'sentry/components/avatar/projectAvatar'; +import FeatureBadge from 'sentry/components/badge/featureBadge'; import {Breadcrumbs} from 'sentry/components/breadcrumbs'; -import FeatureBadge from 'sentry/components/featureBadge'; import FloatingFeedbackWidget from 'sentry/components/feedback/widget/floatingFeedbackWidget'; import * as Layout from 'sentry/components/layouts/thirds'; import {DatePageFilter} from 'sentry/components/organizations/datePageFilter'; diff --git a/static/app/views/performance/http/httpLandingPage.tsx b/static/app/views/performance/http/httpLandingPage.tsx index 32a75579a91cbc..b6845c93ee7be4 100644 --- a/static/app/views/performance/http/httpLandingPage.tsx +++ b/static/app/views/performance/http/httpLandingPage.tsx @@ -1,7 +1,7 @@ import React, {Fragment} from 'react'; +import FeatureBadge from 'sentry/components/badge/featureBadge'; import {Breadcrumbs} from 'sentry/components/breadcrumbs'; -import FeatureBadge from 'sentry/components/featureBadge'; import FloatingFeedbackWidget from 'sentry/components/feedback/widget/floatingFeedbackWidget'; import * as Layout from 'sentry/components/layouts/thirds'; import {DatePageFilter} from 'sentry/components/organizations/datePageFilter'; diff --git a/static/app/views/performance/http/settings.ts b/static/app/views/performance/http/settings.ts index 07c3ab3d4c4ec9..ef748bc384e3f9 100644 --- a/static/app/views/performance/http/settings.ts +++ b/static/app/views/performance/http/settings.ts @@ -1,4 +1,4 @@ -import type {BadgeType} from 'sentry/components/featureBadge'; +import type {BadgeType} from 'sentry/components/badge/featureBadge'; import {t} from 'sentry/locale'; export const MODULE_TITLE = t('Requests'); diff --git a/static/app/views/performance/landing/widgets/components/widgetHeader.tsx b/static/app/views/performance/landing/widgets/components/widgetHeader.tsx index 1af6d805e3aeb6..3d457e4c76c946 100644 --- a/static/app/views/performance/landing/widgets/components/widgetHeader.tsx +++ b/static/app/views/performance/landing/widgets/components/widgetHeader.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; +import FeatureBadge from 'sentry/components/badge/featureBadge'; import {HeaderTitleLegend} from 'sentry/components/charts/styles'; -import FeatureBadge from 'sentry/components/featureBadge'; import QuestionTooltip from 'sentry/components/questionTooltip'; import TextOverflow from 'sentry/components/textOverflow'; import {space} from 'sentry/styles/space'; diff --git a/static/app/views/performance/transactionDetails/styles.tsx b/static/app/views/performance/transactionDetails/styles.tsx index a3725579a0cff3..6e97f02e838683 100644 --- a/static/app/views/performance/transactionDetails/styles.tsx +++ b/static/app/views/performance/transactionDetails/styles.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; +import FeatureBadge from 'sentry/components/badge/featureBadge'; import {SectionHeading} from 'sentry/components/charts/styles'; -import FeatureBadge from 'sentry/components/featureBadge'; import QuestionTooltip from 'sentry/components/questionTooltip'; import {space} from 'sentry/styles/space'; diff --git a/static/app/views/performance/transactionSummary/header.tsx b/static/app/views/performance/transactionSummary/header.tsx index 475add545a9077..1197a9320d2b70 100644 --- a/static/app/views/performance/transactionSummary/header.tsx +++ b/static/app/views/performance/transactionSummary/header.tsx @@ -4,9 +4,9 @@ import type {Location} from 'history'; import Feature from 'sentry/components/acl/feature'; import GuideAnchor from 'sentry/components/assistant/guideAnchor'; +import FeatureBadge from 'sentry/components/badge/featureBadge'; import ButtonBar from 'sentry/components/buttonBar'; import {CreateAlertFromViewButton} from 'sentry/components/createAlertButton'; -import FeatureBadge from 'sentry/components/featureBadge'; import IdBadge from 'sentry/components/idBadge'; import * as Layout from 'sentry/components/layouts/thirds'; import ReplayCountBadge from 'sentry/components/replays/replayCountBadge'; diff --git a/static/app/views/performance/vitalDetail/table.tsx b/static/app/views/performance/vitalDetail/table.tsx index 98be0e424db02f..6aa96888887c11 100644 --- a/static/app/views/performance/vitalDetail/table.tsx +++ b/static/app/views/performance/vitalDetail/table.tsx @@ -3,12 +3,12 @@ import {browserHistory} from 'react-router'; import styled from '@emotion/styled'; import type {Location, LocationDescriptorObject} from 'history'; +import Tag from 'sentry/components/badge/tag'; import type {GridColumn} from 'sentry/components/gridEditable'; import GridEditable, {COL_WIDTH_UNDEFINED} from 'sentry/components/gridEditable'; import SortLink from 'sentry/components/gridEditable/sortLink'; import Link from 'sentry/components/links/link'; import Pagination from 'sentry/components/pagination'; -import {Tag} from 'sentry/components/tag'; import {IconStar} from 'sentry/icons'; import {t} from 'sentry/locale'; import type {Organization, Project} from 'sentry/types'; diff --git a/static/app/views/projectDetail/projectLatestAlerts.tsx b/static/app/views/projectDetail/projectLatestAlerts.tsx index b8f86f221d15ce..e724764bad54d5 100644 --- a/static/app/views/projectDetail/projectLatestAlerts.tsx +++ b/static/app/views/projectDetail/projectLatestAlerts.tsx @@ -2,7 +2,7 @@ import styled from '@emotion/styled'; import type {Location} from 'history'; import pick from 'lodash/pick'; -import AlertBadge from 'sentry/components/alertBadge'; +import AlertBadge from 'sentry/components/badge/alertBadge'; import {SectionHeading} from 'sentry/components/charts/styles'; import EmptyStateWarning from 'sentry/components/emptyStateWarning'; import Link from 'sentry/components/links/link'; diff --git a/static/app/views/releases/components/header.tsx b/static/app/views/releases/components/header.tsx index 0251d6e424da3f..b6848f6ea45d06 100644 --- a/static/app/views/releases/components/header.tsx +++ b/static/app/views/releases/components/header.tsx @@ -3,7 +3,7 @@ import type {InjectedRouter} from 'react-router'; import styled from '@emotion/styled'; import * as qs from 'query-string'; -import FeatureBadge from 'sentry/components/featureBadge'; +import FeatureBadge from 'sentry/components/badge/featureBadge'; import * as Layout from 'sentry/components/layouts/thirds'; import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip'; import {TabList, Tabs} from 'sentry/components/tabs'; diff --git a/static/app/views/releases/detail/header/releaseHeader.tsx b/static/app/views/releases/detail/header/releaseHeader.tsx index fb651096646dfe..de2a381c77970d 100644 --- a/static/app/views/releases/detail/header/releaseHeader.tsx +++ b/static/app/views/releases/detail/header/releaseHeader.tsx @@ -3,7 +3,7 @@ import styled from '@emotion/styled'; import type {Location} from 'history'; import pick from 'lodash/pick'; -import Badge from 'sentry/components/badge'; +import Badge from 'sentry/components/badge/badge'; import {Breadcrumbs} from 'sentry/components/breadcrumbs'; import {CopyToClipboardButton} from 'sentry/components/copyToClipboardButton'; import IdBadge from 'sentry/components/idBadge'; diff --git a/static/app/views/releases/detail/overview/sidebar/releaseAdoption.tsx b/static/app/views/releases/detail/overview/sidebar/releaseAdoption.tsx index 1ff3625442040c..5efe6ce47af922 100644 --- a/static/app/views/releases/detail/overview/sidebar/releaseAdoption.tsx +++ b/static/app/views/releases/detail/overview/sidebar/releaseAdoption.tsx @@ -1,6 +1,7 @@ import {useTheme} from '@emotion/react'; import styled from '@emotion/styled'; +import Tag from 'sentry/components/badge/tag'; import ChartZoom from 'sentry/components/charts/chartZoom'; import ErrorPanel from 'sentry/components/charts/errorPanel'; import type {LineChartProps} from 'sentry/components/charts/lineChart'; @@ -11,7 +12,6 @@ import ErrorBoundary from 'sentry/components/errorBoundary'; import NotAvailable from 'sentry/components/notAvailable'; import QuestionTooltip from 'sentry/components/questionTooltip'; import * as SidebarSection from 'sentry/components/sidebarSection'; -import {Tag} from 'sentry/components/tag'; import {Tooltip} from 'sentry/components/tooltip'; import {IconWarning} from 'sentry/icons'; import {t, tct} from 'sentry/locale'; diff --git a/static/app/views/releases/list/releaseCard/releaseCardProjectRow.tsx b/static/app/views/releases/list/releaseCard/releaseCardProjectRow.tsx index 62e63bf4cb43aa..a64fe77a44744f 100644 --- a/static/app/views/releases/list/releaseCard/releaseCardProjectRow.tsx +++ b/static/app/views/releases/list/releaseCard/releaseCardProjectRow.tsx @@ -5,6 +5,7 @@ import styled from '@emotion/styled'; import type {Location} from 'history'; import GuideAnchor from 'sentry/components/assistant/guideAnchor'; +import Tag from 'sentry/components/badge/tag'; import {Button} from 'sentry/components/button'; import MiniBarChart from 'sentry/components/charts/miniBarChart'; import Count from 'sentry/components/count'; @@ -15,7 +16,6 @@ import NotAvailable from 'sentry/components/notAvailable'; import {extractSelectionParameters} from 'sentry/components/organizations/pageFilters/utils'; import PanelItem from 'sentry/components/panels/panelItem'; import Placeholder from 'sentry/components/placeholder'; -import {Tag} from 'sentry/components/tag'; import {Tooltip} from 'sentry/components/tooltip'; import {IconCheckmark, IconFire, IconWarning} from 'sentry/icons'; import {t, tn} from 'sentry/locale'; diff --git a/static/app/views/replays/detail/layout/focusTabs.tsx b/static/app/views/replays/detail/layout/focusTabs.tsx index 7572419919fc54..8f8ac19757562d 100644 --- a/static/app/views/replays/detail/layout/focusTabs.tsx +++ b/static/app/views/replays/detail/layout/focusTabs.tsx @@ -3,7 +3,7 @@ import {Fragment} from 'react'; import styled from '@emotion/styled'; import queryString from 'query-string'; -import FeatureBadge from 'sentry/components/featureBadge'; +import FeatureBadge from 'sentry/components/badge/featureBadge'; import ExternalLink from 'sentry/components/links/externalLink'; import ListLink from 'sentry/components/links/listLink'; import ScrollableTabs from 'sentry/components/replays/scrollableTabs'; diff --git a/static/app/views/settings/account/accountEmails.tsx b/static/app/views/settings/account/accountEmails.tsx index 86e3b7f5f729ef..8fc30564b5af71 100644 --- a/static/app/views/settings/account/accountEmails.tsx +++ b/static/app/views/settings/account/accountEmails.tsx @@ -4,6 +4,7 @@ import styled from '@emotion/styled'; import {addErrorMessage} from 'sentry/actionCreators/indicator'; import type {RequestOptions} from 'sentry/api'; import AlertLink from 'sentry/components/alertLink'; +import Tag from 'sentry/components/badge/tag'; import {Button} from 'sentry/components/button'; import ButtonBar from 'sentry/components/buttonBar'; import type {FormProps} from 'sentry/components/forms/form'; @@ -16,7 +17,6 @@ import PanelBody from 'sentry/components/panels/panelBody'; import PanelHeader from 'sentry/components/panels/panelHeader'; import PanelItem from 'sentry/components/panels/panelItem'; import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle'; -import {Tag} from 'sentry/components/tag'; import accountEmailsFields from 'sentry/data/forms/accountEmails'; import {IconDelete, IconStack} from 'sentry/icons'; import {t} from 'sentry/locale'; diff --git a/static/app/views/settings/account/accountIdentities.tsx b/static/app/views/settings/account/accountIdentities.tsx index f5165e95853c19..725f1590c0c951 100644 --- a/static/app/views/settings/account/accountIdentities.tsx +++ b/static/app/views/settings/account/accountIdentities.tsx @@ -4,6 +4,7 @@ import moment from 'moment'; import {disconnectIdentity} from 'sentry/actionCreators/account'; import {Alert} from 'sentry/components/alert'; +import Tag from 'sentry/components/badge/tag'; import {Button} from 'sentry/components/button'; import Confirm from 'sentry/components/confirm'; import {DateTime} from 'sentry/components/dateTime'; @@ -15,7 +16,6 @@ import PanelBody from 'sentry/components/panels/panelBody'; import PanelHeader from 'sentry/components/panels/panelHeader'; import PanelItem from 'sentry/components/panels/panelItem'; import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle'; -import {Tag} from 'sentry/components/tag'; import {t, tct} from 'sentry/locale'; import {space} from 'sentry/styles/space'; import type {UserIdentityConfig} from 'sentry/types'; diff --git a/static/app/views/settings/components/settingsNavItem.tsx b/static/app/views/settings/components/settingsNavItem.tsx index ff4baec32fbf94..34244dad328909 100644 --- a/static/app/views/settings/components/settingsNavItem.tsx +++ b/static/app/views/settings/components/settingsNavItem.tsx @@ -3,8 +3,8 @@ import {Fragment} from 'react'; import {Link as RouterLink} from 'react-router'; import styled from '@emotion/styled'; -import Badge from 'sentry/components/badge'; -import FeatureBadge from 'sentry/components/featureBadge'; +import Badge from 'sentry/components/badge/badge'; +import FeatureBadge from 'sentry/components/badge/featureBadge'; import HookOrDefault from 'sentry/components/hookOrDefault'; import {Tooltip} from 'sentry/components/tooltip'; import {t} from 'sentry/locale'; diff --git a/static/app/views/settings/organization/navigationConfiguration.tsx b/static/app/views/settings/organization/navigationConfiguration.tsx index 7b259c69547217..7e5bcedd793d76 100644 --- a/static/app/views/settings/organization/navigationConfiguration.tsx +++ b/static/app/views/settings/organization/navigationConfiguration.tsx @@ -1,4 +1,4 @@ -import FeatureBadge from 'sentry/components/featureBadge'; +import FeatureBadge from 'sentry/components/badge/featureBadge'; import {t} from 'sentry/locale'; import type {NavigationSection} from 'sentry/views/settings/types'; diff --git a/static/app/views/settings/organizationAuditLog/auditLogList.tsx b/static/app/views/settings/organizationAuditLog/auditLogList.tsx index f58446287ed40d..2f0eb6484a97c2 100644 --- a/static/app/views/settings/organizationAuditLog/auditLogList.tsx +++ b/static/app/views/settings/organizationAuditLog/auditLogList.tsx @@ -3,13 +3,13 @@ import styled from '@emotion/styled'; import {ActivityAvatar} from 'sentry/components/activity/item/avatar'; import UserAvatar from 'sentry/components/avatar/userAvatar'; +import Tag from 'sentry/components/badge/tag'; import {DateTime} from 'sentry/components/dateTime'; import SelectControl from 'sentry/components/forms/controls/selectControl'; import Link from 'sentry/components/links/link'; import type {CursorHandler} from 'sentry/components/pagination'; import Pagination from 'sentry/components/pagination'; import {PanelTable} from 'sentry/components/panels/panelTable'; -import {Tag} from 'sentry/components/tag'; import {Tooltip} from 'sentry/components/tooltip'; import {t, tct} from 'sentry/locale'; import {space} from 'sentry/styles/space'; diff --git a/static/app/views/settings/organizationAuth/providerItem.tsx b/static/app/views/settings/organizationAuth/providerItem.tsx index b5b7c1f1564646..567167afac3884 100644 --- a/static/app/views/settings/organizationAuth/providerItem.tsx +++ b/static/app/views/settings/organizationAuth/providerItem.tsx @@ -3,10 +3,10 @@ import styled from '@emotion/styled'; import Access from 'sentry/components/acl/access'; import Feature from 'sentry/components/acl/feature'; import FeatureDisabled from 'sentry/components/acl/featureDisabled'; +import Tag from 'sentry/components/badge/tag'; import {Button} from 'sentry/components/button'; import {Hovercard} from 'sentry/components/hovercard'; import PanelItem from 'sentry/components/panels/panelItem'; -import {Tag} from 'sentry/components/tag'; import {IconLock} from 'sentry/icons'; import {t} from 'sentry/locale'; import {space} from 'sentry/styles/space'; diff --git a/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDashboard/requestLog.tsx b/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDashboard/requestLog.tsx index 7bac9a867a8946..3161ff6bfcb060 100644 --- a/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDashboard/requestLog.tsx +++ b/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDashboard/requestLog.tsx @@ -3,6 +3,7 @@ import styled from '@emotion/styled'; import memoize from 'lodash/memoize'; import type moment from 'moment-timezone'; +import Tag from 'sentry/components/badge/tag'; import {Button, StyledButton} from 'sentry/components/button'; import Checkbox from 'sentry/components/checkbox'; import {CompactSelect} from 'sentry/components/compactSelect'; @@ -15,7 +16,6 @@ import Panel from 'sentry/components/panels/panel'; import PanelBody from 'sentry/components/panels/panelBody'; import PanelHeader from 'sentry/components/panels/panelHeader'; import PanelItem from 'sentry/components/panels/panelItem'; -import {Tag} from 'sentry/components/tag'; import {IconChevron, IconFlag, IconOpen} from 'sentry/icons'; import {t} from 'sentry/locale'; import {space} from 'sentry/styles/space'; diff --git a/static/app/views/settings/organizationDeveloperSettings/subscriptionBox.tsx b/static/app/views/settings/organizationDeveloperSettings/subscriptionBox.tsx index e81cb4354e8cfe..e950073b7ad622 100644 --- a/static/app/views/settings/organizationDeveloperSettings/subscriptionBox.tsx +++ b/static/app/views/settings/organizationDeveloperSettings/subscriptionBox.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; +import FeatureBadge from 'sentry/components/badge/featureBadge'; import Checkbox from 'sentry/components/checkbox'; -import FeatureBadge from 'sentry/components/featureBadge'; import {Tooltip} from 'sentry/components/tooltip'; import {t} from 'sentry/locale'; import {space} from 'sentry/styles/space'; diff --git a/static/app/views/settings/organizationGeneralSettings/organizationSettingsForm.tsx b/static/app/views/settings/organizationGeneralSettings/organizationSettingsForm.tsx index 272119a0332624..a65ff93535476f 100644 --- a/static/app/views/settings/organizationGeneralSettings/organizationSettingsForm.tsx +++ b/static/app/views/settings/organizationGeneralSettings/organizationSettingsForm.tsx @@ -7,11 +7,11 @@ import {updateOrganization} from 'sentry/actionCreators/organizations'; import Feature from 'sentry/components/acl/feature'; import FeatureDisabled from 'sentry/components/acl/featureDisabled'; import AvatarChooser from 'sentry/components/avatarChooser'; +import Tag from 'sentry/components/badge/tag'; import Form from 'sentry/components/forms/form'; import JsonForm from 'sentry/components/forms/jsonForm'; import HookOrDefault from 'sentry/components/hookOrDefault'; import {Hovercard} from 'sentry/components/hovercard'; -import {Tag} from 'sentry/components/tag'; import organizationSettingsFields from 'sentry/data/forms/organizationGeneralSettings'; import {IconCodecov, IconLock} from 'sentry/icons'; import {t} from 'sentry/locale'; diff --git a/static/app/views/settings/organizationIntegrations/abstractIntegrationDetailedView.tsx b/static/app/views/settings/organizationIntegrations/abstractIntegrationDetailedView.tsx index b47319705797f3..d4ae524cfd57e6 100644 --- a/static/app/views/settings/organizationIntegrations/abstractIntegrationDetailedView.tsx +++ b/static/app/views/settings/organizationIntegrations/abstractIntegrationDetailedView.tsx @@ -6,11 +6,11 @@ import startCase from 'lodash/startCase'; import Access from 'sentry/components/acl/access'; import type {AlertProps} from 'sentry/components/alert'; import {Alert} from 'sentry/components/alert'; +import Tag from 'sentry/components/badge/tag'; import DeprecatedAsyncComponent from 'sentry/components/deprecatedAsyncComponent'; import EmptyMessage from 'sentry/components/emptyMessage'; import ExternalLink from 'sentry/components/links/externalLink'; import Panel from 'sentry/components/panels/panel'; -import {Tag} from 'sentry/components/tag'; import {Tooltip} from 'sentry/components/tooltip'; import {IconClose, IconDocs, IconGeneric, IconGithub, IconProject} from 'sentry/icons'; import {t} from 'sentry/locale'; diff --git a/static/app/views/settings/organizationMembers/inviteRequestRow.tsx b/static/app/views/settings/organizationMembers/inviteRequestRow.tsx index 1d295901045713..9411aecd7f28ed 100644 --- a/static/app/views/settings/organizationMembers/inviteRequestRow.tsx +++ b/static/app/views/settings/organizationMembers/inviteRequestRow.tsx @@ -1,13 +1,13 @@ import {Fragment} from 'react'; import styled from '@emotion/styled'; +import Tag from 'sentry/components/badge/tag'; import {Button} from 'sentry/components/button'; import Confirm from 'sentry/components/confirm'; import type {InviteModalRenderFunc} from 'sentry/components/modals/memberInviteModalCustomization'; import {InviteModalHook} from 'sentry/components/modals/memberInviteModalCustomization'; import PanelItem from 'sentry/components/panels/panelItem'; import RoleSelectControl from 'sentry/components/roleSelectControl'; -import {Tag} from 'sentry/components/tag'; import TeamSelector from 'sentry/components/teamSelector'; import {Tooltip} from 'sentry/components/tooltip'; import {IconCheckmark, IconClose} from 'sentry/icons'; diff --git a/static/app/views/settings/project/projectOwnership/ownershipOwnerFilter.tsx b/static/app/views/settings/project/projectOwnership/ownershipOwnerFilter.tsx index a648253cab1b3e..e4167a573fad67 100644 --- a/static/app/views/settings/project/projectOwnership/ownershipOwnerFilter.tsx +++ b/static/app/views/settings/project/projectOwnership/ownershipOwnerFilter.tsx @@ -2,7 +2,7 @@ import {Fragment, useMemo} from 'react'; import styled from '@emotion/styled'; import ActorAvatar from 'sentry/components/avatar/actorAvatar'; -import Badge from 'sentry/components/badge'; +import Badge from 'sentry/components/badge/badge'; import {CompactSelect} from 'sentry/components/compactSelect'; import {IconUser} from 'sentry/icons'; import {t} from 'sentry/locale'; diff --git a/static/app/views/settings/project/projectOwnership/ownershipRulesTable.tsx b/static/app/views/settings/project/projectOwnership/ownershipRulesTable.tsx index 18e41c220b1c6b..448c43815fc1e9 100644 --- a/static/app/views/settings/project/projectOwnership/ownershipRulesTable.tsx +++ b/static/app/views/settings/project/projectOwnership/ownershipRulesTable.tsx @@ -6,11 +6,11 @@ import isEqual from 'lodash/isEqual'; import uniqBy from 'lodash/uniqBy'; import SuggestedAvatarStack from 'sentry/components/avatar/suggestedAvatarStack'; +import Tag from 'sentry/components/badge/tag'; import {Button} from 'sentry/components/button'; import ButtonBar from 'sentry/components/buttonBar'; import {PanelTable} from 'sentry/components/panels/panelTable'; import SearchBar from 'sentry/components/searchBar'; -import {Tag} from 'sentry/components/tag'; import {IconChevron} from 'sentry/icons'; import {t, tn} from 'sentry/locale'; import ConfigStore from 'sentry/stores/configStore'; diff --git a/static/app/views/settings/project/projectProcessingIssues.tsx b/static/app/views/settings/project/projectProcessingIssues.tsx index 6fdb64668909d7..cbe17b7d7e4859 100644 --- a/static/app/views/settings/project/projectProcessingIssues.tsx +++ b/static/app/views/settings/project/projectProcessingIssues.tsx @@ -7,6 +7,7 @@ import type {Client} from 'sentry/api'; import Access from 'sentry/components/acl/access'; import Alert from 'sentry/components/alert'; import AlertLink from 'sentry/components/alertLink'; +import Tag from 'sentry/components/badge/tag'; import {Button} from 'sentry/components/button'; import EmptyStateWarning from 'sentry/components/emptyStateWarning'; import Form from 'sentry/components/forms/form'; @@ -18,7 +19,6 @@ import Panel from 'sentry/components/panels/panel'; import PanelAlert from 'sentry/components/panels/panelAlert'; import {PanelTable} from 'sentry/components/panels/panelTable'; import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle'; -import {Tag} from 'sentry/components/tag'; import TimeSince from 'sentry/components/timeSince'; import Version from 'sentry/components/version'; import formGroups from 'sentry/data/forms/processingIssues'; diff --git a/static/app/views/settings/projectDebugFiles/debugFileRow.tsx b/static/app/views/settings/projectDebugFiles/debugFileRow.tsx index f25744ad927e54..42cdc0e7e28256 100644 --- a/static/app/views/settings/projectDebugFiles/debugFileRow.tsx +++ b/static/app/views/settings/projectDebugFiles/debugFileRow.tsx @@ -3,12 +3,12 @@ import styled from '@emotion/styled'; import Access from 'sentry/components/acl/access'; import {Role} from 'sentry/components/acl/role'; +import Tag from 'sentry/components/badge/tag'; import {Button} from 'sentry/components/button'; import ButtonBar from 'sentry/components/buttonBar'; import Confirm from 'sentry/components/confirm'; import FileSize from 'sentry/components/fileSize'; import Link from 'sentry/components/links/link'; -import {Tag} from 'sentry/components/tag'; import TimeSince from 'sentry/components/timeSince'; import {Tooltip} from 'sentry/components/tooltip'; import {IconClock, IconDelete, IconDownload} from 'sentry/icons'; diff --git a/static/app/views/settings/projectMetrics/projectMetrics.tsx b/static/app/views/settings/projectMetrics/projectMetrics.tsx index c096d14e432aac..de557846cccd76 100644 --- a/static/app/views/settings/projectMetrics/projectMetrics.tsx +++ b/static/app/views/settings/projectMetrics/projectMetrics.tsx @@ -5,6 +5,7 @@ import styled from '@emotion/styled'; import * as Sentry from '@sentry/react'; import debounce from 'lodash/debounce'; +import Tag from 'sentry/components/badge/tag'; import {Button} from 'sentry/components/button'; import ExternalLink from 'sentry/components/links/externalLink'; import Link from 'sentry/components/links/link'; @@ -12,7 +13,6 @@ import {PanelTable} from 'sentry/components/panels/panelTable'; import SearchBar from 'sentry/components/searchBar'; import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle'; import {TabList, TabPanels, Tabs} from 'sentry/components/tabs'; -import {Tag} from 'sentry/components/tag'; import {DEFAULT_DEBOUNCE_DURATION} from 'sentry/constants'; import {t, tct} from 'sentry/locale'; import {space} from 'sentry/styles/space'; diff --git a/static/app/views/settings/projectSourceMaps/projectSourceMapsArtifacts.tsx b/static/app/views/settings/projectSourceMaps/projectSourceMapsArtifacts.tsx index 9facf366d60ead..eba5bf7f4397a3 100644 --- a/static/app/views/settings/projectSourceMaps/projectSourceMapsArtifacts.tsx +++ b/static/app/views/settings/projectSourceMaps/projectSourceMapsArtifacts.tsx @@ -3,6 +3,7 @@ import type {RouteComponentProps} from 'react-router'; import styled from '@emotion/styled'; import {Role} from 'sentry/components/acl/role'; +import Tag from 'sentry/components/badge/tag'; import {Button} from 'sentry/components/button'; import FileSize from 'sentry/components/fileSize'; import Link from 'sentry/components/links/link'; @@ -10,7 +11,6 @@ import Pagination from 'sentry/components/pagination'; import Panel from 'sentry/components/panels/panel'; import {PanelTable} from 'sentry/components/panels/panelTable'; import SearchBar from 'sentry/components/searchBar'; -import {Tag} from 'sentry/components/tag'; import TimeSince from 'sentry/components/timeSince'; import {Tooltip} from 'sentry/components/tooltip'; import {IconClock, IconDownload} from 'sentry/icons'; diff --git a/static/app/views/sharedGroupDetails/sharedGroupHeader.tsx b/static/app/views/sharedGroupDetails/sharedGroupHeader.tsx index 6cfa5bcd84a44b..9f46ba7d4e1b14 100644 --- a/static/app/views/sharedGroupDetails/sharedGroupHeader.tsx +++ b/static/app/views/sharedGroupDetails/sharedGroupHeader.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; +import FeatureBadge from 'sentry/components/badge/featureBadge'; import EventMessage from 'sentry/components/events/eventMessage'; -import FeatureBadge from 'sentry/components/featureBadge'; import ProjectBadge from 'sentry/components/idBadge/projectBadge'; import ShortId from 'sentry/components/shortId'; import {t} from 'sentry/locale'; From 810e78a674248e6c0a48715662173a0ecb7eed68 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Fri, 12 Apr 2024 15:32:10 -0700 Subject: [PATCH 2/4] found another badge thing --- .../{ => badge}/deployBadge.spec.tsx | 10 +------ .../components/badge/deployBadge.stories.tsx | 19 ++++++++++++ static/app/components/badge/deployBadge.tsx | 30 +++++++++++++++++++ .../detail/overview/sidebar/deploys.tsx | 2 +- .../detail/overview/sidebar/releaseStats.tsx | 2 +- 5 files changed, 52 insertions(+), 11 deletions(-) rename static/app/components/{ => badge}/deployBadge.spec.tsx (74%) create mode 100644 static/app/components/badge/deployBadge.stories.tsx create mode 100644 static/app/components/badge/deployBadge.tsx diff --git a/static/app/components/deployBadge.spec.tsx b/static/app/components/badge/deployBadge.spec.tsx similarity index 74% rename from static/app/components/deployBadge.spec.tsx rename to static/app/components/badge/deployBadge.spec.tsx index cfaf65901ad236..913933a08837de 100644 --- a/static/app/components/deployBadge.spec.tsx +++ b/static/app/components/badge/deployBadge.spec.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(); - - 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( diff --git a/static/app/components/badge/deployBadge.stories.tsx b/static/app/components/badge/deployBadge.stories.tsx new file mode 100644 index 00000000000000..89f28b72e95ae5 --- /dev/null +++ b/static/app/components/badge/deployBadge.stories.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', () => ( + + )); +}); diff --git a/static/app/components/badge/deployBadge.tsx b/static/app/components/badge/deployBadge.tsx new file mode 100644 index 00000000000000..5cb08a6460d211 --- /dev/null +++ b/static/app/components/badge/deployBadge.tsx @@ -0,0 +1,30 @@ +import Link from 'sentry/components/links/link'; +import {Tag} from 'sentry/components/tag'; +import {t} from 'sentry/locale'; +import type {Deploy} from 'sentry/types'; + +type Props = { + deploy: Deploy; + orgSlug: string; + projectId: number; + version: string; +}; + +export default function DeployBadge({deploy, orgSlug, projectId, version}: Props) { + return ( + + + {deploy.environment} + + + ); +} diff --git a/static/app/views/releases/detail/overview/sidebar/deploys.tsx b/static/app/views/releases/detail/overview/sidebar/deploys.tsx index e0bbd6c66a40de..a87259a102384e 100644 --- a/static/app/views/releases/detail/overview/sidebar/deploys.tsx +++ b/static/app/views/releases/detail/overview/sidebar/deploys.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -import DeployBadge from 'sentry/components/deployBadge'; +import DeployBadge from 'sentry/components/badge/deployBadge'; import * as SidebarSection from 'sentry/components/sidebarSection'; import TextOverflow from 'sentry/components/textOverflow'; import TimeSince from 'sentry/components/timeSince'; diff --git a/static/app/views/releases/detail/overview/sidebar/releaseStats.tsx b/static/app/views/releases/detail/overview/sidebar/releaseStats.tsx index 0e05f02533764c..564105fc5e93ae 100644 --- a/static/app/views/releases/detail/overview/sidebar/releaseStats.tsx +++ b/static/app/views/releases/detail/overview/sidebar/releaseStats.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -import DeployBadge from 'sentry/components/deployBadge'; +import DeployBadge from 'sentry/components/badge/deployBadge'; import NotAvailable from 'sentry/components/notAvailable'; import * as SidebarSection from 'sentry/components/sidebarSection'; import TimeSince from 'sentry/components/timeSince'; From 3ae0e46fad146c62605d50d9c3e335706cbbe361 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Mon, 15 Apr 2024 11:02:11 -0700 Subject: [PATCH 3/4] remove old deployBadge --- static/app/components/deployBadge.tsx | 49 --------------------------- 1 file changed, 49 deletions(-) delete mode 100644 static/app/components/deployBadge.tsx diff --git a/static/app/components/deployBadge.tsx b/static/app/components/deployBadge.tsx deleted file mode 100644 index dc781e19db1ac4..00000000000000 --- a/static/app/components/deployBadge.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import Tag from 'sentry/components/badge/tag'; -import Link from 'sentry/components/links/link'; -import {t} from 'sentry/locale'; -import type {Deploy} from 'sentry/types'; -import {MutableSearch} from 'sentry/utils/tokenizeSearch'; - -type Props = { - deploy: Deploy; - className?: string; - orgSlug?: string; - projectId?: number; - version?: string; -}; - -function DeployBadge({deploy, orgSlug, projectId, version, className}: Props) { - const shouldLinkToIssues = !!orgSlug && !!version; - - const badge = ( - - {deploy.environment} - - ); - - if (!shouldLinkToIssues) { - return badge; - } - - return ( - - {badge} - - ); -} - -export default DeployBadge; From 364e629f4a56e1752fea0b94d45a1576c102dffa Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Mon, 15 Apr 2024 11:16:13 -0700 Subject: [PATCH 4/4] maintain MutableSearch for deploy link because query field has its own escaping and delimiters --- static/app/components/badge/deployBadge.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/static/app/components/badge/deployBadge.tsx b/static/app/components/badge/deployBadge.tsx index 5cb08a6460d211..61da1356f6bc23 100644 --- a/static/app/components/badge/deployBadge.tsx +++ b/static/app/components/badge/deployBadge.tsx @@ -2,6 +2,7 @@ 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; @@ -18,7 +19,7 @@ export default function DeployBadge({deploy, orgSlug, projectId, version}: Props query: { project: projectId, environment: deploy.environment, - query: {release: version}, + query: new MutableSearch([`release:${version!}`]).formatString(), }, }} >