fix(ui): улучшить функциональность панели данных и заменить устаревшие компоненты

components/data-grids/compact-data-grid.tsx

@@ -36,7 +36,6 @@ interface CompactDataGridProps<T extends { id: string }> {
   emptyDescription?: string
   onRowClick?: (row: T) => void
   getExpandedContent?: (row: T) => ReactNode
-  compact?: boolean
 }
 
 function CompactDataGrid<T extends { id: string }>({
@@ -47,12 +46,7 @@ function CompactDataGrid<T extends { id: string }>({
   emptyDescription,
   onRowClick,
   getExpandedContent,
-  compact = false,
 }: CompactDataGridProps<T>) {
-  const pad = compact ? "py-2" : DATA_GRID_CELL_PAD
-  const padFirst = compact ? "pl-4 py-2" : DATA_GRID_CELL_PAD_FIRST
-  const padLast = compact ? "pr-4 py-2" : DATA_GRID_CELL_PAD_LAST
-
   const columnDefs = useMemo<ColumnDef<T>[]>(
     () =>
       columns.map((col, index) => ({
@@ -67,16 +61,24 @@ function CompactDataGrid<T extends { id: string }>({
           headerTitle: col.header,
           headerClassName:
             col.headerClassName ??
-            (index === 0 ? padFirst : index === columns.length - 1 ? padLast : pad),
+            (index === 0
+              ? DATA_GRID_CELL_PAD_FIRST
+              : index === columns.length - 1
+                ? DATA_GRID_CELL_PAD_LAST
+                : DATA_GRID_CELL_PAD),
           cellClassName:
             col.cellClassName ??
-            (index === 0 ? padFirst : index === columns.length - 1 ? padLast : pad),
+            (index === 0
+              ? DATA_GRID_CELL_PAD_FIRST
+              : index === columns.length - 1
+                ? DATA_GRID_CELL_PAD_LAST
+                : DATA_GRID_CELL_PAD),
           ...(getExpandedContent && index === 0
             ? { expandedContent: getExpandedContent }
             : {}),
         },
       })),
-    [columns, getExpandedContent, pad, padFirst, padLast],
+    [columns, getExpandedContent],
   )
 
   const table = useReactTable({

components/data-grids/dashboard-active-probes-data-grid.tsx

@@ -180,7 +180,6 @@ function DashboardActiveProbesDataGrid({
     <CompactDataGrid
       data={probes}
       columns={columns}
-      compact
       isLoading={isLoading}
       emptyTitle={emptyTitle}
       emptyDescription={emptyDescription}

components/data-grids/settings-access-summary-data-grid.tsx

@@ -159,7 +159,6 @@ function SettingsAccessSummaryDataGrid({
     <CompactDataGrid
       data={users}
       columns={columns}
-      compact
       emptyTitle="Нет пользователей"
     />
   )

components/data-grids/shared/data-grid-layout.ts

@@ -16,7 +16,11 @@ const DEFAULT_DATA_GRID_CLASS_NAMES: NonNullable<DataGridProps<object>["tableCla
   bodyRow: "group/row",
 }
 
-const DATA_GRID_CONTAINER_CLASS = "rounded-none border-0"
+const DATA_GRID_CONTAINER_CLASS = "w-full rounded-none border-0"
+
+const DATA_PAGE_CARD_CLASS = "flex w-full flex-col overflow-hidden py-0 gap-0"
+
+const DATA_PAGE_TOOLBAR_CLASS = "flex items-center gap-3 px-5 py-3 border-b flex-wrap"
 
 export {
   DATA_GRID_CELL_PAD,
@@ -25,4 +29,6 @@ export {
   DEFAULT_DATA_GRID_LAYOUT,
   DEFAULT_DATA_GRID_CLASS_NAMES,
   DATA_GRID_CONTAINER_CLASS,
+  DATA_PAGE_CARD_CLASS,
+  DATA_PAGE_TOOLBAR_CLASS,
 }

components/data-grids/shared/data-grid-shell.tsx

@@ -42,6 +42,7 @@ function DataGridShell<TData extends object>({
 }: DataGridShellProps<TData>) {
   return (
     <DataGrid
+      className="w-full"
       table={table}
       recordCount={recordCount}
       isLoading={isLoading}

components/data-grids/snapshot-data-grid.tsx

@@ -57,9 +57,9 @@ function SnapshotErrorCell({ error, className }: { error?: string; className?: s
 }
 
 function SnapshotDataGrid<T extends SnapshotRow>(
-  props: Omit<CompactDataGridProps<T>, "compact">,
+  props: CompactDataGridProps<T>,
 ) {
-  return <CompactDataGrid {...props} compact />
+  return <CompactDataGrid {...props} />
 }
 
 function TrafficSnapshotGrid({ servers }: { servers: TrafficServerSnapshot[] }) {