Add warehouse select

src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx

@@ -13,6 +13,7 @@ import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import { ShippingErrorFragment } from "@saleor/shipping/types/ShippingErrorFragment";
 import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAutocompleteSelectChangeHandler";
 import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
+import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { maybe } from "../../../misc";
 import { ShippingMethodTypeEnum } from "../../../types/globalTypes";
 import {
@@ -78,7 +79,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
     name: shippingZone?.name || "",
     warehouses: shippingZone?.warehouses.map(warehouse => warehouse.id) || []
   };
-  const [warehouseDisplayValues, setWarehouseDisplayValues] = React.useState(
+  const [warehouseDisplayValues, setWarehouseDisplayValues] = useStateFromProps(
     shippingZone?.warehouses.map(warehouseToChoice)
   );
 

src/shipping/components/ShippingZoneWarehouses/ShippingZoneWarehouses.tsx

@@ -36,7 +36,7 @@ export const ShippingZoneWarehouses: React.FC<ShippingZonewWarehousesProps> = pr
     <Card>
       <CardTitle
         title={intl.formatMessage({
-          defaultMessage: "Visibility",
+          defaultMessage: "Warehouse",
           description: "section header"
         })}
       />
@@ -46,10 +46,17 @@ export const ShippingZoneWarehouses: React.FC<ShippingZonewWarehousesProps> = pr
           displayValues={displayValue}
           fetchChoices={() => undefined}
           hasMore={hasMore}
+          label={intl.formatMessage({
+            defaultMessage: "Warehouse"
+          })}
           loading={loading}
           name="warehouse"
           onChange={onChange}
           onFetchMore={onFetchMore}
+          placeholder={intl.formatMessage({
+            defaultMessage: "Select Warehouse",
+            description: "input placeholder"
+          })}
           value={data.warehouses}
         />
       </CardContent>

src/shipping/views/ShippingZoneDetails/index.tsx

@@ -13,7 +13,8 @@ import {
   useShippingRateUpdate,
   useShippingRateDelete,
   useShippingZoneDelete,
-  useShippingZoneUpdate
+  useShippingZoneUpdate,
+  useAassignShippingZoneToWarehouse
 } from "@saleor/shipping/mutations";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import ShippingZoneRateDialog from "@saleor/shipping/components/ShippingZoneRateDialog";
@@ -55,6 +56,8 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
     variables: DEFAULT_INITIAL_SEARCH_DATA
   });
 
+  const [assignToWarehouse] = useAassignShippingZoneToWarehouse({});
+
   const { data, loading } = useShippingZone({
     displayLoader: true,
     variables: { id }
@@ -132,6 +135,12 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
         }
       }
     });
+    assignToWarehouse({
+      variables: {
+        shippingZoneId: id,
+        warehouseId: data.warehouse
+      }
+    });
   };
 
   if (data?.shippingZone === null) {