From 656950aea33a6b1f5cc9c55cb69257f8508f67ce Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Fri, 8 Nov 2024 23:05:13 +1100
Subject: [PATCH] UI consolidation (#8450)

* UI consolidation

- Combine "suppliers" and "manufactuers" onto same tab

* Update StylishText.tsx

Remove unused import
---
 src/frontend/src/pages/part/PartDetail.tsx    | 28 ++++--------------
 .../src/pages/part/PartSupplierDetail.tsx     | 29 +++++++++++++++++++
 src/frontend/tests/pages/pui_part.spec.ts     |  5 ++--
 3 files changed, 37 insertions(+), 25 deletions(-)
 create mode 100644 src/frontend/src/pages/part/PartSupplierDetail.tsx

diff --git a/src/frontend/src/pages/part/PartDetail.tsx b/src/frontend/src/pages/part/PartDetail.tsx
index 3a8baf259d16..0f57ca5a0189 100644
--- a/src/frontend/src/pages/part/PartDetail.tsx
+++ b/src/frontend/src/pages/part/PartDetail.tsx
@@ -12,7 +12,6 @@ import {
 import {
   IconBookmarks,
   IconBuilding,
-  IconBuildingFactory2,
   IconCalendarStats,
   IconClipboardList,
   IconCurrencyDollar,
@@ -93,8 +92,6 @@ import PartPurchaseOrdersTable from '../../tables/part/PartPurchaseOrdersTable';
 import PartTestTemplateTable from '../../tables/part/PartTestTemplateTable';
 import { PartVariantTable } from '../../tables/part/PartVariantTable';
 import { RelatedPartTable } from '../../tables/part/RelatedPartTable';
-import { ManufacturerPartTable } from '../../tables/purchasing/ManufacturerPartTable';
-import { SupplierPartTable } from '../../tables/purchasing/SupplierPartTable';
 import { ReturnOrderTable } from '../../tables/sales/ReturnOrderTable';
 import { SalesOrderTable } from '../../tables/sales/SalesOrderTable';
 import { StockItemTable } from '../../tables/stock/StockItemTable';
@@ -103,6 +100,7 @@ import PartAllocationPanel from './PartAllocationPanel';
 import PartPricingPanel from './PartPricingPanel';
 import PartSchedulingDetail from './PartSchedulingDetail';
 import PartStocktakeDetail from './PartStocktakeDetail';
+import PartSupplierDetail from './PartSupplierDetail';
 
 /**
  * Detail view for a single Part instance
@@ -651,31 +649,17 @@ export default function PartDetail() {
         icon: <IconCurrencyDollar />,
         content: part ? <PartPricingPanel part={part} /> : <Skeleton />
       },
-      {
-        name: 'manufacturers',
-        label: t`Manufacturers`,
-        icon: <IconBuildingFactory2 />,
-        hidden: !part.purchaseable,
-        content: part.pk && (
-          <ManufacturerPartTable
-            params={{
-              part: part.pk
-            }}
-          />
-        )
-      },
       {
         name: 'suppliers',
         label: t`Suppliers`,
         icon: <IconBuilding />,
         hidden:
           !part.purchaseable || !user.hasViewRole(UserRoles.purchase_order),
-        content: part.pk && (
-          <SupplierPartTable
-            params={{
-              part: part.pk
-            }}
-          />
+
+        content: part.pk ? (
+          <PartSupplierDetail partId={part.pk} />
+        ) : (
+          <Skeleton />
         )
       },
       {
diff --git a/src/frontend/src/pages/part/PartSupplierDetail.tsx b/src/frontend/src/pages/part/PartSupplierDetail.tsx
new file mode 100644
index 000000000000..c05290050f47
--- /dev/null
+++ b/src/frontend/src/pages/part/PartSupplierDetail.tsx
@@ -0,0 +1,29 @@
+import { t } from '@lingui/macro';
+import { Accordion, Skeleton } from '@mantine/core';
+
+import { StylishText } from '../../components/items/StylishText';
+import { ManufacturerPartTable } from '../../tables/purchasing/ManufacturerPartTable';
+import { SupplierPartTable } from '../../tables/purchasing/SupplierPartTable';
+
+export default function PartSupplierDetail({ partId }: { partId: number }) {
+  return (
+    <Accordion multiple defaultValue={['part-suppliers', 'part-manufacturers']}>
+      <Accordion.Item value="part-suppliers">
+        <Accordion.Control>
+          <StylishText size="lg">{t`Suppliers`}</StylishText>
+        </Accordion.Control>
+        <Accordion.Panel>
+          <SupplierPartTable params={{ part: partId }} />
+        </Accordion.Panel>
+      </Accordion.Item>
+      <Accordion.Item value="part-manufacturers">
+        <Accordion.Control>
+          <StylishText size="lg">{t`Manufacturers`}</StylishText>
+        </Accordion.Control>
+        <Accordion.Panel>
+          <ManufacturerPartTable params={{ part: partId }} />
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion>
+  );
+}
diff --git a/src/frontend/tests/pages/pui_part.spec.ts b/src/frontend/tests/pages/pui_part.spec.ts
index 118a3e5f41c5..96a20f55b7d5 100644
--- a/src/frontend/tests/pages/pui_part.spec.ts
+++ b/src/frontend/tests/pages/pui_part.spec.ts
@@ -17,7 +17,6 @@ test('Parts - Tabs', async ({ page }) => {
   await page.getByRole('tab', { name: 'Allocations' }).click();
   await page.getByRole('tab', { name: 'Used In' }).click();
   await page.getByRole('tab', { name: 'Pricing' }).click();
-  await page.getByRole('tab', { name: 'Manufacturers' }).click();
   await page.getByRole('tab', { name: 'Suppliers' }).click();
   await page.getByRole('tab', { name: 'Purchase Orders' }).click();
   await page.getByRole('tab', { name: 'Scheduling' }).click();
@@ -48,9 +47,9 @@ test('Parts - Tabs', async ({ page }) => {
 test('Parts - Manufacturer Parts', async ({ page }) => {
   await doQuickLogin(page);
 
-  await page.goto(`${baseUrl}/part/84/manufacturers`);
+  await page.goto(`${baseUrl}/part/84/suppliers`);
 
-  await page.getByRole('tab', { name: 'Manufacturers' }).click();
+  await page.getByRole('tab', { name: 'Suppliers' }).click();
   await page.getByText('Hammond Manufacturing').click();
   await page.getByRole('tab', { name: 'Parameters' }).click();
   await page.getByRole('tab', { name: 'Suppliers' }).click();