[PUI] Edit shortcut (#7870)

* Adds shortcut to edit item on <PageDetail>

* Add hooks for shortcut key

* Add unit tests for edit shortcut

src/frontend/src/components/nav/PageDetail.tsx

@@ -1,4 +1,5 @@
 import { Group, Paper, Space, Stack, Text } from '@mantine/core';
+import { useHotkeys } from '@mantine/hooks';
 import { Fragment, ReactNode } from 'react';
 
 import { ApiImage } from '../images/ApiImage';
@@ -15,6 +16,8 @@ interface PageDetailInterface {
   breadcrumbs?: Breadcrumb[];
   breadcrumbAction?: () => void;
   actions?: ReactNode[];
+  editAction?: () => void;
+  editEnabled?: boolean;
 }
 
 /**
@@ -32,8 +35,21 @@ export function PageDetail({
   imageUrl,
   breadcrumbs,
   breadcrumbAction,
-  actions
+  actions,
+  editAction,
+  editEnabled
 }: Readonly<PageDetailInterface>) {
+  useHotkeys([
+    [
+      'mod+E',
+      () => {
+        if (editEnabled ?? true) {
+          editAction?.();
+        }
+      }
+    ]
+  ]);
+
   return (
     <Stack gap="xs">
       {breadcrumbs && breadcrumbs.length > 0 && (

src/frontend/src/pages/build/BuildDetail.tsx

@@ -542,6 +542,8 @@ export default function BuildDetail() {
             title={build.reference}
             subtitle={build.title}
             badges={buildBadges}
+            editAction={editBuild.open}
+            editEnabled={user.hasChangePermission(ModelType.part)}
             imageUrl={build.part_detail?.image ?? build.part_detail?.thumbnail}
             breadcrumbs={[
               { name: t`Build Orders`, url: '/build' },

src/frontend/src/pages/company/CompanyDetail.tsx

@@ -330,6 +330,8 @@ export default function CompanyDetail(props: Readonly<CompanyDetailProps>) {
             imageUrl={company.image}
             breadcrumbs={props.breadcrumbs}
             badges={badges}
+            editAction={editCompany.open}
+            editEnabled={user.hasChangePermission(ModelType.company)}
           />
           <PanelGroup pageKey="company" panels={companyPanels} />
         </Stack>

src/frontend/src/pages/company/ManufacturerPartDetail.tsx

@@ -283,6 +283,8 @@ export default function ManufacturerPartDetail() {
             breadcrumbs={breadcrumbs}
             actions={manufacturerPartActions}
             imageUrl={manufacturerPart?.part_detail?.thumbnail}
+            editAction={editManufacturerPart.open}
+            editEnabled={user.hasChangePermission(ModelType.manufacturerpart)}
           />
           <PanelGroup pageKey="manufacturerpart" panels={panels} />
         </Stack>

src/frontend/src/pages/company/SupplierPartDetail.tsx

@@ -375,6 +375,8 @@ export default function SupplierPartDetail() {
             badges={badges}
             actions={supplierPartActions}
             imageUrl={supplierPart?.part_detail?.thumbnail}
+            editAction={editSupplierPart.open}
+            editEnabled={user.hasChangePermission(ModelType.supplierpart)}
           />
           <PanelGroup pageKey="supplierpart" panels={panels} />
         </Stack>

src/frontend/src/pages/part/CategoryDetail.tsx

@@ -310,6 +310,8 @@ export default function CategoryDetail() {
               setTreeOpen(true);
             }}
             actions={categoryActions}
+            editAction={editCategory.open}
+            editEnabled={user.hasChangePermission(ModelType.partcategory)}
           />
           <PanelGroup pageKey="partcategory" panels={categoryPanels} />
         </Stack>

src/frontend/src/pages/part/PartDetail.tsx

@@ -1057,6 +1057,8 @@ export default function PartDetail() {
             breadcrumbAction={() => {
               setTreeOpen(true);
             }}
+            editAction={editPart.open}
+            editEnabled={user.hasChangeRole(UserRoles.part)}
             actions={partActions}
             detail={
               enableRevisionSelection ? (

src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx

@@ -442,6 +442,8 @@ export default function PurchaseOrderDetail() {
             breadcrumbs={[{ name: t`Purchasing`, url: '/purchasing/' }]}
             actions={poActions}
             badges={orderBadges}
+            editAction={editPurchaseOrder.open}
+            editEnabled={user.hasChangePermission(ModelType.purchaseorder)}
           />
           <PanelGroup pageKey="purchaseorder" panels={orderPanels} />
         </Stack>

src/frontend/src/pages/sales/ReturnOrderDetail.tsx

@@ -430,6 +430,8 @@ export default function ReturnOrderDetail() {
             badges={orderBadges}
             actions={orderActions}
             breadcrumbs={[{ name: t`Sales`, url: '/sales/' }]}
+            editAction={editReturnOrder.open}
+            editEnabled={user.hasChangePermission(ModelType.returnorder)}
           />
           <PanelGroup pageKey="returnorder" panels={orderPanels} />
         </Stack>

src/frontend/src/pages/sales/SalesOrderDetail.tsx

@@ -482,6 +482,8 @@ export default function SalesOrderDetail() {
             badges={orderBadges}
             actions={soActions}
             breadcrumbs={[{ name: t`Sales`, url: '/sales/' }]}
+            editAction={editSalesOrder.open}
+            editEnabled={user.hasChangePermission(ModelType.salesorder)}
           />
           <PanelGroup pageKey="salesorder" panels={orderPanels} />
         </Stack>

src/frontend/src/pages/stock/LocationDetail.tsx

@@ -388,6 +388,8 @@ export default function Stock() {
             subtitle={location?.name}
             icon={location?.icon && <ApiIcon name={location?.icon} />}
             actions={locationActions}
+            editAction={editLocation.open}
+            editEnabled={user.hasChangePermission(ModelType.stocklocation)}
             breadcrumbs={breadcrumbs}
             breadcrumbAction={() => {
               setTreeOpen(true);

src/frontend/src/pages/stock/StockDetail.tsx

@@ -621,6 +621,8 @@ export default function StockDetail() {
           title={t`Stock Item`}
           subtitle={stockitem.part_detail?.full_name}
           imageUrl={stockitem.part_detail?.thumbnail}
+          editAction={editStockItem.open}
+          editEnabled={user.hasChangePermission(ModelType.stockitem)}
           badges={stockBadges}
           breadcrumbs={breadcrumbs}
           breadcrumbAction={() => {

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

@@ -19,6 +19,13 @@ test('PUI - Pages - Build Order', async ({ page }) => {
 
   // This build order should be "on hold"
   await page.getByText('On Hold').first().waitFor();
+
+  // Edit the build order (via keyboard shortcut)
+  await page.keyboard.press('Control+E');
+  await page.getByLabel('text-field-title').waitFor();
+  await page.getByLabel('related-field-project_code').waitFor();
+  await page.getByRole('button', { name: 'Cancel' }).click();
+
   await page.getByRole('button', { name: 'Issue Order' }).click();
   await page.getByRole('button', { name: 'Cancel' }).click();
 

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

@@ -226,6 +226,15 @@ test('PUI - Pages - Part - Notes', async ({ page }) => {
   await page.goto(`${baseUrl}/part/69/notes`);
 
   // Enable editing
+  await page.getByLabel('toggle-notes-editing').waitFor();
+
+  // Use keyboard shortcut to "edit" the part
+  await page.keyboard.press('Control+E');
+  await page.getByLabel('text-field-name').waitFor();
+  await page.getByLabel('text-field-description').waitFor();
+  await page.getByLabel('related-field-category').waitFor();
+  await page.getByRole('button', { name: 'Cancel' }).click();
+
   await page.getByLabel('toggle-notes-editing').click();
 
   // Enter some text