Compare commits

...
1 Commits
Author SHA1 Message Date
Denozordec d14550cda1 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.
2026-07-31 15:53:10 +07:00
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 { useEffect, useState, type ReactNode } from 'react'
import { useQuery, useQueryClient } from '@tanstack/react-query' 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 { Button } from '@evobgp/ui/components/button'
import { LookupAddStep } from '@/components/lookup/lookup-add-step' import { LookupAddStep } from '@/components/lookup/lookup-add-step'
import { LookupMatchesGrid } from '@/components/lookup/lookup-matches-grid' import { LookupMatchesGrid } from '@/components/lookup/lookup-matches-grid'
import { LookupSearchForm } from '@/components/lookup/lookup-search-form' import { LookupSearchForm } from '@/components/lookup/lookup-search-form'
import { LookupStatusBanner } from '@/components/lookup/lookup-status-banner'
import { EmptyState } from '@/components/empty-state' import { EmptyState } from '@/components/empty-state'
import { QueryState } from '@/components/query-state' import { QueryState } from '@/components/query-state'
import { import {
@@ -235,14 +236,11 @@ export function LookupWizard({
{result.matched ? ( {result.matched ? (
<> <>
<Alert variant="success"> <LookupStatusBanner
<Check className="size-4" /> status="found"
<AlertTitle>Уже есть в списках</AlertTitle> normalized={result.normalized}
<AlertDescription> matchCount={result.match_count}
«{result.normalized}» найден в entries и/или snapshots />
({result.match_count} совпад.).
</AlertDescription>
</Alert>
<LookupMatchesGrid <LookupMatchesGrid
items={result.matches} items={result.matches}
isLoading={lookupQ.isFetching} isLoading={lookupQ.isFetching}
@@ -259,13 +257,10 @@ export function LookupWizard({
</> </>
) : canWrite ? ( ) : canWrite ? (
<> <>
<Alert variant="info"> <LookupStatusBanner
<Plus className="size-4" /> status="missing"
<AlertTitle>Не найдено в списках</AlertTitle> normalized={result.normalized}
<AlertDescription> />
«{result.normalized}» отсутствует. Добавить запись?
</AlertDescription>
</Alert>
<WizardActions> <WizardActions>
<Button <Button
type="button" type="button"
@@ -281,14 +276,10 @@ export function LookupWizard({
</> </>
) : ( ) : (
<> <>
<Alert variant="warning"> <LookupStatusBanner
<ShieldAlert className="size-4" /> status="missing_denied"
<AlertTitle>Не найдено</AlertTitle> normalized={result.normalized}
<AlertDescription> />
«{result.normalized}» отсутствует в списках. У вас нет
права добавлять записи (нужно bgp:modules:write).
</AlertDescription>
</Alert>
<WizardActions> <WizardActions>
<Button <Button
type="button" type="button"
@@ -330,9 +321,9 @@ export function LookupWizard({
<StepperContent value={STEP_DONE}> <StepperContent value={STEP_DONE}>
<div className="flex flex-col gap-4 md:gap-6"> <div className="flex flex-col gap-4 md:gap-6">
<Alert variant="success"> <Alert variant="success" className="items-start py-3">
<Check className="size-4" /> <Check aria-hidden />
<AlertTitle>Запись добавлена</AlertTitle> <AlertTitle className="line-clamp-none">Запись добавлена</AlertTitle>
<AlertDescription> <AlertDescription>
Повторная проверка обновлена. Можно посмотреть совпадения или Повторная проверка обновлена. Можно посмотреть совпадения или
начать новый запрос. начать новый запрос.
File diff suppressed because one or more lines are too long