diff --git a/src/frontend/src/components/tables/RowActions.tsx b/src/frontend/src/components/tables/RowActions.tsx index 49c3a325b433..a9f46e3afc6e 100644 --- a/src/frontend/src/components/tables/RowActions.tsx +++ b/src/frontend/src/components/tables/RowActions.tsx @@ -1,5 +1,5 @@ import { t } from '@lingui/macro'; -import { ActionIcon, Group, Tooltip } from '@mantine/core'; +import { ActionIcon, Tooltip } from '@mantine/core'; import { Menu } from '@mantine/core'; import { IconCopy, IconDots, IconEdit, IconTrash } from '@tabler/icons-react'; import { ReactNode, useMemo, useState } from 'react'; @@ -9,6 +9,7 @@ import { notYetImplemented } from '../../functions/notifications'; // Type definition for a table row action export type RowAction = { title: string; + tooltip?: string; color?: string; icon: ReactNode; onClick?: () => void; @@ -18,14 +19,17 @@ export type RowAction = { // Component for duplicating a row in a table export function RowDuplicateAction({ onClick, + tooltip, hidden }: { onClick?: () => void; + tooltip?: string; hidden?: boolean; }): RowAction { return { title: t`Duplicate`, color: 'green', + tooltip: tooltip, onClick: onClick, icon: , hidden: hidden @@ -35,14 +39,17 @@ export function RowDuplicateAction({ // Component for editing a row in a table export function RowEditAction({ onClick, + tooltip, hidden }: { onClick?: () => void; + tooltip?: string; hidden?: boolean; }): RowAction { return { title: t`Edit`, color: 'blue', + tooltip: tooltip, onClick: onClick, icon: , hidden: hidden @@ -52,14 +59,17 @@ export function RowEditAction({ // Component for deleting a row in a table export function RowDeleteAction({ onClick, + tooltip, hidden }: { onClick?: () => void; + tooltip?: string; hidden?: boolean; }): RowAction { return { title: t`Delete`, color: 'red', + tooltip: tooltip, onClick: onClick, icon: , hidden: hidden @@ -97,10 +107,14 @@ export function RowActions({ // Render a single action icon function RowActionIcon(action: RowAction) { return ( - - + { // Prevent clicking on the action from selecting the row itself event?.preventDefault(); @@ -116,23 +130,18 @@ export function RowActions({ setOpened(false); }} > - {action.icon} - + {action.title} + ); } - // If only a single action is available, display that - if (visibleActions.length == 1) { - return ; - } - return ( visibleActions.length > 0 && ( @@ -149,11 +158,9 @@ export function RowActions({ - - {visibleActions.map((action) => ( - - ))} - + {visibleActions.map((action) => ( + + ))} ) diff --git a/src/frontend/src/components/tables/part/PartParameterTable.tsx b/src/frontend/src/components/tables/part/PartParameterTable.tsx index 54788134b132..ffaa67252284 100644 --- a/src/frontend/src/components/tables/part/PartParameterTable.tsx +++ b/src/frontend/src/components/tables/part/PartParameterTable.tsx @@ -110,6 +110,7 @@ export function PartParameterTable({ partId }: { partId: any }) { actions.push( RowEditAction({ + tooltip: t`Edit Part Parameter`, hidden: !user.hasChangeRole(UserRoles.part), onClick: () => { openEditApiForm({ @@ -132,6 +133,7 @@ export function PartParameterTable({ partId }: { partId: any }) { actions.push( RowDeleteAction({ + tooltip: t`Delete Part Parameter`, hidden: !user.hasDeleteRole(UserRoles.part), onClick: () => { openDeleteApiForm({