Merge pull request #130 from Sea-Haven-Industries/fix/ab/sh-182-remove-trade-arrows

[SH-182] Remove obsolete trade reorder controls

e2e/vendors/vendors.spec.ts

@@ -469,11 +469,13 @@ test.describe("Vendor directory prototype parity", () => {
     await page.getByRole("button", { name: "Add technician" }).click();
     await page.getByLabel("Technician name (optional)").last().fill("New Technician");
     const tradeInput = page.getByRole("combobox", { name: "Add Trade" }).last();
-    await tradeInput.fill("HVAC");
-    await tradeInput.press("Enter");
     await tradeInput.fill("Plumbing");
     await tradeInput.press("Enter");
-    await page.getByRole("button", { name: "Move Plumbing up" }).click();
+    await tradeInput.fill("HVAC");
+    await tradeInput.press("Enter");
+    await expect(page.getByRole("button", { name: /Move (Plumbing|HVAC) (up|down)/ })).toHaveCount(
+      0,
+    );
     await page.getByLabel("Notes (optional)").fill("Created in browser E2E");
     await page.getByRole("button", { name: "Add Vendor", exact: true }).last().click();
     await expect(page.getByRole("dialog", { name: /Add Vendor/ })).toHaveCount(0);

src/app/(protected)/vendors/_components/vendor-trade-specialties-field.tsx

@@ -1,8 +1,6 @@
 import { useRef, useState } from "react";
 import { Controller, type Control } from "react-hook-form";
 import AddIcon from "@mui/icons-material/Add";
-import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
-import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import CloseIcon from "@mui/icons-material/Close";
 import {
   Autocomplete,
@@ -116,7 +114,7 @@ export function VendorTradeSpecialtiesField({
     <Box>
       <FormLabel component="legend">Trade Specialties</FormLabel>
       <Typography variant="caption" sx={{ color: "text.secondary" }}>
-        First trade is primary. Reorder with the arrows.
+        First trade is primary.
       </Typography>
       <Controller
         control={control}
@@ -147,14 +145,6 @@ export function VendorTradeSpecialtiesField({
             commit([...trades, trade]);
             setTradeInput("");
           };
-          const move = (tradeIndex: number, direction: -1 | 1) => {
-            const target = tradeIndex + direction;
-            if (target < 0 || target >= trades.length) return;
-            const next = [...trades];
-            [next[tradeIndex], next[target]] = [next[target], next[tradeIndex]];
-            commit(next);
-          };
-
           return (
             <Stack spacing={1} className="mt-2">
               <Box className="flex flex-wrap gap-1.5">
@@ -211,32 +201,6 @@ export function VendorTradeSpecialtiesField({
                   <AddIcon />
                 </Button>
               </Stack>
-              {trades.length > 1 && (
-                <Stack direction="row" spacing={1} className="flex-wrap">
-                  {trades.map((trade, tradeIndex) => (
-                    <Stack key={`reorder-${trade}-${tradeIndex}`} direction="row" spacing={0.5}>
-                      {tradeIndex > 0 && (
-                        <Button
-                          size="small"
-                          aria-label={`Move ${trade} up`}
-                          onClick={() => move(tradeIndex, -1)}
-                        >
-                          <ArrowUpwardIcon fontSize="small" />
-                        </Button>
-                      )}
-                      {tradeIndex < trades.length - 1 && (
-                        <Button
-                          size="small"
-                          aria-label={`Move ${trade} down`}
-                          onClick={() => move(tradeIndex, 1)}
-                        >
-                          <ArrowDownwardIcon fontSize="small" />
-                        </Button>
-                      )}
-                    </Stack>
-                  ))}
-                </Stack>
-              )}
             </Stack>
           );
         }}

src/test/app/(protected)/vendors/vendor-trade-specialties-field.test.tsx

@@ -68,6 +68,23 @@ function typeAndCommitTrade(input: HTMLElement, value: string, commit: "enter" |
 }
 
 describe("VendorTradeSpecialtiesField", () => {
+  it("does not expose obsolete reorder actions for multiple trades", () => {
+    const valuesRef = { current: "" };
+    renderWithProviders(
+      <TradeSpecialtiesHarness
+        tradeOptions={["Plumbing", "HVAC"]}
+        initialTradeSpecialties="Plumbing, HVAC"
+        valuesRef={valuesRef}
+      />,
+    );
+
+    expect(screen.getByText("Plumbing (primary)")).toBeInTheDocument();
+    expect(screen.getByText("HVAC")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /move .* (up|down)/i })).toBeNull();
+    expect(screen.queryByText(/reorder with the arrows/i)).toBeNull();
+    expect(valuesRef.current).toBe("Plumbing, HVAC");
+  });
+
   it("offers facet trades as selectable options when the facets query is populated", async () => {
     const valuesRef = { current: "" };
     renderWithProviders(