[UI] Hide top level tree panels (#11799)

* Hide "top level stock location" panel

Co-authored-by: Copilot <copilot@github.com>

* Hide "top level part category"

Co-authored-by: Copilot <copilot@github.com>

* Adjust playwright tests

* Improve robustness of test

Co-authored-by: Copilot <copilot@github.com>

---------

Co-authored-by: Copilot <copilot@github.com>

src/frontend/src/pages/part/CategoryDetail.tsx

@@ -1,5 +1,5 @@
 import { t } from '@lingui/core/macro';
-import { Group, LoadingOverlay, Skeleton, Stack, Text } from '@mantine/core';
+import { Group, LoadingOverlay, Skeleton, Stack } from '@mantine/core';
 import {
   IconCategory,
   IconInfoCircle,
@@ -167,11 +167,7 @@ export default function CategoryDetail() {
 
     return (
       <ItemDetailsGrid>
-        {id && category?.pk ? (
-          <DetailsTable item={category} fields={left} />
-        ) : (
-          <Text>{t`Top level part category`}</Text>
-        )}
+        {id && category?.pk && <DetailsTable item={category} fields={left} />}
         {id && category?.pk && <DetailsTable item={category} fields={right} />}
       </ItemDetailsGrid>
     );
@@ -272,7 +268,8 @@ export default function CategoryDetail() {
         name: 'details',
         label: t`Category Details`,
         icon: <IconInfoCircle />,
-        content: detailsPanel
+        content: detailsPanel,
+        hidden: !id || !category?.pk
       },
       {
         name: 'subcategories',

src/frontend/src/pages/stock/LocationDetail.tsx

@@ -5,7 +5,7 @@ import { apiUrl } from '@lib/functions/Api';
 import { getDetailUrl } from '@lib/functions/Navigation';
 import type { StockOperationProps } from '@lib/types/Forms';
 import { t } from '@lingui/core/macro';
-import { Group, Skeleton, Stack, Text } from '@mantine/core';
+import { Group, Skeleton, Stack } from '@mantine/core';
 import {
   IconInfoCircle,
   IconListDetails,
@@ -160,11 +160,7 @@ export default function Stock() {
 
     return (
       <ItemDetailsGrid>
-        {id && location?.pk ? (
-          <DetailsTable item={location} fields={left} />
-        ) : (
-          <Text>{t`Top level stock location`}</Text>
-        )}
+        {id && location?.pk && <DetailsTable item={location} fields={left} />}
         {id && location?.pk && <DetailsTable item={location} fields={right} />}
       </ItemDetailsGrid>
     );
@@ -178,7 +174,8 @@ export default function Stock() {
         name: 'details',
         label: t`Location Details`,
         icon: <IconInfoCircle />,
-        content: detailsPanel
+        content: detailsPanel,
+        hidden: !location?.pk
       },
       SegmentedControlPanel({
         name: 'sublocations',
@@ -457,7 +454,7 @@ export default function Stock() {
             title={(location?.name ?? id) ? t`Stock Location` : t`Stock`}
             subtitle={location?.description}
             icon={location?.icon && <ApiIcon name={location?.icon} />}
-            actions={locationActions}
+            actions={location?.pk ? locationActions : undefined}
             editAction={editLocation.open}
             editEnabled={
               !!location?.pk &&

src/frontend/tests/pages/pui_stock.spec.ts

@@ -15,9 +15,6 @@ test('Stock - Basic Tests', async ({ browser }) => {
 
   await page.waitForURL('**/web/stock/location/**');
 
-  await loadTab(page, 'Location Details');
-  await page.waitForURL('**/web/stock/location/index/details');
-
   await loadTab(page, 'Stock Items');
   await page.getByText('1551ABK').first().click();
 
@@ -62,7 +59,6 @@ test('Stock - Location Tree', async ({ browser }) => {
   const page = await doCachedLogin(browser, { url: 'stock/location/index/' });
 
   await page.waitForURL('**/web/stock/location/**');
-  await loadTab(page, 'Location Details');
 
   await page.getByLabel('nav-breadcrumb-action').click();
   await page.getByLabel('nav-tree-toggle-1}').click();
@@ -79,13 +75,14 @@ test('Stock - Location Delete', async ({ browser }) => {
     url: 'stock/location/38/sublocations'
   });
 
+  const loc_1 = `loc-1-${Math.floor(Math.random() * 1000)}`;
+  const loc_2 = `loc-2-${Math.floor(Math.random() * 1000)}`;
+
   // Create a sub-location
   await page
     .getByRole('button', { name: 'action-button-add-stock-location' })
     .click();
-  await page
-    .getByRole('textbox', { name: 'text-field-name' })
-    .fill('my-location-1');
+  await page.getByRole('textbox', { name: 'text-field-name' }).fill(loc_1);
   await page.getByRole('button', { name: 'Submit' }).click();
 
   // Create a secondary sub-location
@@ -93,22 +90,20 @@ test('Stock - Location Delete', async ({ browser }) => {
   await page
     .getByRole('button', { name: 'action-button-add-stock-location' })
     .click();
-  await page
-    .getByRole('textbox', { name: 'text-field-name' })
-    .fill('my-location-2');
+  await page.getByRole('textbox', { name: 'text-field-name' }).fill(loc_2);
   await page.getByRole('button', { name: 'Submit' }).click();
 
   // Navigate up to parent
-  await page.getByRole('link', { name: 'breadcrumb-2-my-location-1' }).click();
+  await page.getByRole('link', { name: `breadcrumb-2-${loc_1}` }).click();
   await loadTab(page, 'Sublocations');
-  await page
-    .getByRole('cell', { name: 'my-location-2', exact: true })
-    .waitFor();
+  await page.getByRole('cell', { name: loc_2, exact: true }).waitFor();
 
   // Delete this location, and all child locations
   await page
     .locator('div')
-    .filter({ hasText: /^Stock>PCB Assembler>my-location-1Stock Location$/ })
+    .filter({
+      hasText: new RegExp(`^Stock>PCB Assembler>${loc_1}Stock Location$`)
+    })
     .getByLabel('action-menu-location-actions')
     .click();
   await page

src/frontend/tests/pui_permissions.spec.ts

@@ -65,7 +65,6 @@ test('Permissions - Reader', async ({ browser }) => {
     url: '/part/category/index/'
   });
 
-  await loadTab(page, 'Category Details');
   await loadTab(page, 'Parts');
 
   // Navigate to a specific part