scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-09-06 08:16:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 78

fix(ui/team): add GlobalOutlined icon to global guardrail markers

Browse source 
Addresses a11y feedback — global vs. non-global guardrails were
distinguished only by color (green vs. blue). Adds GlobalOutlined
next to global guardrails in (1) the selected-chip tagRender, (2)
the dropdown OptGroup label, and (3) the team info read view badge.
This commit is contained in:
Ryan Crabbe 2026-04-13 10:55:09 -07:00
parent 30c2357fe3
commit 1f57292363
No known key found for this signature in database
1 changed files with 30 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
ui/litellm-dashboard/src/components/team/TeamInfo.tsx
View file

@ -17,7 +17,7 @@ import { useGuardrails } from "@/app/(dashboard)/hooks/guardrails/useGuardrails"
import { formatNumberWithCommas } from "@/utils/dataUtils";
import { mapEmptyStringToNull } from "@/utils/keyUpdateUtils";
import { isProxyAdminRole } from "@/utils/roles";
import { EditOutlined, InfoCircleOutlined, MinusCircleOutlined, PlusOutlined, SaveOutlined } from "@ant-design/icons";
import { EditOutlined, GlobalOutlined, InfoCircleOutlined, MinusCircleOutlined, PlusOutlined, SaveOutlined } from "@ant-design/icons";
import { ArrowLeftIcon } from "@heroicons/react/outline";
import { Badge, Card, Grid, Text, TextInput, Title } from "@tremor/react";
import { Button, Form, Input, InputNumber, Select, Space, Switch, Tabs, Tag, Tooltip } from "antd";
@ -625,17 +625,21 @@ const TeamInfoView: React.FC<TeamInfoProps> = ({
e.stopPropagation();
};
const renderGuardrailTag = ({ label, value, closable, onClose }: any) => (
<Tag
color={globalGuardrailNames.has(value) ? "green" : "blue"}
closable={closable}
onClose={onClose}
onMouseDown={preventTagMouseDown}
style={{ marginInlineEnd: 4 }}
>
{label}
</Tag>
);
const renderGuardrailTag = ({ label, value, closable, onClose }: any) => {
const isGlobal = globalGuardrailNames.has(value);
return (
<Tag
color={isGlobal ? "green" : "blue"}
closable={closable}
onClose={onClose}
onMouseDown={preventTagMouseDown}
style={{ marginInlineEnd: 4 }}
>
{isGlobal && <GlobalOutlined style={{ marginInlineEnd: 4 }} aria-label="Global guardrail" />}
{label}
</Tag>
);
};
const copyToClipboard = async (text: string, key: string) => {
const success = await utilCopyToClipboard(text);
@ -770,8 +774,13 @@ const TeamInfoView: React.FC<TeamInfoProps> = ({
<div className="flex flex-wrap gap-2">
{effectiveGuardrails.map((name) => (
<Badge key={name} color="blue">
{globalGuardrailNames.has(name) && (
<GlobalOutlined
style={{ marginInlineEnd: 4 }}
aria-label="Global guardrail"
/>
)}
{name}
{globalGuardrailNames.has(name) ? " · Global" : ""}
</Badge>
))}
</div>
@ -1151,7 +1160,14 @@ const TeamInfoView: React.FC<TeamInfoProps> = ({
optionLabelProp="label"
tagRender={renderGuardrailTag}
>
<Select.OptGroup label="Global">
<Select.OptGroup
label={
<>
<GlobalOutlined style={{ marginInlineEnd: 4 }} />
Global
</>
}
>
{(guardrailsData?.guardrails ?? [])
.filter((g) => g.litellm_params?.default_on)
.map((g) => (