Skip to content

[cleanup]: antd deprecated properties #3314

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

Draft
ashrafchowdury wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

[cleanup]: antd deprecated properties #3314

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f0b9356
refactor: update Ant Design `Tag` components from `bordered={false}` …
ashrafchowdury Dec 26, 2025
1d130ed
lint fix
ashrafchowdury Dec 26, 2025
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
6 changes: 3 additions & 3 deletions web/oss/src/components/DeploymentsDashboard/components/Drawer/assets/DrawerDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,22 +81,22 @@ const DrawerDetails = ({revisionId}: DrawerDetailsProps) => {

<div className="flex flex-col">
<Typography.Text className={classes.subTitle}>Date modified</Typography.Text>
<Tag bordered={false} className="w-fit bg-[#0517290f]">
<Tag variant="filled" className="w-fit bg-[#0517290f]">
{record?.created_at}
</Tag>
</div>

<div className="flex flex-col">
<Typography.Text className={classes.subTitle}>Modified by</Typography.Text>
<Tag bordered={false} className="w-fit bg-[#0517290f]">
<Tag variant="filled" className="w-fit bg-[#0517290f]">
{record?.modified_by}
</Tag>
</div>

{record?.commit_message && (
<div className="flex flex-col">
<Typography.Text className={classes.subTitle}>Notes</Typography.Text>
<Tag bordered={false} className="w-fit bg-[#0517290f]">
<Tag variant="filled" className="w-fit bg-[#0517290f]">
{record?.commit_message}
</Tag>
</div>
Expand Down
2 changes: 1 addition & 1 deletion web/oss/src/components/EvalRunDetails/components/FocusDrawerHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ const FocusDrawerHeader = ({runId, scenarioId, onScenarioChange}: FocusDrawerHea
/>
</div>
{selectedOption?.description ? (
<Tag bordered={false} className="bg-[#0517290F] font-normal">
<Tag variant="filled" className="bg-[#0517290F] font-normal">
<Typography.Text copyable={{text: selectedOption.description}}>
{selectedOption.description}
</Typography.Text>
Expand Down
2 changes: 1 addition & 1 deletion ...ponents/EvalRunDetails/components/views/ConfigurationView/components/EvaluatorSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ const EvaluatorCard = ({
/>
) : null}
{evaluator.version ? (
<Tag className="!m-0 !bg-[#0517290F]" bordered={false}>
<Tag className="!m-0 !bg-[#0517290F]" variant="filled">
V{evaluator.version}
</Tag>
) : null}
Expand Down
2 changes: 1 addition & 1 deletion .../components/EvalRunDetails/components/views/SingleScenarioViewerPOC/ScenarioNavigator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ const ScenarioNavigator = ({
/>
</div>
{showScenarioIdTag && selectedOption?.description ? (
<Tag bordered={false} className="bg-[#0517290F] font-normal">
<Tag variant="filled" className="bg-[#0517290F] font-normal">
<Typography.Text copyable={{text: selectedOption.description}}>
{selectedOption.description}
</Typography.Text>
Expand Down
2 changes: 1 addition & 1 deletion web/oss/src/components/Evaluators/assets/cells/EvaluatorTagsCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const EvaluatorTagsCell = memo(({tags}: {tags: string[]}) => {
return (
<div className="flex flex-nowrap items-center gap-2">
{tags.map((tag) => (
<Tag key={tag} bordered={false} className="bg-[#0517290F]">
<Tag key={tag} variant="filled" className="bg-[#0517290F]">
{tag}
</Tag>
))}
Expand Down
2 changes: 1 addition & 1 deletion ...s/Evaluators/components/SelectEvaluatorModal/assets/SelectEvaluatorModalContent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ const SelectEvaluatorModalContent = () => {
)}
>
<div className="flex items-center gap-2">
<Tag bordered={false} className={clsx("w-fit", tagClassnames)}>
<Tag variant="filled" className={clsx("w-fit", tagClassnames)}>
{item.name}
</Tag>
<ArrowRight
Expand Down
3 changes: 2 additions & 1 deletion web/oss/src/components/Filters/Filters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
PlusIcon,
TrashIcon,
} from "@phosphor-icons/react"
import type {TreeSelectProps} from "antd"
import {
Button,
Divider,
Expand Down Expand Up @@ -1313,7 +1314,7 @@ const Filters: React.FC<Props> = ({
className="w-[260px]"
treeData={treeData}
treeNodeLabelProp="pathLabel"
dropdownMatchSelectWidth={false}
popupMatchSelectWidth={false}
styles={{
popup: {
root: {
Expand Down
2 changes: 1 addition & 1 deletion ...ents/ModelRegistry/Modals/ConfigureProviderModal/assets/ConfigureProviderModalContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const ConfigureProviderModalContent = ({
<div className="flex flex-col gap-4">
<div className="flex flex-col items-start gap-1">
<Text>Provider</Text>
<Tag bordered={false} color="default" className="bg-[#0517290F] px-2 py-[1px]">
<Tag variant="filled" color="default" className="bg-[#0517290F] px-2 py-[1px]">
{selectedProvider?.title}
</Tag>
</div>
Expand Down
4 changes: 2 additions & 2 deletions ...onents/Playground/Components/PlaygroundGenerations/assets/GenerationResultUtils/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,15 @@ const GenerationResultUtils: React.FC<GenerationResultUtilsProps> = ({
{showStatus && <StatusRenderer status={status} />}

{durations ? (
<Tag color="default" bordered={false} className="flex items-center gap-1">
<Tag color="default" variant="filled" className="flex items-center gap-1">
<Timer size={14} /> {formattedLatency}
</Tag>
) : null}

{tokens || costs ? (
<ResultTag
color="default"
bordered={false}
variant="filled"
value1={
<div className="flex items-center gap-1 text-nowrap">
<PlusCircle size={14} /> {formattedTokens} / {formattedCosts}
Expand Down
8 changes: 4 additions & 4 deletions ...ptComparisonView/PromptComparisonVariantNavigation/assets/VariantNavigationCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ import {runStatusByRowRevisionAtom} from "@/oss/state/generation/entities"

import Version from "../../../../../assets/Version"
import {
variantByRevisionIdAtomFamily,
generationResultAtomFamily,
appChatModeAtom,
generationResultAtomFamily,
variantByRevisionIdAtomFamily,
} from "../../../../../state/atoms"

import {useStyles} from "./styles"
Expand Down Expand Up @@ -172,13 +172,13 @@ const VariantNavigationCard = ({
</div>
<div className="flex items-center justify-between">
<Text>Average Latency</Text>
<Tag color="default" bordered={false} className="flex items-center gap-1">
<Tag color="default" variant="filled" className="flex items-center gap-1">
<Timer size={14} /> {avgLatency}
</Tag>
</div>
<div className="flex items-center justify-between">
<Text>Average Cost</Text>
<Tag color="default" bordered={false} className="flex items-center gap-1">
<Tag color="default" variant="filled" className="flex items-center gap-1">
<PlusCircle size={14} /> {avgTokens} / {avgCost}
</Tag>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ...SharedDrawers/TraceDrawer/components/TraceContent/components/LinkedSpansTabItem/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ const LinkedSpansTabItem = ({isActive: _isActive}: LinkedSpansTabItemProps) => {
return (
<EnhancedTooltip copyText={spanId} title="Copy span id">
<Tag
bordered={false}
variant="filled"
className="font-mono bg-[#0517290F]"
onClick={() => navigateToLink(record)}
>
Expand Down
2 changes: 1 addition & 1 deletion ...ts/SharedDrawers/TraceDrawer/components/TraceContent/components/TraceTypeHeader/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const TraceTypeHeader = ({
title="Copy span id"
tooltipProps={{placement: "bottom", arrow: true}}
>
<Tag className="font-mono truncate bg-[#0517290F]" bordered={false}>
<Tag className="font-mono truncate bg-[#0517290F]" variant="filled">
# {activeTrace?.span_id || "-"}
</Tag>
</TooltipWithCopyAction>
Expand Down
2 changes: 1 addition & 1 deletion web/oss/src/components/SharedDrawers/TraceDrawer/components/TraceHeader/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -478,7 +478,7 @@ const TraceHeader = ({
copyText={getTraceIdFromNode(displayTrace) || ""}
title="Copy trace id"
>
<Tag className="font-mono bg-[#0517290F]" bordered={false}>
<Tag className="font-mono bg-[#0517290F]" variant="filled">
# {getTraceIdFromNode(displayTrace) || "-"}
</Tag>
</TooltipWithCopyAction>
Expand Down
2 changes: 1 addition & 1 deletion ...components/SharedDrawers/TraceDrawer/components/TraceSidePanel/TraceAnnotations/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ const TraceAnnotations = ({annotations = []}: TraceAnnotationsProps) => {
<Typography.Text>Total mean:</Typography.Text>
<CustomAntdTag
value={`μ ${metric.average}`}
bordered={false}
variant="filled"
/>
</Space>
<Button
Expand Down
12 changes: 6 additions & 6 deletions ...src/components/SharedDrawers/TraceDrawer/components/TraceSidePanel/TraceDetails/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const TraceDetails = ({activeTrace}: {activeTrace: TraceSpanNode}) => {
color: color,
}}
className="font-mono"
bordered={false}
variant="filled"
value1={
<>
{icon} {activeTrace?.span_type}
Expand All @@ -55,14 +55,14 @@ const TraceDetails = ({activeTrace}: {activeTrace: TraceSpanNode}) => {
<StatusRenderer
status={activeTrace?.status_code}
message={activeTrace?.status_message}
tagProps={{bordered: false}}
tagProps={{variant: "filled"}}
/>
</Space>

<Space orientation="vertical" size={4}>
<Typography.Text className={classes.title}>Latency</Typography.Text>
<ResultTag
bordered={false}
variant="filled"
className="bg-[#0517290F]"
value1={
<div className={classes.resultTag}>
Expand All @@ -77,11 +77,11 @@ const TraceDetails = ({activeTrace}: {activeTrace: TraceSpanNode}) => {

<ResultTag
value1={<div className={classes.resultTag}>Start - {traceStartTime}</div>}
bordered={false}
variant="filled"
className="bg-[#0517290F]"
/>
<ResultTag
bordered={false}
variant="filled"
className="bg-[#0517290F]"
value1={
<div className={classes.resultTag}>
Expand All @@ -94,7 +94,7 @@ const TraceDetails = ({activeTrace}: {activeTrace: TraceSpanNode}) => {
<Space orientation="vertical" size={4}>
<Typography.Text className={classes.title}>Tokens & Cost</Typography.Text>
<ResultTag
bordered={false}
variant="filled"
className="bg-[#0517290F]"
value1={
<div className={classes.resultTag}>
Expand Down
2 changes: 1 addition & 1 deletion ...components/SharedDrawers/TraceDrawer/components/TraceSidePanel/TraceLinkedSpans/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ const TraceLinkedSpans = () => {
return (
<Tag
key={`${link.trace_id}-${link.span_id}-${link.key || ""}`}
bordered={false}
variant="filled"
className="cursor-pointer self-start bg-[#0517290F] flex gap-1 items-center"
onClick={() => handleNavigate(link)}
>
Expand Down
4 changes: 2 additions & 2 deletions web/oss/src/components/SharedGenerationResultUtils/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,15 +269,15 @@ const SharedGenerationResultUtils = ({
{showStatus && status ? <StatusRenderer status={status} /> : null}

{durationMs !== undefined ? (
<Tag color="default" bordered={false} className="flex items-center gap-1">
<Tag color="default" variant="filled" className="flex items-center gap-1">
<Timer size={14} /> {formattedLatency}
</Tag>
) : null}

{totalTokens !== undefined || totalCost !== undefined ? (
<ResultTag
color="default"
bordered={false}
variant="filled"
value1={
<div className="flex items-center gap-1 text-nowrap">
<PlusCircle size={14} /> {formattedTokens} / {formattedCosts}
Expand Down
8 changes: 4 additions & 4 deletions web/oss/src/components/VariantDetailsWithStatus/components/VariantDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
// no react hooks needed here beyond Jotai

import {PencilSimpleLine} from "@phosphor-icons/react"
import {Dropdown, Space, Tag, Typography} from "antd"
import type {MenuProps} from "antd"
import {Dropdown, Space, Tag, Typography} from "antd"
import {useAtomValue, useSetAtom} from "jotai"

import {parametersOverrideAtomFamily} from "@/oss/components/Playground/state/atoms"
Expand Down Expand Up @@ -84,7 +84,7 @@ const VariantDetails = ({
{variantName ? <Typography>{variantName}</Typography> : null}
{revision !== undefined &&
(showRevisionAsTag ? (
<Tag className={`bg-[rgba(5,23,41,0.06)]`} bordered={false}>
<Tag className={`bg-[rgba(5,23,41,0.06)]`} variant="filled">
v{revision}
</Tag>
) : (
Expand All @@ -99,7 +99,7 @@ const VariantDetails = ({
>
<Tag
color="#586673"
bordered={false}
variant="filled"
className="flex items-center gap-1 font-normal cursor-pointer"
>
<PencilSimpleLine size={14} /> Draft
Expand All @@ -108,7 +108,7 @@ const VariantDetails = ({
) : (
isAppLatest &&
showLatestTag && (
<Tag className={`bg-[#E6F4FF] text-[#1677FF]`} bordered={false}>
<Tag className={`bg-[#E6F4FF] text-[#1677FF]`} variant="filled">
Last modified
</Tag>
)
Expand Down
4 changes: 2 additions & 2 deletions web/oss/src/components/VariantNameCell/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import VariantDetailsWithStatus from "@/oss/components/VariantDetailsWithStatus"
import type {Variant} from "@/oss/lib/Types"
import {revisionDeploymentAtomFamily} from "@/oss/state/variant/atoms/fetcher"
import {
variantDisplayNameByIdAtomFamily,
latestAppRevisionIdAtom,
variantDisplayNameByIdAtomFamily,
} from "@/oss/state/variant/selectors/variant"

type Rev = {
Expand Down Expand Up @@ -50,7 +50,7 @@ const VariantNameCell = memo(

if (!rev) {
return (
<Tag color="default" bordered={false} className="-ml-1">
<Tag color="default" variant="filled" className="-ml-1">
No deployment
</Tag>
)
Expand Down
2 changes: 1 addition & 1 deletion ...omponents/VariantsComponents/Drawers/VariantDrawer/assets/DeploymentDrawerTitle/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const DeploymentDrawerTitle = ({
<div className="flex items-center gap-2">
{/*TODO: update this with select variant deployment */}
<EnvironmentTagLabel environment={envName || ""} />
<Tag bordered={false} className="bg-[#0517290F]">
<Tag variant="filled" className="bg-[#0517290F]">
v{selectedVariant?.revision}
</Tag>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ...components/VariantsComponents/Drawers/VariantDrawer/assets/VariantDrawerContent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -327,7 +327,7 @@ const VariantDrawerContent = ({

<div className="flex flex-col gap-1">
<Text className="font-medium">Date modified</Text>
<Tag bordered={false} className="bg-[#0517290F]">
<Tag variant="filled" className="bg-[#0517290F]">
{(() => {
const ts =
(selectedVariant as any)?.updatedAtTimestamp ??
Expand Down
2 changes: 1 addition & 1 deletion web/oss/src/components/pages/app-management/components/AppTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const AppTable = ({filteredApps, openDeleteAppModal, openEditAppModal}: AppTable
dataIndex: "app_type",
key: "app_type",
render: (_, record) => {
return <Tag bordered={false}>{record.app_type}</Tag>
return <Tag variant="filled">{record.app_type}</Tag>
},
},
{
Expand Down
2 changes: 1 addition & 1 deletion ...evaluations/NewEvaluation/Components/SelectEvaluatorSection/EvaluatorTemplateDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ const EvaluatorTemplateDropdown = ({
>
<div className="flex items-center gap-2">
<Tag
bordered={false}
variant="filled"
className={clsx("w-fit text-xs", tagClassnames)}
>
{item.name}
Expand Down
2 changes: 1 addition & 1 deletion ...es/evaluations/NewEvaluation/Components/SelectEvaluatorSection/SelectEvaluatorSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const EvaluatorMetrics = memo(({evaluator}: {evaluator: EvaluatorDto<"response">
<div className="flex flex-wrap gap-2">
{Object.entries(metrics).map(([key, value]) => {
return (
<Tag bordered={false} key={key}>
<Tag variant="filled" key={key}>
{key}
</Tag>
)
Expand Down
6 changes: 3 additions & 3 deletions .../src/components/pages/evaluations/onlineEvaluation/components/EvaluatorDetailsPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,17 +118,17 @@ const EvaluatorDetailsPreview = ({
<ReadOnlyBox>
<div className="flex flex-wrap items-center gap-2">
<span className="font-semibold text-[#475467]">{metric.name}</span>
<Tag className="!m-0" bordered={false}>
<Tag className="!m-0" variant="filled">
{renderOutputType(metric)}
</Tag>
{metric.required ? (
<Tag className="!m-0" bordered={false} color="success">
<Tag className="!m-0" variant="filled" color="success">
Required
</Tag>
) : (
<Tag
className="!m-0"
bordered={false}
variant="filled"
style={{backgroundColor: "#F2F4F7", color: "#475467"}}
>
Optional
Expand Down
2 changes: 1 addition & 1 deletion web/oss/src/components/pages/evaluations/onlineEvaluation/components/EvaluatorTypeTag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const EvaluatorTypeTag = ({label, color, fallback}: EvaluatorTypeTagProps) => {
: {fontSize: 12}

return (
<Tag className="!m-0" bordered={false} color={color} style={style}>
<Tag className="!m-0" variant="filled" color={color} style={style}>
{label}
</Tag>
)
Expand Down
2 changes: 1 addition & 1 deletion web/oss/src/components/pages/observability/assets/getObservabilityColumns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export const getObservabilityColumns = ({evaluatorSlugs}: ObservabilityColumnsPr
const shortId = spanId ? spanId.split("-")[0] : "-"
return (
<TooltipWithCopyAction copyText={spanId || ""} title="Copy span id">
<Tag className="font-mono bg-[#0517290F]" bordered={false}>
<Tag className="font-mono bg-[#0517290F]" variant="filled">
# {shortId}
</Tag>
</TooltipWithCopyAction>
Expand Down
Loading