Backlog/v12 alerts filters

frontend/src/features/alerts/components/alerts-filter-bar.tsx

@@ -21,24 +21,24 @@ export function AlertsFilterBar({
   const { t } = useTranslation()
 
   const fields = useMemo<FilterFieldDef[]>(
-    () => FILTER_FIELDS.map((f) => ({ field: f.field, label: t(`alerts.fields.${fieldKey(f.field)}`) })),
+    () => FILTER_FIELDS.map((f) => ({ field: f.field, label: `alerts.fields.${fieldKey(f.field)}` })),
     [t],
   )
   const operators = useMemo<FilterOpDef[]>(
-    () => FILTER_OPS.map((o) => ({ id: o.id, label: t(`alerts.ops.${o.id}`), needsValue: o.needsValue })),
+    () => FILTER_OPS.map((o) => ({ id: o.id, label: `alerts.ops.${o.id}`, needsValue: o.needsValue })),
     [t],
   )
   const labels = useMemo(
     () => ({
-      add: t('alerts.filters.add'),
-      clearAll: t('alerts.filters.clearAll'),
-      filterValues: t('alerts.filters.filterValues'),
-      loadingValues: t('alerts.filters.loadingValues'),
-      noValues: t('alerts.filters.noValues'),
-      pickValue: t('alerts.filters.pickValue'),
-      empty: t('alerts.filters.empty'),
-      cancel: t('alerts.filters.cancel'),
-      addBtn: t('alerts.filters.addBtn'),
+      add: 'alerts.filters.add',
+      clearAll: 'alerts.filters.clearAll',
+      filterValues: 'alerts.filters.filterValues',
+      loadingValues: 'alerts.filters.loadingValues',
+      noValues: 'alerts.filters.noValues',
+      pickValue: 'alerts.filters.pickValue',
+      empty: 'alerts.filters.empty',
+      cancel: 'alerts.filters.cancel',
+      addBtn: 'alerts.filters.addBtn',
     }),
     [t],
   )

frontend/src/shared/components/filters/CustomFilterBar.tsx

@@ -62,7 +62,7 @@ export function CustomFilterBar({
                 disabled={!onUpdate}
                 className="inline-flex items-center gap-1.5 rounded hover:bg-primary/10 disabled:cursor-default disabled:hover:bg-transparent"
               >
-                <span className="text-muted-foreground">{t(fields.find((x) => x.field === f.field))?.label ?? f.label}</span>
+                <span className="text-muted-foreground">{t(fields.find((x) => x.field === f.field)?.label ?? f.label)}</span>
                 <span className="text-[11px] text-muted-foreground/70">{t(op?.label ?? f.operator)}</span>
                 {op?.needsValue && <span className="max-w-[200px] truncate font-mono font-medium">{t(f.value)}</span>}
               </button>

frontend/src/shared/components/filters/FilterEditorPanel.tsx

@@ -3,6 +3,7 @@ import { Loader2, Search } from 'lucide-react'
 import { cn } from '@/shared/lib/utils'
 import { Button } from '@/shared/components/ui/button'
 import { Input } from '@/shared/components/ui/input'
+import { useTranslation } from 'react-i18next'
 import type {
   CustomFilter,
   FilterBarLabels,
@@ -38,6 +39,9 @@ export function FilterEditorPanel({
   const [loadingValues, setLoadingValues] = useState(false)
   const [vq, setVq] = useState('')
 
+  const {t} = useTranslation()
+
+
   const op = operators.find((o) => o.id === operator)
   const needsValue = op?.needsValue ?? true
 
@@ -65,14 +69,14 @@ export function FilterEditorPanel({
         <select value={field} onChange={(e) => setField(e.target.value)} className={cn(SELECT_CLS, 'w-full')}>
           {fields.map((f) => (
             <option key={f.field} value={f.field}>
-              {f.label}
+              {t(f.label)}
             </option>
           ))}
         </select>
         <select value={operator} onChange={(e) => setOperator(e.target.value)} className={cn(SELECT_CLS, 'w-full')}>
           {operators.map((o) => (
             <option key={o.id} value={o.id}>
-              {o.label}
+              {t(o.label)}
             </option>
           ))}
         </select>
@@ -112,15 +116,15 @@ export function FilterEditorPanel({
                         <span className="truncate font-mono">{v.value || labels.empty}</span>
                         {v.count != null && (
                           <span className="shrink-0 font-mono text-[10px] text-muted-foreground">
-                            {v.count.toLocaleString()}
+                            {t(v.count.toLocaleString())}
                           </span>
                         )}
                       </button>
                     )
                   })
                 )}
               </div>
-              <p className="text-[10px] text-muted-foreground">{labels.pickValue}</p>
+              <p className="text-[10px] text-muted-foreground">{t(labels.pickValue)}</p>
             </>
           ) : (
             <>
@@ -134,21 +138,21 @@ export function FilterEditorPanel({
               />
               <div className="flex justify-end gap-2 pt-1">
                 <Button variant="outline" size="sm" onClick={onCancel}>
-                  {labels.cancel}
+                  {t(labels.cancel)}
                 </Button>
                 <Button size="sm" disabled={!freeValue} onClick={() => submit(freeValue)}>
-                  {labels.addBtn}
+                  {t(labels.addBtn)}
                 </Button>
               </div>
             </>
           )
         ) : (
           <div className="flex justify-end gap-2 pt-1">
             <Button variant="outline" size="sm" onClick={onCancel}>
-              {labels.cancel}
+              {t(labels.cancel)}
             </Button>
             <Button size="sm" onClick={() => submit('')}>
-              {labels.addBtn}
+              {t(labels.addBtn)}
             </Button>
           </div>
         )}