@inventreedb/ui 0.0.1

package/tests/pui_settings.spec.ts

@@ -0,0 +1,285 @@
+import { expect, test } from './baseFixtures.js';
+import { apiUrl } from './defaults.js';
+import { getRowFromCell, loadTab, navigate } from './helpers.js';
+import { doCachedLogin } from './login.js';
+import { setSettingState } from './settings.js';
+
+/**
+ * Adjust language and color settings
+ *
+ * TODO: Reimplement this - without logging out a cached user
+ */
+// test('Settings - Language / Color', async ({ browser }) => {
+//   const page = await doCachedLogin(browser);
+
+//   await page.getByRole('button', { name: 'Ally Access' }).click();
+//   await page.getByRole('menuitem', { name: 'Logout' }).click();
+//   await page.getByRole('button', { name: 'Send me an email' }).click();
+//   await page.getByLabel('Language toggle').click();
+//   await page.getByLabel('Select language').first().click();
+//   await page.getByRole('option', { name: 'German' }).click();
+//   await page.waitForTimeout(200);
+
+//   await page.getByRole('button', { name: 'Benutzername und Passwort' }).click();
+//   await page.getByPlaceholder('Ihr Benutzername').click();
+//   await page.getByPlaceholder('Ihr Benutzername').fill('admin');
+//   await page.getByPlaceholder('Ihr Benutzername').press('Tab');
+//   await page.getByPlaceholder('Dein Passwort').fill('inventree');
+//   await page.getByRole('button', { name: 'Anmelden' }).click();
+//   await page.waitForTimeout(200);
+
+//   await page.getByRole('tab', { name: 'Dashboard' }).click();
+//   await page.waitForURL('**/web/home');
+// });
+
+test('Settings - User theme', async ({ browser }) => {
+  const page = await doCachedLogin(browser, {
+    username: 'allaccess',
+    password: 'nolimits'
+  });
+
+  await page.waitForLoadState('networkidle');
+
+  await page.getByRole('button', { name: 'Ally Access' }).click();
+  await page.getByRole('menuitem', { name: 'Account settings' }).click();
+
+  // loader
+  await page.getByRole('textbox', { name: 'Loader Type Selector' }).click();
+  await page.getByRole('option', { name: 'Oval' }).click();
+  await page.getByRole('textbox', { name: 'Loader Type Selector' }).click();
+  await page.getByRole('option', { name: 'Bars' }).click();
+
+  // dark / light mode
+  await page
+    .getByRole('row', { name: 'Color Mode' })
+    .getByRole('button')
+    .click();
+  await page
+    .getByRole('row', { name: 'Color Mode' })
+    .getByRole('button')
+    .click();
+
+  // colors
+  await testColorPicker(page, 'Color Picker White');
+  await testColorPicker(page, 'Color Picker Black');
+
+  await page.waitForTimeout(500);
+
+  await page.getByLabel('Reset Black Color').click();
+  await page.getByLabel('Reset White Color').click();
+
+  // radius
+  await page
+    .locator('div')
+    .filter({ hasText: /^xssmmdlgxl$/ })
+    .nth(2)
+    .click();
+
+  // primary
+  await page.getByLabel('#fab005').click();
+  await page.getByLabel('#228be6').click();
+});
+
+test('Settings - Admin', async ({ browser }) => {
+  // Note here we login with admin access
+  const page = await doCachedLogin(browser, {
+    username: 'admin',
+    password: 'inventree'
+  });
+
+  // User settings
+  await page.getByRole('button', { name: 'admin' }).click();
+  await page.getByRole('menuitem', { name: 'Account settings' }).click();
+  await loadTab(page, 'Security');
+
+  await loadTab(page, 'Display Options');
+  await page.getByText('Date Format').waitFor();
+  await loadTab(page, 'Search');
+  await page.getByText('Regex Search').waitFor();
+  await loadTab(page, 'Notifications');
+  await loadTab(page, 'Reporting');
+  await page.getByText('Inline report display').waitFor();
+
+  // System Settings
+  await page.locator('label').filter({ hasText: 'System Settings' }).click();
+  await page.getByText('Base URL', { exact: true }).waitFor();
+  await loadTab(page, 'Authentication');
+  await loadTab(page, 'Barcodes');
+  await loadTab(page, 'Notifications');
+  await loadTab(page, 'Pricing');
+  await loadTab(page, 'Labels');
+  await loadTab(page, 'Reporting');
+
+  await loadTab(page, 'Build Orders');
+  await loadTab(page, 'Purchase Orders');
+  await loadTab(page, 'Sales Orders');
+  await loadTab(page, 'Return Orders');
+
+  // Admin Center
+  await page.getByRole('button', { name: 'admin' }).click();
+  await page.getByRole('menuitem', { name: 'Admin Center' }).click();
+  await loadTab(page, 'Background Tasks');
+  await loadTab(page, 'Error Reports');
+  await loadTab(page, 'Currencies');
+  await loadTab(page, 'Project Codes');
+  await loadTab(page, 'Custom Units');
+  await loadTab(page, 'Part Parameters');
+  await loadTab(page, 'Category Parameters');
+  await loadTab(page, 'Label Templates');
+  await loadTab(page, 'Report Templates');
+  await loadTab(page, 'Plugins');
+
+  // Adjust some "location type" items
+  await loadTab(page, 'Location Types');
+
+  // Edit first item ('Room')
+  const roomCell = await page.getByRole('cell', { name: 'Room', exact: true });
+  const roomRow = await getRowFromCell(roomCell);
+
+  await roomRow.getByLabel(/row-action-menu-/i).click();
+
+  await page.getByRole('menuitem', { name: 'Edit' }).click();
+  await expect(page.getByLabel('text-field-name')).toHaveValue('Room');
+
+  // Toggle the "description" field
+  const oldDescription = await page
+    .getByLabel('text-field-description')
+    .inputValue();
+
+  const newDescription = `${oldDescription} (edited)`;
+
+  await page.getByLabel('text-field-description').fill(newDescription);
+  await page.waitForTimeout(500);
+  await page.getByRole('button', { name: 'Submit' }).click();
+
+  // Edit second item - 'Box (Large)'
+  const boxCell = await page.getByRole('cell', {
+    name: 'Box (Large)',
+    exact: true
+  });
+  const boxRow = await getRowFromCell(boxCell);
+
+  await boxRow.getByLabel(/row-action-menu-/i).click();
+
+  await page.getByRole('menuitem', { name: 'Edit' }).click();
+  await expect(page.getByLabel('text-field-name')).toHaveValue('Box (Large)');
+  await expect(page.getByLabel('text-field-description')).toHaveValue(
+    'Large cardboard box'
+  );
+  await page.getByRole('button', { name: 'Cancel' }).click();
+
+  // Edit first item again (revert values)
+  await roomRow.getByLabel(/row-action-menu-/i).click();
+  await page.getByRole('menuitem', { name: 'Edit' }).click();
+  await page.getByLabel('text-field-name').fill('Room');
+  await page.waitForTimeout(500);
+  await page
+    .getByLabel('text-field-description')
+    .fill(newDescription.replaceAll(' (edited)', ''));
+  await page.waitForTimeout(500);
+  await page.getByRole('button', { name: 'Submit' }).click();
+});
+
+test('Settings - Admin - Barcode History', async ({ browser, request }) => {
+  // Login with admin credentials
+  const page = await doCachedLogin(browser, {
+    username: 'admin',
+    password: 'inventree'
+  });
+
+  // Ensure that the "save scans" setting is enabled
+  await setSettingState({
+    request: request,
+    setting: 'BARCODE_STORE_RESULTS',
+    value: true
+  });
+
+  // Scan some barcodes (via API calls)
+  const barcodes = ['ABC1234', 'XYZ5678', 'QRS9012'];
+
+  barcodes.forEach(async (barcode) => {
+    await request.post(`${apiUrl}/barcode/`, {
+      data: {
+        barcode: barcode
+      },
+      headers: {
+        Authorization: `Basic ${btoa('admin:inventree')}`
+      }
+    });
+  });
+
+  await page.getByRole('button', { name: 'admin' }).click();
+  await page.getByRole('menuitem', { name: 'Admin Center' }).click();
+  await loadTab(page, 'Barcode Scans');
+
+  await page.waitForTimeout(500);
+
+  // Barcode history is displayed in table
+  barcodes.forEach(async (barcode) => {
+    await page.getByText(barcode).first().waitFor();
+  });
+});
+
+test('Settings - Admin - Unauthorized', async ({ browser }) => {
+  // Try to access "admin" page with a non-staff user
+  const page = await doCachedLogin(browser, {
+    username: 'allaccess',
+    password: 'nolimits',
+    url: 'settings/admin/'
+  });
+
+  await page.waitForURL('**/settings/admin/**');
+
+  // Should get a permission denied message
+  await page.getByText('Permission Denied').waitFor();
+  await page
+    .getByRole('button', { name: 'Return to the index page' })
+    .waitFor();
+
+  // Try to access user settings page (should be accessible)
+  await navigate(page, 'settings/user/');
+  await page.waitForURL('**/settings/user/**');
+
+  await loadTab(page, 'Display Options');
+  await loadTab(page, 'Account');
+
+  // Try to access global settings page
+  await navigate(page, 'settings/system/');
+  await page.waitForURL('**/settings/system/**');
+
+  await page.getByText('Permission Denied').waitFor();
+  await page
+    .getByRole('button', { name: 'Return to the index page' })
+    .waitFor();
+});
+
+// Test for user auth configuration
+test('Settings - Auth - Email', async ({ browser }) => {
+  const page = await doCachedLogin(browser, {
+    username: 'allaccess',
+    password: 'nolimits',
+    url: 'settings/user/'
+  });
+
+  await loadTab(page, 'Security');
+
+  await page.getByText('Currently no email addresses are registered').waitFor();
+  await page.getByLabel('email-address-input').fill('test-email@domain.org');
+  await page.getByLabel('email-address-submit').click();
+
+  await page.getByText('Unverified', { exact: true }).waitFor();
+  await page.getByLabel('test-email@domain.').click();
+  await page.getByRole('button', { name: 'Make Primary' }).click();
+  await page.getByText('Primary', { exact: true }).waitFor();
+  await page.getByRole('button', { name: 'Remove' }).click();
+
+  await page.getByText('Currently no email addresses are registered').waitFor();
+});
+
+async function testColorPicker(page, ref: string) {
+  const element = page.getByLabel(ref);
+  await element.click();
+  const box = (await element.boundingBox())!;
+  await page.mouse.click(box.x + box.width / 2, box.y + box.height + 25);
+  await page.getByText('Color Mode').click();
+}

