Remove <Playground> from PUI frontend (#8276)

* Remove <Playground> from PUI frontend

- Components are now mature enough with sufficient examples in the codebase

* Remove dead code

src/frontend/src/defaults/links.tsx

@@ -37,10 +37,6 @@ export const navTabs = [
   { text: <Trans>Sales</Trans>, name: 'sales', role: UserRoles.sales_order }
 ];
 
-if (IS_DEV_OR_DEMO) {
-  navTabs.push({ text: <Trans>Playground</Trans>, name: 'playground' });
-}
-
 export const docLinks = {
   app: 'https://docs.inventree.org/app/',
   getting_started: 'https://docs.inventree.org/en/latest/getting_started/',

src/frontend/src/defaults/menuItems.tsx

@@ -64,12 +64,3 @@ export const menuItems: menuItemsCollection = {
     link: '/settings/admin'
   }
 };
-
-if (IS_DEV_OR_DEMO) {
-  menuItems['playground'] = {
-    id: 'playground',
-    text: <Trans>Playground</Trans>,
-    link: '/playground',
-    highlight: true
-  };
-}

src/frontend/src/pages/Index/Playground.tsx

@@ -1,240 +0,0 @@
-import { Trans } from '@lingui/macro';
-import {
-  Accordion,
-  Button,
-  Card,
-  Group,
-  Stack,
-  Text,
-  TextInput
-} from '@mantine/core';
-import { SpotlightActionData } from '@mantine/spotlight';
-import { IconAlien } from '@tabler/icons-react';
-import { ReactNode, useMemo, useState } from 'react';
-
-import { OptionsApiForm } from '../../components/forms/ApiForm';
-import { PlaceholderPill } from '../../components/items/Placeholder';
-import { StylishText } from '../../components/items/StylishText';
-import { firstSpotlight } from '../../components/nav/Layout';
-import { StatusRenderer } from '../../components/render/StatusRenderer';
-import { ApiEndpoints } from '../../enums/ApiEndpoints';
-import { ModelType } from '../../enums/ModelType';
-import { partCategoryFields, usePartFields } from '../../forms/PartForms';
-import { useCreateStockItem } from '../../forms/StockForms';
-import {
-  useCreateApiFormModal,
-  useEditApiFormModal
-} from '../../hooks/UseForm';
-
-// Generate some example forms using the modal API forms interface
-
-function ApiFormsPlayground() {
-  const fields = partCategoryFields({});
-
-  const editCategory = useEditApiFormModal({
-    url: ApiEndpoints.category_list,
-    pk: 2,
-    title: 'Edit Category',
-    fields: fields
-  });
-
-  const createPartFields = usePartFields({ create: true });
-  const editPartFields = usePartFields({ create: false });
-
-  const newPart = useCreateApiFormModal({
-    url: ApiEndpoints.part_list,
-    title: 'Create Part',
-    fields: createPartFields,
-    initialData: {
-      description: 'A part created via the API'
-    }
-  });
-
-  const editPart = useEditApiFormModal({
-    url: ApiEndpoints.part_list,
-    pk: 1,
-    title: 'Edit Part',
-    fields: editPartFields
-  });
-
-  const [active, setActive] = useState(true);
-  const [name, setName] = useState('Hello');
-
-  const partFieldsState: any = useMemo<any>(() => {
-    const fields = editPartFields;
-    fields.name = {
-      ...fields.name,
-      value: name,
-      onValueChange: setName
-    };
-    fields.active = {
-      ...fields.active,
-      value: active,
-      onValueChange: setActive
-    };
-    fields.responsible = {
-      ...fields.responsible,
-      disabled: !active
-    };
-    return fields;
-  }, [name, active]);
-
-  const { modal: createPartModal, open: openCreatePart } =
-    useCreateApiFormModal({
-      url: ApiEndpoints.part_list,
-      title: 'Create part',
-      fields: partFieldsState,
-      initialData: {
-        is_template: true,
-        virtual: true,
-        minimum_stock: 10,
-        description: 'An example part description',
-        keywords: 'apple, banana, carrottt',
-        'initial_supplier.sku': 'SKU-123'
-      },
-      preFormContent: (
-        <Button onClick={() => setName('Hello world')}>
-          Set name="Hello world"
-        </Button>
-      )
-    });
-
-  const { modal: createStockItemModal, open: openCreateStockItem } =
-    useCreateStockItem();
-
-  return (
-    <Stack>
-      <Group>
-        <Button onClick={() => newPart.open()}>Create New Part</Button>
-        {newPart.modal}
-
-        <Button onClick={() => editPart.open()}>Edit Part</Button>
-        {editPart.modal}
-
-        <Button onClick={() => openCreateStockItem()}>Create Stock Item</Button>
-        {createStockItemModal}
-
-        <Button onClick={() => editCategory.open()}>Edit Category</Button>
-        {editCategory.modal}
-
-        <Button onClick={() => openCreatePart()}>Create Part new Modal</Button>
-        {createPartModal}
-      </Group>
-      <Card style={{ padding: '30px' }}>
-        <OptionsApiForm
-          props={{
-            url: ApiEndpoints.part_list,
-            method: 'POST',
-            fields: {
-              active: {
-                value: active,
-                onValueChange: setActive
-              },
-              keywords: {
-                disabled: !active,
-                value: 'default,test,placeholder'
-              }
-            }
-          }}
-          id={'this is very unique'}
-        />
-      </Card>
-    </Stack>
-  );
-}
-
-// Show some example status labels
-function StatusLabelPlayground() {
-  const [status, setStatus] = useState<string>('10');
-  return (
-    <Group>
-      <Text>Stock Status</Text>
-      <TextInput
-        value={status}
-        onChange={(event) => setStatus(event.currentTarget.value)}
-      />
-      <StatusRenderer type={ModelType.stockitem} status={status} />
-    </Group>
-  );
-}
-
-// Sample for spotlight actions
-function SpotlighPlayground() {
-  return (
-    <Button
-      variant="outline"
-      onClick={() => {
-        const setAdditionalActions = (value: SpotlightActionData[]) => {
-          console.log('would add', value);
-        };
-        setAdditionalActions([
-          {
-            id: 'secret-action-1',
-            title: 'Secret action',
-            description: 'It was registered with a button click',
-            leftSection: <IconAlien size="1.2rem" />,
-            onClick: () => console.log('Secret')
-          },
-          {
-            id: 'secret-action-2',
-            title: 'Another secret action',
-            description:
-              'You can register multiple actions with just one command',
-            leftSection: <IconAlien size="1.2rem" />,
-            onClick: () => console.log('Secret')
-          }
-        ]);
-        firstSpotlight.open();
-      }}
-    >
-      Register extra actions
-    </Button>
-  );
-}
-
-/** Construct a simple accordion group with title and content */
-function PlaygroundArea({
-  title,
-  content
-}: Readonly<{
-  title: string;
-  content: ReactNode;
-}>) {
-  return (
-    <Accordion.Item value={`accordion-playground-${title}`}>
-      <Accordion.Control>
-        <Text>{title}</Text>
-      </Accordion.Control>
-      <Accordion.Panel>{content}</Accordion.Panel>
-    </Accordion.Item>
-  );
-}
-
-export default function Playground() {
-  return (
-    <>
-      <Group>
-        <StylishText>
-          <Trans>Playground</Trans>
-        </StylishText>
-        <PlaceholderPill />
-      </Group>
-      <Text>
-        <Trans>
-          This page is a showcase for the possibilities of Platform UI.
-        </Trans>
-      </Text>
-      <Accordion defaultValue="">
-        <PlaygroundArea title="API Forms" content={<ApiFormsPlayground />} />
-        <PlaygroundArea
-          title="Status labels"
-          content={<StatusLabelPlayground />}
-        />
-        <PlaygroundArea
-          title="Spotlight actions"
-          content={<SpotlighPlayground />}
-        />
-      </Accordion>
-    </>
-  );
-}

src/frontend/src/router.tsx

@@ -8,9 +8,6 @@ export const LayoutComponent = Loadable(
   lazy(() => import('./components/nav/Layout'))
 );
 export const Home = Loadable(lazy(() => import('./pages/Index/Home')));
-export const Playground = Loadable(
-  lazy(() => import('./pages/Index/Playground'))
-);
 
 export const CompanyDetail = Loadable(
   lazy(() => import('./pages/company/CompanyDetail'))
@@ -125,7 +122,6 @@ export const routes = (
       <Route path="home/" element={<Home />} />,
       <Route path="dashboard/" element={<Dashboard />} />,
       <Route path="notifications/*" element={<Notifications />} />,
-      <Route path="playground/" element={<Playground />} />,
       <Route path="scan/" element={<Scan />} />,
       <Route path="settings/">
         <Route index element={<Navigate to="admin/" />} />

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

@@ -1,78 +1,6 @@
 import { test } from '../baseFixtures.js';
 import { doQuickLogin } from '../login.js';
 
-const newPartName = 'UITESTIN123';
-
-test('Pages - Index - Playground', async ({ page }) => {
-  await doQuickLogin(page);
-
-  await page.goto('./');
-  // Playground
-  await page.getByRole('tab', { name: 'Playground' }).click();
-  await page.getByRole('button', { name: 'API Forms' }).click();
-
-  // New Part
-  await page.getByRole('button', { name: 'Create New Part' }).click();
-  await page.getByLabel('related-field-category').fill('category 0');
-
-  await page
-    .getByRole('option', { name: 'Category 0' })
-    .locator('div')
-    .first()
-    .click();
-
-  // Set the "name"
-  await page.getByLabel('text-field-name').fill(newPartName);
-  await page.getByLabel('number-field-initial_stock').fill('1');
-
-  await page
-    .getByLabel('Create Part')
-    .getByRole('button', { name: 'Cancel' })
-    .click();
-
-  // Edit Part
-  await page.getByRole('button', { name: 'Edit Part' }).click();
-  await page.getByLabel('IPN').click();
-  await page.getByLabel('IPN').fill(newPartName);
-  await page
-    .getByLabel('Edit Part')
-    .getByRole('button', { name: 'Cancel' })
-    .click();
-
-  // Create Stock Item
-  await page.getByRole('button', { name: 'Create Stock Item' }).click();
-  await page.getByLabel('related-field-part').fill('R_1K_0402_1');
-  await page.getByText('R_1K_0402_1%').click();
-  await page
-    .getByLabel('Add Stock Item')
-    .getByRole('button', { name: 'Cancel' })
-    .click();
-
-  // EditCategory
-  await page.getByRole('button', { name: 'Edit Category' }).click();
-  await page.getByLabel('related-field-parent').click();
-  await page.getByText('Category 0').click();
-  await page
-    .getByLabel('Edit Category')
-    .getByRole('button', { name: 'Cancel' })
-    .click();
-
-  // Create Part new Modal
-  await page.getByRole('button', { name: 'Create Part new Modal' }).click();
-  await page.getByLabel('related-field-category').click();
-  await page.getByText('Category 0').click();
-  await page
-    .getByLabel('Create part')
-    .getByRole('button', { name: 'Cancel' })
-    .click();
-
-  // Status Label
-  await page.getByRole('button', { name: 'Status labels' }).click();
-  await page.getByRole('textbox').dblclick();
-  await page.getByRole('textbox').fill('50');
-  await page.getByText('Attention needed').waitFor();
-});
-
 test('Pages - Index - Dashboard', async ({ page }) => {
   await doQuickLogin(page);
 

src/frontend/tests/pui_command.spec.ts

@@ -97,24 +97,5 @@ test('Quick Command - No Keys', async ({ page }) => {
     .click();
   await page.waitForURL('https://docs.inventree.org/**');
 
-  // Test addition of new actions
+  // TODO: Test addition of new actions
-  await page.goto(`${baseUrl}/playground`);
-  await page.locator('p').filter({ hasText: 'Playground' }).waitFor();
-  await page.getByRole('button', { name: 'Spotlight actions' }).click();
-  await page.getByRole('button', { name: 'Register extra actions' }).click();
-  /*
-  await page.getByPlaceholder('Search...').fill('secret');
-  await page.getByRole('button', { name: 'Secret action It was' }).click();
-  await page.getByLabel('open-spotlight').click();
-  await page.getByPlaceholder('Search...').fill('Another secret action');
-  await page
-    .getByRole('button', {
-      name: 'Another secret action You can register multiple actions with just one command'
-    })
-    .click();
-  await page.getByRole('tab', { name: 'Home' }).click();
-  await page.getByLabel('open-spotlight').click();
-  */
-  await page.getByPlaceholder('Search...').fill('secret');
-  await page.getByText('Nothing found...').click();
 });