[UI] Lock action (#11981)

- Toggle part lock directly from existing icon

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

@@ -23,6 +23,7 @@ import {
   IconListDetails,
   IconListTree,
   IconLock,
+  IconLockOpen,
   IconPackages,
   IconSearch,
   IconShoppingCart,
@@ -1132,9 +1133,20 @@ export default function PartDetail() {
           <PageDetail
             title={`${t`Part`}: ${part.full_name}`}
             icon={
-              part?.locked ? (
+              <ActionIcon
-                <IconLock aria-label='part-lock-icon' />
+                aria-label='part-lock-icon'
-              ) : undefined
+                variant='transparent'
+                disabled={!user.hasChangeRole(UserRoles.part)}
+                onClick={() => {
+                  api
+                    .patch(apiUrl(ApiEndpoints.part_list, part.pk), {
+                      locked: !part.locked
+                    })
+                    .then(refreshInstance);
+                }}
+              >
+                {part?.locked ? <IconLock /> : <IconLockOpen />}
+              </ActionIcon>
             }
             subtitle={part.description}
             imageUrl={part.image}