package/tests/pui_tables.spec.ts

@@ -0,0 +1,65 @@
+import { test } from './baseFixtures.js';
+import {
+  clearTableFilters,
+  navigate,
+  setTableChoiceFilter
+} from './helpers.js';
+import { doCachedLogin } from './login.js';
+
+test('Tables - Filters', async ({ browser }) => {
+  // Head to the "build order list" page
+  const page = await doCachedLogin(browser, { url: 'manufacturing/index/' });
+
+  await clearTableFilters(page);
+
+  await setTableChoiceFilter(page, 'Status', 'Complete');
+  await setTableChoiceFilter(page, 'Responsible', 'allaccess');
+  await setTableChoiceFilter(page, 'Project Code', 'PRJ-NIM');
+
+  await clearTableFilters(page);
+
+  // Head to the "part list" page
+  await navigate(page, 'part/category/index/parts/');
+
+  await setTableChoiceFilter(page, 'Assembly', 'Yes');
+
+  await clearTableFilters(page);
+
+  // Head to the "purchase order list" page
+  await navigate(page, 'purchasing/index/purchaseorders/');
+
+  await clearTableFilters(page);
+
+  await setTableChoiceFilter(page, 'Status', 'Complete');
+  await setTableChoiceFilter(page, 'Responsible', 'readers');
+  await setTableChoiceFilter(page, 'Assigned to me', 'No');
+  await setTableChoiceFilter(page, 'Project Code', 'PRO-ZEN');
+  await setTableChoiceFilter(page, 'Has Start Date', 'Yes');
+
+  await clearTableFilters(page);
+});
+
+test('Tables - Columns', async ({ browser }) => {
+  // Go to the "stock list" page
+  const page = await doCachedLogin(browser, {
+    url: 'stock/location/index/stock-items'
+  });
+
+  // Open column selector
+  await page.getByLabel('table-select-columns').click();
+
+  // De-select some items
+  await page.getByRole('menuitem', { name: 'Description' }).click();
+  await page.getByRole('menuitem', { name: 'Stocktake' }).click();
+  await page.keyboard.press('Escape');
+
+  await navigate(page, '/sales/index/salesorders');
+
+  // Open column selector
+  await page.getByLabel('table-select-columns').click();
+
+  await page.getByRole('menuitem', { name: 'Start Date' }).click();
+  await page.getByRole('menuitem', { name: 'Target Date' }).click();
+  await page.getByRole('menuitem', { name: 'Reference', exact: true }).click();
+  await page.getByRole('menuitem', { name: 'Project Code' }).click();
+});

