Badge - Sentry — ContextQMD

import {useState} from 'react';

import {AlertBadge, DeployBadge, FeatureBadge, Tag} from '@sentry/scraps/badge';

import {IconCheckmark, IconCircle, IconRefresh, IconWarning} from 'sentry/icons'; import * as Storybook from 'sentry/stories'; import {IncidentStatus} from 'sentry/views/alerts/types';

export const documentation = import('!!type-loader!@sentry/scraps/badge');

Badges are a contextual highlighted text components that support specific use cases like FeatureBadge, AlertBadge, and DeployBadge.

FeatureBadge

The FeatureBadge component should be used to annotate new features as they move through the various stages of rollout. Each badge includes a tooltip with a standard message describing the rollout stage.

<Storybook.Demo> <FeatureBadge type="alpha" /> <FeatureBadge type="beta" /> <FeatureBadge type="new" /> <FeatureBadge type="experimental" /> </Storybook.Demo>

jsx


<FeatureBadge type="alpha" />
<FeatureBadge type="beta" />
<FeatureBadge type="new" />
<FeatureBadge type="experimental" />

Generally, the default tooltip should suffice, but if your special feature requires additional context, you can customize the tooltipProps.

<Storybook.Demo> <FeatureBadge type="new" tooltipProps={{title: 'This very special new feature requires additional context!'}} /> </Storybook.Demo>

jsx

<FeatureBadge
  type="new"
  tooltipProps={{title: 'This very special new feature requires additional context!'}}
/>

AlertBadge

The AlertBadge component displays an indicator for all Alert types that Sentry supports.

For metric alerts, set the status prop to the IncidentStatus enum (from sentry/views/alerts/types).
For issue alerts, set the isIssue prop. isIssue overrides the status.
For alerts that are disabled/paused, set the isDisabled prop. isDisabled overrides the status.

<Storybook.Demo> <AlertBadge status={IncidentStatus.OPENED} /> <AlertBadge status={IncidentStatus.CLOSED} /> <AlertBadge status={IncidentStatus.WARNING} /> <AlertBadge status={IncidentStatus.CRITICAL} /> <AlertBadge isIssue /> <AlertBadge isDisabled /> </Storybook.Demo>

jsx


<AlertBadge status={IncidentStatus.OPENED} />
<AlertBadge status={IncidentStatus.CLOSED} />
<AlertBadge status={IncidentStatus.WARNING} />
<AlertBadge status={IncidentStatus.CRITICAL} />
<AlertBadge isIssue />
<AlertBadge isDisabled />

Labels

The withText prop displays a label for each status.

<Storybook.Demo> <AlertBadge withText status={IncidentStatus.OPENED} /> <AlertBadge withText status={IncidentStatus.CLOSED} /> <AlertBadge withText status={IncidentStatus.WARNING} /> <AlertBadge withText status={IncidentStatus.CRITICAL} /> <AlertBadge withText isIssue /> <AlertBadge withText isDisabled /> </Storybook.Demo>

jsx

<AlertBadge withText status={IncidentStatus.OPENED} />
<AlertBadge withText status={IncidentStatus.CLOSED} />
<AlertBadge withText status={IncidentStatus.WARNING} />
<AlertBadge withText status={IncidentStatus.CRITICAL} />
<AlertBadge withText isIssue />
<AlertBadge withText isDisabled />

DeployBadge

export const 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', };

The DeployBadge component can be used to link to the Issues feed, filtered to issues related to a specific release.

The text of each badge is derived from the environment passed to the deploy property, which must adhere to import type {Deploy} from 'sentry/types/release'.

<Storybook.Demo> <DeployBadge deploy={deploy} orgSlug="sentry" version="1.2.3" projectId={1} /> </Storybook.Demo>

jsx


<DeployBadge deploy={deploy} orgSlug="sentry" version="1.2.3" projectId={1} />

Tag

The Tag component is a generic primitive. Depending on the type prop, it can be used as an error/warning/success indicator and for various other use cases.

<Storybook.Demo> <Tag variant="muted">Default</Tag> <Tag variant="success">Success</Tag> <Tag variant="danger">Error</Tag> <Tag variant="warning">Warning</Tag> <Tag variant="info">Info</Tag> <Tag variant="promotion">Promotion</Tag> </Storybook.Demo>

jsx

<Tag variant="muted">Default</Tag>
<Tag variant="success">Success</Tag>
<Tag variant="danger">Error</Tag>
<Tag variant="warning">Warning</Tag>
<Tag variant="info">Info</Tag>
<Tag variant="promotion">Promotion</Tag>

Icons

The icon prop accepts an <Icon /> component to render a custom leading icon.

<Storybook.Demo> <Tag icon={<IconCheckmark />} variant="success"> Success </Tag> <Tag icon={<IconWarning />} variant="warning"> Warning </Tag> <Tag icon={<IconCircle />} variant="promotion"> Promotion </Tag> </Storybook.Demo>

jsx

<Tag icon={<IconCheckmark />} variant="success">
  Success
</Tag>
<Tag icon={<IconWarning />} variant="warning">
  Warning
</Tag>
<Tag icon={<IconCircle />} variant="promotion">
  Promotion
</Tag>

Dismiss

Pass a custom onDismiss callback to create a dismissable tag with a trailing close icon.

export function DismissableTag() { const [dismissed, setDismissed] = useState(false);

if (dismissed) { return <Tag icon={<IconRefresh />} variant="muted" onClick={() => setDismissed(false)}>Reset Tag</Tag> }

return <Tag variant="info" onDismiss={() => setDismissed(true)}> Dismiss Tag

</Tag> }

<Storybook.Demo> <DismissableTag /> </Storybook.Demo>

jsx

<Tag type="info" onDismiss={() => setDismissed(true)}>
  Dismiss Tag
</Tag>