refactor(lookup): replace Alert components with LookupStatusBanner in LookupWizard
CI / changes (push) Successful in 7s
CI / commitlint (push) Skipped
CI / go (push) Skipped
CI / bird2 (push) Skipped
CI / openapi (push) Successful in 46s
CI / web (push) Successful in 1m12s
CI / release (push) Successful in 4m11s

Updated the LookupWizard component to enhance readability and maintainability by replacing Alert components with a new LookupStatusBanner component. This change simplifies the status display logic for matched and unmatched results, improving the user experience during the lookup process.
This commit is contained in:
Denozordec
2026-07-31 15:53:10 +07:00
parent 632adaa63f
commit d14550cda1
3 changed files with 93 additions and 28 deletions
@@ -0,0 +1,74 @@
import { CircleAlert, CircleCheck, ShieldAlert } from 'lucide-react'
import { Badge } from '@/components/reui/badge'
import {
Alert,
AlertDescription,
AlertTitle,
} from '@/components/reui/alert'
/**
* Lookup result status plaque — ReUI Alert + Badge.
* @see https://reui.io/docs/components/base/alert
* @see https://reui.io/preview/base/components/c-alert-6
* @see https://reui.io/docs/components/base/badge
*/
export function LookupStatusBanner({
status,
normalized,
matchCount = 0,
}: {
status: 'found' | 'missing' | 'missing_denied'
normalized: string
matchCount?: number
}) {
if (status === 'found') {
return (
<Alert variant="success" className="items-start py-3">
<CircleCheck aria-hidden />
<AlertTitle className="line-clamp-none flex flex-wrap items-center gap-2">
Найдено
<Badge variant="success-light" size="sm" radius="full">
в списках
</Badge>
</AlertTitle>
<AlertDescription>
«{normalized}» {matchCount} совп. в entries / snapshots.
</AlertDescription>
</Alert>
)
}
if (status === 'missing_denied') {
return (
<Alert variant="warning" className="items-start py-3">
<ShieldAlert aria-hidden />
<AlertTitle className="line-clamp-none flex flex-wrap items-center gap-2">
Не найдено
<Badge variant="warning-light" size="sm" radius="full">
нет прав
</Badge>
</AlertTitle>
<AlertDescription>
«{normalized}» отсутствует в списках. Для добавления нужно право{' '}
<span className="font-medium text-foreground">bgp:modules:write</span>.
</AlertDescription>
</Alert>
)
}
return (
<Alert variant="warning" className="items-start py-3">
<CircleAlert aria-hidden />
<AlertTitle className="line-clamp-none flex flex-wrap items-center gap-2">
Не найдено
<Badge variant="warning-light" size="sm" radius="full">
можно добавить
</Badge>
</AlertTitle>
<AlertDescription>
«{normalized}» отсутствует в entries и snapshots. Добавить запись в модуль?
</AlertDescription>
</Alert>
)
}
@@ -1,12 +1,13 @@
import { useEffect, useState, type ReactNode } from 'react'
import { useQuery, useQueryClient } from '@tanstack/react-query'
import { Check, Plus, Search, ShieldAlert } from 'lucide-react'
import { Check, Search } from 'lucide-react'
import { Button } from '@evobgp/ui/components/button'
import { LookupAddStep } from '@/components/lookup/lookup-add-step'
import { LookupMatchesGrid } from '@/components/lookup/lookup-matches-grid'
import { LookupSearchForm } from '@/components/lookup/lookup-search-form'
import { LookupStatusBanner } from '@/components/lookup/lookup-status-banner'
import { EmptyState } from '@/components/empty-state'
import { QueryState } from '@/components/query-state'
import {
@@ -235,14 +236,11 @@ export function LookupWizard({
{result.matched ? (
<>
<Alert variant="success">
<Check className="size-4" />
<AlertTitle>Уже есть в списках</AlertTitle>
<AlertDescription>
«{result.normalized}» найден в entries и/или snapshots
({result.match_count} совпад.).
</AlertDescription>
</Alert>
<LookupStatusBanner
status="found"
normalized={result.normalized}
matchCount={result.match_count}
/>
<LookupMatchesGrid
items={result.matches}
isLoading={lookupQ.isFetching}
@@ -259,13 +257,10 @@ export function LookupWizard({
</>
) : canWrite ? (
<>
<Alert variant="info">
<Plus className="size-4" />
<AlertTitle>Не найдено в списках</AlertTitle>
<AlertDescription>
«{result.normalized}» отсутствует. Добавить запись?
</AlertDescription>
</Alert>
<LookupStatusBanner
status="missing"
normalized={result.normalized}
/>
<WizardActions>
<Button
type="button"
@@ -281,14 +276,10 @@ export function LookupWizard({
</>
) : (
<>
<Alert variant="warning">
<ShieldAlert className="size-4" />
<AlertTitle>Не найдено</AlertTitle>
<AlertDescription>
«{result.normalized}» отсутствует в списках. У вас нет
права добавлять записи (нужно bgp:modules:write).
</AlertDescription>
</Alert>
<LookupStatusBanner
status="missing_denied"
normalized={result.normalized}
/>
<WizardActions>
<Button
type="button"
@@ -330,9 +321,9 @@ export function LookupWizard({
<StepperContent value={STEP_DONE}>
<div className="flex flex-col gap-4 md:gap-6">
<Alert variant="success">
<Check className="size-4" />
<AlertTitle>Запись добавлена</AlertTitle>
<Alert variant="success" className="items-start py-3">
<Check aria-hidden />
<AlertTitle className="line-clamp-none">Запись добавлена</AlertTitle>
<AlertDescription>
Повторная проверка обновлена. Можно посмотреть совпадения или
начать новый запрос.
File diff suppressed because one or more lines are too long