Fix dropdown buttons styles (#2151)

* Fix filterStructure typo, fixes #2140

* Fix dropdown button styles

* Update assign warehouse button to product or variant

* Update test snapshots

src/components/LinkChoice/LinkChoice.tsx

@@ -1,52 +1,13 @@
 import { ClickAwayListener, MenuItem, Paper, Popper } from "@material-ui/core";
 import { FormChange } from "@saleor/hooks/useForm";
 import ArrowDropdown from "@saleor/icons/ArrowDropdown";
-import { makeStyles } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import { codes } from "keycode";
 import React from "react";
 
 import Link from "../Link";
 import { SingleAutocompleteChoiceType } from "../SingleAutocompleteSelectField";
-
+import { useStyles } from "./styles";
-const useStyles = makeStyles(
-  theme => ({
-    arrow: {
-      position: "relative",
-      top: 6,
-      transition: theme.transitions.duration.short + "ms",
-    },
-    highlighted: {
-      background: theme.palette.background.default,
-    },
-    menuItem: {
-      "&:not(:last-of-type)": {
-        marginBottom: theme.spacing(),
-      },
-      borderRadius: 4,
-    },
-    paper: {
-      padding: theme.spacing(),
-    },
-    popper: {
-      marginTop: theme.spacing(1),
-      zIndex: 2,
-    },
-    root: {
-      "&:focus": {
-        textDecoration: "underline",
-      },
-      outline: 0,
-      position: "relative",
-    },
-    rotate: {
-      transform: "rotate(180deg)",
-    },
-  }),
-  {
-    name: "LinkChoice",
-  },
-);
 
 export interface LinkChoiceProps {
   className?: string;
@@ -63,7 +24,7 @@ const LinkChoice: React.FC<LinkChoiceProps> = ({
   value,
   onChange,
 }) => {
-  const classes = useStyles({});
+  const classes = useStyles();
   const [open, setOpen] = React.useState(false);
   const anchor = React.useRef<HTMLInputElement>(null);
   const current = choices.find(c => c.value === value);

src/components/LinkChoice/styles.ts

@@ -0,0 +1,40 @@
+import { makeStyles } from "@saleor/macaw-ui";
+
+export const useStyles = makeStyles(
+  theme => ({
+    arrow: {
+      position: "relative",
+      top: 6,
+      transition: theme.transitions.duration.short + "ms",
+    },
+    highlighted: {
+      background: theme.palette.background.default,
+    },
+    menuItem: {
+      "&:not(:last-of-type)": {
+        marginBottom: theme.spacing(),
+      },
+      borderRadius: 4,
+    },
+    paper: {
+      padding: theme.spacing(),
+    },
+    popper: {
+      marginTop: theme.spacing(1),
+      zIndex: 2,
+    },
+    root: {
+      "&:focus, &:hover": {
+        textDecoration: "underline",
+      },
+      outline: 0,
+      position: "relative",
+    },
+    rotate: {
+      transform: "rotate(180deg)",
+    },
+  }),
+  {
+    name: "LinkChoice",
+  },
+);

src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx

@@ -5,7 +5,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { OrderLineFragment, WarehouseFragment } from "@saleor/graphql";
 import { commonMessages } from "@saleor/intl";
-import { ChevronIcon, makeStyles } from "@saleor/macaw-ui";
+import { ChevronIcon, IconButton } from "@saleor/macaw-ui";
 import { renderCollection } from "@saleor/misc";
 import React from "react";
 import { FormattedMessage } from "react-intl";
@@ -13,60 +13,7 @@ import { FormattedMessage } from "react-intl";
 import OrderCardTitle from "../OrderCardTitle";
 import TableHeader from "../OrderProductsCardElements/OrderProductsCardHeader";
 import TableLine from "../OrderProductsCardElements/OrderProductsTableRow";
-
+import { useStyles } from "./styles";
-const useStyles = makeStyles(
-  theme => ({
-    actions: {
-      flexDirection: "row-reverse",
-      padding: theme.spacing(2, 3),
-    },
-    table: {
-      "& td, & th": {
-        "&:not(:first-child):not(:last-child)": {
-          paddingLeft: theme.spacing(1),
-          paddingRight: theme.spacing(1),
-        },
-      },
-      tableLayout: "fixed",
-    },
-    toolbar: {
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      cursor: "pointer",
-      borderRadius: "4px",
-      paddingTop: theme.spacing(1),
-      paddingBottom: theme.spacing(1),
-      paddingRight: theme.spacing(0.5),
-      paddingLeft: theme.spacing(1.5),
-      "&:hover": {
-        backgroundColor: theme.palette.saleor.active[5],
-        color: theme.palette.saleor.active[1],
-      },
-      "& > div": {
-        minWidth: 0,
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-      },
-    },
-    cardTitle: {
-      justifyContent: "space-between",
-      "& > div": {
-        "&:first-child": {
-          flex: 0,
-          whiteSpace: "nowrap",
-        },
-        "&:last-child": {
-          flex: "0 1 auto",
-          minWidth: 0,
-          marginLeft: theme.spacing(1),
-        },
-      },
-    },
-  }),
-  { name: "OrderUnfulfilledItems" },
-);
 
 interface OrderUnfulfilledProductsCardProps {
   showFulfillmentAction: boolean;
@@ -86,7 +33,7 @@ const OrderUnfulfilledProductsCard: React.FC<OrderUnfulfilledProductsCardProps>
     selectedWarehouse,
     onWarehouseChange,
   } = props;
-  const classes = useStyles({});
+  const classes = useStyles();
 
   if (!lines.length) {
     return null;
@@ -101,10 +48,16 @@ const OrderUnfulfilledProductsCard: React.FC<OrderUnfulfilledProductsCardProps>
           status="unfulfilled"
           className={classes.cardTitle}
           toolbar={
-            <div className={classes.toolbar} onClick={onWarehouseChange}>
+            <IconButton
+              onClick={onWarehouseChange}
+              className={classes.toolbarButton}
+              data-test-id="select-warehouse-button"
+            >
+              <div className={classes.toolbarButtonContent}>
                 <div>{selectedWarehouse?.name ?? <Skeleton />}</div>
                 <ChevronIcon />
               </div>
+            </IconButton>
           }
         />
         <ResponsiveTable className={classes.table}>

src/orders/components/OrderUnfulfilledProductsCard/styles.ts

@@ -0,0 +1,43 @@
+import { makeStyles } from "@saleor/macaw-ui";
+
+export const useStyles = makeStyles(
+  theme => ({
+    actions: {
+      flexDirection: "row-reverse",
+      padding: theme.spacing(2, 3),
+    },
+    table: {
+      "& td, & th": {
+        "&:not(:first-child):not(:last-child)": {
+          paddingLeft: theme.spacing(1),
+          paddingRight: theme.spacing(1),
+        },
+      },
+      tableLayout: "fixed",
+    },
+    toolbarButton: {
+      border: 0,
+    },
+    toolbarButtonContent: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      cursor: "pointer",
+    },
+    cardTitle: {
+      justifyContent: "space-between",
+      "& > div": {
+        "&:first-child": {
+          flex: 0,
+          whiteSpace: "nowrap",
+        },
+        "&:last-child": {
+          flex: "0 1 auto",
+          minWidth: 0,
+          marginLeft: theme.spacing(1),
+        },
+      },
+    },
+  }),
+  { name: "OrderUnfulfilledItems" },
+);

src/pages/components/PageListPage/PageListSearchAndFilters.tsx

@@ -75,7 +75,7 @@ const PageListSearchAndFilters: React.FC<PageListSearchAndFiltersProps> = ({
     cleanupFn: reset,
   });
 
-  const filterStrucutre = createFilterStructure(intl, filterOpts);
+  const filterStructure = createFilterStructure(intl, filterOpts);
 
   const { open: openModal, close: closeModal } = actionDialogOpts;
 
@@ -105,7 +105,7 @@ const PageListSearchAndFilters: React.FC<PageListSearchAndFiltersProps> = ({
   return (
     <>
       <FilterBar
-        filterStructure={filterStrucutre}
+        filterStructure={filterStructure}
         initialSearch={""}
         onAll={resetFilters}
         onFilterChange={changeFilters}

src/products/components/ProductStocks/ProductStocks.tsx

@@ -107,6 +107,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
   const classes = useStyles();
   const intl = useIntl();
   const anchor = React.useRef<HTMLDivElement>();
+  const [lastStockRowFocus, setLastStockRowFocus] = React.useState(false);
   const [isExpanded, setExpansionState] = React.useState(false);
   const unitsLeft = parseInt(data.globalThreshold, 10) - data.globalSoldUnits;
 
@@ -120,6 +121,18 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
     onFormDataChange,
   );
 
+  const handleWarehouseStockAdd = (warehouseId: string) => {
+    onWarehouseStockAdd(warehouseId);
+    setLastStockRowFocus(true);
+  };
+
+  const handleStockInputFocus = (input: HTMLDivElement) => {
+    if (lastStockRowFocus && input) {
+      input.focus();
+      setLastStockRowFocus(false);
+    }
+  };
+
   return (
     <Card>
       <CardTitle title={intl.formatMessage(messages.title)} />
@@ -248,7 +261,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
               </TableRow>
             </TableHead>
             <TableBody>
-              {renderCollection(stocks, stock => {
+              {renderCollection(stocks, (stock, index) => {
                 const handleQuantityChange = createNonNegativeValueChangeHandler(
                   event => onChange(stock.id, event.target.value),
                 );
@@ -273,6 +286,10 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
                         }}
                         onChange={handleQuantityChange}
                         value={stock.value}
+                        inputRef={input =>
+                          stocks.length === index + 1 &&
+                          handleStockInputFocus(input)
+                        }
                       />
                     </TableCell>
                     <TableCell className={classes.colAction}>
@@ -288,22 +305,23 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
                 );
               })}
               {warehousesToAssign.length > 0 && (
-                <TableRow>
+                <ClickAwayListener onClickAway={() => setExpansionState(false)}>
-                  <TableCell colSpan={3}>
+                  <TableRow
+                    className={classes.addRow}
+                    onClick={() => setExpansionState(!isExpanded)}
+                  >
+                    <TableCell colSpan={3} className={classes.actionableText}>
                       <Typography variant="body2">
                         <FormattedMessage {...messages.assignWarehouse} />
                       </Typography>
                     </TableCell>
                     <TableCell className={classes.colAction}>
-                    <ClickAwayListener
-                      onClickAway={() => setExpansionState(false)}
-                    >
                       <div ref={anchor}>
                         <IconButton
                           data-test-id="add-warehouse"
                           color="primary"
                           variant="secondary"
-                          onClick={() => setExpansionState(!isExpanded)}
+                          className={classes.actionableText}
                         >
                           <PlusIcon />
                         </IconButton>
@@ -326,7 +344,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
                                   <MenuItem
                                     className={classes.menuItem}
                                     onClick={() =>
-                                      onWarehouseStockAdd(warehouse.id)
+                                      handleWarehouseStockAdd(warehouse.id)
                                     }
                                   >
                                     {warehouse.name}
@@ -337,9 +355,9 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
                           )}
                         </Popper>
                       </div>
-                    </ClickAwayListener>
                     </TableCell>
                   </TableRow>
+                </ClickAwayListener>
               )}
             </TableBody>
           </Table>

src/products/components/ProductStocks/styles.ts

@@ -40,6 +40,8 @@ export const useStyles = makeStyles(
     popper: {
       marginTop: theme.spacing(1),
       zIndex: 2,
+      maxHeight: 400,
+      overflow: "scroll",
     },
     quantityContainer: {
       paddingTop: theme.spacing(),
@@ -75,6 +77,15 @@ export const useStyles = makeStyles(
     thresholdInput: {
       maxWidth: 400,
     },
+    addRow: {
+      "&:hover": {
+        cursor: "pointer",
+        "& $actionableText": {
+          color: theme.palette.primary.main,
+        },
+      },
+    },
+    actionableText: {},
     preorderItemsLeftCount: {
       fontSize: 14,
       paddingTop: theme.spacing(2),

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -2570,7 +2570,7 @@ exports[`Storyshots Channels / Channels with variants availability card default
                   class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                   style="font-size:12px"
                 >
-                  Visible since 07/30/2020
+                  Visible since Jul 30, 2020
                 </div>
               </div>
             </div>
@@ -2918,7 +2918,7 @@ exports[`Storyshots Channels / Channels with variants availability card default
                   class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                   style="font-size:12px"
                 >
-                  Visible since 07/30/2020
+                  Visible since Jul 30, 2020
                 </div>
               </div>
             </div>
@@ -5188,7 +5188,7 @@ exports[`Storyshots Generics / Channels availability card with onChange 1`] = `
                           <span
                             class="ChannelsAvailabilityCard-secondLabel-id"
                           >
-                            will become published on 07/30/2020
+                            will become published on Jul 30, 2020
                           </span>
                         </span>
                       </label>
@@ -113948,9 +113948,18 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
               </div>
               <div
                 class="MuiCardHeader-action-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
+                  data-test-id="select-warehouse-button"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
                   >
                     <div
-                  class="OrderUnfulfilledItems-toolbar-id"
+                      class="OrderUnfulfilledItems-toolbarButtonContent-id"
                     >
                       <div>
                         <span
@@ -113979,6 +113988,8 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                         />
                       </svg>
                     </div>
+                  </span>
+                </button>
               </div>
             </div>
             <div
@@ -115862,9 +115873,18 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
               </div>
               <div
                 class="MuiCardHeader-action-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
+                  data-test-id="select-warehouse-button"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
                   >
                     <div
-                  class="OrderUnfulfilledItems-toolbar-id"
+                      class="OrderUnfulfilledItems-toolbarButtonContent-id"
                     >
                       <div>
                         <span
@@ -115893,6 +115913,8 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                         />
                       </svg>
                     </div>
+                  </span>
+                </button>
               </div>
             </div>
             <div
@@ -117978,9 +118000,18 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
               </div>
               <div
                 class="MuiCardHeader-action-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
+                  data-test-id="select-warehouse-button"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
                   >
                     <div
-                  class="OrderUnfulfilledItems-toolbar-id"
+                      class="OrderUnfulfilledItems-toolbarButtonContent-id"
                     >
                       <div>
                         <span
@@ -118009,6 +118040,8 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                         />
                       </svg>
                     </div>
+                  </span>
+                </button>
               </div>
             </div>
             <div
@@ -120728,9 +120761,18 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
               </div>
               <div
                 class="MuiCardHeader-action-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
+                  data-test-id="select-warehouse-button"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
                   >
                     <div
-                  class="OrderUnfulfilledItems-toolbar-id"
+                      class="OrderUnfulfilledItems-toolbarButtonContent-id"
                     >
                       <div>
                         <span
@@ -120759,6 +120801,8 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                         />
                       </svg>
                     </div>
+                  </span>
+                </button>
               </div>
             </div>
             <div
@@ -122844,9 +122888,18 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
               </div>
               <div
                 class="MuiCardHeader-action-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
+                  data-test-id="select-warehouse-button"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
                   >
                     <div
-                  class="OrderUnfulfilledItems-toolbar-id"
+                      class="OrderUnfulfilledItems-toolbarButtonContent-id"
                     >
                       <div>
                         <span
@@ -122875,6 +122928,8 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                         />
                       </svg>
                     </div>
+                  </span>
+                </button>
               </div>
             </div>
             <div
@@ -124898,9 +124953,18 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
               </div>
               <div
                 class="MuiCardHeader-action-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
+                  data-test-id="select-warehouse-button"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
                   >
                     <div
-                  class="OrderUnfulfilledItems-toolbar-id"
+                      class="OrderUnfulfilledItems-toolbarButtonContent-id"
                     >
                       <div>
                         <span
@@ -124929,6 +124993,8 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                         />
                       </svg>
                     </div>
+                  </span>
+                </button>
               </div>
             </div>
             <div
@@ -127006,9 +127072,18 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
               </div>
               <div
                 class="MuiCardHeader-action-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
+                  data-test-id="select-warehouse-button"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
                   >
                     <div
-                  class="OrderUnfulfilledItems-toolbar-id"
+                      class="OrderUnfulfilledItems-toolbarButtonContent-id"
                     >
                       <div>
                         <span
@@ -127037,6 +127112,8 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                         />
                       </svg>
                     </div>
+                  </span>
+                </button>
               </div>
             </div>
             <div
@@ -129122,9 +129199,18 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
               </div>
               <div
                 class="MuiCardHeader-action-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
+                  data-test-id="select-warehouse-button"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
                   >
                     <div
-                  class="OrderUnfulfilledItems-toolbar-id"
+                      class="OrderUnfulfilledItems-toolbarButtonContent-id"
                     >
                       <div>
                         <span
@@ -129153,6 +129239,8 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                         />
                       </svg>
                     </div>
+                  </span>
+                </button>
               </div>
             </div>
             <div
@@ -131238,9 +131326,18 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
               </div>
               <div
                 class="MuiCardHeader-action-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
+                  data-test-id="select-warehouse-button"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
                   >
                     <div
-                  class="OrderUnfulfilledItems-toolbar-id"
+                      class="OrderUnfulfilledItems-toolbarButtonContent-id"
                     >
                       <div>
                         <span
@@ -131269,6 +131366,8 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                         />
                       </svg>
                     </div>
+                  </span>
+                </button>
               </div>
             </div>
             <div
@@ -133354,9 +133453,18 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
               </div>
               <div
                 class="MuiCardHeader-action-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
+                  data-test-id="select-warehouse-button"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
                   >
                     <div
-                  class="OrderUnfulfilledItems-toolbar-id"
+                      class="OrderUnfulfilledItems-toolbarButtonContent-id"
                     >
                       <div>
                         <span
@@ -133385,6 +133493,8 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                         />
                       </svg>
                     </div>
+                  </span>
+                </button>
               </div>
             </div>
             <div
@@ -135470,9 +135580,18 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
               </div>
               <div
                 class="MuiCardHeader-action-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
+                  data-test-id="select-warehouse-button"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
                   >
                     <div
-                  class="OrderUnfulfilledItems-toolbar-id"
+                      class="OrderUnfulfilledItems-toolbarButtonContent-id"
                     >
                       <div>
                         <span
@@ -135501,6 +135620,8 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                         />
                       </svg>
                     </div>
+                  </span>
+                </button>
               </div>
             </div>
             <div
@@ -137586,9 +137707,18 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
               </div>
               <div
                 class="MuiCardHeader-action-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
+                  data-test-id="select-warehouse-button"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
                   >
                     <div
-                  class="OrderUnfulfilledItems-toolbar-id"
+                      class="OrderUnfulfilledItems-toolbarButtonContent-id"
                     >
                       <div>
                         <span
@@ -137617,6 +137747,8 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                         />
                       </svg>
                     </div>
+                  </span>
+                </button>
               </div>
             </div>
             <div
@@ -139702,9 +139834,18 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
               </div>
               <div
                 class="MuiCardHeader-action-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderUnfulfilledItems-toolbarButton-id"
+                  data-test-id="select-warehouse-button"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
                   >
                     <div
-                  class="OrderUnfulfilledItems-toolbar-id"
+                      class="OrderUnfulfilledItems-toolbarButtonContent-id"
                     >
                       <div>
                         <span
@@ -139733,6 +139874,8 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                         />
                       </svg>
                     </div>
+                  </span>
+                </button>
               </div>
             </div>
             <div
@@ -233944,10 +234087,10 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                 class="MuiTableBody-root-id"
               >
                 <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id"
+                  class="MuiTableRow-root-id ProductStocks-addRow-id MuiTableRow-hover-id"
                 >
                   <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-actionableText-id"
                     colspan="3"
                   >
                     <div
@@ -233961,7 +234104,7 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                   >
                     <div>
                       <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
+                        class="MuiButtonBase-root-id IconButton-secondary-id ProductStocks-actionableText-id IconButton-hoverOutline-id"
                         color="primary"
                         data-test-id="add-warehouse"
                         tabindex="0"