litellm/ui/litellm-dashboard/src/components/SearchTools/SearchToolColumn.tsx

import { Tag } from "antd";
import { ColumnsType } from "antd/es/table";
import TableIconActionButton from "../common_components/IconActionButton/TableIconActionButtons/TableIconActionButton";
import { SearchTool } from "./types";

export const searchToolColumns = (
  onView: (searchToolId: string) => void,
  onEdit: (searchToolId: string) => void,
  onDelete: (searchToolId: string) => void,
  availableProviders: Array<{ provider_name: string; ui_friendly_name: string }>,
): ColumnsType<SearchTool> => [
  {
    title: "Search Tool ID",
    dataIndex: "search_tool_id",
    key: "search_tool_id",
    render: (_, tool) => {
      const isFromConfig = tool.is_from_config;

      if (isFromConfig) {
        return <span className="text-xs">-</span>;
      }

      return (
        <button
          onClick={() => onView(tool.search_tool_id!)}
          className="font-mono text-blue-500 bg-blue-50 hover:bg-blue-100 text-xs font-normal px-2 py-0.5 text-left cursor-pointer max-w-40"
        >
          <span className="truncate block">{tool.search_tool_id}</span>
        </button>
      );
    },
  },
  {
    title: "Name",
    dataIndex: "search_tool_name",
    key: "search_tool_name",
    render: (name: string) => <span className="font-medium">{name}</span>,
  },
  {
    title: "Provider",
    key: "provider",
    render: (_, tool) => {
      const provider = tool.litellm_params.search_provider;
      const providerInfo = availableProviders.find((p) => p.provider_name === provider);
      const displayName = providerInfo?.ui_friendly_name || provider;

      return <span className="text-sm">{displayName}</span>;
    },
  },
  {
    title: "Created At",
    dataIndex: "created_at",
    key: "created_at",
    render: (_, tool) => {
      return <span className="text-xs">{tool.created_at ? new Date(tool.created_at).toLocaleDateString() : "-"}</span>;
    },
  },
  {
    title: "Updated At",
    dataIndex: "updated_at",
    key: "updated_at",
    render: (_, tool) => {
      return <span className="text-xs">{tool.updated_at ? new Date(tool.updated_at).toLocaleDateString() : "-"}</span>;
    },
  },
  {
    title: "Source",
    key: "source",
    render: (_, tool) => {
      const isFromConfig = tool.is_from_config ?? false;

      return <Tag color={isFromConfig ? "default" : "blue"}>{isFromConfig ? "Config" : "DB"}</Tag>;
    },
  },
  {
    title: "Actions",
    key: "actions",
    render: (_, tool) => {
      const toolId = tool.search_tool_id;
      const isFromConfig = tool.is_from_config ?? false;

      return (
        <div className="flex items-center gap-2">
          <TableIconActionButton
            variant="Edit"
            tooltipText="Edit search tool"
            disabled={isFromConfig}
            disabledTooltipText="Config search tool cannot be edited on the dashboard. Please edit it from the config file."
            onClick={() => {
              if (toolId && !isFromConfig) {
                onEdit(toolId);
              }
            }}
          />
          <TableIconActionButton
            variant="Delete"
            tooltipText="Delete search tool"
            disabled={isFromConfig}
            disabledTooltipText="Config search tool cannot be deleted on the dashboard. Please delete it from the config file."
            onClick={() => {
              if (toolId && !isFromConfig) {
                onDelete(toolId);
              }
            }}
          />
        </div>
      );
    },
  },
];