package/tests/settings/selectionList.spec.ts

@@ -0,0 +1,103 @@
+import { test } from '../baseFixtures';
+import { navigate } from '../helpers';
+import { doCachedLogin } from '../login';
+
+test('PUI - Admin - Parameter', async ({ browser }) => {
+  const page = await doCachedLogin(browser, {
+    username: 'admin',
+    password: 'inventree'
+  });
+  await page.getByRole('button', { name: 'admin' }).click();
+  await page.getByRole('menuitem', { name: 'Admin Center' }).click();
+  await page.getByRole('tab', { name: 'Part Parameters' }).click();
+
+  await page.getByRole('button', { name: 'Selection Lists' }).click();
+  await page.waitForLoadState('networkidle');
+
+  // clean old data if exists
+  await page
+    .getByRole('cell', { name: 'some list' })
+    .waitFor({ timeout: 200 })
+    .then(async (cell) => {
+      await page
+        .getByRole('cell', { name: 'some list' })
+        .locator('..')
+        .getByLabel('row-action-menu-')
+        .click();
+      await page.getByRole('menuitem', { name: 'Delete' }).click();
+      await page.getByRole('button', { name: 'Delete' }).click();
+    })
+    .catch(() => {});
+
+  // clean old data if exists
+  await page.getByRole('button', { name: 'Part Parameter Template' }).click();
+  await page.waitForLoadState('networkidle');
+  await page
+    .getByRole('cell', { name: 'my custom parameter' })
+    .waitFor({ timeout: 200 })
+    .then(async (cell) => {
+      await page
+        .getByRole('cell', { name: 'my custom parameter' })
+        .locator('..')
+        .getByLabel('row-action-menu-')
+        .click();
+      await page.getByRole('menuitem', { name: 'Delete' }).click();
+      await page.getByRole('button', { name: 'Delete' }).click();
+    })
+    .catch(() => {});
+
+  // Add selection list
+  await page.getByRole('button', { name: 'Selection Lists' }).click();
+  await page.waitForLoadState('networkidle');
+  await page.getByLabel('action-button-add-selection-').waitFor();
+  await page.getByLabel('action-button-add-selection-').click();
+  await page.getByLabel('text-field-name').fill('some list');
+  await page.getByLabel('text-field-description').fill('Listdescription');
+  await page.getByRole('button', { name: 'Submit' }).click();
+  await page.getByRole('cell', { name: 'some list' }).waitFor();
+  await page.waitForTimeout(200);
+
+  // Add parameter
+  await page.waitForLoadState('networkidle');
+  await page.getByRole('button', { name: 'Part Parameter Template' }).click();
+  await page.getByLabel('action-button-add-parameter').waitFor();
+  await page.getByLabel('action-button-add-parameter').click();
+  await page.getByLabel('text-field-name').fill('my custom parameter');
+  await page.getByLabel('text-field-description').fill('description');
+  await page
+    .locator('div')
+    .filter({ hasText: /^Search\.\.\.$/ })
+    .nth(2)
+    .click();
+  await page
+    .getByRole('option', { name: 'some list' })
+    .locator('div')
+    .first()
+    .click();
+  await page.getByRole('button', { name: 'Submit' }).click();
+  await page.getByRole('cell', { name: 'my custom parameter' }).click();
+
+  // Fill parameter
+  await navigate(page, 'part/104/parameters/');
+  await page.getByLabel('Parameters').getByText('Parameters').waitFor();
+  await page.waitForLoadState('networkidle');
+  await page.getByLabel('action-button-add-parameter').waitFor();
+  await page.getByLabel('action-button-add-parameter').click();
+  await page.waitForTimeout(200);
+  await page.getByText('New Part Parameter').waitFor();
+  await page
+    .getByText('Template *Parameter')
+    .locator('div')
+    .filter({ hasText: /^Search\.\.\.$/ })
+    .nth(2)
+    .click();
+  await page
+    .getByText('Template *Parameter')
+    .locator('div')
+    .filter({ hasText: /^Search\.\.\.$/ })
+    .locator('input')
+    .fill('my custom parameter');
+  await page.getByRole('option', { name: 'my custom parameter' }).click();
+  await page.getByLabel('choice-field-data').fill('2');
+  await page.getByRole('button', { name: 'Submit' }).click();
+});

