inventree/InvenTree
2
0
Fork 0
mirror of https://github.com/inventree/InvenTree.git synced 2025-04-28 11:36:44 +00:00
Code

Remove <Playground> from PUI frontend (#8276)

Browse Source 
* Remove <Playground> from PUI frontend

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

* Remove dead code
This commit is contained in:
Oliver 2024-10-13 20:58:53 +11:00 committed by GitHub
parent 8aade768c3
commit 7d3eb433d6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 1 additions and 349 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/frontend/src/defaults/links.tsx
View File

@ -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/',

9
src/frontend/src/defaults/menuItems.tsx
View File

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

240
src/frontend/src/pages/Index/Playground.tsx
View File

@ -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>
</>
);
}

4
src/frontend/src/router.tsx
View File

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

72
src/frontend/tests/pages/pui_index.spec.ts
View File

@ -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);

21
src/frontend/tests/pui_command.spec.ts
View File

@ -97,24 +97,5 @@ test('Quick Command - No Keys', async ({ page }) => {
.click();
await page.waitForURL('https://docs.inventree.org/**');
// 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();
// TODO: Test addition of new actions
});