Merge branch 'main' into codex/investigate-mobile-deletion-flow-and-test-fixes

e2e/picklist.spec.ts

@@ -25,15 +25,18 @@ const addProductToPickList = async (page: Page, productName: string) => {
   const searchInput = page.getByPlaceholder('Search products');
   await searchInput.click();
   await searchInput.fill(productName);
-  await page
+  const productOption = page
     .getByRole('option', { name: new RegExp(`${productName} \\(${areaName}\\)`, 'i') })
-    .first()
+    .first();
-    .click();
 
-  await expect(page.getByText(productName).first()).toBeVisible();
+  await expect(productOption).toBeVisible({ timeout: 15000 });
+  await productOption.click();
+
+  await expect(page.getByText(productName).first()).toBeVisible({ timeout: 15000 });
 };
 
 test.describe('Active pick list', () => {
+  test.use({ viewport: { width: 1280, height: 900 } });
   test('adds a product via search and renders it with quantity and packaging', async ({ page }) => {
     await navigateToNewPickList(page);
 
@@ -45,7 +48,7 @@ test.describe('Active pick list', () => {
       .click();
 
     await expect(page.getByText(secondaryProduct, { exact: true })).toBeVisible();
-    await expect(page.getByText(/Qty:\s*1\s+unit/i)).toBeVisible();
+    await expect(page.getByText(/Qty:\s*1\s+unit/i)).toBeVisible({ timeout: 10000 });
   });
 
   test('creates a pick list and adds products from the search bar', async ({ page }) => {
@@ -67,7 +70,7 @@ test.describe('Active pick list', () => {
 
     await addProductToPickList(page, additionalProduct);
 
-    await expect(page.getByText(/Qty:\s*1\s+unit/i)).toBeVisible();
+    await expect(page.getByText(/Qty:\s*1\s+unit/i)).toBeVisible({ timeout: 10000 });
   });
 
   test('allows adding and editing products from the manage products screen', async ({ page }) => {
@@ -190,7 +193,7 @@ test.describe('Active pick list', () => {
     await expect(quantityLabel).toBeVisible();
 
     await page.getByRole('button', { name: 'Increase quantity' }).click();
-    await expect(page.getByText(/Qty:\s*2\s+unit/i)).toBeVisible();
+    await expect(page.getByText(/Qty:\s*2\s+unit/i)).toBeVisible({ timeout: 10000 });
 
     await page.reload();
     await expect(page.getByText(/Qty:\s*2\s+unit/i)).toBeVisible();
@@ -200,12 +203,37 @@ test.describe('Active pick list', () => {
     await decrementButton.click();
     await decrementButton.click();
 
-    await expect(page.getByText(/Qty:\s*1\s+unit/i)).toBeVisible();
+    await expect(page.getByText(/Qty:\s*1\s+unit/i)).toBeVisible({ timeout: 10000 });
 
     await page.reload();
     await expect(page.getByText(/Qty:\s*1\s+unit/i)).toBeVisible();
   });
 
+  test('closes mobile controls with the close button and backdrop', async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+
+    await navigateToNewPickList(page);
+    await addProductToPickList(page, additionalProduct);
+
+    const productRow = page
+      .getByText(additionalProduct, { exact: true })
+      .locator('xpath=ancestor::div[contains(@class, "MuiStack-root")]')
+      .first();
+    const controlsDialog = page.getByRole('dialog', { name: additionalProduct });
+
+    await productRow.click();
+    await expect(controlsDialog).toBeVisible();
+
+    await page.getByRole('button', { name: 'Close controls' }).click();
+    await expect(controlsDialog).toHaveCount(0);
+
+    await productRow.click();
+    await expect(controlsDialog).toBeVisible();
+
+    await page.locator('.MuiBackdrop-root').click({ position: { x: 10, y: 10 } });
+    await expect(controlsDialog).toHaveCount(0);
+  });
+
   test('toggles picked visibility and disables the filter when all items are picked', async ({ page }) => {
     await navigateToNewPickList(page);
     await addProductToPickList(page, secondaryProduct);
@@ -251,21 +279,21 @@ test.describe('Active pick list', () => {
 
     const increaseButton = page.getByLabel('Increase quantity');
     await increaseButton.click();
-    await expect(page.getByText(/Qty:\s*2\s+unit/i)).toBeVisible();
+    await expect(page.getByText(/Qty:\s*2\s+unit/i)).toBeVisible({ timeout: 10000 });
 
     await page.getByLabel('Switch to carton packaging').click();
-    await expect(page.getByText(/Qty:\s*2\s+carton/i)).toBeVisible();
+    await expect(page.getByText(/Qty:\s*2\s+carton/i)).toBeVisible({ timeout: 10000 });
 
     await page.getByLabel('Decrease quantity').click();
-    await expect(page.getByText(/Qty:\s*1\s+carton/i)).toBeVisible();
+    await expect(page.getByText(/Qty:\s*1\s+carton/i)).toBeVisible({ timeout: 10000 });
 
     await page.getByLabel('Switch to unit packaging').click();
-    await expect(page.getByText(/Qty:\s*1\s+unit/i)).toBeVisible();
+    await expect(page.getByText(/Qty:\s*1\s+unit/i)).toBeVisible({ timeout: 10000 });
 
     await increaseButton.click();
     await increaseButton.click();
     await page.getByLabel('Switch to carton packaging').click();
-    await expect(page.getByText(/Qty:\s*3\s+carton/i)).toBeVisible();
+    await expect(page.getByText(/Qty:\s*3\s+carton/i)).toBeVisible({ timeout: 10000 });
 
     await page.getByRole('button', { name: 'Save and Return' }).click();
     await expect(page.getByRole('heading', { name: 'Pick Lists' })).toBeVisible();
@@ -273,10 +301,26 @@ test.describe('Active pick list', () => {
     await page.reload();
     await page.getByRole('link', { name: areaName }).first().click();
     await expect(page.getByRole('heading', { name: `${areaName} List` })).toBeVisible();
-    await expect(page.getByText(/Qty:\s*3\s+carton/i)).toBeVisible();
+    await expect(page.getByText(/Qty:\s*3\s+carton/i)).toBeVisible({ timeout: 10000 });
     await expect(page.getByLabel('Switch to unit packaging')).toBeVisible();
   });
 
+  test('shows inline controls on wide view without the popup trigger', async ({ page }) => {
+    await navigateToNewPickList(page);
+    await addProductToPickList(page, additionalProduct);
+
+    const productRow = page
+      .getByText(additionalProduct)
+      .locator('xpath=ancestor::div[contains(@class, "MuiStack-root")]')
+      .first();
+
+    await expect(productRow.getByLabel('Switch to carton packaging')).toBeVisible();
+    await expect(productRow.getByLabel('Decrease quantity')).toBeVisible();
+    await expect(productRow.getByLabel('Increase quantity')).toBeVisible();
+    await expect(productRow.getByLabel('Delete item')).toBeVisible();
+    await expect(productRow.getByLabel('Open item controls')).toHaveCount(0);
+  });
+
   test('lets a user mark an item as picked then revert it back to pending', async ({ page }) => {
     await navigateToNewPickList(page);
     await addProductToPickList(page, additionalProduct);
@@ -334,3 +378,41 @@ test.describe('Active pick list', () => {
     await expect(page.getByText(additionalProduct)).toHaveCount(0);
   });
 });
+
+test.describe('Active pick list responsive controls on mobile', () => {
+  test.use({ viewport: { width: 430, height: 900 } });
+
+  test('shows popup controls on narrow screens and hides inline buttons', async ({ page }) => {
+    await navigateToNewPickList(page);
+    await addProductToPickList(page, additionalProduct);
+
+    const productRow = page
+      .getByText(additionalProduct)
+      .locator('xpath=ancestor::div[contains(@class, "MuiStack-root")]')
+      .first();
+
+    await expect(productRow.getByLabel('Switch to carton packaging')).toHaveCount(0);
+    await expect(productRow.getByLabel('Decrease quantity')).toHaveCount(0);
+    await expect(productRow.getByLabel('Increase quantity')).toHaveCount(0);
+    await expect(productRow.getByLabel('Delete item')).toHaveCount(0);
+
+    const controlsButton = productRow.getByLabel('Open item controls');
+    await expect(controlsButton).toBeVisible();
+    await controlsButton.click();
+
+    const itemDialog = page.getByRole('dialog', { name: additionalProduct });
+    await expect(itemDialog).toBeVisible();
+    await expect(itemDialog.getByText(/Quantity:\s*1\s+unit/i)).toBeVisible({ timeout: 10000 });
+    await expect(itemDialog.getByLabel('Increase quantity')).toBeVisible();
+
+    await itemDialog.getByLabel('Increase quantity').click();
+    await expect(itemDialog.getByText(/Quantity:\s*2\s+unit/i)).toBeVisible({ timeout: 10000 });
+    await itemDialog.getByLabel('Switch to carton packaging').click();
+    await expect(itemDialog.getByText(/Quantity:\s*2\s+carton/i)).toBeVisible({ timeout: 10000 });
+
+    await itemDialog.getByLabel('Delete item').click();
+    await expect(page.getByRole('dialog', { name: 'Delete item' })).toBeVisible();
+    await page.getByRole('button', { name: 'Cancel', exact: true }).click();
+    await expect(page.getByRole('dialog', { name: additionalProduct })).toBeVisible();
+  });
+});

src/components/PickItemRow.test.tsx

@@ -42,8 +42,32 @@ const baseProduct: Product = {
 };
 
 describe('PickItemRow', () => {
-  beforeEach(() => {
+  it('keeps quantity inline with matching typography to the product name', () => {
-    mockMatchMedia(false);
+    render(
+      <PickItemRow
+        item={baseItem}
+        product={baseProduct}
+        onIncrementQuantity={vi.fn()}
+        onDecrementQuantity={vi.fn()}
+        onToggleCarton={vi.fn()}
+        onStatusChange={vi.fn()}
+        onDelete={vi.fn()}
+      />,
+    );
+
+    const productName = screen.getByText(baseProduct.name);
+    const quantityLabel = screen.getByText('1 unit');
+    const titleRow = screen.getByTestId('pick-item-title-row');
+
+    const rowStyle = getComputedStyle(titleRow);
+    expect(rowStyle.display).toBe('flex');
+    expect(rowStyle.flexDirection).toBe('row');
+
+    const productStyle = getComputedStyle(productName);
+    const quantityStyle = getComputedStyle(quantityLabel);
+
+    expect(productStyle.fontSize).toBe(quantityStyle.fontSize);
+    expect(productStyle.fontWeight).toBe(quantityStyle.fontWeight);
   });
 
   it('asks for confirmation before deleting a product from the pick list', async () => {

src/components/PickItemRow.tsx

@@ -1,4 +1,4 @@
-import { Add, Close, Delete, Inventory2, Remove } from '@mui/icons-material';
+import { Add, Close, Delete, Inventory2, MoreHoriz, Remove } from '@mui/icons-material';
 import {
   Button,
   Checkbox,
@@ -16,7 +16,7 @@ import { alpha, useTheme } from '@mui/material/styles';
 import type React from 'react';
 import { useState } from 'react';
 import { PickItem } from '../models/PickItem';
-import { Product } from '../models/Product';
+import { DEFAULT_BULK_NAME, DEFAULT_UNIT_TYPE, Product } from '../models/Product';
 
 interface PickItemRowProps {
   item: PickItem;
@@ -42,8 +42,8 @@ export const PickItemRow = ({
   const [isControlsOpen, setIsControlsOpen] = useState(false);
   const isNarrowScreen = useMediaQuery(theme.breakpoints.down('sm'));
   const packagingLabel = item.is_carton
-    ? product?.bulk_name ?? 'Carton'
+    ? product?.bulk_name ?? DEFAULT_BULK_NAME
-    : product?.unit_type ?? 'Unit';
+    : product?.unit_type ?? DEFAULT_UNIT_TYPE;
 
   const toggleStatus = (checked: boolean) => {
     onStatusChange(checked ? 'picked' : 'pending');
@@ -65,6 +65,10 @@ export const PickItemRow = ({
     }
   };
 
+  const handleCloseControls = () => {
+    setIsControlsOpen(false);
+  };
+
   const handleRowKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     if (!isNarrowScreen) return;
 
@@ -85,7 +89,7 @@ export const PickItemRow = ({
       justifyContent="space-between"
       spacing={1.5}
       sx={{
-        p: 1,
+        p: 1.5,
         borderRadius: 1,
         bgcolor: 'background.paper',
         boxShadow: 1,
@@ -102,30 +106,32 @@ export const PickItemRow = ({
           checked={item.status === 'picked'}
           onChange={(event) => toggleStatus(event.target.checked)}
           inputProps={{ 'aria-label': 'Toggle picked status' }}
-          onClick={(event) => event.stopPropagation()}
         />
         <Stack spacing={0.5} minWidth={0} flex={1}>
-          <Typography
+          <Stack
-            variant="subtitle1"
+            direction="row"
-            noWrap
+            spacing={1}
-            sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
+            alignItems="center"
+            data-testid="pick-item-title-row"
+            sx={{ minWidth: 0 }}
           >
             <Typography
               component="span"
               variant="subtitle1"
               noWrap
-              sx={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' }}
+              sx={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', fontWeight: 600 }}
             >
               {product?.name ?? 'Unknown product'}
             </Typography>
             <Typography
               component="span"
               variant="subtitle1"
-              sx={{ fontWeight: 700, whiteSpace: 'nowrap' }}
+              noWrap
+              sx={{ fontWeight: 600, whiteSpace: 'nowrap' }}
             >
               {item.quantity} {packagingLabel}
             </Typography>
-          </Typography>
+          </Stack>
           {isNarrowScreen && (
             <Typography variant="caption" color="text.secondary" noWrap>
               Tap to adjust quantity and packaging
@@ -133,6 +139,40 @@ export const PickItemRow = ({
           )}
         </Stack>
       </Stack>
+      {isDesktop ? (
+        <Stack direction="row" spacing={0.5} alignItems="center" flexWrap="wrap" justifyContent="flex-end">
+          <IconButton
+            aria-label={`Switch to ${item.is_carton ? 'unit' : 'carton'} packaging`}
+            color={item.is_carton ? 'primary' : 'default'}
+            onClick={onToggleCarton}
+            sx={{
+              boxShadow: item.is_carton
+                ? (theme) => `0 0 0 8px ${alpha(theme.palette.primary.main, 0.15)}`
+                : 'none',
+            }}
+          >
+            <Inventory2 />
+          </IconButton>
+          <IconButton aria-label="Decrease quantity" color="primary" onClick={onDecrementQuantity}>
+            <Remove />
+          </IconButton>
+          <IconButton aria-label="Increase quantity" color="primary" onClick={onIncrementQuantity}>
+            <Add />
+          </IconButton>
+          <IconButton
+            color="error"
+            onClick={() => setIsConfirmOpen(true)}
+            aria-label="Delete item"
+            sx={{ ml: { xs: 0, sm: 1 } }}
+          >
+            <Delete />
+          </IconButton>
+        </Stack>
+      ) : (
+        <IconButton aria-label="Open item controls" onClick={openControls}>
+          <MoreHoriz />
+        </IconButton>
+      )}
 
       {!isNarrowScreen && (
         <Stack direction="row" spacing={1} alignItems="center">
@@ -187,7 +227,7 @@ export const PickItemRow = ({
       {isNarrowScreen && (
         <Dialog
           open={isControlsOpen}
-          onClose={() => setIsControlsOpen(false)}
+          onClose={handleCloseControls}
           fullWidth
           maxWidth="xs"
           aria-labelledby="item-controls-title"
@@ -201,10 +241,7 @@ export const PickItemRow = ({
             </Typography>
             <IconButton
               aria-label="Close controls"
-              onClick={(event) => {
+              onClick={handleCloseControls}
-                stopPropagation(event);
-                setIsControlsOpen(false);
-              }}
             >
               <Close />
             </IconButton>