From 7c19e51d8071c0416611215d66b6c33c40217f9e Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Wed, 16 Oct 2024 19:43:10 +1100
Subject: [PATCH] Simplify display of "locked" part status (#8297)

* Simplify display of "locked" part status

- REmove big badge
- Show subtle icon

* Update playwright test
---
 src/frontend/src/pages/part/PartDetail.tsx | 14 ++++++--------
 src/frontend/tests/pages/pui_part.spec.ts  |  2 +-
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/frontend/src/pages/part/PartDetail.tsx b/src/frontend/src/pages/part/PartDetail.tsx
index 7053e3b89e..05305667c8 100644
--- a/src/frontend/src/pages/part/PartDetail.tsx
+++ b/src/frontend/src/pages/part/PartDetail.tsx
@@ -21,9 +21,8 @@ import {
   IconLayersLinked,
   IconList,
   IconListTree,
-  IconNotes,
+  IconLock,
   IconPackages,
-  IconPaperclip,
   IconReportAnalytics,
   IconShoppingCart,
   IconStack2,
@@ -899,12 +898,6 @@ export default function PartDetail() {
         visible={part.building > 0}
         key="in_production"
       />,
-      <DetailsBadge
-        label={t`Locked`}
-        color="black"
-        visible={part.locked == true}
-        key="locked"
-      />,
       <DetailsBadge
         label={t`Inactive`}
         color="red"
@@ -1090,6 +1083,11 @@ export default function PartDetail() {
           />
           <PageDetail
             title={t`Part` + ': ' + part.full_name}
+            icon={
+              part?.locked ? (
+                <IconLock aria-label="part-lock-icon" />
+              ) : undefined
+            }
             subtitle={part.description}
             imageUrl={part.image}
             badges={badges}
diff --git a/src/frontend/tests/pages/pui_part.spec.ts b/src/frontend/tests/pages/pui_part.spec.ts
index 3dcd7a0b84..0c3f7e7137 100644
--- a/src/frontend/tests/pages/pui_part.spec.ts
+++ b/src/frontend/tests/pages/pui_part.spec.ts
@@ -15,7 +15,7 @@ test('Pages - Part - Locking', async ({ page }) => {
   // Navigate to a known assembly which *is* locked
   await page.goto(`${baseUrl}/part/100/bom`);
   await page.getByRole('tab', { name: 'Bill of Materials' }).click();
-  await page.getByText('Locked', { exact: true }).waitFor();
+  await page.getByLabel('part-lock-icon').waitFor();
   await page.getByText('Part is Locked', { exact: true }).waitFor();
 
   // Check the "parameters" tab also