From 1b454d6598e9b77d30674f4384ed1bdf1819ccc3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20=C5=9Al=C4=99zak?= Date: Tue, 10 Mar 2026 17:55:36 +0100 Subject: [PATCH] migrate tables to use table-edit-cell component --- web/src/pages/AliasesPage/AliasTable.tsx | 12 +- .../components/DestinationsTable.tsx | 12 +- web/src/pages/EdgesPage/EdgesTable.tsx | 8 +- .../components/GroupsTable/GroupsTable.tsx | 15 +-- .../components/GatewaysTable.tsx | 8 +- .../components/LocationsTable.tsx | 105 +++++++++--------- .../NetworkDevicesTable.tsx | 8 +- web/src/pages/OpenIdPage/OpenIdTable.tsx | 8 +- web/src/pages/RulesPage/RulesTable.tsx | 8 +- .../pages/UsersOverviewPage/UsersTable.tsx | 4 - web/src/pages/WebhooksPage/WebhooksTable.tsx | 8 +- .../ActivityLogStreamTable.tsx | 8 +- .../ProfileApiTokensTable.tsx | 65 ++++++----- .../ProfileAuthKeysTable.tsx | 8 +- .../ProfileDevicesTable.tsx | 8 +- web/src/shared/defguard-ui | 2 +- 16 files changed, 106 insertions(+), 181 deletions(-) diff --git a/web/src/pages/AliasesPage/AliasTable.tsx b/web/src/pages/AliasesPage/AliasTable.tsx index d497871048..6e1b4889ad 100644 --- a/web/src/pages/AliasesPage/AliasTable.tsx +++ b/web/src/pages/AliasesPage/AliasTable.tsx @@ -11,11 +11,11 @@ import { m } from '../../paraglide/messages'; import api from '../../shared/api/api'; import { type AclAlias, AclProtocolName, type AclRule } from '../../shared/api/types'; import { TableValuesListCell } from '../../shared/components/TableValuesListCell/TableValuesListCell'; -import { IconButtonMenu } from '../../shared/defguard-ui/components/IconButtonMenu/IconButtonMenu'; import type { MenuItemsGroup } from '../../shared/defguard-ui/components/Menu/types'; import { tableEditColumnSize } from '../../shared/defguard-ui/components/table/consts'; import { TableBody } from '../../shared/defguard-ui/components/table/TableBody/TableBody'; import { TableCell } from '../../shared/defguard-ui/components/table/TableCell/TableCell'; +import { TableEditCell } from '../../shared/defguard-ui/components/table/TableEditCell/TableEditCell'; import { openModal } from '../../shared/hooks/modalControls/modalsSubjects'; import { ModalName } from '../../shared/hooks/modalControls/modalTypes'; import { getLicenseInfoQueryOptions } from '../../shared/query'; @@ -189,15 +189,7 @@ export const AliasTable = ({ data: rowData, rules, disableBlockedModal }: Props) }, }); } - return ( - - - - ); + return ; }, }), ], diff --git a/web/src/pages/DestinationsPage/components/DestinationsTable.tsx b/web/src/pages/DestinationsPage/components/DestinationsTable.tsx index 65d9ebed04..8736dc8c22 100644 --- a/web/src/pages/DestinationsPage/components/DestinationsTable.tsx +++ b/web/src/pages/DestinationsPage/components/DestinationsTable.tsx @@ -16,12 +16,12 @@ import { TableValuesListCell } from '../../../shared/components/TableValuesListC import { Button } from '../../../shared/defguard-ui/components/Button/Button'; import type { ButtonProps } from '../../../shared/defguard-ui/components/Button/types'; import { EmptyStateFlexible } from '../../../shared/defguard-ui/components/EmptyStateFlexible/EmptyStateFlexible'; -import { IconButtonMenu } from '../../../shared/defguard-ui/components/IconButtonMenu/IconButtonMenu'; import type { MenuItemsGroup } from '../../../shared/defguard-ui/components/Menu/types'; import { Search } from '../../../shared/defguard-ui/components/Search/Search'; import { tableEditColumnSize } from '../../../shared/defguard-ui/components/table/consts'; import { TableBody } from '../../../shared/defguard-ui/components/table/TableBody/TableBody'; import { TableCell } from '../../../shared/defguard-ui/components/table/TableCell/TableCell'; +import { TableEditCell } from '../../../shared/defguard-ui/components/table/TableEditCell/TableEditCell'; import { TableTop } from '../../../shared/defguard-ui/components/table/TableTop/TableTop'; import { openModal } from '../../../shared/hooks/modalControls/modalsSubjects'; import { ModalName } from '../../../shared/hooks/modalControls/modalTypes'; @@ -204,15 +204,7 @@ export const DestinationsTable = ({ ], }, ]; - return ( - - - - ); + return ; }, }), ], diff --git a/web/src/pages/EdgesPage/EdgesTable.tsx b/web/src/pages/EdgesPage/EdgesTable.tsx index 2517e89933..c0c81698ca 100644 --- a/web/src/pages/EdgesPage/EdgesTable.tsx +++ b/web/src/pages/EdgesPage/EdgesTable.tsx @@ -16,12 +16,12 @@ import { Button } from '../../shared/defguard-ui/components/Button/Button'; import type { ButtonProps } from '../../shared/defguard-ui/components/Button/types'; import { EmptyState } from '../../shared/defguard-ui/components/EmptyState/EmptyState'; import { EmptyStateFlexible } from '../../shared/defguard-ui/components/EmptyStateFlexible/EmptyStateFlexible'; -import { IconButtonMenu } from '../../shared/defguard-ui/components/IconButtonMenu/IconButtonMenu'; import type { MenuItemsGroup } from '../../shared/defguard-ui/components/Menu/types'; import { Search } from '../../shared/defguard-ui/components/Search/Search'; import { tableEditColumnSize } from '../../shared/defguard-ui/components/table/consts'; import { TableBody } from '../../shared/defguard-ui/components/table/TableBody/TableBody'; import { TableCell } from '../../shared/defguard-ui/components/table/TableCell/TableCell'; +import { TableEditCell } from '../../shared/defguard-ui/components/table/TableEditCell/TableEditCell'; import { TableTop } from '../../shared/defguard-ui/components/table/TableTop/TableTop'; import { isPresent } from '../../shared/defguard-ui/utils/isPresent'; import { getEdgesQueryOptions, getLicenseInfoQueryOptions } from '../../shared/query'; @@ -242,11 +242,7 @@ export const EdgesTable = () => { }, ]; - return ( - - - - ); + return ; }, }), ], diff --git a/web/src/pages/GroupsPage/components/GroupsTable/GroupsTable.tsx b/web/src/pages/GroupsPage/components/GroupsTable/GroupsTable.tsx index 1265dad2a6..b589ad81da 100644 --- a/web/src/pages/GroupsPage/components/GroupsTable/GroupsTable.tsx +++ b/web/src/pages/GroupsPage/components/GroupsTable/GroupsTable.tsx @@ -11,12 +11,12 @@ import api from '../../../../shared/api/api'; import type { GroupInfo, User } from '../../../../shared/api/types'; import { Badge } from '../../../../shared/defguard-ui/components/Badge/Badge'; import { Button } from '../../../../shared/defguard-ui/components/Button/Button'; -import { IconButtonMenu } from '../../../../shared/defguard-ui/components/IconButtonMenu/IconButtonMenu'; import type { MenuItemProps } from '../../../../shared/defguard-ui/components/Menu/types'; import { Search } from '../../../../shared/defguard-ui/components/Search/Search'; import { tableEditColumnSize } from '../../../../shared/defguard-ui/components/table/consts'; import { TableBody } from '../../../../shared/defguard-ui/components/table/TableBody/TableBody'; import { TableCell } from '../../../../shared/defguard-ui/components/table/TableCell/TableCell'; +import { TableEditCell } from '../../../../shared/defguard-ui/components/table/TableEditCell/TableEditCell'; import { TableTop } from '../../../../shared/defguard-ui/components/table/TableTop/TableTop'; import { openModal } from '../../../../shared/hooks/modalControls/modalsSubjects'; import { ModalName } from '../../../../shared/hooks/modalControls/modalTypes'; @@ -126,18 +126,7 @@ export const GroupsTable = ({ groups, users }: Props) => { }, }, ]; - return ( - - - - ); + return ; }, }), ], diff --git a/web/src/pages/LocationsPage/components/GatewaysTable.tsx b/web/src/pages/LocationsPage/components/GatewaysTable.tsx index 783d77472f..b7845d6424 100644 --- a/web/src/pages/LocationsPage/components/GatewaysTable.tsx +++ b/web/src/pages/LocationsPage/components/GatewaysTable.tsx @@ -12,12 +12,12 @@ import api from '../../../shared/api/api'; import type { GatewayInfo } from '../../../shared/api/types'; import { Badge } from '../../../shared/defguard-ui/components/Badge/Badge'; import { EmptyStateFlexible } from '../../../shared/defguard-ui/components/EmptyStateFlexible/EmptyStateFlexible'; -import { IconButtonMenu } from '../../../shared/defguard-ui/components/IconButtonMenu/IconButtonMenu'; import type { MenuItemsGroup } from '../../../shared/defguard-ui/components/Menu/types'; import { Search } from '../../../shared/defguard-ui/components/Search/Search'; import { tableEditColumnSize } from '../../../shared/defguard-ui/components/table/consts'; import { TableBody } from '../../../shared/defguard-ui/components/table/TableBody/TableBody'; import { TableCell } from '../../../shared/defguard-ui/components/table/TableCell/TableCell'; +import { TableEditCell } from '../../../shared/defguard-ui/components/table/TableEditCell/TableEditCell'; import { TableTop } from '../../../shared/defguard-ui/components/table/TableTop/TableTop'; import { openModal } from '../../../shared/hooks/modalControls/modalsSubjects'; import { ModalName } from '../../../shared/hooks/modalControls/modalTypes'; @@ -221,11 +221,7 @@ export const GatewaysTable = () => { }, ]; - return ( - - - - ); + return ; }, }), ], diff --git a/web/src/pages/LocationsPage/components/LocationsTable.tsx b/web/src/pages/LocationsPage/components/LocationsTable.tsx index 30cc28efc4..db03cd6b52 100644 --- a/web/src/pages/LocationsPage/components/LocationsTable.tsx +++ b/web/src/pages/LocationsPage/components/LocationsTable.tsx @@ -16,12 +16,12 @@ import { Button } from '../../../shared/defguard-ui/components/Button/Button'; import type { ButtonProps } from '../../../shared/defguard-ui/components/Button/types'; import { EmptyStateFlexible } from '../../../shared/defguard-ui/components/EmptyStateFlexible/EmptyStateFlexible'; import { Icon } from '../../../shared/defguard-ui/components/Icon'; -import { IconButtonMenu } from '../../../shared/defguard-ui/components/IconButtonMenu/IconButtonMenu'; import { Search } from '../../../shared/defguard-ui/components/Search/Search'; import { SizedBox } from '../../../shared/defguard-ui/components/SizedBox/SizedBox'; import { tableEditColumnSize } from '../../../shared/defguard-ui/components/table/consts'; import { TableBody } from '../../../shared/defguard-ui/components/table/TableBody/TableBody'; import { TableCell } from '../../../shared/defguard-ui/components/table/TableCell/TableCell'; +import { TableEditCell } from '../../../shared/defguard-ui/components/table/TableEditCell/TableEditCell'; import { TableTop } from '../../../shared/defguard-ui/components/table/TableTop/TableTop'; import { ThemeSpacing, ThemeVariable } from '../../../shared/defguard-ui/types'; import { openModal } from '../../../shared/hooks/modalControls/modalsSubjects'; @@ -231,64 +231,59 @@ export const LocationsTable = () => { cell: (info) => { const row = info.row.original; return ( - - { + { + navigate({ + to: '/locations/$locationId/edit', + params: { + locationId: row.id.toString(), + }, + }); + }, + }, + { + icon: 'network-settings', + text: 'Gateway setup', + onClick: async () => { + // allow 1 gateway per location if below business tier + const action = () => { + useGatewayWizardStore.getState().start({ network_id: row.id }); navigate({ - to: '/locations/$locationId/edit', - params: { - locationId: row.id.toString(), - }, + to: '/setup-gateway', }); - }, - }, - { - icon: 'network-settings', - text: 'Gateway setup', - onClick: async () => { - // allow 1 gateway per location if below business tier - const action = () => { - useGatewayWizardStore - .getState() - .start({ network_id: row.id }); - navigate({ - to: '/setup-gateway', - }); - }; - if (row.gateways.length >= 1) { - licenseActionCheck(canUseEnterpriseFeature(license), action); - } else { - action(); - } - }, + }; + if (row.gateways.length >= 1) { + licenseActionCheck(canUseEnterpriseFeature(license), action); + } else { + action(); + } }, - ], - }, - { - items: [ - { - icon: 'delete', - text: m.controls_delete(), - variant: 'danger', - onClick: () => { - openModal(ModalName.DeleteLocation, { - id: row.id, - name: row.name, - }); - }, + }, + ], + }, + { + items: [ + { + icon: 'delete', + text: m.controls_delete(), + variant: 'danger', + onClick: () => { + openModal(ModalName.DeleteLocation, { + id: row.id, + name: row.name, + }); }, - ], - }, - ]} - /> - + }, + ], + }, + ]} + /> ); }, }), diff --git a/web/src/pages/NetworkDevicesPage/NetworkDevicesTable.tsx b/web/src/pages/NetworkDevicesPage/NetworkDevicesTable.tsx index 70a7d676bf..b8a11441cc 100644 --- a/web/src/pages/NetworkDevicesPage/NetworkDevicesTable.tsx +++ b/web/src/pages/NetworkDevicesPage/NetworkDevicesTable.tsx @@ -14,7 +14,6 @@ import { Badge } from '../../shared/defguard-ui/components/Badge/Badge'; import { Button } from '../../shared/defguard-ui/components/Button/Button'; import type { ButtonProps } from '../../shared/defguard-ui/components/Button/types'; import { EmptyStateFlexible } from '../../shared/defguard-ui/components/EmptyStateFlexible/EmptyStateFlexible'; -import { IconButtonMenu } from '../../shared/defguard-ui/components/IconButtonMenu/IconButtonMenu'; import type { MenuItemProps, MenuItemsGroup, @@ -23,6 +22,7 @@ import { SizedBox } from '../../shared/defguard-ui/components/SizedBox/SizedBox' import { tableEditColumnSize } from '../../shared/defguard-ui/components/table/consts'; import { TableBody } from '../../shared/defguard-ui/components/table/TableBody/TableBody'; import { TableCell } from '../../shared/defguard-ui/components/table/TableCell/TableCell'; +import { TableEditCell } from '../../shared/defguard-ui/components/table/TableEditCell/TableEditCell'; import { TableTop } from '../../shared/defguard-ui/components/table/TableTop/TableTop'; import { ThemeSize } from '../../shared/defguard-ui/types'; import { openModal } from '../../shared/hooks/modalControls/modalsSubjects'; @@ -222,11 +222,7 @@ export const NetworkDevicesTable = ({ networkDevices }: Props) => { ], }, ]; - return ( - - - - ); + return ; }, }), ], diff --git a/web/src/pages/OpenIdPage/OpenIdTable.tsx b/web/src/pages/OpenIdPage/OpenIdTable.tsx index c05a3ebca4..8f92cd4ff2 100644 --- a/web/src/pages/OpenIdPage/OpenIdTable.tsx +++ b/web/src/pages/OpenIdPage/OpenIdTable.tsx @@ -13,11 +13,11 @@ import { Badge } from '../../shared/defguard-ui/components/Badge/Badge'; import { Button } from '../../shared/defguard-ui/components/Button/Button'; import type { ButtonProps } from '../../shared/defguard-ui/components/Button/types'; import { EmptyStateFlexible } from '../../shared/defguard-ui/components/EmptyStateFlexible/EmptyStateFlexible'; -import { IconButtonMenu } from '../../shared/defguard-ui/components/IconButtonMenu/IconButtonMenu'; import type { MenuItemsGroup } from '../../shared/defguard-ui/components/Menu/types'; import { tableEditColumnSize } from '../../shared/defguard-ui/components/table/consts'; import { TableBody } from '../../shared/defguard-ui/components/table/TableBody/TableBody'; import { TableCell } from '../../shared/defguard-ui/components/table/TableCell/TableCell'; +import { TableEditCell } from '../../shared/defguard-ui/components/table/TableEditCell/TableEditCell'; import { TableTop } from '../../shared/defguard-ui/components/table/TableTop/TableTop'; import { useClipboard } from '../../shared/defguard-ui/hooks/useClipboard'; import { openModal } from '../../shared/hooks/modalControls/modalsSubjects'; @@ -155,11 +155,7 @@ export const OpenIdClientTable = ({ data }: Props) => { ], }, ]; - return ( - - - - ); + return ; }, }), ], diff --git a/web/src/pages/RulesPage/RulesTable.tsx b/web/src/pages/RulesPage/RulesTable.tsx index 5944d19bf2..1cbaccce36 100644 --- a/web/src/pages/RulesPage/RulesTable.tsx +++ b/web/src/pages/RulesPage/RulesTable.tsx @@ -27,12 +27,12 @@ import { BadgeVariant } from '../../shared/defguard-ui/components/Badge/types'; import { Button } from '../../shared/defguard-ui/components/Button/Button'; import type { ButtonProps } from '../../shared/defguard-ui/components/Button/types'; import { EmptyStateFlexible } from '../../shared/defguard-ui/components/EmptyStateFlexible/EmptyStateFlexible'; -import { IconButtonMenu } from '../../shared/defguard-ui/components/IconButtonMenu/IconButtonMenu'; import type { MenuItemsGroup } from '../../shared/defguard-ui/components/Menu/types'; import { Search } from '../../shared/defguard-ui/components/Search/Search'; import { tableEditColumnSize } from '../../shared/defguard-ui/components/table/consts'; import { TableBody } from '../../shared/defguard-ui/components/table/TableBody/TableBody'; import { TableCell } from '../../shared/defguard-ui/components/table/TableCell/TableCell'; +import { TableEditCell } from '../../shared/defguard-ui/components/table/TableEditCell/TableEditCell'; import { TableTop } from '../../shared/defguard-ui/components/table/TableTop/TableTop'; import { isPresent } from '../../shared/defguard-ui/utils/isPresent'; import { canUseBusinessFeature, licenseActionCheck } from '../../shared/utils/license'; @@ -302,11 +302,7 @@ export const RulesTable = ({ ], }, ]; - return ( - - - - ); + return ; }, }), ], diff --git a/web/src/pages/UsersOverviewPage/UsersTable.tsx b/web/src/pages/UsersOverviewPage/UsersTable.tsx index 7d0e86a8bb..e4ed217c88 100644 --- a/web/src/pages/UsersOverviewPage/UsersTable.tsx +++ b/web/src/pages/UsersOverviewPage/UsersTable.tsx @@ -27,7 +27,6 @@ import type { ButtonProps } from '../../shared/defguard-ui/components/Button/typ import { EmptyState } from '../../shared/defguard-ui/components/EmptyState/EmptyState'; import { EmptyStateFlexible } from '../../shared/defguard-ui/components/EmptyStateFlexible/EmptyStateFlexible'; import { Icon, IconKind } from '../../shared/defguard-ui/components/Icon'; -import { IconButtonMenu } from '../../shared/defguard-ui/components/IconButtonMenu/IconButtonMenu'; import type { MenuItemsGroup } from '../../shared/defguard-ui/components/Menu/types'; import { Search } from '../../shared/defguard-ui/components/Search/Search'; import { tableEditColumnSize } from '../../shared/defguard-ui/components/table/consts'; @@ -547,9 +546,6 @@ export const UsersTable = () => { {connectionDate} - - - ); diff --git a/web/src/pages/WebhooksPage/WebhooksTable.tsx b/web/src/pages/WebhooksPage/WebhooksTable.tsx index 8b0a12f60a..f59c1d1ca2 100644 --- a/web/src/pages/WebhooksPage/WebhooksTable.tsx +++ b/web/src/pages/WebhooksPage/WebhooksTable.tsx @@ -12,10 +12,10 @@ import { Badge } from '../../shared/defguard-ui/components/Badge/Badge'; import { Button } from '../../shared/defguard-ui/components/Button/Button'; import type { ButtonProps } from '../../shared/defguard-ui/components/Button/types'; import { EmptyStateFlexible } from '../../shared/defguard-ui/components/EmptyStateFlexible/EmptyStateFlexible'; -import { IconButtonMenu } from '../../shared/defguard-ui/components/IconButtonMenu/IconButtonMenu'; import type { MenuItemsGroup } from '../../shared/defguard-ui/components/Menu/types'; import { TableBody } from '../../shared/defguard-ui/components/table/TableBody/TableBody'; import { TableCell } from '../../shared/defguard-ui/components/table/TableCell/TableCell'; +import { TableEditCell } from '../../shared/defguard-ui/components/table/TableEditCell/TableEditCell'; import { TableTop } from '../../shared/defguard-ui/components/table/TableTop/TableTop'; import { openModal } from '../../shared/hooks/modalControls/modalsSubjects'; import { ModalName } from '../../shared/hooks/modalControls/modalTypes'; @@ -133,11 +133,7 @@ export const WebhooksTable = ({ webhooks }: Props) => { ], }, ]; - return ( - - - - ); + return ; }, }), ], diff --git a/web/src/pages/settings/SettingsActivityLogStreamingPage/ActivityLogStreamTable.tsx b/web/src/pages/settings/SettingsActivityLogStreamingPage/ActivityLogStreamTable.tsx index 9c210c514d..5fbbdd2b3f 100644 --- a/web/src/pages/settings/SettingsActivityLogStreamingPage/ActivityLogStreamTable.tsx +++ b/web/src/pages/settings/SettingsActivityLogStreamingPage/ActivityLogStreamTable.tsx @@ -7,11 +7,11 @@ import { import { useMemo } from 'react'; import { m } from '../../../paraglide/messages'; import type { ActivityLogStream } from '../../../shared/api/types'; -import { IconButtonMenu } from '../../../shared/defguard-ui/components/IconButtonMenu/IconButtonMenu'; import type { MenuItemsGroup } from '../../../shared/defguard-ui/components/Menu/types'; import { tableEditColumnSize } from '../../../shared/defguard-ui/components/table/consts'; import { TableBody } from '../../../shared/defguard-ui/components/table/TableBody/TableBody'; import { TableCell } from '../../../shared/defguard-ui/components/table/TableCell/TableCell'; +import { TableEditCell } from '../../../shared/defguard-ui/components/table/TableEditCell/TableEditCell'; import { openModal } from '../../../shared/hooks/modalControls/modalsSubjects'; import { ModalName } from '../../../shared/hooks/modalControls/modalTypes'; @@ -80,11 +80,7 @@ export const ActivityLogStreamTable = ({ data: rowData }: Props) => { ], }, ]; - return ( - - - - ); + return ; }, }), ], diff --git a/web/src/pages/user-profile/UserProfilePage/tabs/ProfileApiTokensTab/components/ProfileApiTokensTable/ProfileApiTokensTable.tsx b/web/src/pages/user-profile/UserProfilePage/tabs/ProfileApiTokensTab/components/ProfileApiTokensTable/ProfileApiTokensTable.tsx index ef0b130e31..e75cac3432 100644 --- a/web/src/pages/user-profile/UserProfilePage/tabs/ProfileApiTokensTab/components/ProfileApiTokensTable/ProfileApiTokensTable.tsx +++ b/web/src/pages/user-profile/UserProfilePage/tabs/ProfileApiTokensTab/components/ProfileApiTokensTable/ProfileApiTokensTable.tsx @@ -9,10 +9,10 @@ import { useMemo } from 'react'; import { m } from '../../../../../../../paraglide/messages'; import api from '../../../../../../../shared/api/api'; import type { ApiToken } from '../../../../../../../shared/api/types'; -import { IconButtonMenu } from '../../../../../../../shared/defguard-ui/components/IconButtonMenu/IconButtonMenu'; import { tableEditColumnSize } from '../../../../../../../shared/defguard-ui/components/table/consts'; import { TableBody } from '../../../../../../../shared/defguard-ui/components/table/TableBody/TableBody'; import { TableCell } from '../../../../../../../shared/defguard-ui/components/table/TableCell/TableCell'; +import { TableEditCell } from '../../../../../../../shared/defguard-ui/components/table/TableEditCell/TableEditCell'; import { openModal } from '../../../../../../../shared/hooks/modalControls/modalsSubjects'; import { ModalName } from '../../../../../../../shared/hooks/modalControls/modalTypes'; import { tableSortingFns } from '../../../../../../../shared/utils/dateSortingFn'; @@ -68,41 +68,38 @@ export const ProfileApiTokensTable = () => { const rowData = info.row.original; return ( - - { - openModal(ModalName.RenameApiToken, { - id: rowData.id, - name: rowData.name, - username, - }); - }, + { + openModal(ModalName.RenameApiToken, { + id: rowData.id, + name: rowData.name, + username, + }); }, - { - icon: 'delete', - testId: 'delete', - variant: 'danger', - text: m.controls_delete(), - onClick: () => { - deleteApiToken({ - id: rowData.id, - username, - }); - }, + }, + { + icon: 'delete', + testId: 'delete', + variant: 'danger', + text: m.controls_delete(), + onClick: () => { + deleteApiToken({ + id: rowData.id, + username, + }); }, - ], - }, - ]} - /> - + }, + ], + }, + ]} + /> ); }, }), diff --git a/web/src/pages/user-profile/UserProfilePage/tabs/ProfileAuthKeysTab/ProfileAuthKeysTable.tsx b/web/src/pages/user-profile/UserProfilePage/tabs/ProfileAuthKeysTab/ProfileAuthKeysTable.tsx index ea330b26f2..bfffe0dc1d 100644 --- a/web/src/pages/user-profile/UserProfilePage/tabs/ProfileAuthKeysTab/ProfileAuthKeysTable.tsx +++ b/web/src/pages/user-profile/UserProfilePage/tabs/ProfileAuthKeysTab/ProfileAuthKeysTable.tsx @@ -10,7 +10,6 @@ import { useMemo } from 'react'; import { m } from '../../../../../paraglide/messages'; import api from '../../../../../shared/api/api'; import type { AuthKey, AuthKeyTypeValue } from '../../../../../shared/api/types'; -import { IconButtonMenu } from '../../../../../shared/defguard-ui/components/IconButtonMenu/IconButtonMenu'; import type { MenuItemProps, MenuItemsGroup, @@ -18,6 +17,7 @@ import type { import { tableEditColumnSize } from '../../../../../shared/defguard-ui/components/table/consts'; import { TableBody } from '../../../../../shared/defguard-ui/components/table/TableBody/TableBody'; import { TableCell } from '../../../../../shared/defguard-ui/components/table/TableCell/TableCell'; +import { TableEditCell } from '../../../../../shared/defguard-ui/components/table/TableEditCell/TableEditCell'; import { useClipboard } from '../../../../../shared/defguard-ui/hooks/useClipboard'; import { isPresent } from '../../../../../shared/defguard-ui/utils/isPresent'; import { openModal } from '../../../../../shared/hooks/modalControls/modalsSubjects'; @@ -194,11 +194,7 @@ export const ProfileAuthKeysTable = () => { ], }, ]; - return ( - - - - ); + return ; }, }), ], diff --git a/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDevicesTab/components/ProfileDevicesTable/ProfileDevicesTable.tsx b/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDevicesTab/components/ProfileDevicesTable/ProfileDevicesTable.tsx index 3c5666445f..197fc9701a 100644 --- a/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDevicesTab/components/ProfileDevicesTable/ProfileDevicesTable.tsx +++ b/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDevicesTab/components/ProfileDevicesTable/ProfileDevicesTable.tsx @@ -19,7 +19,6 @@ import { Button } from '../../../../../../../shared/defguard-ui/components/Butto import type { ButtonProps } from '../../../../../../../shared/defguard-ui/components/Button/types'; import { EmptyStateFlexible } from '../../../../../../../shared/defguard-ui/components/EmptyStateFlexible/EmptyStateFlexible'; import { Icon } from '../../../../../../../shared/defguard-ui/components/Icon'; -import { IconButtonMenu } from '../../../../../../../shared/defguard-ui/components/IconButtonMenu/IconButtonMenu'; import type { MenuItemProps, MenuItemsGroup, @@ -27,6 +26,7 @@ import type { import { tableEditColumnSize } from '../../../../../../../shared/defguard-ui/components/table/consts'; import { TableBody } from '../../../../../../../shared/defguard-ui/components/table/TableBody/TableBody'; import { TableCell } from '../../../../../../../shared/defguard-ui/components/table/TableCell/TableCell'; +import { TableEditCell } from '../../../../../../../shared/defguard-ui/components/table/TableEditCell/TableEditCell'; import { TableFlexCell } from '../../../../../../../shared/defguard-ui/components/table/TableFlexCell/TableFlexCell'; import { TableRowContainer } from '../../../../../../../shared/defguard-ui/components/table/TableRowContainer/TableRowContainer'; import { TableTop } from '../../../../../../../shared/defguard-ui/components/table/TableTop/TableTop'; @@ -228,11 +228,7 @@ const DevicesTable = ({ rowData }: { rowData: RowData[] }) => { size: tableEditColumnSize, cell: (info) => { const menuItems = makeRowMenu(info.row.original); - return ( - - - - ); + return ; }, }), ], diff --git a/web/src/shared/defguard-ui b/web/src/shared/defguard-ui index 81ab2d0081..5724f94474 160000 --- a/web/src/shared/defguard-ui +++ b/web/src/shared/defguard-ui @@ -1 +1 @@ -Subproject commit 81ab2d0081110e42148652fd8628baac97daeb28 +Subproject commit 5724f94474ea9700dc6391fe0458b49b03af5006