diff --git a/ui/litellm-dashboard/src/components/organisms/create_key_button.test.tsx b/ui/litellm-dashboard/src/components/organisms/create_key_button.test.tsx
index eef7292dac1..8cf97cde6ed 100644
--- a/ui/litellm-dashboard/src/components/organisms/create_key_button.test.tsx
+++ b/ui/litellm-dashboard/src/components/organisms/create_key_button.test.tsx
@@ -119,7 +119,7 @@ vi.mock("antd", () => {
Form.useForm = () => [formMock];
- const Select = ({ children, onChange, ...props }: { children?: any; onChange?: (value: string) => void }) =>
+ const Select = ({ children, onChange, options, ...props }: { children?: any; onChange?: (value: string) => void; options?: Array<{ value: string; label: string }> }) =>
React.createElement(
"select",
{
@@ -127,6 +127,7 @@ vi.mock("antd", () => {
onChange: (event: any) => onChange?.(event.target.value),
},
children,
+ options?.map((opt: any) => React.createElement("option", { key: opt.value, value: opt.value }, opt.label)),
);
Select.Option = ({ children, ...props }: { children?: any }) =>
@@ -238,6 +239,16 @@ vi.mock("../key_team_helpers/fetch_available_models_team_key", () => ({
getModelDisplayName: (model: string) => model,
}));
+vi.mock("@/app/(dashboard)/hooks/tags/useTags", () => ({
+ useTags: vi.fn().mockReturnValue({
+ data: [
+ { name: "production", description: "Prod tag", models: [], created_at: "2026-01-01", updated_at: "2026-01-01" },
+ { name: "staging", description: "Staging tag", models: [], created_at: "2026-01-01", updated_at: "2026-01-01" },
+ ],
+ isLoading: false,
+ }),
+}));
+
vi.mock("@/app/(dashboard)/hooks/projects/useProjects", () => ({
useProjects: vi.fn().mockReturnValue({ data: [], isLoading: false }),
}));
@@ -525,4 +536,19 @@ describe("CreateKey", () => {
expect(formStateRef.current["organization_id"]).toBe("org-1");
});
});
+
+ describe("tags dropdown", () => {
+ it("should populate tags dropdown with options from useTags hook", async () => {
+ renderWithProviders();
+
+ act(() => {
+ fireEvent.click(screen.getByRole("button", { name: /create new key/i }));
+ });
+
+ await waitFor(() => {
+ expect(screen.getByText("production")).toBeInTheDocument();
+ expect(screen.getByText("staging")).toBeInTheDocument();
+ });
+ });
+ });
});
diff --git a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
index d0a7a909d6e..0c0e4ccd12d 100644
--- a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
@@ -2,6 +2,7 @@
import { keyKeys } from "@/app/(dashboard)/hooks/keys/useKeys";
import { useOrganizations } from "@/app/(dashboard)/hooks/organizations/useOrganizations";
import { useProjects } from "@/app/(dashboard)/hooks/projects/useProjects";
+import { useTags } from "@/app/(dashboard)/hooks/tags/useTags";
import { useUISettings } from "@/app/(dashboard)/hooks/uiSettings/useUISettings";
import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
import { formatNumberWithCommas } from "@/utils/dataUtils";
@@ -165,8 +166,12 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp
const { data: organizations, isLoading: isOrganizationsLoading } = useOrganizations();
const { data: projects, isLoading: isProjectsLoading } = useProjects();
const { data: uiSettingsData } = useUISettings();
+ const { data: tagsData } = useTags();
const enableProjectsUI = Boolean(uiSettingsData?.values?.enable_projects_ui);
const disableCustomApiKeys = Boolean(uiSettingsData?.values?.disable_custom_api_keys);
+ const tagOptions = tagsData
+ ? Object.values(tagsData).map((tag) => ({ value: tag.name, label: tag.name }))
+ : [];
const queryClient = useQueryClient();
const [form] = Form.useForm();
const [isModalVisible, setIsModalVisible] = useState(false);
@@ -175,7 +180,6 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp
const [userModels, setUserModels] = useState([]);
const [modelsToPick, setModelsToPick] = useState([]);
const [keyOwner, setKeyOwner] = useState("you");
- const [predefinedTags, setPredefinedTags] = useState(getPredefinedTags(data));
const [hasPrefilled, setHasPrefilled] = useState(false);
const [pendingPrefillModels, setPendingPrefillModels] = useState(null);
const [guardrailsList, setGuardrailsList] = useState([]);
@@ -1340,9 +1344,9 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp