Merge pull request #19431 from BerriAI/litellm_ui_fix_build_002

[Infra] UI - Fixing UI Build

ui/litellm-dashboard/src/components/AIHub/ClaudeCodeMarketplaceTab.tsx

@@ -1,20 +1,19 @@
-import React, { useState, useEffect, useMemo } from "react";
-import { Input } from "antd";
-import { Card, TabGroup, TabList, Tab, TabPanels, TabPanel, Text } from "@tremor/react";
 import { SearchOutlined } from "@ant-design/icons";
-import { getClaudeCodeMarketplace } from "../networking";
-import { ModelDataTable } from "../model_dashboard/table";
-import { getMarketplaceTableColumns } from "./marketplace_table_columns";
-import NotificationsManager from "../molecules/notifications_manager";
-import {
-  MarketplaceResponse,
-  MarketplacePluginEntry,
-} from "../claude_code_plugins/types";
+import { Card, Tab, TabGroup, TabList, TabPanel, TabPanels, Text } from "@tremor/react";
+import { Input } from "antd";
+import React, { useEffect, useMemo, useState } from "react";
 import {
   extractCategories,
-  filterPluginsBySearch,
   filterPluginsByCategory,
+  filterPluginsBySearch,
 } from "../claude_code_plugins/helpers";
+import {
+  MarketplaceResponse
+} from "../claude_code_plugins/types";
+import { ModelDataTable } from "../model_dashboard/table";
+import NotificationsManager from "../molecules/notifications_manager";
+import { getClaudeCodeMarketplace } from "../networking";
+import { getMarketplaceTableColumns } from "./marketplace_table_columns";
 
 interface ClaudeCodeMarketplaceTabProps {
   publicPage?: boolean;

ui/litellm-dashboard/src/components/AIHub/marketplace/PluginCard.tsx

@@ -1,15 +1,15 @@
-import React from "react";
-import { Card, Badge, Button, Text } from "@tremor/react";
-import { Tooltip } from "antd";
-import { CopyOutlined, ExternalLinkIcon } from "@heroicons/react/outline";
-import { MarketplacePluginEntry } from "@/components/claude_code_plugins/types";
 import {
   formatInstallCommand,
   getCategoryBadgeColor,
-  getSourceLink,
-  truncateText,
+  getSourceLink
 } from "@/components/claude_code_plugins/helpers";
+import { MarketplacePluginEntry } from "@/components/claude_code_plugins/types";
 import NotificationsManager from "@/components/molecules/notifications_manager";
+import { ExternalLinkIcon } from "@heroicons/react/outline";
+import { CopyOutlined } from "@ant-design/icons";
+import { Badge, Button, Card, Text } from "@tremor/react";
+import { Tooltip } from "antd";
+import React from "react";
 
 interface PluginCardProps {
   plugin: MarketplacePluginEntry;

ui/litellm-dashboard/src/components/claude_code_plugins/plugin_info.tsx

@@ -1,30 +1,29 @@
-import React, { useState, useEffect } from "react";
-import {
-  Card,
-  Title,
-  Text,
-  Button,
-  Badge,
-  Grid,
-} from "@tremor/react";
-import { Spin, Switch, Tooltip, Descriptions } from "antd";
-import { ArrowLeftIcon, ExternalLinkIcon } from "@heroicons/react/outline";
 import { CopyOutlined } from "@ant-design/icons";
+import { ArrowLeftIcon, ExternalLinkIcon } from "@heroicons/react/outline";
 import {
-  getClaudeCodePluginDetails,
-  enableClaudeCodePlugin,
-  disableClaudeCodePlugin,
-} from "../networking";
+  Badge,
+  Button,
+  Card,
+  Grid,
+  Text,
+  Title,
+} from "@tremor/react";
+import { Spin, Switch, Tooltip } from "antd";
+import React, { useEffect, useState } from "react";
 import NotificationsManager from "../molecules/notifications_manager";
-import { Plugin } from "./types";
 import {
-  formatInstallCommand,
-  getSourceDisplayText,
-  getSourceLink,
-  getCategoryBadgeColor,
+  disableClaudeCodePlugin,
+  enableClaudeCodePlugin,
+  getClaudeCodePluginDetails,
+} from "../networking";
+import {
   formatDateString,
-  formatKeywords,
+  formatInstallCommand,
+  getCategoryBadgeColor,
+  getSourceDisplayText,
+  getSourceLink
 } from "./helpers";
+import { Plugin } from "./types";
 
 interface PluginInfoViewProps {
   pluginId: string;
@@ -169,7 +168,9 @@ const PluginInfoView: React.FC<PluginInfoViewProps> = ({
       {/* Plugin Details */}
       <Card>
         <Title>Plugin Details</Title>
-        <Grid numColsSm={2} numColsLg={3} className="gap-6 mt-4">
+        <Grid
+          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-4"
+        >
           {/* Plugin ID */}
           <div>
             <Text className="text-gray-600 text-xs">Plugin ID</Text>
@@ -277,7 +278,7 @@ const PluginInfoView: React.FC<PluginInfoViewProps> = ({
       {plugin.author && (
         <Card>
           <Title>Author Information</Title>
-          <Grid numColsSm={2} className="gap-4 mt-4">
+          <Grid className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
             {plugin.author.name && (
               <div>
                 <Text className="text-gray-600 text-xs">Name</Text>
@@ -322,7 +323,7 @@ const PluginInfoView: React.FC<PluginInfoViewProps> = ({
       {/* Timestamps */}
       <Card>
         <Title>Metadata</Title>
-        <Grid numColsSm={2} className="gap-4 mt-4">
+        <Grid className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
           <div>
             <Text className="text-gray-600 text-xs">Created At</Text>
             <Text className="font-semibold mt-1">

ui/litellm-dashboard/src/components/claude_code_plugins/plugin_table.tsx

@@ -1,32 +1,10 @@
-import React, { useState } from "react";
+import { CopyOutlined } from "@ant-design/icons";
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeaderCell,
-  TableRow,
-  Button,
-  Badge,
-} from "@tremor/react";
-import {
-  SwitchVerticalIcon,
-  ChevronUpIcon,
   ChevronDownIcon,
+  ChevronUpIcon,
+  SwitchVerticalIcon,
   TrashIcon,
 } from "@heroicons/react/outline";
-import { Tooltip, Switch } from "antd";
-import { CopyOutlined } from "@ant-design/icons";
-import { Plugin } from "./types";
-import {
-  getCategoryBadgeColor,
-  formatDateString,
-} from "./helpers";
-import {
-  enableClaudeCodePlugin,
-  disableClaudeCodePlugin,
-} from "../networking";
-import NotificationsManager from "../molecules/notifications_manager";
 import {
   ColumnDef,
   flexRender,
@@ -35,6 +13,27 @@ import {
   SortingState,
   useReactTable,
 } from "@tanstack/react-table";
+import {
+  Badge,
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+} from "@tremor/react";
+import { Switch, Tooltip } from "antd";
+import React, { useState } from "react";
+import NotificationsManager from "../molecules/notifications_manager";
+import {
+  disableClaudeCodePlugin,
+  enableClaudeCodePlugin,
+} from "../networking";
+import {
+  getCategoryBadgeColor
+} from "./helpers";
+import { Plugin } from "./types";
 
 interface PluginTableProps {
   pluginsList: Plugin[];
@@ -209,33 +208,33 @@ const PluginTable: React.FC<PluginTableProps> = ({
     },
     ...(isAdmin
       ? [
-          {
-            header: "Actions",
-            id: "actions",
-            enableSorting: false,
-            cell: ({ row }: any) => {
-              const plugin = row.original;
+        {
+          header: "Actions",
+          id: "actions",
+          enableSorting: false,
+          cell: ({ row }: any) => {
+            const plugin = row.original;
 
-              return (
-                <div className="flex items-center gap-1">
-                  <Tooltip title="Delete plugin">
-                    <Button
-                      size="xs"
-                      variant="light"
-                      color="red"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onDeleteClick(plugin.name, plugin.name);
-                      }}
-                      icon={TrashIcon}
-                      className="text-red-500 hover:text-red-700 hover:bg-red-50"
-                    />
-                  </Tooltip>
-                </div>
-              );
-            },
+            return (
+              <div className="flex items-center gap-1">
+                <Tooltip title="Delete plugin">
+                  <Button
+                    size="xs"
+                    variant="light"
+                    color="red"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onDeleteClick(plugin.name, plugin.name);
+                    }}
+                    icon={TrashIcon}
+                    className="text-red-500 hover:text-red-700 hover:bg-red-50"
+                  />
+                </Tooltip>
+              </div>
+            );
           },
-        ]
+        },
+      ]
       : []),
   ];
 
@@ -261,11 +260,10 @@ const PluginTable: React.FC<PluginTableProps> = ({
                 {headerGroup.headers.map((header) => (
                   <TableHeaderCell
                     key={header.id}
-                    className={`py-1 h-8 ${
-                      header.id === "actions"
+                    className={`py-1 h-8 ${header.id === "actions"
                         ? "sticky right-0 bg-white shadow-[-4px_0_8px_-6px_rgba(0,0,0,0.1)]"
                         : ""
-                    }`}
+                      }`}
                     onClick={
                       header.column.getCanSort()
                         ? header.column.getToggleSortingHandler()
@@ -277,9 +275,9 @@ const PluginTable: React.FC<PluginTableProps> = ({
                         {header.isPlaceholder
                           ? null
                           : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            )}
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
                       </div>
                       {header.column.getCanSort() && (
                         <div className="w-4">
@@ -318,11 +316,10 @@ const PluginTable: React.FC<PluginTableProps> = ({
                   {row.getVisibleCells().map((cell) => (
                     <TableCell
                       key={cell.id}
-                      className={`py-0.5 max-h-8 overflow-hidden text-ellipsis whitespace-nowrap ${
-                        cell.column.id === "actions"
+                      className={`py-0.5 max-h-8 overflow-hidden text-ellipsis whitespace-nowrap ${cell.column.id === "actions"
                           ? "sticky right-0 bg-white shadow-[-4px_0_8px_-6px_rgba(0,0,0,0.1)]"
                           : ""
-                      }`}
+                        }`}
                     >
                       {flexRender(
                         cell.column.columnDef.cell,