Delete assets/js/dashboard/stats/modals/breakdown-table.tsx with huggingface_hub

assets/js/dashboard/stats/modals/breakdown-table.tsx

@@ -1,139 +0,0 @@
-import React, { ReactNode, useRef } from 'react'
-import { XMarkIcon } from '@heroicons/react/20/solid'
-
-import { SearchInput } from '../../components/search-input'
-import { Table } from '../../components/table'
-import { ColumnConfiguration } from '../breakdowns'
-import RocketIcon from './rocket-icon'
-import { QueryStatus } from '@tanstack/react-query'
-import { useAppNavigate } from '../../navigation/use-app-navigate'
-import { rootRoute } from '../../router'
-
-export function BreakdownTable<T>({
-  title,
-  isPending,
-  isFetching,
-  onSearch,
-  hasNextPage,
-  isFetchingNextPage,
-  fetchNextPage,
-  columns,
-  data,
-  status,
-  error,
-  displayError = true,
-  onClose,
-  getRowKey
-}: {
-  title: ReactNode
-  onSearch?: (input: string) => void
-  isPending: boolean
-  isFetching: boolean
-  hasNextPage: boolean
-  isFetchingNextPage: boolean
-  fetchNextPage: () => void
-  columns: ColumnConfiguration<T>[] | null
-  data?: { pages: T[][] }
-  status?: QueryStatus
-  error?: Error | null
-  /** Controls whether the component displays API request errors or ignores them. */
-  displayError?: boolean
-  onClose?: () => void
-  getRowKey: (row: T) => string
-}) {
-  const searchRef = useRef<HTMLInputElement>(null)
-  const navigate = useAppNavigate()
-  const handleClose =
-    onClose ?? (() => navigate({ path: rootRoute.path, search: (s) => s }))
-
-  return (
-    <div className="min-h-[min(30rem,66vh)] flex flex-col flex-1 overflow-auto">
-      <div className="flex justify-between items-center gap-4">
-        <div className="flex items-center gap-4 w-full">
-          <h1 className="shrink-0 mb-0.5 text-base md:text-lg font-bold dark:text-gray-100">
-            {title}
-          </h1>
-          {typeof onSearch === 'function' && (
-            <SearchInput
-              searchRef={searchRef}
-              onSearch={onSearch}
-              className={
-                displayError && status === 'error'
-                  ? '[&_input]:pointer-events-none'
-                  : ''
-              }
-            />
-          )}
-          {!isPending && isFetching && <SmallLoadingSpinner />}
-        </div>
-        <button
-          type="button"
-          onClick={handleClose}
-          aria-label="Close modal"
-          className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
-        >
-          <XMarkIcon className="size-5" />
-        </button>
-      </div>
-      <div className="my-3 md:my-4 border-b border-gray-250 dark:border-gray-750"></div>
-      <div className="flex-1 overflow-auto">
-        {displayError && status === 'error' && <ErrorMessage error={error} />}
-        {isPending && <InitialLoadingSpinner />}
-        {columns && data && (
-          <Table data={data} columns={columns} getRowKey={getRowKey} />
-        )}
-        {!isPending && !isFetching && hasNextPage && (
-          <LoadMore
-            onClick={() => fetchNextPage()}
-            isFetchingNextPage={isFetchingNextPage}
-          />
-        )}
-      </div>
-    </div>
-  )
-}
-
-const InitialLoadingSpinner = () => (
-  <div className="w-full h-full flex flex-col justify-center">
-    <div className="mx-auto loading">
-      <div />
-    </div>
-  </div>
-)
-
-const SmallLoadingSpinner = () => (
-  <div data-testid="small-loading-spinner" className="loading sm">
-    <div />
-  </div>
-)
-
-const ErrorMessage = ({ error }: { error?: unknown }) => (
-  <div className="grid grid-rows-2 text-gray-700 dark:text-gray-300">
-    <div className="text-center self-end">
-      <RocketIcon />
-    </div>
-    <div className="text-lg text-center">
-      {error
-        ? (error as { message: string }).message
-        : 'Error loading data. Refresh the page to try again'}
-    </div>
-  </div>
-)
-
-const LoadMore = ({
-  onClick,
-  isFetchingNextPage
-}: {
-  onClick: () => void
-  isFetchingNextPage: boolean
-}) => (
-  <div className="flex flex-col w-full my-4 items-center justify-center h-10">
-    {isFetchingNextPage ? (
-      <SmallLoadingSpinner />
-    ) : (
-      <button onClick={onClick} type="button" className="button">
-        Load more
-      </button>
-    )}
-  </div>
-)