From 1eb4e4fb3dd88a09c531edb92e80cd9b16ec30b3 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Thu, 4 Sep 2025 10:42:00 +1000
Subject: [PATCH] [UI] Details Table Fixes (#10263)

* Remove "copy" button from link

* Handle empty details group

* Tweak text

* Fix link in details field
---
 .../src/components/details/Details.tsx        | 24 +++++++++++++------
 .../src/pages/company/SupplierPartDetail.tsx  |  3 +--
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/frontend/src/components/details/Details.tsx b/src/frontend/src/components/details/Details.tsx
index 098a827ea4..b04ce1d492 100644
--- a/src/frontend/src/components/details/Details.tsx
+++ b/src/frontend/src/components/details/Details.tsx
@@ -22,7 +22,7 @@ import { YesNoButton } from '@lib/components/YesNoButton';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
 import { apiUrl } from '@lib/functions/Api';
-import { getDetailUrl } from '@lib/functions/Navigation';
+import { getBaseUrl, getDetailUrl } from '@lib/functions/Navigation';
 import { navigateToLink } from '@lib/functions/Navigation';
 import type { InvenTreeIconType } from '@lib/types/Icons';
 import { useApi } from '../../contexts/ApiContext';
@@ -369,6 +369,10 @@ function TableAnchorValue(props: Readonly<FieldProps>) {
     [detailUrl]
   );
 
+  const absoluteUrl = useMemo(() => {
+    return `/${getBaseUrl()}${detailUrl}`;
+  }, [detailUrl]);
+
   if (!data || data.isLoading || data.isFetching) {
     return <Skeleton height={12} radius='md' />;
   }
@@ -412,7 +416,7 @@ function TableAnchorValue(props: Readonly<FieldProps>) {
   return (
     <>
       {make_link ? (
-        <Anchor href='#' onClick={handleLinkClick}>
+        <Anchor href={absoluteUrl} onClick={handleLinkClick}>
           <Text>{value}</Text>
         </Anchor>
       ) : (
@@ -518,6 +522,14 @@ export function DetailsTable({
   fields: DetailsField[];
   title?: string;
 }>) {
+  const visibleFields = useMemo(() => {
+    return fields.filter((field) => !field.hidden);
+  }, [fields]);
+
+  if (!visibleFields?.length) {
+    return <div />;
+  }
+
   return (
     <Paper
       p='xs'
@@ -528,11 +540,9 @@ export function DetailsTable({
         {title && <StylishText size='lg'>{title}</StylishText>}
         <Table striped verticalSpacing={5} horizontalSpacing='sm'>
           <Table.Tbody>
-            {fields
-              .filter((field: DetailsField) => !field.hidden)
-              .map((field: DetailsField, index: number) => (
-                <DetailsTableField field={field} item={item} key={index} />
-              ))}
+            {visibleFields.map((field: DetailsField, index: number) => (
+              <DetailsTableField field={field} item={item} key={index} />
+            ))}
           </Table.Tbody>
         </Table>
       </Stack>
diff --git a/src/frontend/src/pages/company/SupplierPartDetail.tsx b/src/frontend/src/pages/company/SupplierPartDetail.tsx
index 448ad58403..8f9bfc2743 100644
--- a/src/frontend/src/pages/company/SupplierPartDetail.tsx
+++ b/src/frontend/src/pages/company/SupplierPartDetail.tsx
@@ -157,9 +157,8 @@ export default function SupplierPartDetail() {
         type: 'link',
         name: 'manufacturer_part',
         model_field: 'MPN',
-        label: t`Manufacturer Part Number`,
+        label: t`Manufacturer Part`,
         model: ModelType.manufacturerpart,
-        copy: true,
         icon: 'reference',
         hidden: !data.manufacturer_part
       }