Skip to content

fix(dashboards): Update dashboard selects to use new TypeBadge #106376

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nsdeschenes merged 7 commits into from
Jan 16, 2026
Merged

fix(dashboards): Update dashboard selects to use new TypeBadge #106376

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e26f168
:necktie: Update type badge to support more use cases
nsdeschenes Jan 15, 2026
c2619e1
:necktie: Update group by selector to use updated type badge
nsdeschenes Jan 15, 2026
d264499
:necktie: Update visualize dropdown with new type badge
nsdeschenes Jan 15, 2026
0aa6166
:necktie: Update query field to use new type badge
nsdeschenes Jan 15, 2026
adc25ac
:bug: Fix up cursor issues and correct mappings
nsdeschenes Jan 15, 2026
f80c63d
:bug: Move deprecated to the top
nsdeschenes Jan 15, 2026
6b14061
:bug: Only check datatype
nsdeschenes Jan 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 3 additions & 7 deletions static/app/views/dashboards/widgetBuilder/buildSteps/groupByStep/groupBySelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ import {closestCenter, DndContext, DragOverlay} from '@dnd-kit/core';
import {arrayMove, SortableContext, verticalListSortingStrategy} from '@dnd-kit/sortable';
import styled from '@emotion/styled';

import {Tag} from '@sentry/scraps/badge';

import {OnDemandWarningIcon} from 'sentry/components/alerts/onDemandMetricAlert';
import {Button} from 'sentry/components/core/button';
import FieldGroup from 'sentry/components/forms/fieldGroup';
Expand All @@ -15,6 +13,7 @@ import {trackAnalytics} from 'sentry/utils/analytics';
import {WidgetBuilderVersion} from 'sentry/utils/analytics/dashboardsAnalyticsEvents';
import type {QueryFieldValue} from 'sentry/utils/discover/fields';
import {generateFieldAsString} from 'sentry/utils/discover/fields';
import type {FieldValueType} from 'sentry/utils/fields';
import {hasOnDemandMetricWidgetFeature} from 'sentry/utils/onDemandMetrics/features';
import type {UseApiQueryResult} from 'sentry/utils/queryClient';
import type RequestError from 'sentry/utils/requestError/requestError';
Expand All @@ -28,6 +27,7 @@ import useDashboardWidgetSource from 'sentry/views/dashboards/widgetBuilder/hook
import useIsEditingWidget from 'sentry/views/dashboards/widgetBuilder/hooks/useIsEditingWidget';
import {FieldValueKind, type FieldValue} from 'sentry/views/discover/table/types';
import type {generateFieldOptions} from 'sentry/views/discover/utils';
import {TypeBadge} from 'sentry/views/explore/components/typeBadge';

