Backlog/v12 user auditor

frontend/src/features/adversaries/pages/AdversariesPage.tsx

@@ -28,7 +28,7 @@ export function AdversariesPage() {
   const { data, loading, error, refresh } = useAdversaries(filters)
 
   return (
-    <div className="mx-auto flex h-[calc(100vh-56px)] w-full max-w-[1400px] flex-col px-6 pb-6 pt-3">
+    <div className="flex h-[calc(100vh-56px)] w-full  flex-col px-6 pb-6 pt-3">
       <header className="flex flex-wrap items-center justify-between gap-3">
         <div className="flex items-center gap-2 text-xs text-muted-foreground">
           <ShieldAlert size={14} strokeWidth={1.75} />
@@ -53,6 +53,7 @@ export function AdversariesPage() {
         <AlertsFilterBar
           filters={customFilters}
           onAdd={(f) => setCustomFilters((c) => [...c, f])}
+          onUpdate={(i, f) => setCustomFilters((c) => c.map((x, idx) => (idx === i ? f : x)))}
           onRemove={(i) => setCustomFilters((c) => c.filter((_, idx) => idx !== i))}
           onClear={() => setCustomFilters([])}
         />

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

@@ -1,51 +1,59 @@
-import { X } from 'lucide-react'
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { FILTER_OPS, fieldKey } from '../lib/alert-meta'
-import type { CustomFilter } from '../types/alert.types'
-import { AddFilterButton } from './add-filter-button'
+import { CustomFilterBar } from '@/shared/components/filters/CustomFilterBar'
+import type { CustomFilter, FilterFieldDef, FilterOpDef } from '@/shared/components/filters/custom-filter.types'
+import { alertsHttpService } from '../services/alerts-http.service'
+import { FILTER_FIELDS, FILTER_OPS, fieldKey } from '../lib/alert-meta'
 
 export function AlertsFilterBar({
   filters,
   onAdd,
+  onUpdate,
   onRemove,
   onClear,
 }: {
   filters: CustomFilter[]
   onAdd: (f: CustomFilter) => void
+  onUpdate?: (i: number, f: CustomFilter) => void
   onRemove: (i: number) => void
   onClear: () => void
 }) {
   const { t } = useTranslation()
+
+  const fields = useMemo<FilterFieldDef[]>(
+    () => FILTER_FIELDS.map((f) => ({ field: f.field, label: t(`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 })),
+    [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'),
+    }),
+    [t],
+  )
+
   return (
-    <div className="flex flex-wrap items-center gap-1.5">
-      {filters.map((f, i) => {
-        const op = FILTER_OPS.find((o) => o.id === f.operator)
-        return (
-          <span
-            key={i}
-            className="inline-flex items-center gap-1.5 rounded-full border border-primary/25 bg-primary/5 py-1 pl-3 pr-1.5 text-xs"
-          >
-            <span className="text-muted-foreground">{t(`alerts.fields.${fieldKey(f.field)}`)}</span>
-            <span className="text-[11px] text-muted-foreground/70">{op ? t(`alerts.ops.${op.id}`) : f.operator}</span>
-            {op?.needsValue && <span className="max-w-[200px] truncate font-mono font-medium">{f.value}</span>}
-            <button
-              onClick={() => onRemove(i)}
-              className="flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground hover:bg-foreground/10 hover:text-foreground"
-            >
-              <X size={12} />
-            </button>
-          </span>
-        )
-      })}
-      <AddFilterButton onAdd={onAdd} />
-      {filters.length > 1 && (
-        <button
-          onClick={onClear}
-          className="px-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground hover:underline"
-        >
-          {t('alerts.filters.clearAll')}
-        </button>
-      )}
-    </div>
+    <CustomFilterBar
+      filters={filters}
+      onAdd={onAdd}
+      onUpdate={onUpdate}
+      onRemove={onRemove}
+      onClear={onClear}
+      fields={fields}
+      operators={operators}
+      fetchValues={(field) => alertsHttpService.fieldValues(field)}
+      labels={labels}
+    />
   )
 }

frontend/src/features/alerts/pages/AlertsPage.tsx

@@ -248,6 +248,7 @@ export function AlertsPage() {
     })
 
   const addFilter = (cf: CustomFilter) => { setCustomFilters((c) => [...c, cf]); setPage(0) }
+  const updateFilter = (i: number, cf: CustomFilter) => { setCustomFilters((c) => c.map((f, idx) => (idx === i ? cf : f))); setPage(0) }
   const removeFilter = (i: number) => { setCustomFilters((c) => c.filter((_, idx) => idx !== i)); setPage(0) }
 
   // Register a new tag in the catalog, then apply it to the given alerts.
@@ -286,6 +287,7 @@ export function AlertsPage() {
         <AlertsFilterBar
           filters={customFilters}
           onAdd={addFilter}
+          onUpdate={updateFilter}
           onRemove={removeFilter}
           onClear={() => { setCustomFilters([]); setPage(0) }}
         />

frontend/src/features/alerts/types/alert.types.ts

@@ -128,9 +128,4 @@ export const STATUS_TABS = ['all', 'open', 'in_review', 'completed', 'auto'] as
 export type StatusTab = (typeof STATUS_TABS)[number]
 
 /** A user-defined filter row in the page filter bar. */
-export interface CustomFilter {
-  field: string
-  label: string
-  operator: string
-  value: string
-}
+export type { CustomFilter } from '@/shared/components/filters/custom-filter.types'