[UI] Edit BOM item from "Used In" table (#11286)

- Allows editing BOM item from the "used in" table
- Useful for editing from the context of the component / subassembly

src/frontend/src/forms/BomForms.tsx

@@ -16,10 +16,15 @@ import { useUserState } from '../states/UserState';
 /**
  * Field set for BomItem form
  */
-export function bomItemFields(): ApiFormFieldSet {
+export function bomItemFields({
+  showAssembly = false
+}: {
+  showAssembly?: boolean;
+}): ApiFormFieldSet {
   return {
     part: {
-      hidden: true
+      disabled: true,
+      hidden: !showAssembly
     },
     sub_part: {
       filters: {

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

@@ -511,7 +511,7 @@ export function BomTable({
   const newBomItem = useCreateApiFormModal({
     url: ApiEndpoints.bom_list,
     title: t`Add BOM Item`,
-    fields: bomItemFields(),
+    fields: bomItemFields({}),
     initialData: {
       part: partId
     },
@@ -523,7 +523,7 @@ export function BomTable({
     url: ApiEndpoints.bom_list,
     pk: selectedBomItem.pk,
     title: t`Edit BOM Item`,
-    fields: bomItemFields(),
+    fields: bomItemFields({}),
     successMessage: t`BOM item updated`,
     table: table
   });

src/frontend/src/tables/bom/UsedInTable.tsx

@@ -1,14 +1,18 @@
 import { t } from '@lingui/core/macro';
 import { Group, Text } from '@mantine/core';
-import { useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
 import { apiUrl } from '@lib/functions/Api';
+import { RowEditAction, UserRoles } from '@lib/index';
 import type { TableFilter } from '@lib/types/Filters';
-import type { TableColumn } from '@lib/types/Tables';
+import type { RowAction, TableColumn } from '@lib/types/Tables';
 import { formatDecimal } from '../../defaults/formatters';
+import { bomItemFields } from '../../forms/BomForms';
+import { useEditApiFormModal } from '../../hooks/UseForm';
 import { useTable } from '../../hooks/UseTable';
+import { useUserState } from '../../states/UserState';
 import {
   DescriptionColumn,
   PartColumn,
@@ -28,6 +32,8 @@ export function UsedInTable({
 }>) {
   const table = useTable('usedin');
 
+  const user = useUserState();
+
   const tableColumns: TableColumn[] = useMemo(() => {
     return [
       PartColumn({
@@ -98,22 +104,56 @@ export function UsedInTable({
     ];
   }, [partId]);
 
+  const [selectedBomItem, setSelectedBomItem] = useState<any>({});
+
+  const editBomItem = useEditApiFormModal({
+    url: ApiEndpoints.bom_list,
+    pk: selectedBomItem.pk,
+    title: t`Edit BOM Item`,
+    fields: bomItemFields({
+      showAssembly: true
+    }),
+    successMessage: t`BOM item updated`,
+    table: table
+  });
+
+  const rowActions = useCallback(
+    (record: any): RowAction[] => {
+      const locked = record.part_detail?.locked;
+
+      return [
+        RowEditAction({
+          hidden: locked || !user.hasChangeRole(UserRoles.part),
+          onClick: () => {
+            setSelectedBomItem(record);
+            editBomItem.open();
+          }
+        })
+      ];
+    },
+    [user]
+  );
+
   return (
-    <InvenTreeTable
-      url={apiUrl(ApiEndpoints.bom_list)}
-      tableState={table}
-      columns={tableColumns}
-      props={{
-        params: {
-          ...params,
-          uses: partId,
-          part_detail: true,
-          sub_part_detail: true
-        },
-        tableFilters: tableFilters,
-        modelType: ModelType.part,
-        modelField: 'part'
-      }}
-    />
+    <>
+      {editBomItem.modal}
+      <InvenTreeTable
+        url={apiUrl(ApiEndpoints.bom_list)}
+        tableState={table}
+        columns={tableColumns}
+        props={{
+          params: {
+            ...params,
+            uses: partId,
+            part_detail: true,
+            sub_part_detail: true
+          },
+          rowActions: rowActions,
+          tableFilters: tableFilters,
+          modelType: ModelType.part,
+          modelField: 'part'
+        }}
+      />
+    </>
   );
 }