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

@@ -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}

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