refactor(ui): colocate tag-management and vector-stores views, keeping the shared selectors (#32719)

Two of the group-1 colocation splits. Each of these folders lived in the shared
src/components dump but is only partly shared: the page's management view is
segment-owned, while a selector widget is reused by other features. So this
splits them rather than moving wholesale.

tag-management: TagSelector (used by playground) and its types stay in
@/components/tag_management; the management view (index, tag_info, TagTable,
CreateTagModal) moves to tag-management/_components.

vector-stores: VectorStoreSelector (used by organizations and playground) and
its types stay in @/components/vector_store_management; the rest of the
management UI moves to vector-stores/_components.

The moved files' imports of the retained shared files are rewritten to absolute
@/components paths, escaping relative imports are absolutized, and moved test
files have both their `from` imports and `vi.mock` paths rewritten to match.
Grandfathered lint suppressions for moved files are re-keyed. The external
consumers of the selectors are untouched (the selectors did not move). No
behavior change.

ui/litellm-dashboard/eslint-suppressions.json

@@ -2272,17 +2272,17 @@
       "count": 1
     }
   },
-  "src/components/tag_management/TagTable.tsx": {
+  "src/app/(dashboard)/tag-management/_components/TagTable.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/tag_management/components/CreateTagModal.tsx": {
+  "src/app/(dashboard)/tag-management/_components/components/CreateTagModal.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/tag_management/index.tsx": {
+  "src/app/(dashboard)/tag-management/_components/index.tsx": {
     "no-restricted-imports": {
       "count": 1
     },
@@ -2290,7 +2290,7 @@
       "count": 1
     }
   },
-  "src/components/tag_management/tag_info.tsx": {
+  "src/app/(dashboard)/tag-management/_components/tag_info.tsx": {
     "no-restricted-imports": {
       "count": 1
     },
@@ -2388,12 +2388,12 @@
       "count": 2
     }
   },
-  "src/components/vector_store_management/CreateVectorStore.tsx": {
+  "src/app/(dashboard)/vector-stores/_components/CreateVectorStore.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/vector_store_management/VectorStoreForm.tsx": {
+  "src/app/(dashboard)/vector-stores/_components/VectorStoreForm.tsx": {
     "no-nested-ternary": {
       "count": 2
     },
@@ -2404,12 +2404,12 @@
       "count": 1
     }
   },
-  "src/components/vector_store_management/VectorStoreTable.tsx": {
+  "src/app/(dashboard)/vector-stores/_components/VectorStoreTable.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/vector_store_management/index.tsx": {
+  "src/app/(dashboard)/vector-stores/_components/index.tsx": {
     "no-restricted-imports": {
       "count": 1
     },
@@ -2417,7 +2417,7 @@
       "count": 1
     }
   },
-  "src/components/vector_store_management/vector_store_info.tsx": {
+  "src/app/(dashboard)/vector-stores/_components/vector_store_info.tsx": {
     "no-restricted-imports": {
       "count": 1
     },

ui/litellm-dashboard/src/app/(dashboard)/tag-management/_components/TagTable.test.tsx

@@ -2,7 +2,7 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { formatCellDate } from "@/components/shared/table_cells";
 import TagTable from "./TagTable";
-import { Tag } from "./types";
+import { Tag } from "@/components/tag_management/types";
 
 describe("TagTable", () => {
   const mockOnEdit = vi.fn();

ui/litellm-dashboard/src/app/(dashboard)/tag-management/_components/TagTable.tsx

@@ -11,7 +11,7 @@ import { Badge, Icon, Table, TableBody, TableCell, TableHead, TableHeaderCell, T
 import { Tooltip } from "antd";
 import React from "react";
 import { DateCell, IdCell } from "@/components/shared/table_cells";
-import { Tag } from "./types";
+import { Tag } from "@/components/tag_management/types";
 
 interface TagTableProps {
   data: Tag[];

ui/litellm-dashboard/src/app/(dashboard)/tag-management/_components/components/CreateTagModal.tsx

@@ -2,8 +2,8 @@ import { InfoCircleOutlined } from "@ant-design/icons";
 import { Accordion, AccordionBody, AccordionHeader, Button, TextInput, Title } from "@tremor/react";
 import { Form, Input, Modal, Select as Select2, Tooltip } from "antd";
 import React from "react";
-import BudgetDurationDropdown from "../../common_components/budget_duration_dropdown";
-import NumericalInput from "../../shared/numerical_input";
+import BudgetDurationDropdown from "@/components/common_components/budget_duration_dropdown";
+import NumericalInput from "@/components/shared/numerical_input";
 
 interface ModelInfo {
   model_name: string;

ui/litellm-dashboard/src/app/(dashboard)/tag-management/_components/index.tsx

@@ -2,11 +2,11 @@ import React, { useState, useEffect } from "react";
 import { Icon, Button, Col, Text, Grid } from "@tremor/react";
 import { RefreshIcon } from "@heroicons/react/outline";
 import TagInfoView from "./tag_info";
-import { modelInfoCall } from "../networking";
-import { tagCreateCall, tagListCall, tagDeleteCall } from "../networking";
-import { Tag } from "./types";
+import { modelInfoCall } from "@/components/networking";
+import { tagCreateCall, tagListCall, tagDeleteCall } from "@/components/networking";
+import { Tag } from "@/components/tag_management/types";
 import TagTable from "./TagTable";
-import NotificationsManager from "../molecules/notifications_manager";
+import NotificationsManager from "@/components/molecules/notifications_manager";
 import CreateTagModal from "./components/CreateTagModal";
 
 interface ModelInfo {

ui/litellm-dashboard/src/app/(dashboard)/tag-management/_components/tag_info.tsx

@@ -12,13 +12,13 @@ import {
 } from "@tremor/react";
 import { Form, Input, Select as Select2, Tooltip } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
-import { fetchUserModels } from "../organisms/create_key_button";
-import { getModelDisplayName } from "../key_team_helpers/fetch_available_models_team_key";
-import { tagInfoCall, tagUpdateCall } from "../networking";
-import { Tag } from "./types";
-import NotificationsManager from "../molecules/notifications_manager";
-import NumericalInput from "../shared/numerical_input";
-import BudgetDurationDropdown from "../common_components/budget_duration_dropdown";
+import { fetchUserModels } from "@/components/organisms/create_key_button";
+import { getModelDisplayName } from "@/components/key_team_helpers/fetch_available_models_team_key";
+import { tagInfoCall, tagUpdateCall } from "@/components/networking";
+import { Tag } from "@/components/tag_management/types";
+import NotificationsManager from "@/components/molecules/notifications_manager";
+import NumericalInput from "@/components/shared/numerical_input";
+import BudgetDurationDropdown from "@/components/common_components/budget_duration_dropdown";
 import { copyToClipboard as utilCopyToClipboard } from "@/utils/dataUtils";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import { Button as AntdButton } from "antd";

ui/litellm-dashboard/src/app/(dashboard)/tag-management/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import TagManagement from "@/components/tag_management";
+import TagManagement from "./_components";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 
 export default function TagManagementPage() {

ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/CreateVectorStore.test.tsx

@@ -1,15 +1,15 @@
 import { render, screen, fireEvent, waitFor, act } from "@testing-library/react";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import CreateVectorStore from "./CreateVectorStore";
-import * as networking from "../networking";
+import * as networking from "@/components/networking";
 
 // Mock the networking module
-vi.mock("../networking", () => ({
+vi.mock("@/components/networking", () => ({
   ragIngestCall: vi.fn(),
 }));
 
 // Mock NotificationsManager
-vi.mock("../molecules/notifications_manager", () => ({
+vi.mock("@/components/molecules/notifications_manager", () => ({
   default: {
     success: vi.fn(),
     fromBackend: vi.fn(),
@@ -17,7 +17,7 @@ vi.mock("../molecules/notifications_manager", () => ({
 }));
 
 // Mock vector_store_providers
-vi.mock("../vector_store_providers", () => ({
+vi.mock("@/components/vector_store_providers", () => ({
   VectorStoreProviders: {
     BEDROCK: "Amazon Bedrock",
     OPENAI: "OpenAI",

ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/CreateVectorStore.tsx

@@ -4,8 +4,8 @@ import { Upload, Button, Select, Form, Alert, Tooltip, Input } from "antd";
 import MessageManager from "@/components/molecules/message_manager";
 import { InboxOutlined, InfoCircleOutlined } from "@ant-design/icons";
 import type { UploadProps } from "antd";
-import { ragIngestCall } from "../networking";
-import { DocumentUpload, RAGIngestResponse } from "./types";
+import { ragIngestCall } from "@/components/networking";
+import { DocumentUpload, RAGIngestResponse } from "@/components/vector_store_management/types";
 import DocumentsTable from "./DocumentsTable";
 import {
   VectorStoreProviders,
@@ -13,9 +13,9 @@ import {
   vectorStoreProviderMap,
   getProviderSpecificFields,
   VectorStoreFieldConfig,
-} from "../vector_store_providers";
+} from "@/components/vector_store_providers";
 import { resolveLogoSrc } from "@/lib/assetPaths";
-import NotificationsManager from "../molecules/notifications_manager";
+import NotificationsManager from "@/components/molecules/notifications_manager";
 import S3VectorsConfig from "./S3VectorsConfig";
 
 const { Dragger } = Upload;

ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/DocumentsTable.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen, fireEvent, act } from "@testing-library/react";
 import { describe, it, expect, vi } from "vitest";
 import DocumentsTable from "./DocumentsTable";
-import { DocumentUpload } from "./types";
+import { DocumentUpload } from "@/components/vector_store_management/types";
 
 // Mock antd message
 vi.mock("antd", async () => {

ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/DocumentsTable.tsx

@@ -3,7 +3,7 @@ import { Table, Tooltip } from "antd";
 import MessageManager from "@/components/molecules/message_manager";
 import { EyeOutlined, CopyOutlined, DeleteOutlined } from "@ant-design/icons";
 import { StatusBadge, type StatusTone } from "@/components/shared/table_cells";
-import { DocumentUpload } from "./types";
+import { DocumentUpload } from "@/components/vector_store_management/types";
 
 interface DocumentsTableProps {
   documents: DocumentUpload[];

ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/TestVectorStoreTab.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen, fireEvent } from "@testing-library/react";
 import { describe, it, expect, vi } from "vitest";
 import TestVectorStoreTab from "./TestVectorStoreTab";
-import { VectorStore } from "./types";
+import { VectorStore } from "@/components/vector_store_management/types";
 
 // Mock VectorStoreTester component
 vi.mock("./VectorStoreTester", () => ({

ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/TestVectorStoreTab.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Card, Select, Typography } from "antd";
 import { VectorStoreTester } from "./VectorStoreTester";
-import { VectorStore } from "./types";
+import { VectorStore } from "@/components/vector_store_management/types";
 
 const { Text, Title } = Typography;
 

ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/VectorStoreForm.test.tsx

@@ -1,9 +1,9 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
-import { CredentialItem } from "../networking";
+import { CredentialItem } from "@/components/networking";
 import VectorStoreForm from "./VectorStoreForm";
 
-vi.mock("../networking");
+vi.mock("@/components/networking");
 
 describe("VectorStoreForm", () => {
   it("should render the form when visible", () => {

ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/VectorStoreForm.tsx

@@ -2,17 +2,17 @@ import React, { useState, useEffect } from "react";
 import { TextInput, Button as TremorButton } from "@tremor/react";
 import { Modal, Form, Select, Tooltip, Input, Alert } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
-import { CredentialItem, vectorStoreCreateCall } from "../networking";
+import { CredentialItem, vectorStoreCreateCall } from "@/components/networking";
 import {
   VectorStoreProviders,
   vectorStoreProviderLogoMap,
   vectorStoreProviderMap,
   getProviderSpecificFields,
   VectorStoreFieldConfig,
-} from "../vector_store_providers";
+} from "@/components/vector_store_providers";
 import { resolveLogoSrc } from "@/lib/assetPaths";
 import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models";
-import NotificationsManager from "../molecules/notifications_manager";
+import NotificationsManager from "@/components/molecules/notifications_manager";
 
 interface VectorStoreFormProps {
   isVisible: boolean;

ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/VectorStoreTable.test.tsx

@@ -2,17 +2,17 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import VectorStoreTable from "./VectorStoreTable";
-import { VectorStore } from "./types";
+import { VectorStore } from "@/components/vector_store_management/types";
 
 // Mock dependencies
 const mockGetProviderLogoAndName = vi.fn();
 const mockTableIconActionButton = vi.fn();
 
-vi.mock("../provider_info_helpers", () => ({
+vi.mock("@/components/provider_info_helpers", () => ({
   getProviderLogoAndName: (...args: any[]) => mockGetProviderLogoAndName(...args),
 }));
 
-vi.mock("../common_components/IconActionButton/TableIconActionButtons/TableIconActionButton", () => ({
+vi.mock("@/components/common_components/IconActionButton/TableIconActionButtons/TableIconActionButton", () => ({
   default: (props: any) => {
     mockTableIconActionButton(props);
     return (

ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/VectorStoreTable.tsx

@@ -11,9 +11,9 @@ import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } fro
 import { Tooltip } from "antd";
 import React from "react";
 import { DateCell, IdCell } from "@/components/shared/table_cells";
-import TableIconActionButton from "../common_components/IconActionButton/TableIconActionButtons/TableIconActionButton";
-import { getProviderLogoAndName } from "../provider_info_helpers";
-import { VectorStore } from "./types";
+import TableIconActionButton from "@/components/common_components/IconActionButton/TableIconActionButtons/TableIconActionButton";
+import { getProviderLogoAndName } from "@/components/provider_info_helpers";
+import { VectorStore } from "@/components/vector_store_management/types";
 
 interface VectorStoreTableProps {
   data: VectorStore[];

ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/VectorStoreTester.tsx

@@ -2,8 +2,8 @@ import React, { useState } from "react";
 import { Button, Input, Card, Typography, Spin, Divider } from "antd";
 import MessageManager from "@/components/molecules/message_manager";
 import { SendOutlined, DatabaseOutlined, LoadingOutlined, DownOutlined, RightOutlined } from "@ant-design/icons";
-import { vectorStoreSearchCall } from "../networking";
-import NotificationsManager from "../molecules/notifications_manager";
+import { vectorStoreSearchCall } from "@/components/networking";
+import NotificationsManager from "@/components/molecules/notifications_manager";
 
 const { TextArea } = Input;
 const { Text, Title } = Typography;

ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/index.tsx

@@ -12,16 +12,21 @@ import {
   TabPanel,
 } from "@tremor/react";
 import { RefreshIcon } from "@heroicons/react/outline";
-import { vectorStoreListCall, vectorStoreDeleteCall, credentialListCall, CredentialItem } from "../networking";
-import { VectorStore } from "./types";
+import {
+  vectorStoreListCall,
+  vectorStoreDeleteCall,
+  credentialListCall,
+  CredentialItem,
+} from "@/components/networking";
+import { VectorStore } from "@/components/vector_store_management/types";
 import VectorStoreTable from "./VectorStoreTable";
 import VectorStoreForm from "./VectorStoreForm";
-import DeleteResourceModal from "../common_components/DeleteResourceModal";
+import DeleteResourceModal from "@/components/common_components/DeleteResourceModal";
 import VectorStoreInfoView from "./vector_store_info";
 import CreateVectorStore from "./CreateVectorStore";
 import TestVectorStoreTab from "./TestVectorStoreTab";
 import { isAdminRole } from "@/utils/roles";
-import NotificationsManager from "../molecules/notifications_manager";
+import NotificationsManager from "@/components/molecules/notifications_manager";
 
 interface VectorStoreProps {
   accessToken: string | null;

ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/vector_store_info.tsx

@@ -3,12 +3,17 @@ import { Card, Text, Title, Button, Badge, TabGroup, TabList, Tab, TabPanels, Ta
 import { Form, Input, Select as Select2, Tooltip, Button as AntButton } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
 import { ArrowLeftIcon } from "@heroicons/react/outline";
-import { vectorStoreInfoCall, vectorStoreUpdateCall, credentialListCall, CredentialItem } from "../networking";
-import { VectorStore } from "./types";
-import { Providers, providerLogoMap, provider_map } from "../provider_info_helpers";
+import {
+  vectorStoreInfoCall,
+  vectorStoreUpdateCall,
+  credentialListCall,
+  CredentialItem,
+} from "@/components/networking";
+import { VectorStore } from "@/components/vector_store_management/types";
+import { Providers, providerLogoMap, provider_map } from "@/components/provider_info_helpers";
 import { resolveLogoSrc } from "@/lib/assetPaths";
 import VectorStoreTester from "./VectorStoreTester";
-import NotificationsManager from "../molecules/notifications_manager";
+import NotificationsManager from "@/components/molecules/notifications_manager";
 
 interface VectorStoreInfoViewProps {
   vectorStoreId: string;

ui/litellm-dashboard/src/app/(dashboard)/vector-stores/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import VectorStoreManagement from "@/components/vector_store_management";
+import VectorStoreManagement from "./_components";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 
 export default function VectorStores() {

ui/litellm-dashboard/tests/CreateKeyPage.expiredToken.test.tsx

@@ -131,8 +131,8 @@ vi.mock("@/components/guardrails", () => ({ default: stub("guardrails") }));
 vi.mock("@/components/prompts", () => ({ default: stub("prompts") }));
 vi.mock("@/components/transform_request", () => ({ default: stub("transform-request") }));
 vi.mock("@/components/mcp_tools", () => ({ MCPServers: stub("mcp-servers") }));
-vi.mock("@/components/tag_management", () => ({ default: stub("tag-management") }));
-vi.mock("@/components/vector_store_management", () => ({ default: stub("vector-stores") }));
+vi.mock("@/app/(dashboard)/tag-management/_components", () => ({ default: stub("tag-management") }));
+vi.mock("@/app/(dashboard)/vector-stores/_components", () => ({ default: stub("vector-stores") }));
 vi.mock("@/components/ui_theme_settings", () => ({ default: stub("ui-theme-settings") }));
 vi.mock("@/components/organisms/create_key_button", () => ({ fetchUserModels: vi.fn() }));
 vi.mock("@/components/common_components/fetch_teams", () => ({ fetchTeams: vi.fn() }));