refactor(lookup): replace Alert components with LookupStatusBanner in LookupWizard
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 committed
1 parent
632adaa63f
commit
d14550cda1
3 files changed
+93
-28
No files matched your search
@@ -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>
|
||||
Повторная проверка обновлена. Можно посмотреть совпадения или
|
||||
начать новый запрос.
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"root":["./src/main.tsx","./src/routetree.gen.ts","./src/vite-env.d.ts","./src/components/app-switcher.tsx","./src/components/badge-tabs.tsx","./src/components/category-badge.tsx","./src/components/confirm-dialog.tsx","./src/components/counted-line-tabs.tsx","./src/components/data-grid-cell.tsx","./src/components/data-grid-shell.tsx","./src/components/data-grid-toolbar.tsx","./src/components/drawer-layout.tsx","./src/components/empty-state.tsx","./src/components/form-drawer.tsx","./src/components/kpi-stat-grid.tsx","./src/components/loading-button.tsx","./src/components/page-header.tsx","./src/components/page-shell.tsx","./src/components/panel-card.tsx","./src/components/query-state.tsx","./src/components/select-field.tsx","./src/components/skeletons.tsx","./src/components/status-badge.tsx","./src/components/theme-provider.tsx","./src/components/truncated-text.tsx","./src/components/access/access-api-keys-card.tsx","./src/components/access/access-api-keys-grid.tsx","./src/components/access/api-key-create-dialog.tsx","./src/components/access/api-key-token-dialog.tsx","./src/components/analytics/analytics-activity-list.tsx","./src/components/analytics/analytics-card-shell.tsx","./src/components/analytics/analytics-kpi-row.tsx","./src/components/analytics/analytics-progress.tsx","./src/components/analytics/analytics-segment-control.tsx","./src/components/analytics/chart-bar-strip.tsx","./src/components/analytics/chart-donut-metric.tsx","./src/components/analytics/dashboard-network-capacity-card.tsx","./src/components/analytics/dashboard-operations-flow-card.tsx","./src/components/analytics/dashboard-platform-card.tsx","./src/components/analytics/index.ts","./src/components/analytics/monitoring-health-card.tsx","./src/components/analytics/network-overview-analytics-card.tsx","./src/components/dashboard/card-dot-field.tsx","./src/components/dashboard/dashboard-activity-timeline.tsx","./src/components/dashboard/dashboard-frame-panel.tsx","./src/components/dashboard/dashboard-kpi-grid.tsx","./src/components/dashboard/dashboard-kpi-sparkline-row.tsx","./src/components/dashboard/dashboard-modules-grid.tsx","./src/components/dashboard/dashboard-network-health.tsx","./src/components/dashboard/dashboard-network-panel.tsx","./src/components/dashboard/dashboard-operations-breakdown.tsx","./src/components/dashboard/dashboard-quick-links.tsx","./src/components/dashboard/dashboard-recent-jobs-grid.tsx","./src/components/dashboard/dashboard-recent-revisions-grid.tsx","./src/components/directories/directories-communities-grid.tsx","./src/components/directories/directories-doh-grid.tsx","./src/components/examples/c-input-group-37.tsx","./src/components/examples/c-select-4.tsx","./src/components/examples/c-tabs-2.tsx","./src/components/examples/c-tabs-6.tsx","./src/components/examples/c-tabs-7.tsx","./src/components/layout/app-shell.tsx","./src/components/layout/apps-menu.tsx","./src/components/layout/command-palette.tsx","./src/components/layout/nav-user.tsx","./src/components/layout/system-monitor-popover.tsx","./src/components/lookup/lookup-add-step.tsx","./src/components/lookup/lookup-matches-grid.tsx","./src/components/lookup/lookup-search-form.tsx","./src/components/lookup/lookup-wizard.tsx","./src/components/modules/community-select.tsx","./src/components/modules/module-as-entry-dialog.tsx","./src/components/modules/module-cdn-source-dialog.tsx","./src/components/modules/module-domain-entry-dialog.tsx","./src/components/modules/module-entries-grid.tsx","./src/components/modules/module-entries-section.tsx","./src/components/modules/module-ip-range-entry-dialog.tsx","./src/components/modules/module-kpi-cards.tsx","./src/components/modules/modules-list-grid.tsx","./src/components/monitoring/monitoring-ready-grid.tsx","./src/components/network/network-discovered-peers-card.tsx","./src/components/network/network-kpi.tsx","./src/components/network/network-peers-card.tsx","./src/components/network/network-peers-grid.tsx","./src/components/network/network-speakers-card.tsx","./src/components/network/network-speakers-grid.tsx","./src/components/network/peer-form-dialog.tsx","./src/components/network/speaker-form-dialog.tsx","./src/components/operations/operations-jobs-card.tsx","./src/components/operations/operations-jobs-grid.tsx","./src/components/operations/operations-revisions-grid.tsx","./src/components/patterns/donut-breakdown-card.tsx","./src/components/patterns/illustrated-empty-state.tsx","./src/components/patterns/index.ts","./src/components/patterns/kpi-sparkline-card.tsx","./src/components/patterns/metric-tone-styles.ts","./src/components/patterns/panel-corners.tsx","./src/components/patterns/projects-empty-state.tsx","./src/components/patterns/segmented-progress-card.tsx","./src/components/reui/alert.tsx","./src/components/reui/autocomplete.tsx","./src/components/reui/badge.tsx","./src/components/reui/date-selector.tsx","./src/components/reui/filters.tsx","./src/components/reui/frame.tsx","./src/components/reui/icoLine truncated
|
||||
{"root":["./src/main.tsx","./src/routetree.gen.ts","./src/vite-env.d.ts","./src/components/app-switcher.tsx","./src/components/badge-tabs.tsx","./src/components/category-badge.tsx","./src/components/confirm-dialog.tsx","./src/components/counted-line-tabs.tsx","./src/components/data-grid-cell.tsx","./src/components/data-grid-shell.tsx","./src/components/data-grid-toolbar.tsx","./src/components/drawer-layout.tsx","./src/components/empty-state.tsx","./src/components/form-drawer.tsx","./src/components/kpi-stat-grid.tsx","./src/components/loading-button.tsx","./src/components/page-header.tsx","./src/components/page-shell.tsx","./src/components/panel-card.tsx","./src/components/query-state.tsx","./src/components/select-field.tsx","./src/components/skeletons.tsx","./src/components/status-badge.tsx","./src/components/theme-provider.tsx","./src/components/truncated-text.tsx","./src/components/access/access-api-keys-card.tsx","./src/components/access/access-api-keys-grid.tsx","./src/components/access/api-key-create-dialog.tsx","./src/components/access/api-key-token-dialog.tsx","./src/components/analytics/analytics-activity-list.tsx","./src/components/analytics/analytics-card-shell.tsx","./src/components/analytics/analytics-kpi-row.tsx","./src/components/analytics/analytics-progress.tsx","./src/components/analytics/analytics-segment-control.tsx","./src/components/analytics/chart-bar-strip.tsx","./src/components/analytics/chart-donut-metric.tsx","./src/components/analytics/dashboard-network-capacity-card.tsx","./src/components/analytics/dashboard-operations-flow-card.tsx","./src/components/analytics/dashboard-platform-card.tsx","./src/components/analytics/index.ts","./src/components/analytics/monitoring-health-card.tsx","./src/components/analytics/network-overview-analytics-card.tsx","./src/components/dashboard/card-dot-field.tsx","./src/components/dashboard/dashboard-activity-timeline.tsx","./src/components/dashboard/dashboard-frame-panel.tsx","./src/components/dashboard/dashboard-kpi-grid.tsx","./src/components/dashboard/dashboard-kpi-sparkline-row.tsx","./src/components/dashboard/dashboard-modules-grid.tsx","./src/components/dashboard/dashboard-network-health.tsx","./src/components/dashboard/dashboard-network-panel.tsx","./src/components/dashboard/dashboard-operations-breakdown.tsx","./src/components/dashboard/dashboard-quick-links.tsx","./src/components/dashboard/dashboard-recent-jobs-grid.tsx","./src/components/dashboard/dashboard-recent-revisions-grid.tsx","./src/components/directories/directories-communities-grid.tsx","./src/components/directories/directories-doh-grid.tsx","./src/components/examples/c-input-group-37.tsx","./src/components/examples/c-select-4.tsx","./src/components/examples/c-tabs-2.tsx","./src/components/examples/c-tabs-6.tsx","./src/components/examples/c-tabs-7.tsx","./src/components/layout/app-shell.tsx","./src/components/layout/apps-menu.tsx","./src/components/layout/command-palette.tsx","./src/components/layout/nav-user.tsx","./src/components/layout/system-monitor-popover.tsx","./src/components/lookup/lookup-add-step.tsx","./src/components/lookup/lookup-matches-grid.tsx","./src/components/lookup/lookup-search-form.tsx","./src/components/lookup/lookup-status-banner.tsx","./src/components/lookup/lookup-wizard.tsx","./src/components/modules/community-select.tsx","./src/components/modules/module-as-entry-dialog.tsx","./src/components/modules/module-cdn-source-dialog.tsx","./src/components/modules/module-domain-entry-dialog.tsx","./src/components/modules/module-entries-grid.tsx","./src/components/modules/module-entries-section.tsx","./src/components/modules/module-ip-range-entry-dialog.tsx","./src/components/modules/module-kpi-cards.tsx","./src/components/modules/modules-list-grid.tsx","./src/components/monitoring/monitoring-ready-grid.tsx","./src/components/network/network-discovered-peers-card.tsx","./src/components/network/network-kpi.tsx","./src/components/network/network-peers-card.tsx","./src/components/network/network-peers-grid.tsx","./src/components/network/network-speakers-card.tsx","./src/components/network/network-speakers-grid.tsx","./src/components/network/peer-form-dialog.tsx","./src/components/network/speaker-form-dialog.tsx","./src/components/operations/operations-jobs-card.tsx","./src/components/operations/operations-jobs-grid.tsx","./src/components/operations/operations-revisions-grid.tsx","./src/components/patterns/donut-breakdown-card.tsx","./src/components/patterns/illustrated-empty-state.tsx","./src/components/patterns/index.ts","./src/components/patterns/kpi-sparkline-card.tsx","./src/components/patterns/metric-tone-styles.ts","./src/components/patterns/panel-corners.tsx","./src/components/patterns/projects-empty-state.tsx","./src/components/patterns/segmented-progress-card.tsx","./src/components/reui/alert.tsx","./src/components/reui/autocomplete.tsx","./src/components/reui/badge.tsx","./src/components/reui/date-selector.tsx","./src/components/reui/filters.tsx","./src/coLine truncated
|
||||
Reference in new issue
Block a user