import {QueryField} from './queryField';
import {SortableQueryField} from './sortableQueryField';
Expand Down Expand Up @@ -159,11 +159,7 @@ export function GroupBySelector({
if (!('dataType' in meta)) {
return null;
}
return (
<Tag variant={meta.dataType === 'number' ? 'info' : 'warning'}>
{meta.dataType}
</Tag>
);
return <TypeBadge valueType={meta.dataType as FieldValueType} />;
}
: undefined;

Expand Down
64 changes: 14 additions & 50 deletions static/app/views/dashboards/widgetBuilder/components/visualize/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import cloneDeep from 'lodash/cloneDeep';
import {Flex, Stack, type FlexProps} from '@sentry/scraps/layout';

import {openLinkToDashboardModal} from 'sentry/actionCreators/modal';
import {Tag, type TagProps} from 'sentry/components/core/badge/tag';
import {Button} from 'sentry/components/core/button';
import {CompactSelect} from 'sentry/components/core/compactSelect';
import {TriggerLabel} from 'sentry/components/core/compactSelect/control';
Expand All @@ -30,7 +29,12 @@ import {
type QueryFieldValue,
type ValidateColumnTypes,
} from 'sentry/utils/discover/fields';
import {classifyTagKey, FieldKind, prettifyTagKey} from 'sentry/utils/fields';
import {
classifyTagKey,
FieldKind,
FieldValueType,
prettifyTagKey,
} from 'sentry/utils/fields';
import {decodeScalar} from 'sentry/utils/queryString';
import useLocationQuery from 'sentry/utils/url/useLocationQuery';
import useCustomMeasurements from 'sentry/utils/useCustomMeasurements';
Expand Down Expand Up @@ -1016,54 +1020,14 @@ function Visualize({error, setError}: VisualizeProps) {
export default Visualize;

function renderTag(kind: FieldValueKind, label: string, dataType?: string) {
if (dataType) {
switch (dataType) {
case 'boolean':
case 'date':
case 'string':
return <Tag variant="info">{t('string')}</Tag>;
case 'duration':
case 'integer':
case 'percentage':
case 'number':
return <Tag variant="success">{t('number')}</Tag>;
default:
return <Tag variant="muted">{dataType}</Tag>;
}
}
let text: string | undefined, tagVariant: TagProps['variant'] | undefined;

switch (kind) {
case FieldValueKind.FUNCTION:
text = 'f(x)';
tagVariant = 'warning';
break;
case FieldValueKind.CUSTOM_MEASUREMENT:
case FieldValueKind.MEASUREMENT:
text = 'field';
tagVariant = 'info';
break;
case FieldValueKind.BREAKDOWN:
text = 'field';
tagVariant = 'info';
break;
case FieldValueKind.TAG:
text = kind;
tagVariant = 'warning';
break;
case FieldValueKind.NUMERIC_METRICS:
text = 'f(x)';
tagVariant = 'warning';
break;
case FieldValueKind.FIELD:
text = DEPRECATED_FIELDS.includes(label) ? 'deprecated' : 'field';
tagVariant = 'info';
break;
default:
text = kind;
}

return <Tag variant={tagVariant ?? 'muted'}>{text}</Tag>;
return (
<TypeBadge
label={label}
valueKind={kind}
valueType={dataType as FieldValueType}
deprecatedFields={DEPRECATED_FIELDS}
/>
);
}

export const AggregateCompactSelect = styled(CompactSelect)<{
Expand Down
48 changes: 13 additions & 35 deletions static/app/views/discover/table/queryField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import {withTheme, type Theme} from '@emotion/react';
import styled from '@emotion/styled';
import cloneDeep from 'lodash/cloneDeep';

import {Tag, type TagProps} from 'sentry/components/core/badge/tag';
import type {InputProps} from 'sentry/components/core/input';
import {Input} from 'sentry/components/core/input';
import type {ControlProps} from 'sentry/components/core/select';
Expand All @@ -25,7 +24,9 @@ import type {
ValidateColumnTypes,
} from 'sentry/utils/discover/fields';
import {AGGREGATIONS, DEPRECATED_FIELDS} from 'sentry/utils/discover/fields';
import type {FieldValueType} from 'sentry/utils/fields';
import {SESSIONS_OPERATIONS} from 'sentry/views/dashboards/widgetBuilder/releaseWidget/fields';
import {TypeBadge} from 'sentry/views/explore/components/typeBadge';

import ArithmeticInput from './arithmeticInput';
import type {FieldValue, FieldValueColumns} from './types';
Expand Down Expand Up @@ -594,41 +595,18 @@ class _QueryField extends Component<Props> {
if (renderTagOverride) {
return renderTagOverride(kind, label, meta);
}
let text: string;
let tagVariant:
| Extract<TagProps['variant'], 'success' | 'info' | 'warning'>
| undefined;

switch (kind) {
Comment thread
nsdeschenes marked this conversation as resolved.
case FieldValueKind.FUNCTION:
text = 'f(x)';
tagVariant = 'success';
break;
case FieldValueKind.CUSTOM_MEASUREMENT:
case FieldValueKind.MEASUREMENT:
text = 'field';
tagVariant = 'info';
break;
case FieldValueKind.BREAKDOWN:
text = 'field';
tagVariant = 'info';
break;
case FieldValueKind.TAG:
text = kind;
tagVariant = 'warning';
break;
case FieldValueKind.NUMERIC_METRICS:
text = 'f(x)';
tagVariant = 'success';
break;
case FieldValueKind.FIELD:
text = DEPRECATED_FIELDS.includes(label) ? 'deprecated' : 'field';
tagVariant = 'info';
break;
default:
text = kind;
}
return <Tag variant={tagVariant ?? 'muted'}>{text}</Tag>;
const valueType =
meta && 'dataType' in meta ? (meta.dataType as FieldValueType) : undefined;

return (
<TypeBadge
label={label}
valueKind={kind}
valueType={valueType}
deprecatedFields={DEPRECATED_FIELDS}
/>
);
}

render() {
Expand Down
48 changes: 45 additions & 3 deletions static/app/views/explore/components/typeBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,37 @@ import {t} from 'sentry/locale';
import {defined} from 'sentry/utils';
import type {ParsedFunction} from 'sentry/utils/discover/fields';
import {FieldKind, FieldValueType} from 'sentry/utils/fields';
import {FieldValueKind} from 'sentry/views/discover/table/types';

interface TypeBadgeProps {
deprecatedFields?: string[];
func?: ParsedFunction;
isLogicFilter?: boolean;
kind?: FieldKind;
label?: string;
valueKind?: FieldValueKind;
valueType?: FieldValueType;
}

export function TypeBadge({func, kind, valueType, isLogicFilter}: TypeBadgeProps) {
if (defined(func) || kind === FieldKind.FUNCTION) {
export function TypeBadge({
func,
kind,
valueType,
isLogicFilter,
valueKind,
deprecatedFields,
label,
}: TypeBadgeProps) {
if (label && deprecatedFields?.includes(label)) {
return <Text variant="danger">{t('deprecated')}</Text>;
}

if (
defined(func) ||
kind === FieldKind.FUNCTION ||
valueKind === FieldValueKind.FUNCTION ||
valueKind === FieldValueKind.NUMERIC_METRICS
) {
Comment thread
nsdeschenes marked this conversation as resolved.
return <Text variant="success">{t('f(x)')}</Text>;
}

Expand Down Expand Up @@ -57,14 +78,35 @@ export function TypeBadge({func, kind, valueType, isLogicFilter}: TypeBadgeProps
return <Text variant="success">{t('currency')}</Text>;
}

if (valueType === FieldValueType.NUMBER || kind === FieldKind.MEASUREMENT) {
if (
kind === FieldKind.MEASUREMENT ||
valueType === FieldValueType.NUMBER ||
valueKind === FieldValueKind.METRICS
) {
return <Text variant="warning">{t('number')}</Text>;
}

if (valueType === FieldValueType.STRING || kind === FieldKind.TAG) {
return <Text variant="accent">{t('string')}</Text>;
}

if (
valueKind === FieldValueKind.FIELD ||
valueKind === FieldValueKind.BREAKDOWN ||
valueKind === FieldValueKind.MEASUREMENT ||
valueKind === FieldValueKind.CUSTOM_MEASUREMENT
) {
return <Text variant="accent">{t('field')}</Text>;
}
Comment thread
nsdeschenes marked this conversation as resolved.

if (valueKind === FieldValueKind.TAG) {
return <Text variant="warning">{t('tag')}</Text>;
}

if (valueKind === FieldValueKind.EQUATION) {
return <Text variant="muted">{t('equation')}</Text>;
}

Comment thread
nsdeschenes marked this conversation as resolved.
if (isLogicFilter) {
return <Text variant="promotion">{t('logic')}</Text>;
}
Expand Down
Loading