Update RowActions (#6106)

* Update RowActions

- Show text labels (again)
- Revert to Menu.Item
- Adjust placement
- Add optional tooltip

* Remove unused import

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: <IconCopy />,
     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: <IconEdit />,
     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: <IconTrash />,
     hidden: hidden
@@ -97,10 +107,14 @@ export function RowActions({
   // Render a single action icon
   function RowActionIcon(action: RowAction) {
     return (
-      <Tooltip withinPortal={true} label={action.title} key={action.title}>
+      <Tooltip
-        <ActionIcon
+        withinPortal={true}
+        label={action.tooltip ?? action.title}
+        key={action.title}
+      >
+        <Menu.Item
           color={action.color}
-          size={20}
+          icon={action.icon}
           onClick={(event) => {
             // 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}
-        </ActionIcon>
+        </Menu.Item>
       </Tooltip>
     );
   }
 
-  // If only a single action is available, display that
-  if (visibleActions.length == 1) {
-    return <RowActionIcon {...visibleActions[0]} />;
-  }
-
   return (
     visibleActions.length > 0 && (
       <Menu
         withinPortal={true}
         disabled={disabled}
-        position="left"
+        position="bottom-end"
         opened={opened}
         onChange={setOpened}
       >
@@ -149,11 +158,9 @@ export function RowActions({
           </Tooltip>
         </Menu.Target>
         <Menu.Dropdown>
-          <Group position="right" spacing="xs" p={8}>
+          {visibleActions.map((action) => (
-            {visibleActions.map((action) => (
+            <RowActionIcon key={action.title} {...action} />
-              <RowActionIcon key={action.title} {...action} />
+          ))}
-            ))}
-          </Group>
         </Menu.Dropdown>
       </Menu>
     )

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({