@inventreedb/ui 0.0.1 → 0.0.2

package/src/tables/stock/StockTrackingTable.tsx

@@ -1,244 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,122 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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');
-};