@inventreedb/ui 0.0.1

package/src/tables/stock/StockTrackingTable.tsx

@@ -0,0 +1,244 @@
+import { t } from '@lingui/core/macro';
+import { Table, Text } from '@mantine/core';
+import { type ReactNode, useCallback, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { ModelType } from '@lib/enums/ModelType';
+import { apiUrl } from '@lib/functions/Api';
+import type { TableFilter } from '@lib/types/Filters';
+import { RenderBuildOrder } from '../../components/render/Build';
+import { RenderCompany } from '../../components/render/Company';
+import {
+  RenderPurchaseOrder,
+  RenderReturnOrder,
+  RenderSalesOrder
+} from '../../components/render/Order';
+import { RenderPart } from '../../components/render/Part';
+import { StatusRenderer } from '../../components/render/StatusRenderer';
+import {
+  RenderStockItem,
+  RenderStockLocation
+} from '../../components/render/Stock';
+import { RenderUser } from '../../components/render/User';
+import { useTable } from '../../hooks/UseTable';
+import type { TableColumn } from '../Column';
+import { DateColumn, DescriptionColumn } from '../ColumnRenderers';
+import { UserFilter } from '../Filter';
+import { InvenTreeTable } from '../InvenTreeTable';
+
+type StockTrackingEntry = {
+  label: string;
+  key: string;
+  details: ReactNode;
+};
+
+export function StockTrackingTable({ itemId }: Readonly<{ itemId: number }>) {
+  const navigate = useNavigate();
+  const table = useTable('stock_tracking');
+
+  // Render "details" for a stock tracking record
+  const renderDetails = useCallback(
+    (record: any) => {
+      const deltas: any = record?.deltas ?? {};
+
+      const entries: StockTrackingEntry[] = [
+        {
+          label: t`Stock Item`,
+          key: 'stockitem',
+          details:
+            deltas.stockitem_detail &&
+            RenderStockItem({ instance: deltas.stockitem_detail, link: true })
+        },
+        {
+          label: t`Stock Item`,
+          key: 'item',
+          details:
+            deltas.item_detail &&
+            RenderStockItem({
+              instance: deltas.item_detail,
+              link: true
+            })
+        },
+        {
+          label: t`Status`,
+          key: 'status',
+          details:
+            deltas.status &&
+            StatusRenderer({ status: deltas.status, type: ModelType.stockitem })
+        },
+        {
+          label: t`Quantity`,
+          key: 'quantity',
+          details: deltas.quantity
+        },
+        {
+          label: t`Added`,
+          key: 'added',
+          details: deltas.added
+        },
+        {
+          label: t`Removed`,
+          key: 'removed',
+          details: deltas.removed
+        },
+        {
+          label: t`Part`,
+          key: 'part',
+          details:
+            deltas.part_detail &&
+            RenderPart({
+              instance: deltas.part_detail,
+              link: true,
+              navigate: navigate
+            })
+        },
+        {
+          label: t`Location`,
+          key: 'location',
+          details:
+            deltas.location_detail &&
+            RenderStockLocation({
+              instance: deltas.location_detail,
+              link: true,
+              navigate: navigate
+            })
+        },
+        {
+          label: t`Build Order`,
+          key: 'buildorder',
+          details:
+            deltas.buildorder_detail &&
+            RenderBuildOrder({
+              instance: deltas.buildorder_detail,
+              link: true,
+              navigate: navigate
+            })
+        },
+        {
+          label: t`Purchase Order`,
+          key: 'purchaseorder',
+          details:
+            deltas.purchaseorder_detail &&
+            RenderPurchaseOrder({
+              instance: deltas.purchaseorder_detail,
+              link: true,
+              navigate: navigate
+            })
+        },
+        {
+          label: t`Sales Order`,
+          key: 'salesorder',
+          details:
+            deltas.salesorder_detail &&
+            RenderSalesOrder({
+              instance: deltas.salesorder_detail,
+              link: true,
+              navigate: navigate
+            })
+        },
+        {
+          label: t`Return Order`,
+          key: 'returnorder',
+          details:
+            deltas.returnorder_detail &&
+            RenderReturnOrder({
+              instance: deltas.returnorder_detail,
+              link: true,
+              navigate: navigate
+            })
+        },
+        {
+          label: t`Customer`,
+          key: 'customer',
+          details:
+            deltas.customer_detail &&
+            RenderCompany({
+              instance: deltas.customer_detail,
+              link: true,
+              navigate: navigate
+            })
+        }
+      ];
+
+      return (
+        <Table striped>
+          <Table.Tbody>
+            {entries.map(
+              (entry) =>
+                entry.details && (
+                  <Table.Tr key={entry.key}>
+                    <Table.Td>
+                      <Text>{entry.label}</Text>
+                    </Table.Td>
+                    <Table.Td>{entry.details}</Table.Td>
+                  </Table.Tr>
+                )
+            )}
+          </Table.Tbody>
+        </Table>
+      );
+    },
+    [navigate]
+  );
+
+  const filters: TableFilter[] = useMemo(() => {
+    return [
+      UserFilter({
+        name: 'user',
+        label: t`User`,
+        description: t`Filter by user`
+      })
+    ];
+  }, []);
+
+  const tableColumns: TableColumn[] = useMemo(() => {
+    return [
+      DateColumn({
+        switchable: false
+      }),
+      DescriptionColumn({
+        accessor: 'label'
+      }),
+      {
+        accessor: 'details',
+        title: t`Details`,
+        switchable: false,
+        render: renderDetails
+      },
+      {
+        accessor: 'notes',
+        title: t`Notes`,
+        sortable: false,
+        switchable: true
+      },
+      {
+        accessor: 'user',
+        title: t`User`,
+        render: (record: any) => {
+          if (!record.user_detail) {
+            return <Text size='sm' fs='italic'>{t`No user information`}</Text>;
+          }
+
+          return RenderUser({ instance: record.user_detail });
+        }
+      }
+    ];
+  }, []);
+
+  return (
+    <InvenTreeTable
+      tableState={table}
+      url={apiUrl(ApiEndpoints.stock_tracking_list)}
+      columns={tableColumns}
+      props={{
+        params: {
+          item: itemId,
+          user_detail: true
+        },
+        enableDownload: true,
+        tableFilters: filters
+      }}
+    />
+  );
+}

package/src/theme.ts

@@ -0,0 +1,5 @@
+import { createTheme } from '@mantine/core';
+import { themeToVars } from '@mantine/vanilla-extract';
+
+export const theme = createTheme({});
+export const vars = themeToVars(theme);

package/src/views/DesktopAppView.tsx

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+import { BrowserRouter } from 'react-router-dom';
+
+import { api, queryClient } from '../App';
+import { ApiProvider } from '../contexts/ApiContext';
+import { ThemeContext } from '../contexts/ThemeContext';
+import { defaultHostList } from '../defaults/defaultHostList';
+import { getBaseUrl } from '../main';
+import { routes } from '../router';
+import { useLocalState } from '../states/LocalState';
+
+export default function DesktopAppView() {
+  const [hostList] = useLocalState((state) => [state.hostList]);
+
+  useEffect(() => {
+    if (Object.keys(hostList).length === 0) {
+      useLocalState.setState({ hostList: defaultHostList });
+    }
+  }, [hostList]);
+
+  return (
+    <ApiProvider client={queryClient} api={api}>
+      <ThemeContext>
+        <BrowserRouter basename={getBaseUrl()}>{routes}</BrowserRouter>
+      </ThemeContext>
+    </ApiProvider>
+  );
+}

package/src/views/MainView.tsx

@@ -0,0 +1,38 @@
+import '@mantine/core/styles.css';
+import { useViewportSize } from '@mantine/hooks';
+import { lazy, useEffect } from 'react';
+
+import { setApiDefaults } from '../App';
+import { Loadable } from '../functions/loading';
+import { useLocalState } from '../states/LocalState';
+
+function checkMobile() {
+  const { height, width } = useViewportSize();
+  if (width < 425 || height < 425) return true;
+  return false;
+}
+
+const MobileAppView = Loadable(lazy(() => import('./MobileAppView')));
+const DesktopAppView = Loadable(lazy(() => import('./DesktopAppView')));
+
+// Main App
+export default function MainView() {
+  const [allowMobile] = useLocalState((state) => [state.allowMobile]);
+  // Set initial login status
+  useEffect(() => {
+    try {
+      // Local state initialization
+      setApiDefaults();
+    } catch (e) {
+      console.error(e);
+    }
+  }, []);
+
+  // Check if mobile
+  if (!allowMobile && checkMobile()) {
+    return <MobileAppView />;
+  }
+
+  // Main App component
+  return <DesktopAppView />;
+}

package/src/views/MobileAppView.tsx

@@ -0,0 +1,43 @@
+import { Trans } from '@lingui/react/macro';
+import { Anchor, Center, Container, Stack, Text, Title } from '@mantine/core';
+
+import { ThemeContext } from '../contexts/ThemeContext';
+import { docLinks } from '../defaults/links';
+import { IS_DEV } from '../main';
+import { useLocalState } from '../states/LocalState';
+
+export default function MobileAppView() {
+  const [setAllowMobile] = useLocalState((state) => [state.setAllowMobile]);
+
+  function ignore() {
+    setAllowMobile(true);
+    window.location.reload();
+  }
+  return (
+    <ThemeContext>
+      <Center h='100vh'>
+        <Container>
+          <Stack>
+            <Title c='red'>
+              <Trans>Mobile viewport detected</Trans>
+            </Title>
+            <Text>
+              <Trans>
+                InvenTree UI is optimized for Tablets and Desktops, you can use
+                the official app for a mobile experience.
+              </Trans>
+            </Text>
+            <Anchor href={docLinks.app}>
+              <Trans>Read the docs</Trans>
+            </Anchor>
+            {IS_DEV && (
+              <Text onClick={ignore}>
+                <Trans>Ignore and continue to Desktop view</Trans>
+              </Text>
+            )}
+          </Stack>
+        </Container>
+      </Center>
+    </ThemeContext>
+  );
+}

package/tests/baseFixtures.ts

@@ -0,0 +1,93 @@
+import * as crypto from 'node:crypto';
+import * as fs from 'node:fs';
+import os from 'node:os';
+import * as path from 'node:path';
+import { test as baseTest } from '@playwright/test';
+
+const istanbulCLIOutput = path.join(process.cwd(), '.nyc_output');
+const platform = os.platform();
+let systemKeyVar: string;
+if (platform === 'darwin') {
+  systemKeyVar = 'Meta';
+} else {
+  systemKeyVar = 'Control';
+}
+/* metaKey is the local action key (used for spotlight for example) */
+export const systemKey = systemKeyVar;
+
+export function generateUUID(): string {
+  return crypto.randomBytes(16).toString('hex');
+}
+
+export const test = baseTest.extend({
+  context: async ({ context }, use) => {
+    await context.addInitScript(() =>
+      window.addEventListener('beforeunload', () =>
+        (window as any).collectIstanbulCoverage(
+          JSON.stringify((window as any).__coverage__)
+        )
+      )
+    );
+    await fs.promises.mkdir(istanbulCLIOutput, { recursive: true });
+    await context.exposeFunction(
+      'collectIstanbulCoverage',
+      (coverageJSON: string) => {
+        if (coverageJSON)
+          fs.writeFileSync(
+            path.join(
+              istanbulCLIOutput,
+              `playwright_coverage_${generateUUID()}.json`
+            ),
+            coverageJSON
+          );
+      }
+    );
+    await use(context);
+    for (const page of context.pages()) {
+      await page.evaluate(() =>
+        (window as any).collectIstanbulCoverage(
+          JSON.stringify((window as any).__coverage__)
+        )
+      );
+    }
+  },
+  // Ensure no errors are thrown in the console
+  page: async ({ baseURL, page }, use) => {
+    const messages = [];
+    page.on('console', (msg) => {
+      const url = msg.location().url;
+      if (
+        msg.type() === 'error' &&
+        !msg.text().startsWith('ERR: ') &&
+        msg.text().indexOf('downloadable font: download failed') < 0 &&
+        msg
+          .text()
+          .indexOf(
+            'Support for defaultProps will be removed from function components in a future major release'
+          ) < 0 &&
+        msg.text() !=
+          'Failed to load resource: the server responded with a status of 400 (Bad Request)' &&
+        !msg.text().includes('http://localhost:8000/this/does/not/exist.js') &&
+        url != 'http://localhost:8000/this/does/not/exist.js' &&
+        url != 'http://localhost:8000/api/user/me/' &&
+        url != 'http://localhost:8000/api/user/token/' &&
+        url != 'http://localhost:8000/api/auth/v1/auth/login' &&
+        url != 'http://localhost:8000/api/auth/v1/auth/session' &&
+        url != 'http://localhost:8000/api/auth/v1/account/password/change' &&
+        url != 'http://localhost:8000/api/barcode/' &&
+        url != 'https://docs.inventree.org/en/versions.json' &&
+        url != 'http://localhost:5173/favicon.ico' &&
+        !url.startsWith('https://api.github.com/repos/inventree') &&
+        !url.startsWith('http://localhost:8000/api/news/') &&
+        !url.startsWith('http://localhost:8000/api/notifications/') &&
+        !url.startsWith('chrome://') &&
+        url.indexOf('99999') < 0
+      )
+        messages.push(msg);
+    });
+    await use(page);
+    expect(messages).toEqual([]);
+  }
+});
+
+export const expect = test.expect;

package/tests/defaults.ts

@@ -0,0 +1,18 @@
+export const classicUrl = 'http://127.0.0.1:8000';
+
+export const apiUrl = `${classicUrl}/api`;
+export const baseUrl = './web';
+export const loginUrl = `${baseUrl}/login`;
+export const logoutUrl = `${baseUrl}/logout`;
+export const homeUrl = `${baseUrl}/home`;
+
+export const user = {
+  name: 'Ally Access',
+  username: 'allaccess',
+  password: 'nolimits'
+};
+
+export const adminuser = {
+  username: 'admin',
+  password: 'inventree'
+};

package/tests/helpers.ts

@@ -0,0 +1,122 @@
+import { baseUrl } from './defaults';
+
+/**
+ * Open the filter drawer for the currently visible table
+ * @param page - The page object
+ */
+export const openFilterDrawer = async (page) => {
+  await page.getByLabel('table-select-filters').click();
+};
+
+/**
+ * Close the filter drawer for the currently visible table
+ * @param page - The page object
+ */
+export const closeFilterDrawer = async (page) => {
+  await page.getByLabel('filter-drawer-close').click();
+};
+
+/**
+ * Click the specified button (if it is visible)
+ * @param page - The page object
+ * @param name - The name of the button to click
+ */
+export const clickButtonIfVisible = async (page, name, timeout = 500) => {
+  await page.waitForTimeout(timeout);
+
+  if (await page.getByRole('button', { name }).isVisible()) {
+    await page.getByRole('button', { name }).click();
+  }
+};
+
+/**
+ * Clear all filters from the currently visible table
+ * @param page - The page object
+ */
+export const clearTableFilters = async (page) => {
+  await openFilterDrawer(page);
+  await clickButtonIfVisible(page, 'Clear Filters');
+  await closeFilterDrawer(page);
+  await page.waitForLoadState('networkidle');
+};
+
+export const setTableChoiceFilter = async (page, filter, value) => {
+  await openFilterDrawer(page);
+
+  await page.getByRole('button', { name: 'Add Filter' }).click();
+  await page.getByPlaceholder('Select filter').fill(filter);
+  await page.getByPlaceholder('Select filter').click();
+
+  // Construct a regex to match the filter name exactly
+  const filterRegex = new RegExp(`^${filter}$`, 'i');
+
+  await page.getByRole('option', { name: filterRegex }).click();
+
+  await page.getByPlaceholder('Select filter value').click();
+  await page.getByRole('option', { name: value }).click();
+
+  await closeFilterDrawer(page);
+};
+
+/**
+ * Return the parent 'row' element for a given 'cell' element
+ * @param cell - The cell element
+ */
+export const getRowFromCell = async (cell) => {
+  return cell.locator('xpath=ancestor::tr').first();
+};
+
+export const clickOnRowMenu = async (cell) => {
+  const row = await getRowFromCell(cell);
+
+  await row.getByLabel(/row-action-menu-/i).click();
+};
+
+/**
+ * Navigate to the provided page, and wait for loading to complete
+ * @param page
+ * @param url
+ */
+export const navigate = async (page, url: string) => {
+  if (!url.startsWith(baseUrl)) {
+    if (url.startsWith('/')) {
+      url = url.slice(1);
+    }
+
+    url = `${baseUrl}/${url}`;
+  }
+
+  await page.goto(url);
+};
+
+/**
+ * CLick on the 'tab' element with the provided name
+ */
+export const loadTab = async (page, tabName) => {
+  await page
+    .getByLabel(/panel-tabs-/)
+    .getByRole('tab', { name: tabName })
+    .click();
+};
+
+// Activate "table" view in certain contexts
+export const activateTableView = async (page) => {
+  await page.getByLabel('segmented-icon-control-table').click();
+  await page.waitForLoadState('networkidle');
+};
+
+// Activate "calendar" view in certain contexts
+export const activateCalendarView = async (page) => {
+  await page.getByLabel('segmented-icon-control-calendar').click();
+  await page.waitForLoadState('networkidle');
+};
+
+/**
+ * Perform a 'global search' on the provided page, for the provided query text
+ */
+export const globalSearch = async (page, query) => {
+  await page.getByLabel('open-search').click();
+  await page.getByLabel('global-search-input').clear();
+  await page.getByPlaceholder('Enter search text').fill(query);
+  await page.waitForTimeout(300);
+};

package/tests/login.ts

@@ -0,0 +1,97 @@
+import type { Browser, Page } from '@playwright/test';
+import { expect } from './baseFixtures.js';
+import { user } from './defaults';
+import { navigate } from './helpers.js';
+
+import fs from 'node:fs';
+import path from 'node:path';
+
+/*
+ * Perform form based login operation from the "login" URL
+ */
+export const doLogin = async (page, username?: string, password?: string) => {
+  username = username ?? user.username;
+  password = password ?? user.password;
+
+  await page.goto('http://localhost:8000/web/logout', { waituntil: 'load' });
+
+  await expect(page).toHaveTitle(/^InvenTree.*$/);
+  await page.waitForURL('**/web/login');
+  await page.getByLabel('username').fill(username);
+  await page.getByLabel('password').fill(password);
+  await page.getByRole('button', { name: 'Log in' }).click();
+  await page.waitForURL('**/web/home');
+  await page.waitForTimeout(250);
+};
+
+export interface CachedLoginOptions {
+  username?: string;
+  password?: string;
+  url?: string;
+}
+
+// Set of users allowed to do cached login
+// This is to prevent tests from running with the wrong user
+const ALLOWED_USERS: string[] = ['admin', 'allaccess', 'reader', 'steven'];
+
+/*
+ * Perform a quick login based on passing URL parameters
+ */
+export const doCachedLogin = async (
+  browser: Browser,
+  options?: CachedLoginOptions
+): Promise<Page> => {
+  const username = options?.username ?? user.username;
+  const password = options?.password ?? user.password;
+  const url = options?.url ?? '';
+
+  // FAIL if an unsupported username is provided
+  if (!ALLOWED_USERS.includes(username)) {
+    throw new Error(`Invalid username provided to doCachedLogin: ${username}`);
+  }
+
+  // Cache the login state locally - and share between tests
+  const fn = path.resolve(`./playwright/auth/${username}.json`);
+
+  if (fs.existsSync(fn)) {
+    const page = await browser.newPage({
+      storageState: fn
+    });
+    console.log(`Using cached login state for ${username}`);
+    await navigate(page, url);
+    await page.waitForURL('**/web/**');
+    await page.waitForLoadState('load');
+    return page;
+  }
+
+  // Create a new blank page
+  const page = await browser.newPage();
+
+  console.log(`No cache found - logging in for ${username}`);
+
+  // Ensure we start from the login page
+  await page.goto('http://localhost:8000/web/', { waitUntil: 'load' });
+
+  await doLogin(page, username, password);
+  await page.getByLabel('navigation-menu').waitFor({ timeout: 5000 });
+  await page.getByText(/InvenTree Demo Server -/).waitFor();
+  await page.waitForURL('**/web/**');
+
+  // Wait for the dashboard to load
+  await page.getByText('No widgets selected').waitFor();
+  await page.waitForLoadState('load');
+
+  // Cache the login state
+  await page.context().storageState({ path: fn });
+
+  if (url) {
+    await navigate(page, url);
+  }
+
+  return page;
+};
+
+export const doLogout = async (page) => {
+  await page.goto('http://localhost:8000/web/logout', { waitUntil: 'load' });
+  await page.waitForURL('**/web/login');
+};