Merge pull request #14169 from BerriAI/remove-filters-in-user-info

Remove table filter on user info page

Author: krrishdholakia

ui/litellm-dashboard/src/components/view_users.tsx

@@ -79,7 +79,6 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({ accessToken, toke
   const [activeTab, setActiveTab] = useState("users")
   const [filters, setFilters] = useState<FilterState>(initialFilters)
   const [debouncedFilters, setDebouncedFilters, debouncer] = useDebouncedState(filters, { wait: 300 })
-  const [showFilters, setShowFilters] = useState(false)
   const [isInvitationLinkModalVisible, setIsInvitationLinkModalVisible] = useState(false)
   const [invitationLinkData, setInvitationLinkData] = useState<InvitationLink | null>(null)
   const [baseUrl, setBaseUrl] = useState<string | null>(null)
@@ -330,209 +329,35 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({ accessToken, toke
 
         <TabPanels>
           <TabPanel>
-            <div className="bg-white rounded-lg shadow">
-              <div className="border-b px-6 py-4">
-                <div className="flex flex-col space-y-4">
-                  {/* Search and Filter Controls */}
-                  <div className="flex flex-wrap items-center gap-3">
-                    {/* Email Search */}
-                    <div className="relative w-64">
-                      <input
-                        type="text"
-                        placeholder="Search by email..."
-                        className="w-full px-3 py-2 pl-8 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                        value={filters.email}
-                        onChange={(e) => updateFilters({ email: e.target.value })}
-                      />
-                      <svg
-                        className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                        />
-                      </svg>
-                    </div>
-
-                    {/* Filter Button */}
-                    <button
-                      className={`px-3 py-2 text-sm border rounded-md hover:bg-gray-50 flex items-center gap-2 ${showFilters ? "bg-gray-100" : ""}`}
-                      onClick={() => setShowFilters(!showFilters)}
-                    >
-                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
-                        />
-                      </svg>
-                      Filters
-                      {(filters.user_id || filters.user_role || filters.team) && (
-                        <span className="w-2 h-2 rounded-full bg-blue-500"></span>
-                      )}
-                    </button>
-
-                    {/* Reset Filters Button */}
-                    <button
-                      className="px-3 py-2 text-sm border rounded-md hover:bg-gray-50 flex items-center gap-2"
-                      onClick={() => {
-                        updateFilters(initialFilters)
-                      }}
-                    >
-                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-                        />
-                      </svg>
-                      Reset Filters
-                    </button>
-                  </div>
-
-                  {/* Additional Filters */}
-                  {showFilters && (
-                    <div className="flex flex-wrap items-center gap-3 mt-3">
-                      {/* User ID Search */}
-                      <div className="relative w-64">
-                        <input
-                          type="text"
-                          placeholder="Filter by User ID"
-                          className="w-full px-3 py-2 pl-8 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                          value={filters.user_id}
-                          onChange={(e) => updateFilters({ user_id: e.target.value })}
-                        />
-                        <svg
-                          className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500"
-                          fill="none"
-                          stroke="currentColor"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                          />
-                        </svg>
-                      </div>
-
-                      {/* Role Dropdown */}
-                      <div className="w-64">
-                        <Select
-                          value={filters.user_role}
-                          onValueChange={(value) => updateFilters({ user_role: value })}
-                          placeholder="Select Role"
-                        >
-                          {Object.entries(possibleUIRoles).map(([key, value]) => (
-                            <SelectItem key={key} value={key}>
-                              {value.ui_label}
-                            </SelectItem>
-                          ))}
-                        </Select>
-                      </div>
-
-                      {/* Team Dropdown */}
-                      <div className="w-64">
-                        <Select
-                          value={filters.team}
-                          onValueChange={(value) => updateFilters({ team: value })}
-                          placeholder="Select Team"
-                        >
-                          {teams?.map((team) => (
-                            <SelectItem key={team.team_id} value={team.team_id}>
-                              {team.team_alias || team.team_id}
-                            </SelectItem>
-                          ))}
-                        </Select>
-                      </div>
-
-                      {/* SSO ID Search */}
-                      <div className="relative w-64">
-                        <input
-                          type="text"
-                          placeholder="Filter by SSO ID"
-                          className="w-full px-3 py-2 pl-8 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                          value={filters.sso_user_id}
-                          onChange={(e) => updateFilters({ sso_user_id: e.target.value })}
-                        />
-                      </div>
-                    </div>
-                  )}
-
-                  {/* Results Count and Pagination */}
-                  <div className="flex justify-between items-center">
-                    <span className="text-sm text-gray-700">
-                      Showing{" "}
-                      {userListResponse && userListResponse.users && userListResponse.users.length > 0
-                        ? (userListResponse.page - 1) * userListResponse.page_size + 1
-                        : 0}{" "}
-                      -{" "}
-                      {userListResponse && userListResponse.users
-                        ? Math.min(userListResponse.page * userListResponse.page_size, userListResponse.total)
-                        : 0}{" "}
-                      of {userListResponse ? userListResponse.total : 0} results
-                    </span>
-
-                    {/* Pagination Buttons */}
-                    <div className="flex space-x-2">
-                      <button
-                        onClick={() => handlePageChange(currentPage - 1)}
-                        disabled={currentPage === 1}
-                        className={`px-3 py-1 text-sm border rounded-md ${
-                          currentPage === 1 ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "hover:bg-gray-50"
-                        }`}
-                      >
-                        Previous
-                      </button>
-                      <button
-                        onClick={() => handlePageChange(currentPage + 1)}
-                        disabled={!userListResponse || currentPage >= userListResponse.total_pages}
-                        className={`px-3 py-1 text-sm border rounded-md ${
-                          !userListResponse || currentPage >= userListResponse.total_pages
-                            ? "bg-gray-100 text-gray-400 cursor-not-allowed"
-                            : "hover:bg-gray-50"
-                        }`}
-                      >
-                        Next
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className="overflow-auto">
-              <UserDataTable
-                data={userListQuery.data?.users || []}
-                columns={tableColumns}
-                isLoading={userListQuery.isLoading}
-                accessToken={accessToken}
-                userRole={userRole}
-                onSortChange={handleSortChange}
-                currentSort={{
-                  sortBy: filters.sort_by,
-                  sortOrder: filters.sort_order,
-                }}
-                possibleUIRoles={possibleUIRoles}
-                handleEdit={(user) => {
-                  setSelectedUser(user)
-                  setEditModalVisible(true)
-                }}
-                handleDelete={handleDelete}
-                handleResetPassword={handleResetPassword}
-                enableSelection={selectionMode}
-                selectedUsers={selectedUsers}
-                onSelectionChange={handleSelectionChange}
-              />
-              </div>
-              
-            </div>
+            <UserDataTable
+              data={userListQuery.data?.users || []}
+              columns={tableColumns}
+              isLoading={userListQuery.isLoading}
+              accessToken={accessToken}
+              userRole={userRole}
+              onSortChange={handleSortChange}
+              currentSort={{
+                sortBy: filters.sort_by,
+                sortOrder: filters.sort_order,
+              }}
+              possibleUIRoles={possibleUIRoles}
+              handleEdit={(user) => {
+                setSelectedUser(user)
+                setEditModalVisible(true)
+              }}
+              handleDelete={handleDelete}
+              handleResetPassword={handleResetPassword}
+              enableSelection={selectionMode}
+              selectedUsers={selectedUsers}
+              onSelectionChange={handleSelectionChange}
+              filters={filters}
+              updateFilters={updateFilters}
+              initialFilters={initialFilters}
+              teams={teams}
+              userListResponse={userListResponse}
+              currentPage={currentPage}
+              handlePageChange={handlePageChange}
+            />
           </TabPanel>
 
           <TabPanel>