Consolidate data actions for BOM table (#10763)

* Consolidate data actions for BOM table

* Adjust playwright tests

src/frontend/src/tables/bom/BomTable.tsx

@@ -1,19 +1,3 @@
-import { t } from '@lingui/core/macro';
-import { ActionIcon, Alert, Group, Stack, Text, Tooltip } from '@mantine/core';
-import { showNotification } from '@mantine/notifications';
-import {
-  IconArrowRight,
-  IconCircleCheck,
-  IconExclamationCircle,
-  IconFileArrowLeft,
-  IconLock,
-  IconSwitch3
-} from '@tabler/icons-react';
-import { type ReactNode, useCallback, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { ActionButton } from '@lib/components/ActionButton';
-import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowDeleteAction,
@@ -27,8 +11,23 @@ import { apiUrl } from '@lib/functions/Api';
 import { navigateToLink } from '@lib/functions/Navigation';
 import type { TableFilter } from '@lib/types/Filters';
 import type { TableColumn } from '@lib/types/Tables';
+import { t } from '@lingui/core/macro';
+import { ActionIcon, Alert, Group, Stack, Text, Tooltip } from '@mantine/core';
+import { showNotification } from '@mantine/notifications';
+import {
+  IconArrowRight,
+  IconCircleCheck,
+  IconExclamationCircle,
+  IconFileUpload,
+  IconLock,
+  IconPlus,
+  IconSwitch3
+} from '@tabler/icons-react';
+import { type ReactNode, useCallback, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { Thumbnail } from '../../components/images/Thumbnail';
 import ImporterDrawer from '../../components/importer/ImporterDrawer';
+import { ActionDropdown } from '../../components/items/ActionDropdown';
 import { RenderPart } from '../../components/render/Part';
 import { useApi } from '../../contexts/ApiContext';
 import { formatDecimal, formatPriceRange } from '../../defaults/formatters';
@@ -613,18 +612,26 @@ export function BomTable({
 
   const tableActions = useMemo(() => {
     return [
-      <ActionButton
+      <ActionDropdown
-        key='import-bom'
+        key='add-bom-actions'
+        tooltip={t`Add BOM Items`}
+        position='bottom-start'
+        icon={<IconPlus />}
         hidden={partLocked || !user.hasAddRole(UserRoles.part)}
-        tooltip={t`Import BOM Data`}
+        actions={[
-        icon={<IconFileArrowLeft />}
+          {
-        onClick={() => importBomItem.open()}
+            name: t`Add BOM Item`,
-      />,
+            icon: <IconPlus />,
-      <AddItemButton
+            tooltip: t`Add a single BOM item`,
-        key='add-bom-item'
+            onClick: () => newBomItem.open()
-        hidden={partLocked || !user.hasAddRole(UserRoles.part)}
+          },
-        tooltip={t`Add BOM Item`}
+          {
-        onClick={() => newBomItem.open()}
+            name: t`Import from File`,
+            icon: <IconFileUpload />,
+            tooltip: t`Import BOM items from a file`,
+            onClick: () => importBomItem.open()
+          }
+        ]}
       />
     ];
   }, [partLocked, user]);

src/frontend/tests/pages/pui_part.spec.ts

@@ -175,8 +175,12 @@ test('Part - Editing', async ({ browser }) => {
 
 test('Parts - Locking', async ({ browser }) => {
   const page = await doCachedLogin(browser, { url: 'part/104/bom' });
+
   await loadTab(page, 'Bill of Materials');
-  await page.getByLabel('action-button-add-bom-item').waitFor();
+  await page
+    .getByRole('button', { name: 'action-menu-add-bom-items' })
+    .waitFor();
+
   await loadTab(page, 'Parameters');
   await page.getByLabel('action-button-add-parameter').waitFor();
 

src/frontend/tests/pui_importing.spec.ts

@@ -80,8 +80,13 @@ test('Importing - BOM', async ({ browser }) => {
     url: 'part/109/bom'
   });
 
+  // Open the BOM importer wizard
+  await page.getByRole('button', { name: 'action-menu-add-bom-items' }).click();
+
   await page
-    .getByRole('button', { name: 'action-button-import-bom-data' })
+    .getByRole('menuitem', {
+      name: 'action-menu-add-bom-items-import-from-file'
+    })
     .click();
 
   // Select BOM file fixture for import