projekte/edgeguard-native
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(rbac): Viewer-Rolle auf alle Firewall-CRUD-Seiten durchsetzen — v1.1.91

Browse Source 
AddressObjects, AddressGroups, Services, ServiceGroups, Rules, NATRules, Zones:
Add/Edit-Buttons disabled + Tooltip, Delete bedingt gerendert (viewer vs. Popconfirm).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Debian
2026-05-24 13:20:54 +02:00
parent 8b0e8a8ab4
commit d4267e2003
11 changed files with 215 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
management-ui/src/pages/Firewall/AddressGroups.tsx
View File

@@ -1,5 +1,5 @@
import { useState } from 'react'
import { Button, Form, Input, Modal, Popconfirm, Select, Space, Tag, message } from 'antd'
import { Button, Form, Input, Modal, Popconfirm, Select, Space, Tag, Tooltip, message } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
@@ -9,6 +9,7 @@ import DataTable from '../../components/DataTable'
import EmptyState from '../../components/EmptyState'
import apiClient, { isEnvelope } from '../../api/client'
import { useAuthStore } from '../../stores/auth'
import type { AddressGroup, AddressObject } from './types'
interface FormValues {
@@ -31,6 +32,7 @@ async function listObjects(): Promise<AddressObject[]> {
export default function AddressGroupsTab() {
const { t } = useTranslation()
const qc = useQueryClient()
const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
const { data: groups, isLoading } = useQuery({ queryKey: ['fw', 'addr-grp'], queryFn: listGroups })
const { data: objects } = useQuery({ queryKey: ['fw', 'addr-obj'], queryFn: listObjects })
@@ -75,13 +77,21 @@ export default function AddressGroupsTab() {
title: t('common.edit'), key: 'actions',
render: (_, row) => (
<Space>
<Button size="small" onClick={() => {
setEditing(row)
form.setFieldsValue({ name: row.name, description: row.description ?? undefined, member_ids: row.member_ids ?? [] })
}}>{t('common.edit')}</Button>
<Popconfirm title={t('fw.ag.deleteConfirm', { name: row.name })} onConfirm={() => del.mutate(row.id)}>
<Button size="small" danger>{t('common.delete')}</Button>
</Popconfirm>
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
<Button size="small" disabled={isViewer} onClick={() => {
setEditing(row)
form.setFieldsValue({ name: row.name, description: row.description ?? undefined, member_ids: row.member_ids ?? [] })
}}>{t('common.edit')}</Button>
</Tooltip>
{isViewer ? (
<Tooltip title={t('auth.viewerBadge')}>
<Button size="small" danger disabled>{t('common.delete')}</Button>
</Tooltip>
) : (
<Popconfirm title={t('fw.ag.deleteConfirm', { name: row.name })} onConfirm={() => del.mutate(row.id)}>
<Button size="small" danger>{t('common.delete')}</Button>
</Popconfirm>
)}
</Space>
),
},
@@ -94,9 +104,11 @@ export default function AddressGroupsTab() {
return (
<>
<Button type="primary" className="mb-16" onClick={openCreate}>
{t('fw.ag.add')}
</Button>
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
<Button type="primary" className="mb-16" disabled={isViewer} onClick={openCreate}>
{t('fw.ag.add')}
</Button>
</Tooltip>
<DataTable
rowKey="id"
loading={isLoading}
@@ -107,7 +119,11 @@ export default function AddressGroupsTab() {
icon={<GroupOutlined />}
title={t('fw.ag.emptyTitle')}
description={t('fw.ag.emptyDesc')}
action={<Button type="primary" onClick={openCreate}>{t('fw.ag.add')}</Button>}
action={
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
<Button type="primary" disabled={isViewer} onClick={openCreate}>{t('fw.ag.add')}</Button>
</Tooltip>
}
/>
}
/>

38
management-ui/src/pages/Firewall/AddressObjects.tsx
View File

@@ -1,5 +1,5 @@
import { useState } from 'react'
import { Button, Form, Input, Modal, Popconfirm, Select, Space, Tag, message } from 'antd'
import { Button, Form, Input, Modal, Popconfirm, Select, Space, Tag, Tooltip, message } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
@@ -9,6 +9,7 @@ import DataTable from '../../components/DataTable'
import EmptyState from '../../components/EmptyState'
import apiClient, { isEnvelope } from '../../api/client'
import { useAuthStore } from '../../stores/auth'
import type { AddressObject } from './types'
interface FormValues {
@@ -34,6 +35,7 @@ const KIND_PLACEHOLDER: Record<AddressObject['kind'], string> = {
export default function AddressObjectsTab() {
const { t } = useTranslation()
const qc = useQueryClient()
const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
const { data, isLoading } = useQuery({ queryKey: ['fw', 'addr-obj'], queryFn: listAO })
const [editing, setEditing] = useState<AddressObject | null>(null)
@@ -68,13 +70,21 @@ export default function AddressObjectsTab() {
title: t('common.edit'), key: 'actions',
render: (_, row) => (
<Space>
<Button size="small" onClick={() => {
setEditing(row)
form.setFieldsValue({ name: row.name, kind: row.kind, value: row.value, description: row.description ?? undefined })
}}>{t('common.edit')}</Button>
<Popconfirm title={t('fw.ao.deleteConfirm', { name: row.name })} onConfirm={() => del.mutate(row.id)}>
<Button size="small" danger>{t('common.delete')}</Button>
</Popconfirm>
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
<Button size="small" disabled={isViewer} onClick={() => {
setEditing(row)
form.setFieldsValue({ name: row.name, kind: row.kind, value: row.value, description: row.description ?? undefined })
}}>{t('common.edit')}</Button>
</Tooltip>
{isViewer ? (
<Tooltip title={t('auth.viewerBadge')}>
<Button size="small" danger disabled>{t('common.delete')}</Button>
</Tooltip>
) : (
<Popconfirm title={t('fw.ao.deleteConfirm', { name: row.name })} onConfirm={() => del.mutate(row.id)}>
<Button size="small" danger>{t('common.delete')}</Button>
</Popconfirm>
)}
</Space>
),
},
@@ -87,9 +97,11 @@ export default function AddressObjectsTab() {
return (
<>
<Button type="primary" className="mb-16" onClick={openCreate}>
{t('fw.ao.add')}
</Button>
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
<Button type="primary" className="mb-16" disabled={isViewer} onClick={openCreate}>
{t('fw.ao.add')}
</Button>
</Tooltip>
<DataTable
rowKey="id"
loading={isLoading}
@@ -101,7 +113,9 @@ export default function AddressObjectsTab() {
title={t('fw.ao.emptyTitle')}
description={t('fw.ao.emptyDesc')}
action={
<Button type="primary" onClick={openCreate}>{t('fw.ao.add')}</Button>
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
<Button type="primary" disabled={isViewer} onClick={openCreate}>{t('fw.ao.add')}</Button>
</Tooltip>
}
/>
}

67
management-ui/src/pages/Firewall/NATRules.tsx
View File

@@ -1,5 +1,5 @@
import { useState } from 'react'
import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Tag, message } from 'antd'
import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Tag, Tooltip, message } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
@@ -9,6 +9,7 @@ import DataTable from '../../components/DataTable'
import EmptyState from '../../components/EmptyState'
import apiClient, { isEnvelope } from '../../api/client'
import { useAuthStore } from '../../stores/auth'
import type { FwZone, NATRule } from './types'
interface FormValues {
@@ -49,6 +50,7 @@ const KIND_COLORS: Record<NATRule['kind'], string> = {
export default function NATRulesTab() {
const { t } = useTranslation()
const qc = useQueryClient()
const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
const { data, isLoading } = useQuery({ queryKey: ['fw', 'nat'], queryFn: listNAT })
const { data: zones } = useQuery({ queryKey: ['fw', 'zones'], queryFn: listZones })
@@ -121,6 +123,7 @@ export default function NATRulesTab() {
<Switch
size="small"
checked={v}
disabled={isViewer}
loading={quickToggle.isPending && quickToggle.variables?.id === row.id}
onChange={(checked) => quickToggle.mutate({ id: row.id, row, checked })}
/>
@@ -130,26 +133,34 @@ export default function NATRulesTab() {
title: t('common.edit'), key: 'actions',
render: (_, row) => (
<Space>
<Button size="small" onClick={() => {
setEditing(row)
form.setFieldsValue({
name: row.name ?? undefined,
priority: row.priority, enabled: row.enabled, kind: row.kind,
in_zone: row.in_zone ?? undefined, out_zone: row.out_zone ?? undefined,
proto: row.proto ?? undefined,
match_src_cidr: row.match_src_cidr ?? undefined,
match_dst_cidr: row.match_dst_cidr ?? undefined,
match_dport_start: row.match_dport_start ?? undefined,
match_dport_end: row.match_dport_end ?? undefined,
target_addr: row.target_addr ?? undefined,
target_port_start: row.target_port_start ?? undefined,
target_port_end: row.target_port_end ?? undefined,
comment: row.comment ?? undefined,
})
}}>{t('common.edit')}</Button>
<Popconfirm title={t('fw.nat.deleteConfirm')} onConfirm={() => del.mutate(row.id)}>
<Button size="small" danger>{t('common.delete')}</Button>
</Popconfirm>
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
<Button size="small" disabled={isViewer} onClick={() => {
setEditing(row)
form.setFieldsValue({
name: row.name ?? undefined,
priority: row.priority, enabled: row.enabled, kind: row.kind,
in_zone: row.in_zone ?? undefined, out_zone: row.out_zone ?? undefined,
proto: row.proto ?? undefined,
match_src_cidr: row.match_src_cidr ?? undefined,
match_dst_cidr: row.match_dst_cidr ?? undefined,
match_dport_start: row.match_dport_start ?? undefined,
match_dport_end: row.match_dport_end ?? undefined,
target_addr: row.target_addr ?? undefined,
target_port_start: row.target_port_start ?? undefined,
target_port_end: row.target_port_end ?? undefined,
comment: row.comment ?? undefined,
})
}}>{t('common.edit')}</Button>
</Tooltip>
{isViewer ? (
<Tooltip title={t('auth.viewerBadge')}>
<Button size="small" danger disabled>{t('common.delete')}</Button>
</Tooltip>
) : (
<Popconfirm title={t('fw.nat.deleteConfirm')} onConfirm={() => del.mutate(row.id)}>
<Button size="small" danger>{t('common.delete')}</Button>
</Popconfirm>
)}
</Space>
),
},
@@ -162,9 +173,11 @@ export default function NATRulesTab() {
return (
<>
<Button type="primary" className="mb-16" onClick={openCreate}>
{t('fw.nat.add')}
</Button>
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
<Button type="primary" className="mb-16" disabled={isViewer} onClick={openCreate}>
{t('fw.nat.add')}
</Button>
</Tooltip>
<DataTable
rowKey="id"
loading={isLoading}
@@ -175,7 +188,11 @@ export default function NATRulesTab() {
icon={<BranchesOutlined />}
title={t('fw.nat.emptyTitle')}
description={t('fw.nat.emptyDesc')}
action={<Button type="primary" onClick={openCreate}>{t('fw.nat.add')}</Button>}
action={
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
<Button type="primary" disabled={isViewer} onClick={openCreate}>{t('fw.nat.add')}</Button>
</Tooltip>
}
/>
}
/>

33
management-ui/src/pages/Firewall/Rules.tsx
View File

@@ -11,6 +11,7 @@ import DataTable from '../../components/DataTable'
import EmptyState from '../../components/EmptyState'
import apiClient, { isEnvelope } from '../../api/client'
import { useAuthStore } from '../../stores/auth'
import type { AddressGroup, AddressObject, FwRule, FwService, FwZone, ServiceGroup, Zone } from './types'
import { ZONES_FALLBACK } from './types'
@@ -112,6 +113,7 @@ function buildPayload(v: FormValues) {
export default function RulesTab() {
const { t } = useTranslation()
const qc = useQueryClient()
const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
const { data: rules, isLoading } = useQuery({ queryKey: ['fw', 'rules'], queryFn: listRules })
const { data: aos } = useQuery({ queryKey: ['fw', 'addr-obj'], queryFn: listAO })
const { data: ags } = useQuery({ queryKey: ['fw', 'addr-grp'], queryFn: listAG })
@@ -225,6 +227,7 @@ export default function RulesTab() {
<Switch
size="small"
checked={v}
disabled={isViewer}
loading={quickToggle.isPending && quickToggle.variables?.id === row.id}
onChange={(checked) => quickToggle.mutate({ id: row.id, row, checked })}
/>
@@ -247,10 +250,18 @@ export default function RulesTab() {
title: t('common.edit'), key: 'actions',
render: (_, row) => (
<Space>
<Button size="small" onClick={() => editFromRow(row)}>{t('common.edit')}</Button>
<Popconfirm title={t('fw.rule.deleteConfirm')} onConfirm={() => del.mutate(row.id)}>
<Button size="small" danger>{t('common.delete')}</Button>
</Popconfirm>
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
<Button size="small" disabled={isViewer} onClick={() => editFromRow(row)}>{t('common.edit')}</Button>
</Tooltip>
{isViewer ? (
<Tooltip title={t('auth.viewerBadge')}>
<Button size="small" danger disabled>{t('common.delete')}</Button>
</Tooltip>
) : (
<Popconfirm title={t('fw.rule.deleteConfirm')} onConfirm={() => del.mutate(row.id)}>
<Button size="small" danger>{t('common.delete')}</Button>
</Popconfirm>
)}
</Space>
),
},
@@ -267,9 +278,11 @@ export default function RulesTab() {
return (
<>
<Button type="primary" className="mb-16" onClick={openCreate}>
{t('fw.rule.add')}
</Button>
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
<Button type="primary" className="mb-16" disabled={isViewer} onClick={openCreate}>
{t('fw.rule.add')}
</Button>
</Tooltip>
<DataTable
rowKey="id"
loading={isLoading}
@@ -280,7 +293,11 @@ export default function RulesTab() {
icon={<FireOutlined />}
title={t('fw.rule.emptyTitle')}
description={t('fw.rule.emptyDesc')}
action={<Button type="primary" onClick={openCreate}>{t('fw.rule.add')}</Button>}
action={
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
<Button type="primary" disabled={isViewer} onClick={openCreate}>{t('fw.rule.add')}</Button>
</Tooltip>
}
/>
}
/>

40
management-ui/src/pages/Firewall/ServiceGroups.tsx
View File

@@ -1,5 +1,5 @@
import { useState } from 'react'
import { Button, Form, Input, Modal, Popconfirm, Select, Space, Tag, message } from 'antd'
import { Button, Form, Input, Modal, Popconfirm, Select, Space, Tag, Tooltip, message } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
@@ -9,6 +9,7 @@ import DataTable from '../../components/DataTable'
import EmptyState from '../../components/EmptyState'
import apiClient, { isEnvelope } from '../../api/client'
import { useAuthStore } from '../../stores/auth'
import type { FwService, ServiceGroup } from './types'
interface FormValues {
@@ -31,6 +32,7 @@ async function listServices(): Promise<FwService[]> {
export default function ServiceGroupsTab() {
const { t } = useTranslation()
const qc = useQueryClient()
const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
const { data: groups, isLoading } = useQuery({ queryKey: ['fw', 'svc-grp'], queryFn: listGroups })
const { data: services } = useQuery({ queryKey: ['fw', 'svc'], queryFn: listServices })
@@ -75,13 +77,21 @@ export default function ServiceGroupsTab() {
title: t('common.edit'), key: 'actions',
render: (_, row) => (
<Space>
<Button size="small" onClick={() => {
setEditing(row)
form.setFieldsValue({ name: row.name, description: row.description ?? undefined, member_ids: row.member_ids ?? [] })
}}>{t('common.edit')}</Button>
<Popconfirm title={t('fw.sg.deleteConfirm', { name: row.name })} onConfirm={() => del.mutate(row.id)}>
<Button size="small" danger>{t('common.delete')}</Button>
</Popconfirm>
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
<Button size="small" disabled={isViewer} onClick={() => {
setEditing(row)
form.setFieldsValue({ name: row.name, description: row.description ?? undefined, member_ids: row.member_ids ?? [] })
}}>{t('common.edit')}</Button>
</Tooltip>
{isViewer ? (
<Tooltip title={t('auth.viewerBadge')}>
<Button size="small" danger disabled>{t('common.delete')}</Button>
</Tooltip>
) : (
<Popconfirm title={t('fw.sg.deleteConfirm', { name: row.name })} onConfirm={() => del.mutate(row.id)}>
<Button size="small" danger>{t('common.delete')}</Button>
</Popconfirm>
)}
</Space>
),
},
@@ -94,9 +104,11 @@ export default function ServiceGroupsTab() {
return (
<>
<Button type="primary" className="mb-16" onClick={openCreate}>
{t('fw.sg.add')}
</Button>
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
<Button type="primary" className="mb-16" disabled={isViewer} onClick={openCreate}>
{t('fw.sg.add')}
</Button>
</Tooltip>
<DataTable
rowKey="id"
loading={isLoading}
@@ -107,7 +119,11 @@ export default function ServiceGroupsTab() {
icon={<GroupOutlined />}
title={t('fw.sg.emptyTitle')}
description={t('fw.sg.emptyDesc')}
action={<Button type="primary" onClick={openCreate}>{t('fw.sg.add')}</Button>}
action={
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
<Button type="primary" disabled={isViewer} onClick={openCreate}>{t('fw.sg.add')}</Button>
</Tooltip>
}
/>
}
/>

56
management-ui/src/pages/Firewall/Services.tsx
View File

@@ -9,6 +9,7 @@ import DataTable from '../../components/DataTable'
import EmptyState from '../../components/EmptyState'
import apiClient, { isEnvelope } from '../../api/client'
import { useAuthStore } from '../../stores/auth'
import type { FwService } from './types'
interface FormValues {
@@ -28,6 +29,7 @@ async function listServices(): Promise<FwService[]> {
export default function ServicesTab() {
const { t } = useTranslation()
const qc = useQueryClient()
const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
const { data, isLoading } = useQuery({ queryKey: ['fw', 'svc'], queryFn: listServices })
const [editing, setEditing] = useState<FwService | null>(null)
@@ -70,22 +72,30 @@ export default function ServicesTab() {
title: t('common.edit'), key: 'actions',
render: (_, row) => (
<Space>
<Button size="small" disabled={row.builtin} onClick={() => {
setEditing(row)
form.setFieldsValue({
name: row.name, proto: row.proto,
port_start: row.port_start ?? undefined,
port_end: row.port_end ?? undefined,
description: row.description ?? undefined,
})
}}>{t('common.edit')}</Button>
<Popconfirm
title={t('fw.svc.deleteConfirm', { name: row.name })}
onConfirm={() => del.mutate(row.id)}
disabled={row.builtin}
>
<Button size="small" danger disabled={row.builtin}>{t('common.delete')}</Button>
</Popconfirm>
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
<Button size="small" disabled={row.builtin || isViewer} onClick={() => {
setEditing(row)
form.setFieldsValue({
name: row.name, proto: row.proto,
port_start: row.port_start ?? undefined,
port_end: row.port_end ?? undefined,
description: row.description ?? undefined,
})
}}>{t('common.edit')}</Button>
</Tooltip>
{isViewer ? (
<Tooltip title={t('auth.viewerBadge')}>
<Button size="small" danger disabled>{t('common.delete')}</Button>
</Tooltip>
) : (
<Popconfirm
title={t('fw.svc.deleteConfirm', { name: row.name })}
onConfirm={() => del.mutate(row.id)}
disabled={row.builtin}
>
<Button size="small" danger disabled={row.builtin}>{t('common.delete')}</Button>
</Popconfirm>
)}
</Space>
),
},
@@ -98,9 +108,11 @@ export default function ServicesTab() {
return (
<>
<Button type="primary" className="mb-16" onClick={openCreate}>
{t('fw.svc.add')}
</Button>
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
<Button type="primary" className="mb-16" disabled={isViewer} onClick={openCreate}>
{t('fw.svc.add')}
</Button>
</Tooltip>
<DataTable
rowKey="id"
loading={isLoading}
@@ -111,7 +123,11 @@ export default function ServicesTab() {
icon={<ApiOutlined />}
title={t('fw.svc.emptyTitle')}
description={t('fw.svc.emptyDesc')}
action={<Button type="primary" onClick={openCreate}>{t('fw.svc.add')}</Button>}
action={
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
<Button type="primary" disabled={isViewer} onClick={openCreate}>{t('fw.svc.add')}</Button>
</Tooltip>
}
/>
}
/>

44
management-ui/src/pages/Firewall/Zones.tsx
View File

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next'
import { ApartmentOutlined } from '@ant-design/icons'
import apiClient, { isEnvelope } from '../../api/client'
import { useAuthStore } from '../../stores/auth'
import DataTable from '../../components/DataTable'
import EmptyState from '../../components/EmptyState'
import type { FwZone } from './types'
@@ -25,6 +26,7 @@ async function listZones(): Promise<FwZone[]> {
export default function ZonesTab() {
const { t } = useTranslation()
const qc = useQueryClient()
const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
const [editing, setEditing] = useState<FwZone | null>(null)
const [creating, setCreating] = useState(false)
const [form] = Form.useForm<FormValues>()
@@ -61,20 +63,22 @@ export default function ZonesTab() {
title: t('common.actions'), key: 'actions',
render: (_, row) => (
<Space>
<Button size="small" onClick={() => {
setEditing(row)
form.setFieldsValue({ name: row.name, description: row.description ?? undefined })
}}>{t('common.edit')}</Button>
{row.builtin
? <Tooltip title={t('fw.zone.builtinHint')}>
<Button size="small" danger disabled>{t('common.delete')}</Button>
</Tooltip>
: <Popconfirm
title={t('fw.zone.deleteConfirm', { name: row.name })}
onConfirm={() => del.mutate(row.id)}
>
<Button size="small" danger>{t('common.delete')}</Button>
</Popconfirm>}
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
<Button size="small" disabled={isViewer} onClick={() => {
setEditing(row)
form.setFieldsValue({ name: row.name, description: row.description ?? undefined })
}}>{t('common.edit')}</Button>
</Tooltip>
{isViewer
? <Tooltip title={t('auth.viewerBadge')}><Button size="small" danger disabled>{t('common.delete')}</Button></Tooltip>
: row.builtin
? <Tooltip title={t('fw.zone.builtinHint')}><Button size="small" danger disabled>{t('common.delete')}</Button></Tooltip>
: <Popconfirm
title={t('fw.zone.deleteConfirm', { name: row.name })}
onConfirm={() => del.mutate(row.id)}
>
<Button size="small" danger>{t('common.delete')}</Button>
</Popconfirm>}
</Space>
),
},
@@ -84,9 +88,11 @@ export default function ZonesTab() {
return (
<>
<Button type="primary" className="mb-16" onClick={openCreate}>
{t('fw.zone.add')}
</Button>
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
<Button type="primary" className="mb-16" disabled={isViewer} onClick={openCreate}>
{t('fw.zone.add')}
</Button>
</Tooltip>
<DataTable
rowKey="id"
loading={isLoading}
@@ -98,7 +104,9 @@ export default function ZonesTab() {
title={t('fw.zone.emptyTitle')}
description={t('fw.zone.emptyDesc')}
action={
<Button type="primary" onClick={openCreate}>{t('fw.zone.add')}</Button>
<Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
<Button type="primary" disabled={isViewer} onClick={openCreate}>{t('fw.zone.add')}</Button>
</Tooltip>
}
/>
}