package/tests/settings.ts

@@ -0,0 +1,54 @@
+import { expect } from 'playwright/test';
+
+import { apiUrl } from './defaults';
+
+/*
+ * Set the value of a global setting in the database
+ */
+export const setSettingState = async ({
+  request,
+  setting,
+  value
+}: {
+  request: any;
+  setting: string;
+  value: any;
+}) => {
+  const url = `${apiUrl}/settings/global/${setting}/`;
+
+  const response = await request.patch(url, {
+    data: {
+      value: value
+    },
+    headers: {
+      // Basic username: password authorization
+      Authorization: `Basic ${btoa('admin:inventree')}`
+    }
+  });
+
+  expect(await response.status()).toBe(200);
+};
+
+export const setPluginState = async ({
+  request,
+  plugin,
+  state
+}: {
+  request: any;
+  plugin: string;
+  state: boolean;
+}) => {
+  const url = `${apiUrl}/plugins/${plugin}/activate/`;
+
+  const response = await request.patch(url, {
+    data: {
+      active: state
+    },
+    headers: {
+      // Basic username: password authorization
+      Authorization: `Basic ${btoa('admin:inventree')}`
+    }
+  });
+
+  expect(await response.status()).toBe(200);
+};

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@lib/*": ["./lib/*"]
+    }
+  },
+  "include": ["src", "lib", "vite-env.d.ts"],
+  "exclude": ["node_nodules", "dist"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.lib.json

@@ -0,0 +1,13 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "moduleResolution": "bundler",
+        "declaration": true,
+        "declarationDir": "./dist",
+        "rootDir": "./lib",
+        "outDir": "./dist",
+        "paths": {},
+    },
+    "include": ["lib"],
+    "exclude": ["node_modules", "src"]
+}

package/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite-env.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_DEMO: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+
+declare const __INVENTREE_LIB_VERSION__: string;

package/vite.config.ts

@@ -0,0 +1,98 @@
+import { readFileSync } from 'node:fs';
+import { platform, release } from 'node:os';
+import { codecovVitePlugin } from '@codecov/vite-plugin';
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+import react from '@vitejs/plugin-react';
+import license from 'rollup-plugin-license';
+import { defineConfig, splitVendorChunkPlugin } from 'vite';
+import istanbul from 'vite-plugin-istanbul';
+
+const packageJson = JSON.parse(readFileSync('./package.json', 'utf-8'));
+
+// Detect if the current environment is WSL
+// Required for enabling file system polling
+const IS_IN_WSL = platform().includes('WSL') || release().includes('WSL');
+
+// Detect if code coverage is enabled (runs in GitHub CI)
+const IS_COVERAGE = !!process.env.VITE_COVERAGE_BUILD;
+
+if (IS_IN_WSL) {
+  console.log('WSL detected: using polling for file system events');
+}
+
+// Output directory for the built files
+const OUTPUT_DIR = '../../src/backend/InvenTree/web/static/web';
+
+// https://vitejs.dev/config/
+export default defineConfig(({ command, mode }) => {
+  return {
+    plugins: [
+      react({
+        babel: {
+          plugins: ['macros']
+        }
+      }),
+      vanillaExtractPlugin(),
+      splitVendorChunkPlugin(),
+      license({
+        sourcemap: true,
+        thirdParty: {
+          includePrivate: true,
+          multipleVersions: true,
+          output: {
+            file: `${OUTPUT_DIR}/.vite/dependencies.json`,
+            template(dependencies) {
+              return JSON.stringify(dependencies);
+            }
+          }
+        }
+      }),
+      istanbul({
+        include: ['src/*', 'lib/*'],
+        exclude: ['node_modules', 'test/'],
+        extension: ['.js', '.ts', '.tsx'],
+        requireEnv: true
+      }),
+      codecovVitePlugin({
+        enableBundleAnalysis: process.env.CODECOV_TOKEN !== undefined,
+        bundleName: 'pui_v1',
+        uploadToken: process.env.CODECOV_TOKEN
+      })
+    ],
+    // When building, set the base path to an empty string
+    // This is required to ensure that the static path prefix is observed
+    base: command == 'build' ? '' : undefined,
+    build: {
+      manifest: true,
+      outDir: OUTPUT_DIR,
+      sourcemap: true
+    },
+    resolve: {
+      alias: {
+        '@lib': '/lib'
+      }
+    },
+    server: {
+      proxy: {
+        '/media': {
+          target: 'http://localhost:8000',
+          changeOrigin: true,
+          secure: true
+        },
+        '/static': {
+          target: 'http://localhost:8000',
+          changeOrigin: true,
+          secure: true
+        }
+      },
+      watch: {
+        // Use polling only for WSL as the file system doesn't trigger notifications for Linux apps
+        // Ref: https://github.com/vitejs/vite/issues/1153#issuecomment-785467271
+        usePolling: IS_IN_WSL
+      }
+    },
+    define: {
+      __INVENTREE_LIB_VERSION__: JSON.stringify(packageJson.version)
+    }
+  };
+});