[ui] Label fix (#10874)

* Fix for sales order allocations:

- Improve UX
- Clearer intent

* Same fix for build order

* Also for build line sub table

src/frontend/src/hooks/UseForm.tsx

@@ -161,8 +161,8 @@ export function useDeleteApiFormModal(props: ApiFormModalProps) {
     () => ({
       ...props,
       method: props.method ?? 'DELETE',
-      submitText: t`Delete`,
-      submitColor: 'red',
+      submitText: props.submitText ?? t`Delete`,
+      submitColor: props.submitColor ?? 'red',
       successMessage:
         props.successMessage === null
           ? null

src/frontend/src/tables/build/BuildAllocatedStockTable.tsx

@@ -1,11 +1,7 @@
 import { t } from '@lingui/core/macro';
 import { useCallback, useMemo, useState } from 'react';
 
-import {
-  type RowAction,
-  RowDeleteAction,
-  RowEditAction
-} from '@lib/components/RowActions';
+import { type RowAction, RowEditAction } from '@lib/components/RowActions';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
 import { UserRoles } from '@lib/enums/Roles';
@@ -14,7 +10,8 @@ import { ActionButton } from '@lib/index';
 import type { TableFilter } from '@lib/types/Filters';
 import type { StockOperationProps } from '@lib/types/Forms';
 import type { TableColumn } from '@lib/types/Tables';
-import { IconCircleDashedCheck } from '@tabler/icons-react';
+import { Alert } from '@mantine/core';
+import { IconCircleDashedCheck, IconCircleX } from '@tabler/icons-react';
 import { useConsumeBuildItemsForm } from '../../forms/BuildForms';
 import {
   useDeleteApiFormModal,
@@ -177,8 +174,14 @@ export default function BuildAllocatedStockTable({
   const deleteItem = useDeleteApiFormModal({
     pk: selectedItemId,
     url: ApiEndpoints.build_item_list,
-    title: t`Delete Stock Allocation`,
-    table: table
+    title: t`Remove Allocated Stock`,
+    submitText: t`Remove`,
+    table: table,
+    preFormContent: (
+      <Alert color='red' title={t`Confirm Removal`}>
+        {t`Are you sure you want to remove this allocated stock from the order?`}
+      </Alert>
+    )
   });
 
   const [selectedItems, setSelectedItems] = useState<any[]>([]);
@@ -251,13 +254,17 @@ export default function BuildAllocatedStockTable({
             editItem.open();
           }
         }),
-        RowDeleteAction({
+        {
+          title: t`Remove`,
+          tooltip: t`Remove allocated stock`,
+          icon: <IconCircleX />,
+          color: 'red',
           hidden: !user.hasDeleteRole(UserRoles.build),
           onClick: () => {
             setSelectedItemId(record.pk);
             deleteItem.open();
           }
-        })
+        }
       ];
     },
     [user]

src/frontend/src/tables/build/BuildLineTable.tsx

@@ -5,6 +5,7 @@ import {
   IconCircleCheck,
   IconCircleDashedCheck,
   IconCircleMinus,
+  IconCircleX,
   IconShoppingCart,
   IconTool,
   IconWand
@@ -15,11 +16,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { ActionButton } from '@lib/components/ActionButton';
 import { ProgressBar } from '@lib/components/ProgressBar';
-import {
-  RowDeleteAction,
-  RowEditAction,
-  RowViewAction
-} from '@lib/components/RowActions';
+import { RowEditAction, RowViewAction } from '@lib/components/RowActions';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
 import { UserRoles } from '@lib/enums/Roles';
@@ -110,12 +107,16 @@ export function BuildLineSubTable({
             onEditAllocation?.(record.pk);
           }
         }),
-        RowDeleteAction({
+        {
+          title: t`Remove`,
+          tooltip: t`Remove allocated stock`,
+          icon: <IconCircleX />,
+          color: 'red',
           hidden: !onDeleteAllocation || !user.hasDeleteRole(UserRoles.build),
           onClick: () => {
             onDeleteAllocation?.(record.pk);
           }
-        }),
+        },
         RowViewAction({
           title: t`View Stock Item`,
           modelType: ModelType.stockitem,
@@ -660,8 +661,14 @@ export default function BuildLineTable({
   const deleteAllocation = useDeleteApiFormModal({
     url: ApiEndpoints.build_item_list,
     pk: selectedAllocation,
-    title: t`Delete Stock Allocation`,
-    onFormSuccess: table.refreshTable
+    title: t`Remove Allocated Stock`,
+    submitText: t`Remove`,
+    onFormSuccess: table.refreshTable,
+    preFormContent: (
+      <Alert color='red' title={t`Confirm Removal`}>
+        {t`Are you sure you want to remove this allocated stock from the order?`}
+      </Alert>
+    )
   });
 
   const [partsToOrder, setPartsToOrder] = useState<any[]>([]);

src/frontend/src/tables/sales/SalesOrderAllocationTable.tsx

@@ -4,7 +4,6 @@ import { useCallback, useMemo, useState } from 'react';
 import { ActionButton } from '@lib/components/ActionButton';
 import {
   type RowAction,
-  RowDeleteAction,
   RowEditAction,
   RowViewAction
 } from '@lib/components/RowActions';
@@ -15,7 +14,8 @@ import { apiUrl } from '@lib/functions/Api';
 import type { TableFilter } from '@lib/types/Filters';
 import type { StockOperationProps } from '@lib/types/Forms';
 import type { TableColumn } from '@lib/types/Tables';
-import { IconTruckDelivery } from '@tabler/icons-react';
+import { Alert } from '@mantine/core';
+import { IconCircleX, IconTruckDelivery } from '@tabler/icons-react';
 import { useNavigate } from 'react-router-dom';
 import { formatDate } from '../../defaults/formatters';
 import { useSalesOrderAllocationFields } from '../../forms/SalesOrderForms';
@@ -215,7 +215,13 @@ export default function SalesOrderAllocationTable({
   const deleteAllocation = useDeleteApiFormModal({
     url: ApiEndpoints.sales_order_allocation_list,
     pk: selectedAllocation,
-    title: t`Delete Allocation`,
+    title: t`Remove Allocated Stock`,
+    preFormContent: (
+      <Alert color='red' title={t`Confirm Removal`}>
+        {t`Are you sure you want to remove this allocated stock from the order?`}
+      </Alert>
+    ),
+    submitText: t`Remove`,
     onFormSuccess: () => table.refreshTable()
   });
 
@@ -237,8 +243,11 @@ export default function SalesOrderAllocationTable({
             editAllocation.open();
           }
         }),
-        RowDeleteAction({
-          tooltip: t`Delete Allocation`,
+        {
+          title: t`Remove`,
+          tooltip: t`Remove allocated stock`,
+          icon: <IconCircleX />,
+          color: 'red',
           hidden:
             isShipped ||
             !allowEdit ||
@@ -247,7 +256,7 @@ export default function SalesOrderAllocationTable({
             setSelectedAllocation(record.pk);
             deleteAllocation.open();
           }
-        }),
+        },
         RowViewAction({
           tooltip: t`View Shipment`,
           title: t`View Shipment`,