From 0af37d55c4ff0f6e95f0ab5c17a113287b0e7286 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Fri, 3 Jul 2026 14:43:46 +0700
Subject: [PATCH] fix(pagination): enhance DataGridPagination to dynamically
 populate Select items

Updated the DataGridPagination component to map available sizes into Select items for better user experience. This change allows for dynamic selection of page sizes based on the provided props.
---
 .../reui/data-grid/data-grid-pagination.tsx        |  4 ++++
 apps/web/src/routes/_auth/operations.tsx           | 14 +++++++++++---
 apps/web/src/routes/_auth/settings.tsx             | 12 +++++++++++-
 apps/web/src/routes/_auth/tenant-settings.tsx      | 12 ++++++++++++
 packages/ui/src/components/select.tsx              |  4 ++++
 5 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/reui/data-grid/data-grid-pagination.tsx b/apps/web/src/components/reui/data-grid/data-grid-pagination.tsx
index 1c52421..7fb3555 100644
--- a/apps/web/src/components/reui/data-grid/data-grid-pagination.tsx
+++ b/apps/web/src/components/reui/data-grid/data-grid-pagination.tsx
@@ -153,6 +153,10 @@ function DataGridPagination(props: DataGridPaginationProps): React.JSX.Element {
               {mergedProps.rowsPerPageLabel}
             </div>
             <Select
+              items={mergedProps?.sizes?.map((size: number) => ({
+                value: `${size}`,
+                label: `${size}`,
+              }))}
               value={`${pageSize}`}
               onValueChange={(value) => {
                 const newPageSize = Number(value)
diff --git a/apps/web/src/routes/_auth/operations.tsx b/apps/web/src/routes/_auth/operations.tsx
index 2a5a38d..855b820 100644
--- a/apps/web/src/routes/_auth/operations.tsx
+++ b/apps/web/src/routes/_auth/operations.tsx
@@ -2,7 +2,7 @@ import { createFileRoute, useSearch } from '@tanstack/react-router'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { AlertTriangle, Clock, Activity, Info, RefreshCw } from 'lucide-react'
 import { toast } from 'sonner'
-import { useState } from 'react'
+import { useState, useMemo } from 'react'
 
 import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
 import { Button } from '@evobgp/ui/components/button'
@@ -368,6 +368,14 @@ function DiffTab({ revisions }: { revisions: import('@/types/api').RevisionRow[]
   const [a, setA] = useState('')
   const [b, setB] = useState('')
   const diffQ = useQuery(operationsDiffQueryOptions(a, b))
+  const revisionItems = useMemo(
+    () =>
+      revisions.map((r) => ({
+        value: r.id,
+        label: `${r.id.slice(0, 12)}…`,
+      })),
+    [revisions],
+  )
 
   return (
     <Card>
@@ -378,7 +386,7 @@ function DiffTab({ revisions }: { revisions: import('@/types/api').RevisionRow[]
         <div className="flex flex-wrap items-end gap-3">
           <div className="flex w-full max-w-xs flex-col gap-1">
             <span className="text-xs text-muted-foreground">Ревизия A</span>
-            <Select value={a} onValueChange={(v) => v && setA(v)}>
+            <Select items={revisionItems} value={a} onValueChange={(v) => v && setA(v)}>
               <SelectTrigger>
                 <SelectValue placeholder="Выберите" />
               </SelectTrigger>
@@ -393,7 +401,7 @@ function DiffTab({ revisions }: { revisions: import('@/types/api').RevisionRow[]
           </div>
           <div className="flex w-full max-w-xs flex-col gap-1">
             <span className="text-xs text-muted-foreground">Ревизия B</span>
-            <Select value={b} onValueChange={(v) => v && setB(v)}>
+            <Select items={revisionItems} value={b} onValueChange={(v) => v && setB(v)}>
               <SelectTrigger>
                 <SelectValue placeholder="Выберите" />
               </SelectTrigger>
diff --git a/apps/web/src/routes/_auth/settings.tsx b/apps/web/src/routes/_auth/settings.tsx
index db75cb5..50c5182 100644
--- a/apps/web/src/routes/_auth/settings.tsx
+++ b/apps/web/src/routes/_auth/settings.tsx
@@ -25,6 +25,12 @@ export const Route = createFileRoute('/_auth/settings')({
   component: SettingsComponent,
 })
 
+const THEME_SELECT_ITEMS = [
+  { value: 'light', label: 'Светлая' },
+  { value: 'dark', label: 'Тёмная' },
+  { value: 'system', label: 'Как в системе' },
+] as const
+
 function SettingsComponent() {
   const { data: session } = useQuery(authSessionQueryOptions())
   const { theme, setTheme } = useTheme()
@@ -90,7 +96,11 @@ function SettingsComponent() {
         </CardHeader>
         <CardContent className="flex flex-col gap-2">
           <Label htmlFor="theme-select">Тема</Label>
-          <Select value={theme ?? 'system'} onValueChange={(v) => v && setTheme(v)}>
+          <Select
+            items={[...THEME_SELECT_ITEMS]}
+            value={theme ?? 'system'}
+            onValueChange={(v) => v && setTheme(v)}
+          >
             <SelectTrigger id="theme-select" className="w-full max-w-xs">
               <SelectValue placeholder="Выберите тему" />
             </SelectTrigger>
diff --git a/apps/web/src/routes/_auth/tenant-settings.tsx b/apps/web/src/routes/_auth/tenant-settings.tsx
index 95c187b..9265cda 100644
--- a/apps/web/src/routes/_auth/tenant-settings.tsx
+++ b/apps/web/src/routes/_auth/tenant-settings.tsx
@@ -49,6 +49,16 @@ export const Route = createFileRoute('/_auth/tenant-settings')({
   }),
 })
 
+const RUNTIME_LOGS_ENABLED_ITEMS = [
+  { value: 'true', label: 'Вкл' },
+  { value: 'false', label: 'Выкл' },
+] as const
+
+const RUNTIME_LOGS_MODE_ITEMS = [
+  { value: 'truncate', label: 'truncate — обнулить' },
+  { value: 'delete', label: 'delete — удалить файл' },
+] as const
+
 const BIRD_LABELS: Record<BirdSettingKey, string> = {
   bird_router_id: 'Router ID',
   bird_local_ipv4: 'Локальный IPv4',
@@ -242,6 +252,7 @@ function TenantSettingsComponent() {
                     <div className="flex flex-col gap-1.5">
                       <Label>Авто-очистка включена</Label>
                       <Select
+                        items={[...RUNTIME_LOGS_ENABLED_ITEMS]}
                         value={runtimeLogsForm.runtime_logs_auto_enabled ?? 'false'}
                         onValueChange={(v) =>
                           v &&
@@ -299,6 +310,7 @@ function TenantSettingsComponent() {
                     <div className="flex flex-col gap-1.5">
                       <Label>Режим очистки</Label>
                       <Select
+                        items={[...RUNTIME_LOGS_MODE_ITEMS]}
                         value={runtimeLogsForm.runtime_logs_auto_mode ?? ''}
                         onValueChange={(v) =>
                           v &&
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index a80f95a..2ccc7fb 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -111,11 +111,15 @@ function SelectLabel({
 function SelectItem({
   className,
   children,
+  label,
   ...props
 }: SelectPrimitive.Item.Props) {
+  const resolvedLabel = label ?? (typeof children === "string" ? children : undefined)
+
   return (
     <SelectPrimitive.Item
       data-slot="select-item"
+      label={resolvedLabel}
       className={cn(
         "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className