DefGuard · filipslezaklab · Mar 11, 2026 · Mar 10, 2026
diff --git 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 (
-            <TableCell>
-              <IconButtonMenu
-                icon="menu"
-                menuItems={menuItems}
-                disabled={isLicenseFetching}
-              />
-            </TableCell>
-          );
+          return <TableEditCell menuItems={menuItems} disabled={isLicenseFetching} />;
         },
       }),
     ],

diff --git 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 (
-            <TableCell>
-              <IconButtonMenu
-                icon="menu"
-                menuItems={menuItems}
-                disabled={licenseFetching}
-              />
-            </TableCell>
-          );
+          return <TableEditCell menuItems={menuItems} disabled={licenseFetching} />;
         },
       }),
     ],

diff --git 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 (
-            <TableCell>
-              <IconButtonMenu icon="menu" menuItems={menuItems} />
-            </TableCell>
-          );
+          return <TableEditCell menuItems={menuItems} />;
         },
       }),
     ],

diff --git 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 (
-            <TableCell>
-              <IconButtonMenu
-                icon="menu"
-                menuItems={[
-                  {
-                    items: menuItems,
-                  },
-                ]}
-              />
-            </TableCell>
-          );
+          return <TableEditCell menuItems={[{ items: menuItems }]} />;
         },
       }),
     ],

diff --git 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 (
-            <TableCell>
-              <IconButtonMenu icon="menu" menuItems={menuItems} />
-            </TableCell>
-          );
+          return <TableEditCell menuItems={menuItems} />;
         },
       }),
     ],

diff --git 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 (
-            <TableCell>
-              <IconButtonMenu
-                icon="menu"
-                menuItems={[
-                  {
-                    items: [
-                      {
-                        icon: 'edit',
-                        text: m.controls_edit(),
-                        onClick: () => {
+            <TableEditCell
+              menuItems={[
+                {
+                  items: [
+                    {
+                      icon: 'edit',
+                      text: m.controls_edit(),
+                      onClick: () => {
+                        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,
+                        });
                       },
-                    ],
-                  },
-                ]}
-              />
-            </TableCell>
+                    },
+                  ],
+                },
+              ]}
+            />
           );
         },
       }),

diff --git 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 (
-            <TableCell>
-              <IconButtonMenu icon="menu" menuItems={menuItems} />
-            </TableCell>
-          );
+          return <TableEditCell menuItems={menuItems} />;
         },
       }),
     ],

diff --git 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 (
-            <TableCell>
-              <IconButtonMenu menuItems={menuItems} icon="menu" />
-            </TableCell>
-          );
+          return <TableEditCell menuItems={menuItems} />;
         },
       }),
     ],

diff --git 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 (
-            <TableCell>
-              <IconButtonMenu icon="menu" menuItems={menuItems} />
-            </TableCell>
-          );
+          return <TableEditCell menuItems={menuItems} />;
         },
       }),
     ],

diff --git 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 = () => {
               <span>{connectionDate}</span>
             </TableCell>
             <TableCell empty />
-            <TableCell>
-              <IconButtonMenu icon="menu" menuItems={menuItems} />
-            </TableCell>
             <TableEditCell menuItems={menuItems} />
           </TableRowContainer>
         );