Improve breadcrumbs using new path API (#5570)

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

@@ -29,7 +29,7 @@ export default function CategoryDetail({}: {}) {
     instance: category,
     refreshInstance,
     instanceQuery
-  } = useInstance('/part/category/', id);
+  } = useInstance('/part/category/', id, { path_detail: true });
 
   const categoryPanels: PanelType[] = useMemo(
     () => [
@@ -69,24 +69,24 @@ export default function CategoryDetail({}: {}) {
     [category, id]
   );
 
+  const breadcrumbs = useMemo(
+    () => [
+      { name: t`Parts`, url: '/part' },
+      ...(category.path ?? []).map((c: any) => ({
+        name: c.name,
+        url: `/part/category/${c.pk}`
+      }))
+    ],
+    [category]
+  );
+
   return (
     <Stack spacing="xs">
       <LoadingOverlay visible={instanceQuery.isFetching} />
       <PageDetail
         title={t`Part Category`}
         detail={<Text>{category.name ?? 'Top level'}</Text>}
-        breadcrumbs={
-          category.pk
-            ? [
-                { name: t`Parts`, url: '/part' },
-                { name: '...', url: '' },
-                {
-                  name: category.name ?? t`Top level`,
-                  url: `/part/category/${category.pk}`
-                }
-              ]
-            : []
-        }
+        breadcrumbs={breadcrumbs}
       />
       <PanelGroup panels={categoryPanels} />
     </Stack>

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

@@ -16,22 +16,17 @@ import {
   IconTruckDelivery,
   IconVersions
 } from '@tabler/icons-react';
-import { useQuery } from '@tanstack/react-query';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { useMemo } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { api } from '../../App';
 import { PlaceholderPanel } from '../../components/items/Placeholder';
 import { PageDetail } from '../../components/nav/PageDetail';
 import { PanelGroup, PanelType } from '../../components/nav/PanelGroup';
 import { AttachmentTable } from '../../components/tables/AttachmentTable';
 import { RelatedPartTable } from '../../components/tables/part/RelatedPartTable';
 import { StockItemTable } from '../../components/tables/stock/StockItemTable';
-import {
-  MarkdownEditor,
-  NotesEditor
-} from '../../components/widgets/MarkdownEditor';
+import { NotesEditor } from '../../components/widgets/MarkdownEditor';
 import { editPart } from '../../functions/forms/PartForms';
 import { useInstance } from '../../hooks/UseInstance';
 
@@ -45,7 +40,7 @@ export default function PartDetail() {
     instance: part,
     refreshInstance,
     instanceQuery
-  } = useInstance('/part/', id);
+  } = useInstance('/part/', id, { path_detail: true });
 
   // Part data panels (recalculate when part data changes)
   const partPanels: PanelType[] = useMemo(() => {
@@ -174,6 +169,18 @@ export default function PartDetail() {
       />
     );
   }
+
+  const breadcrumbs = useMemo(
+    () => [
+      { name: t`Parts`, url: '/part' },
+      ...(part.category_path ?? []).map((c: any) => ({
+        name: c.name,
+        url: `/part/category/${c.pk}`
+      }))
+    ],
+    [part]
+  );
+
   return (
     <>
       <Stack spacing="xs">
@@ -186,11 +193,7 @@ export default function PartDetail() {
               <Text>TODO: Part details</Text>
             </Alert>
           }
-          breadcrumbs={[
-            { name: t`Parts`, url: '/part' },
-            { name: '...', url: '' },
-            { name: part.name, url: `/part/${part.pk}` }
-          ]}
+          breadcrumbs={breadcrumbs}
           actions={[
             <Button
               variant="outline"

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

@@ -17,7 +17,7 @@ export default function Stock() {
     instance: location,
     refreshInstance,
     instanceQuery
-  } = useInstance('/stock/location/', id);
+  } = useInstance('/stock/location/', id, { path_detail: true });
 
   const locationPanels: PanelType[] = useMemo(() => {
     return [
@@ -48,6 +48,17 @@ export default function Stock() {
     ];
   }, [location, id]);
 
+  const breadcrumbs = useMemo(
+    () => [
+      { name: t`Stock`, url: '/stock' },
+      ...(location.path ?? []).map((l: any) => ({
+        name: l.name,
+        url: `/stock/location/${l.pk}`
+      }))
+    ],
+    [location]
+  );
+
   return (
     <>
       <Stack>
@@ -55,18 +66,7 @@ export default function Stock() {
         <PageDetail
           title={t`Stock Items`}
           detail={<Text>{location.name ?? 'Top level'}</Text>}
-          breadcrumbs={
-            location.pk
-              ? [
-                  { name: t`Stock`, url: '/stock' },
-                  { name: '...', url: '' },
-                  {
-                    name: location.name ?? t`Top level`,
-                    url: `/stock/location/${location.pk}`
-                  }
-                ]
-              : []
-          }
+          breadcrumbs={breadcrumbs}
         />
         <PanelGroup panels={locationPanels} />
       </Stack>

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

@@ -29,7 +29,8 @@ export default function StockDetail() {
     instanceQuery
   } = useInstance('/stock/', id, {
     part_detail: true,
-    location_detail: true
+    location_detail: true,
+    path_detail: true
   });
 
   const stockPanels: PanelType[] = useMemo(() => {
@@ -91,6 +92,17 @@ export default function StockDetail() {
     ];
   }, [stockitem, id]);
 
+  const breadcrumbs = useMemo(
+    () => [
+      { name: t`Stock`, url: '/stock' },
+      ...(stockitem.location_path ?? []).map((l: any) => ({
+        name: l.name,
+        url: `/stock/location/${l.pk}`
+      }))
+    ],
+    [stockitem]
+  );
+
   return (
     <Stack>
       <LoadingOverlay visible={instanceQuery.isFetching} />
@@ -102,14 +114,7 @@ export default function StockDetail() {
             <Text>Quantity: {stockitem.quantity ?? 'idk'}</Text>
           </Alert>
         }
-        breadcrumbs={[
-          { name: t`Stock`, url: '/stock' },
-          { name: '...', url: '' },
-          {
-            name: stockitem.part_detail?.full_name ?? 'name goes here',
-            url: `/stock/item/${stockitem.pk}`
-          }
-        ]}
+        breadcrumbs={breadcrumbs}
       />
       <PanelGroup panels={stockPanels} />
     </Stack>