Add information about immediate save (#1900)

* Add information about immediate save

* Remove leftover code

* Add info about immediate save in sales

* Add info about immediate save in orders

* Add info about immediate save in attributes

* Add info about immediate save in shipping

* Add saved notification

* Fix type errors

* Update messages

* Remove debug code

* Update messages

* Lint project

locale/defaultMessages.json

@@ -1856,7 +1856,7 @@
   },
   "src_dot_components_dot_AssignAttributeDialog_dot_assignButton": {
     "context": "button",
-    "string": "Assign attributes"
+    "string": "Assign and save"
   },
   "src_dot_components_dot_AssignAttributeDialog_dot_noMembersFound": {
     "context": "description",
@@ -1874,6 +1874,10 @@
     "context": "dialog header",
     "string": "Assign Attribute"
   },
+  "src_dot_components_dot_AssignAttributeValueDialog_dot_confirmBtn": {
+    "context": "assign reference to product, button",
+    "string": "Assign"
+  },
   "src_dot_components_dot_AssignAttributeValueDialog_dot_header": {
     "context": "dialog header",
     "string": "Assign Attribute Value"
@@ -1898,6 +1902,10 @@
     "context": "dialog search placeholder",
     "string": "Search by category name, etc..."
   },
+  "src_dot_components_dot_AssignCategoryDialog_dot_confirmButton": {
+    "context": "assign categories to sale and save",
+    "string": "Assign and save"
+  },
   "src_dot_components_dot_AssignCollectionDialog_dot_assignCollectionDialogHeader": {
     "context": "dialog header",
     "string": "Assign Collection"
@@ -1910,13 +1918,17 @@
     "context": "dialog search placeholder",
     "string": "Search by collection name, etc..."
   },
+  "src_dot_components_dot_AssignCollectionDialog_dot_confirmBtn": {
+    "context": "assign collections to sale and save",
+    "string": "Assign and save"
+  },
   "src_dot_components_dot_AssignContainerDialog_dot_assignContainerDialogButton": {
     "context": "button",
     "string": "Assign"
   },
   "src_dot_components_dot_AssignProductDialog_dot_assignProductDialogButton": {
     "context": "button",
-    "string": "Assign"
+    "string": "Assign and save"
   },
   "src_dot_components_dot_AssignProductDialog_dot_assignProductDialogContent": {
     "string": "Search Products"
@@ -1932,8 +1944,8 @@
     "string": "No products available in order channel matching given query"
   },
   "src_dot_components_dot_AssignVariantDialog_dot_assignVariantDialogButton": {
-    "context": "button",
+    "context": "button, assign variants to sale and save",
-    "string": "Assign"
+    "string": "Assign and save"
   },
   "src_dot_components_dot_AssignVariantDialog_dot_assignVariantDialogContent": {
     "string": "Search Variants"
@@ -1949,7 +1961,12 @@
   "src_dot_components_dot_AssignVariantDialog_dot_assignVariantDialogSearch": {
     "string": "Search by product name, attribute, product type etc..."
   },
-  "src_dot_components_dot_AttributeUnassignDialog_dot_2037985699": {
+  "src_dot_components_dot_AttributeUnassignDialog_dot_confirmBtn": {
+    "context": "button, unassign attribute from object",
+    "string": "Unassign and save"
+  },
+  "src_dot_components_dot_AttributeUnassignDialog_dot_content": {
+    "context": "unassign attribute from object",
     "string": "Are you sure you want to unassign {attributeName} from {itemTypeName}?"
   },
   "src_dot_components_dot_Attributes_dot_attributesNumber": {
@@ -1975,7 +1992,11 @@
   "src_dot_components_dot_AutocompleteSelectMenu_dot_2332404293": {
     "string": "No results"
   },
-  "src_dot_components_dot_BulkAttributeUnassignDialog_dot_3177750460": {
+  "src_dot_components_dot_BulkAttributeUnassignDialog_dot_confirmBtn": {
+    "context": "button, unassign attribute from object",
+    "string": "Unassign and save"
+  },
+  "src_dot_components_dot_BulkAttributeUnassignDialog_dot_content": {
     "context": "unassign multiple attributes from item",
     "string": "{counter,plural,one{Are you sure you want to unassign this attribute from {itemTypeName}?} other{Are you sure you want to unassign {attributeQuantity} attributes from {itemTypeName}?}}"
   },
@@ -3398,8 +3419,8 @@
     "string": "Delete Sale"
   },
   "src_dot_discounts_dot_views_dot_SaleDetails_dot_saleDetailsUnassignCategory": {
-    "context": "unassign category from sale, button",
+    "context": "unassign category from sale and save, button",
-    "string": "Unassign"
+    "string": "Unassign and save"
   },
   "src_dot_discounts_dot_views_dot_SaleDetails_dot_saleDetailsUnassignCategoryDialog": {
     "context": "dialog content",
@@ -3410,8 +3431,8 @@
     "string": "Unassign Categories From Sale"
   },
   "src_dot_discounts_dot_views_dot_SaleDetails_dot_saleDetailsUnassignCollection": {
-    "context": "unassign collection from sale, button",
+    "context": "unassign collection from sale and save, button",
-    "string": "Unassign"
+    "string": "Unassign and save"
   },
   "src_dot_discounts_dot_views_dot_SaleDetails_dot_saleDetailsUnassignCollectionDialog": {
     "context": "dialog content",
@@ -3426,8 +3447,8 @@
     "string": "Are you sure you want to delete {saleName}?"
   },
   "src_dot_discounts_dot_views_dot_SaleDetails_dot_saleDetailsUnassignProduct": {
-    "context": "unassign product from sale, button",
+    "context": "unassign product from sale and save, button",
-    "string": "Unassign"
+    "string": "Unassign and save"
   },
   "src_dot_discounts_dot_views_dot_SaleDetails_dot_saleDetailsUnassignProductDialog": {
     "context": "dialog content",
@@ -3438,8 +3459,8 @@
     "string": "Unassign Product From Sale"
   },
   "src_dot_discounts_dot_views_dot_SaleDetails_dot_saleDetailsUnassignVariant": {
-    "context": "unassign variant from sale, button",
+    "context": "unassign variant from sale and save, button",
-    "string": "Unassign"
+    "string": "Unassign and save"
   },
   "src_dot_discounts_dot_views_dot_SaleDetails_dot_saleDetailsUnassignVariantDialog": {
     "context": "dialog content",
@@ -3463,13 +3484,14 @@
   "src_dot_discounts_dot_views_dot_VoucherCreate_dot_655651329": {
     "string": "Successfully created voucher"
   },
-  "src_dot_discounts_dot_views_dot_VoucherDetails_dot_1162257691": {
-    "string": "Deleted voucher"
-  },
   "src_dot_discounts_dot_views_dot_VoucherDetails_dot_1402402714": {
     "context": "dialog header",
     "string": "Unassign Collections From Voucher"
   },
+  "src_dot_discounts_dot_views_dot_VoucherDetails_dot_1569805915": {
+    "context": "button",
+    "string": "Unassign and save"
+  },
   "src_dot_discounts_dot_views_dot_VoucherDetails_dot_2072403265": {
     "context": "dialog header",
     "string": "Unassign Products From Voucher"
@@ -7172,6 +7194,10 @@
   "src_dot_shipping_dot_components_dot_ShippingMethodProductsAddDialog_dot_353369701": {
     "string": "No products matching given query"
   },
+  "src_dot_shipping_dot_components_dot_ShippingMethodProductsAddDialog_dot_3657244300": {
+    "context": "assign products to shipping rate and save, button",
+    "string": "Assign and save"
+  },
   "src_dot_shipping_dot_components_dot_ShippingMethodProductsAddDialog_dot_3756118423": {
     "context": "dialog header",
     "string": "Assign Products"
@@ -7223,8 +7249,8 @@
     "string": "Create New Warehouse"
   },
   "src_dot_shipping_dot_components_dot_ShippingZoneCountriesAssignDialog_dot_assignCountriesButton": {
-    "context": "button",
+    "context": "assign countries to shipping zone and save, button",
-    "string": "Assign countries"
+    "string": "Assign and save"
   },
   "src_dot_shipping_dot_components_dot_ShippingZoneCountriesAssignDialog_dot_assignCountriesDescription": {
     "context": "dialog description",
@@ -7427,6 +7453,10 @@
     "context": "dialog header",
     "string": "Unassign Products From Shipping"
   },
+  "src_dot_shipping_dot_components_dot_UnassignDialog_dot_1569805915": {
+    "context": "unassign products from shipping rate and save, button",
+    "string": "Unassign and save"
+  },
   "src_dot_shipping_dot_components_dot_UnassignDialog_dot_3215481647": {
     "context": "dialog content",
     "string": "{counter,plural,one{Are you sure you want to unassign this product?} other{Are you sure you want to unassign {displayQuantity} products?}}"
@@ -7465,13 +7495,17 @@
     "context": "dialog header",
     "string": "Delete Shipping Zone"
   },
-  "src_dot_shipping_dot_views_dot_ShippingZoneDetails_dot_131963671": {
+  "src_dot_shipping_dot_views_dot_ShippingZoneDetails_dot_1790261672": {
     "context": "unassign country",
-    "string": "Are you sure you want to delete {countryName} from this shipping zone?"
+    "string": "Are you sure you want to remove {countryName} from this shipping zone?"
   },
-  "src_dot_shipping_dot_views_dot_ShippingZoneDetails_dot_3133838427": {
+  "src_dot_shipping_dot_views_dot_ShippingZoneDetails_dot_4243932177": {
     "context": "unassign country, dialog header",
-    "string": "Delete from Shipping Zone"
+    "string": "Remove from Shipping Zone"
+  },
+  "src_dot_shipping_dot_views_dot_ShippingZoneDetails_dot_4279089621": {
+    "context": "remove country from shipping zone and save, button",
+    "string": "Remove and save"
   },
   "src_dot_shipping_dot_weight": {
     "context": "error message",
@@ -8488,15 +8522,15 @@
     "string": "Unlimited"
   },
   "voucherDetailsUnassignCategory": {
-    "context": "unassign category from voucher, button",
+    "context": "button",
     "string": "Unassign"
   },
   "voucherDetailsUnassignCollection": {
-    "context": "unassign collection from voucher, button",
+    "context": "button",
     "string": "Unassign"
   },
   "voucherDetailsUnassignProduct": {
-    "context": "unassign product from voucher, button",
+    "context": "button",
     "string": "Unassign"
   },
   "will become available on": {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "saleor-dashboard",
-  "version": "3.0.0-b.11",
+  "version": "3.1.0-dev",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

src/attributes/views/AttributeDetails/AttributeDetails.tsx

@@ -17,7 +17,7 @@ import useLocalPaginator, {
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { commonMessages } from "@saleor/intl";
-import { extractMutationErrors } from "@saleor/misc";
+import { extractMutationErrors, getStringOrPlaceholder } from "@saleor/misc";
 import { ListViews, ReorderEvent } from "@saleor/types";
 import getAttributeErrorMessage from "@saleor/utils/errors/attribute";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
@@ -83,6 +83,12 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
     valuesPaginationState
   );
 
+  const notifySaved = () =>
+    notify({
+      status: "success",
+      text: intl.formatMessage(commonMessages.savedChanges)
+    });
+
   const [attributeDelete, attributeDeleteOpts] = useAttributeDeleteMutation({
     onCompleted: data => {
       if (data?.attributeDelete.errors.length === 0) {
@@ -121,10 +127,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
   ] = useAttributeValueUpdateMutation({
     onCompleted: data => {
       if (data?.attributeValueUpdate.errors.length === 0) {
-        notify({
+        notifySaved();
-          status: "success",
-          text: intl.formatMessage(commonMessages.savedChanges)
-        });
         closeModal();
       }
     }
@@ -133,10 +136,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
   const [attributeUpdate, attributeUpdateOpts] = useAttributeUpdateMutation({
     onCompleted: data => {
       if (data?.attributeUpdate.errors.length === 0) {
-        notify({
+        notifySaved();
-          status: "success",
-          text: intl.formatMessage(commonMessages.savedChanges)
-        });
       }
     }
   });
@@ -169,6 +169,8 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
             intl
           )
         });
+      } else {
+        notifySaved();
       }
     }
   });
@@ -281,12 +283,11 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
           <AttributeValueDeleteDialog
             attributeName={data?.attribute?.name ?? "..."}
             open={params.action === "remove-value"}
-            name={
+            name={getStringOrPlaceholder(
-              (data?.attribute?.choices?.edges?.find(
+              data?.attribute?.choices?.edges?.find(
                 value => params.id === value.node.id
-              )?.node.name,
+              )?.node.name
-              "...")
+            )}
-            }
             useName={true}
             confirmButtonState={attributeValueDeleteOpts.status}
             onClose={closeModal}

src/categories/views/CategoryDetails.tsx

@@ -122,6 +122,11 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
           text: intl.formatMessage(errorMessages.imageUploadErrorText)
         });
       }
+    } else {
+      notify({
+        status: "success",
+        text: intl.formatMessage(commonMessages.savedChanges)
+      });
     }
   };
 

src/components/AssignAttributeDialog/messages.ts

@@ -18,7 +18,7 @@ export const messages = defineMessages({
     description: "description"
   },
   assignButton: {
-    defaultMessage: "Assign attributes",
+    defaultMessage: "Assign and save",
     description: "button"
   }
 });

src/components/AssignAttributeValueDialog/AssignAttributeValueDialog.tsx

@@ -7,6 +7,10 @@ import AssignContainerDialog, {
 } from "../AssignContainerDialog";
 
 const messages = defineMessages({
+  confirmBtn: {
+    defaultMessage: "Assign",
+    description: "assign reference to product, button"
+  },
   header: {
     defaultMessage: "Assign Attribute Value",
     description: "dialog header"
@@ -24,7 +28,7 @@ const messages = defineMessages({
 interface AssignAttributeValueDialogProps
   extends Omit<
     AssignContainerDialogProps,
-    "containers" | "title" | "search" | "confirmButtonState"
+    "containers" | "title" | "search" | "confirmButtonState" | "labels"
   > {
   attributeValues: AttributeReference[];
 }
@@ -41,11 +45,12 @@ const AssignAttributeValueDialog: React.FC<AssignAttributeValueDialogProps> = ({
         id: value.value,
         name: value.label
       }))}
-      search={{
+      labels={{
+        confirmBtn: intl.formatMessage(messages.confirmBtn),
         label: intl.formatMessage(messages.searchLabel),
-        placeholder: intl.formatMessage(messages.searchPlaceholder)
+        placeholder: intl.formatMessage(messages.searchPlaceholder),
+        title: intl.formatMessage(messages.header)
       }}
-      title={intl.formatMessage(messages.header)}
       confirmButtonState="default"
       {...rest}
     />

src/components/AssignCategoryDialog/AssignCategoryDialog.tsx

@@ -9,7 +9,7 @@ import AssignContainerDialog, {
 import { messages } from "./messages";
 
 interface AssignCategoryDialogProps
-  extends Omit<AssignContainerDialogProps, "containers" | "title" | "search"> {
+  extends Omit<AssignContainerDialogProps, "containers" | "labels"> {
   categories: RelayToFlat<SearchCategoriesQuery["search"]>;
 }
 
@@ -22,13 +22,14 @@ const AssignCategoryDialog: React.FC<AssignCategoryDialogProps> = ({
   return (
     <AssignContainerDialog
       containers={categories}
-      search={{
+      labels={{
+        title: intl.formatMessage(messages.assignCategoryDialogHeader),
         label: intl.formatMessage(messages.assignCategoryDialogLabel),
         placeholder: intl.formatMessage(
           messages.assignCategoryDialogPlaceholder
-        )
+        ),
+        confirmBtn: intl.formatMessage(messages.confirmButton)
       }}
-      title={intl.formatMessage(messages.assignCategoryDialogHeader)}
       {...rest}
     />
   );

src/components/AssignCategoryDialog/messages.ts

@@ -12,5 +12,9 @@ export const messages = defineMessages({
   assignCategoryDialogHeader: {
     defaultMessage: "Assign Category",
     description: "dialog header"
+  },
+  confirmButton: {
+    defaultMessage: "Assign and save",
+    description: "assign categories to sale and save"
   }
 });

src/components/AssignCollectionDialog/AssignCollectionDialog.tsx

@@ -9,7 +9,7 @@ import AssignContainerDialog, {
 import { messages } from "./messages";
 
 interface AssignCollectionDialogProps
-  extends Omit<AssignContainerDialogProps, "containers" | "title" | "search"> {
+  extends Omit<AssignContainerDialogProps, "containers" | "labels"> {
   collections: RelayToFlat<SearchCollectionsQuery["search"]>;
 }
 
@@ -22,13 +22,14 @@ const AssignCollectionDialog: React.FC<AssignCollectionDialogProps> = ({
   return (
     <AssignContainerDialog
       containers={collections}
-      search={{
+      labels={{
+        title: intl.formatMessage(messages.assignCollectionDialogHeader),
         label: intl.formatMessage(messages.assignCollectionDialogLabel),
         placeholder: intl.formatMessage(
           messages.assignCollectionDialogPlaceholder
-        )
+        ),
+        confirmBtn: intl.formatMessage(messages.confirmBtn)
       }}
-      title={intl.formatMessage(messages.assignCollectionDialogHeader)}
       {...rest}
     />
   );

src/components/AssignCollectionDialog/messages.ts

@@ -12,5 +12,9 @@ export const messages = defineMessages({
   assignCollectionDialogHeader: {
     defaultMessage: "Assign Collection",
     description: "dialog header"
+  },
+  confirmBtn: {
+    defaultMessage: "Assign and save",
+    description: "assign collections to sale and save"
   }
 });

src/components/AssignContainerDialog/AssignContainerDialog.tsx

@@ -16,12 +16,10 @@ import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
 import { DialogProps, FetchMoreProps, Node } from "@saleor/types";
 import React from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
-import { FormattedMessage } from "react-intl";
 
 import BackButton from "../BackButton";
 import Checkbox from "../Checkbox";
 import ConfirmButton from "../ConfirmButton";
-import { messages } from "./messages";
 import { useStyles } from "./styles";
 
 export interface AssignContainerDialogFormData {
@@ -29,6 +27,7 @@ export interface AssignContainerDialogFormData {
   query: string;
 }
 
+type Labels = Record<"confirmBtn" | "title" | "label" | "placeholder", string>;
 interface Container extends Node {
   name: string;
 }
@@ -38,8 +37,7 @@ export interface AssignContainerDialogProps
   confirmButtonState: ConfirmButtonTransitionState;
   containers: Container[];
   loading: boolean;
-  search: Record<"label" | "placeholder", string>;
+  labels: Labels;
-  title: string;
   onFetch: (value: string) => void;
   onSubmit: (data: string[]) => void;
 }
@@ -70,8 +68,7 @@ const AssignContainerDialog: React.FC<AssignContainerDialogProps> = props => {
     hasMore,
     loading,
     open,
-    search,
+    labels,
-    title,
     onClose,
     onFetch,
     onFetchMore,
@@ -95,14 +92,14 @@ const AssignContainerDialog: React.FC<AssignContainerDialogProps> = props => {
       fullWidth
       maxWidth="sm"
     >
-      <DialogTitle>{title}</DialogTitle>
+      <DialogTitle>{labels.title}</DialogTitle>
       <DialogContent className={scrollableDialogClasses.topArea}>
         <TextField
           name="query"
           value={query}
           onChange={onQueryChange}
-          label={search.label}
+          label={labels.label}
-          placeholder={search.placeholder}
+          placeholder={labels.placeholder}
           fullWidth
           InputProps={{
             autoComplete: "off",
@@ -168,7 +165,7 @@ const AssignContainerDialog: React.FC<AssignContainerDialogProps> = props => {
           type="submit"
           onClick={handleSubmit}
         >
-          <FormattedMessage {...messages.assignContainerDialogButton} />
+          {labels.confirmBtn}
         </ConfirmButton>
       </DialogActions>
     </Dialog>

src/components/AssignProductDialog/messages.ts

@@ -6,7 +6,7 @@ export const messages = defineMessages({
     description: "dialog header"
   },
   assignProductDialogButton: {
-    defaultMessage: "Assign",
+    defaultMessage: "Assign and save",
     description: "button"
   },
   assignProductDialogContent: {

src/components/AssignVariantDialog/messages.ts

@@ -6,8 +6,8 @@ export const messages = defineMessages({
     description: "dialog header"
   },
   assignVariantDialogButton: {
-    defaultMessage: "Assign",
+    defaultMessage: "Assign and save",
-    description: "button"
+    description: "button, assign variants to sale and save"
   },
   assignVariantDialogContent: {
     defaultMessage: "Search Variants"

src/components/AttributeUnassignDialog/AttributeUnassignDialog.tsx

@@ -2,7 +2,9 @@ import { DialogContentText } from "@material-ui/core";
 import ActionDialog from "@saleor/components/ActionDialog";
 import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import messages from "./messages";
 
 export interface AttributeUnassignDialogProps {
   title: string;
@@ -22,24 +24,29 @@ const AttributeUnassignDialog: React.FC<AttributeUnassignDialogProps> = ({
   itemTypeName,
   onClose,
   onConfirm
-}) => (
+}) => {
-  <ActionDialog
+  const intl = useIntl();
-    confirmButtonState={confirmButtonState}
+
-    open={open}
+  return (
-    onClose={onClose}
+    <ActionDialog
-    onConfirm={onConfirm}
+      confirmButtonState={confirmButtonState}
-    title={title}
+      open={open}
-  >
+      onClose={onClose}
-    <DialogContentText>
+      onConfirm={onConfirm}
-      <FormattedMessage
+      title={title}
-        defaultMessage="Are you sure you want to unassign {attributeName} from {itemTypeName}?"
+      confirmButtonLabel={intl.formatMessage(messages.confirmBtn)}
-        values={{
+    >
-          attributeName: <strong>{attributeName}</strong>,
+      <DialogContentText>
-          itemTypeName: <strong>{itemTypeName}</strong>
+        <FormattedMessage
-        }}
+          {...messages.content}
-      />
+          values={{
-    </DialogContentText>
+            attributeName: <strong>{attributeName}</strong>,
-  </ActionDialog>
+            itemTypeName: <strong>{itemTypeName}</strong>
-);
+          }}
+        />
+      </DialogContentText>
+    </ActionDialog>
+  );
+};
 AttributeUnassignDialog.displayName = "AttributeUnassignDialog";
 export default AttributeUnassignDialog;

src/components/AttributeUnassignDialog/messages.ts

@@ -0,0 +1,15 @@
+import { defineMessages } from "react-intl";
+
+const messages = defineMessages({
+  confirmBtn: {
+    defaultMessage: "Unassign and save",
+    description: "button, unassign attribute from object"
+  },
+  content: {
+    defaultMessage:
+      "Are you sure you want to unassign {attributeName} from {itemTypeName}?",
+    description: "unassign attribute from object"
+  }
+});
+
+export default messages;

src/components/BulkAttributeUnassignDialog/BulkAttributeUnassignDialog.tsx

@@ -2,7 +2,9 @@ import { DialogContentText } from "@material-ui/core";
 import ActionDialog from "@saleor/components/ActionDialog";
 import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import messages from "./messages";
 
 export interface BulkAttributeUnassignDialogProps {
   title: string;
@@ -22,26 +24,30 @@ const BulkAttributeUnassignDialog: React.FC<BulkAttributeUnassignDialogProps> =
   itemTypeName,
   onClose,
   onConfirm
-}) => (
+}) => {
-  <ActionDialog
+  const intl = useIntl();
-    confirmButtonState={confirmButtonState}
+
-    open={open}
+  return (
-    onClose={onClose}
+    <ActionDialog
-    onConfirm={onConfirm}
+      confirmButtonState={confirmButtonState}
-    title={title}
+      open={open}
-  >
+      onClose={onClose}
-    <DialogContentText>
+      onConfirm={onConfirm}
-      <FormattedMessage
+      title={title}
-        defaultMessage="{counter,plural,one{Are you sure you want to unassign this attribute from {itemTypeName}?} other{Are you sure you want to unassign {attributeQuantity} attributes from {itemTypeName}?}}"
+      confirmButtonLabel={intl.formatMessage(messages.confirmBtn)}
-        description="unassign multiple attributes from item"
+    >
-        values={{
+      <DialogContentText>
-          attributeQuantity: <strong>{attributeQuantity}</strong>,
+        <FormattedMessage
-          counter: attributeQuantity,
+          {...messages.content}
-          itemTypeName: <strong>{itemTypeName}</strong>
+          values={{
-        }}
+            attributeQuantity: <strong>{attributeQuantity}</strong>,
-      />
+            counter: attributeQuantity,
-    </DialogContentText>
+            itemTypeName: <strong>{itemTypeName}</strong>
-  </ActionDialog>
+          }}
-);
+        />
+      </DialogContentText>
+    </ActionDialog>
+  );
+};
 BulkAttributeUnassignDialog.displayName = "BulkAttributeUnassignDialog";
 export default BulkAttributeUnassignDialog;

src/components/BulkAttributeUnassignDialog/messages.ts

@@ -0,0 +1,15 @@
+import { defineMessages } from "react-intl";
+
+const messages = defineMessages({
+  confirmBtn: {
+    defaultMessage: "Unassign and save",
+    description: "button, unassign attribute from object"
+  },
+  content: {
+    defaultMessage:
+      "{counter,plural,one{Are you sure you want to unassign this attribute from {itemTypeName}?} other{Are you sure you want to unassign {attributeQuantity} attributes from {itemTypeName}?}}",
+    description: "unassign multiple attributes from item"
+  }
+});
+
+export default messages;

src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx

@@ -347,7 +347,7 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
                         onProductUnassign={onProductUnassign}
                         onRowClick={onProductClick}
                         pageInfo={pageInfo}
-                        products={mapEdgesToItems(voucher.products)}
+                        products={mapEdgesToItems(voucher?.products)}
                         isChecked={isChecked}
                         selected={selected}
                         toggle={toggle}

src/discounts/views/SaleDetails/SaleDetails.tsx

@@ -151,13 +151,16 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
 
   const [selectedChannel] = useLocalStorage("salesListChannel", "");
 
+  const notifySaved = () =>
+    notify({
+      status: "success",
+      text: intl.formatMessage(commonMessages.savedChanges)
+    });
+
   const [saleUpdate, saleUpdateOpts] = useSaleUpdateMutation({
     onCompleted: data => {
       if (data.saleUpdate.errors.length === 0) {
-        notify({
+        notifySaved();
-          status: "success",
-          text: intl.formatMessage(commonMessages.savedChanges)
-        });
       }
     }
   });
@@ -165,10 +168,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
   const [saleDelete, saleDeleteOpts] = useSaleDeleteMutation({
     onCompleted: data => {
       if (data.saleDelete.errors.length === 0) {
-        notify({
+        notifySaved();
-          status: "success",
-          text: intl.formatMessage(messages.saleDetailsSaleDeleteDialog)
-        });
         navigate(saleListUrl(), { replace: true });
       }
     }
@@ -180,6 +180,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
   ] = useSaleCataloguesAddMutation({
     onCompleted: data => {
       if (data.saleCataloguesAdd.errors.length === 0) {
+        notifySaved();
         closeModal();
       }
     }
@@ -191,6 +192,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
   ] = useSaleCataloguesRemoveMutation({
     onCompleted: data => {
       if (data.saleCataloguesRemove.errors.length === 0) {
+        notifySaved();
         closeModal();
         reset();
       }
@@ -308,17 +310,29 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
         onCategoryClick={id => () => navigate(categoryUrl(id))}
         onCollectionAssign={() => openModal("assign-collection")}
         onCollectionUnassign={collectionId =>
-          handleCollectionsUnassign([collectionId])
+          openModal("unassign-collection", {
+            ids: [collectionId]
+          })
         }
         onCategoryUnassign={categoryId =>
-          handleCategoriesUnassign([categoryId])
+          openModal("unassign-category", {
+            ids: [categoryId]
+          })
         }
         onCollectionClick={id => () => navigate(collectionUrl(id))}
         onProductAssign={() => openModal("assign-product")}
-        onProductUnassign={productId => handleProductsUnassign([productId])}
+        onProductUnassign={productId =>
+          openModal("unassign-product", {
+            ids: [productId]
+          })
+        }
         onProductClick={id => () => navigate(productUrl(id))}
         onVariantAssign={() => openModal("assign-variant")}
-        onVariantUnassign={variantId => handleVariantsUnassign([variantId])}
+        onVariantUnassign={variantId =>
+          openModal("unassign-variant", {
+            ids: [variantId]
+          })
+        }
         onVariantClick={(productId, variantId) => () =>
           navigate(productVariantEditPath(productId, variantId))}
         activeTab={activeTab}
@@ -476,6 +490,9 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
         confirmButtonState={saleCataloguesRemoveOpts.status}
         onClose={closeModal}
         onConfirm={() => handleCategoriesUnassign(params.ids)}
+        confirmButtonLabel={intl.formatMessage(
+          messages.saleDetailsUnassignCategory
+        )}
       >
         {canOpenBulkActionDialog && (
           <DialogContentText>
@@ -499,6 +516,9 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
         confirmButtonState={saleCataloguesRemoveOpts.status}
         onClose={closeModal}
         onConfirm={() => handleCollectionsUnassign(params.ids)}
+        confirmButtonLabel={intl.formatMessage(
+          messages.saleDetailsUnassignCollection
+        )}
       >
         {canOpenBulkActionDialog && (
           <DialogContentText>
@@ -520,6 +540,9 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
         confirmButtonState={saleCataloguesRemoveOpts.status}
         onClose={closeModal}
         onConfirm={() => handleProductsUnassign(params.ids)}
+        confirmButtonLabel={intl.formatMessage(
+          messages.saleDetailsUnassignProduct
+        )}
       >
         {canOpenBulkActionDialog && (
           <DialogContentText>
@@ -541,6 +564,9 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
         confirmButtonState={saleCataloguesRemoveOpts.status}
         onClose={closeModal}
         onConfirm={() => handleVariantsUnassign(params.ids)}
+        confirmButtonLabel={intl.formatMessage(
+          messages.saleDetailsUnassignVariant
+        )}
       >
         {canOpenBulkActionDialog && (
           <DialogContentText>

src/discounts/views/SaleDetails/messages.ts

@@ -2,20 +2,20 @@ import { defineMessages } from "react-intl";
 
 export const messages = defineMessages({
   saleDetailsUnassignCategory: {
-    defaultMessage: "Unassign",
+    defaultMessage: "Unassign and save",
-    description: "unassign category from sale, button"
+    description: "unassign category from sale and save, button"
   },
   saleDetailsUnassignCollection: {
-    defaultMessage: "Unassign",
+    defaultMessage: "Unassign and save",
-    description: "unassign collection from sale, button"
+    description: "unassign collection from sale and save, button"
   },
   saleDetailsUnassignProduct: {
-    defaultMessage: "Unassign",
+    defaultMessage: "Unassign and save",
-    description: "unassign product from sale, button"
+    description: "unassign product from sale and save, button"
   },
   saleDetailsUnassignVariant: {
-    defaultMessage: "Unassign",
+    defaultMessage: "Unassign and save",
-    description: "unassign variant from sale, button"
+    description: "unassign variant from sale and save, button"
   },
   saleDetailsUnassignCategoryDialog: {
     defaultMessage:

src/discounts/views/VoucherDetails/VoucherDetails.tsx

@@ -162,14 +162,17 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
     updateChannelsOpts
   ] = useVoucherChannelListingUpdateMutation({});
 
+  const notifySaved = () =>
+    notify({
+      status: "success",
+      text: intl.formatMessage(commonMessages.savedChanges)
+    });
+
   const [voucherUpdate, voucherUpdateOpts] = useVoucherUpdateMutation({
     onCompleted: data => {
       if (data.voucherUpdate.errors.length === 0) {
         closeModal();
-        notify({
+        notifySaved();
-          status: "success",
-          text: intl.formatMessage(commonMessages.savedChanges)
-        });
       }
     }
   });
@@ -177,12 +180,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
   const [voucherDelete, voucherDeleteOpts] = useVoucherDeleteMutation({
     onCompleted: data => {
       if (data.voucherDelete.errors.length === 0) {
-        notify({
+        notifySaved();
-          status: "success",
-          text: intl.formatMessage({
-            defaultMessage: "Deleted voucher"
-          })
-        });
         navigate(voucherListUrl(), { replace: true });
       }
     }
@@ -194,6 +192,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
   ] = useVoucherCataloguesRemoveMutation({
     onCompleted: data => {
       if (data.voucherCataloguesRemove.errors.length === 0) {
+        notifySaved();
         closeModal();
         reset();
       }
@@ -206,6 +205,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
   ] = useVoucherCataloguesAddMutation({
     onCompleted: data => {
       if (data.voucherCataloguesAdd.errors.length === 0) {
+        notifySaved();
         closeModal();
       }
     }
@@ -323,14 +323,8 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
         onCategoryClick={id => () => navigate(categoryUrl(id))}
         onCollectionAssign={() => openModal("assign-collection")}
         onCollectionUnassign={collectionId =>
-          voucherCataloguesRemove({
+          openModal("unassign-collection", {
-            variables: {
+            ids: [collectionId]
-              ...paginationState,
-              id,
-              input: {
-                collections: [collectionId]
-              }
-            }
           })
         }
         onCountryAssign={() => openModal("assign-country")}
@@ -348,27 +342,15 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
           })
         }
         onCategoryUnassign={categoryId =>
-          voucherCataloguesRemove({
+          openModal("unassign-category", {
-            variables: {
+            ids: [categoryId]
-              ...paginationState,
-              id,
-              input: {
-                categories: [categoryId]
-              }
-            }
           })
         }
         onCollectionClick={id => () => navigate(collectionUrl(id))}
         onProductAssign={() => openModal("assign-product")}
         onProductUnassign={productId =>
-          voucherCataloguesRemove({
+          openModal("unassign-product", {
-            variables: {
+            ids: [productId]
-              ...paginationState,
-              id,
-              input: {
-                products: [productId]
-              }
-            }
           })
         }
         onProductClick={id => () => navigate(productUrl(id))}
@@ -390,7 +372,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
           >
             <FormattedMessage
               defaultMessage="Unassign"
-              description="unassign category from voucher, button"
+              description="button"
               id="voucherDetailsUnassignCategory"
             />
           </Button>
@@ -405,7 +387,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
           >
             <FormattedMessage
               defaultMessage="Unassign"
-              description="unassign collection from voucher, button"
+              description="button"
               id="voucherDetailsUnassignCollection"
             />
           </Button>
@@ -420,7 +402,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
           >
             <FormattedMessage
               defaultMessage="Unassign"
-              description="unassign product from voucher, button"
+              description="button"
               id="voucherDetailsUnassignProduct"
             />
           </Button>
@@ -528,6 +510,10 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
         confirmButtonState={voucherCataloguesRemoveOpts.status}
         onClose={closeModal}
         onConfirm={() => handleCategoriesUnassign(params.ids)}
+        confirmButtonLabel={intl.formatMessage({
+          defaultMessage: "Unassign and save",
+          description: "button"
+        })}
       >
         {canOpenBulkActionDialog && (
           <DialogContentText>
@@ -553,6 +539,10 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
         confirmButtonState={voucherCataloguesRemoveOpts.status}
         onClose={closeModal}
         onConfirm={() => handleCollectionsUnassign(params.ids)}
+        confirmButtonLabel={intl.formatMessage({
+          defaultMessage: "Unassign and save",
+          description: "button"
+        })}
       >
         {canOpenBulkActionDialog && (
           <DialogContentText>
@@ -576,6 +566,10 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
         confirmButtonState={voucherCataloguesRemoveOpts.status}
         onClose={closeModal}
         onConfirm={() => handleProductsUnassign(params.ids)}
+        confirmButtonLabel={intl.formatMessage({
+          defaultMessage: "Unassign and save",
+          description: "button"
+        })}
       >
         {canOpenBulkActionDialog && (
           <DialogContentText>

src/orders/components/OrderReturnPage/OrderReturnRefundItemsCard/MaximalButton.tsx

@@ -5,10 +5,8 @@ import { FormattedMessage } from "react-intl";
 const useStyles = makeStyles(
   theme => ({
     button: {
-      letterSpacing: 2,
       marginBottom: theme.spacing(1),
-      marginTop: theme.spacing(3),
+      marginTop: theme.spacing(3)
-      padding: 0
     }
   }),
   { name: "MaximalButton" }

src/orders/views/OrderDetails/OrderNormalDetails/index.tsx

@@ -37,7 +37,7 @@ import {
   orderFulfillUrl,
   orderListUrl,
   orderRefundUrl,
-  orderReturnPath,
+  orderReturnUrl,
   orderUrl,
   OrderUrlQueryParams
 } from "../../../urls";
@@ -139,7 +139,7 @@ export const OrderNormalDetails: React.FC<OrderNormalDetailsProps> = ({
         )}
       />
       <OrderDetailsPage
-        onOrderReturn={() => navigate(orderReturnPath(id))}
+        onOrderReturn={() => navigate(orderReturnUrl(id))}
         disabled={
           updateMetadataOpts.loading || updatePrivateMetadataOpts.loading
         }

src/orders/views/OrderDetails/OrderUnconfirmedDetails/index.tsx

@@ -43,7 +43,7 @@ import {
   orderFulfillUrl,
   orderListUrl,
   orderRefundUrl,
-  orderReturnPath,
+  orderReturnUrl,
   orderUrl,
   OrderUrlQueryParams
 } from "../../../urls";
@@ -163,7 +163,7 @@ export const OrderUnconfirmedDetails: React.FC<OrderUnconfirmedDetailsProps> = (
       <OrderDiscountProvider order={order}>
         <OrderLineDiscountProvider order={order}>
           <OrderDetailsPage
-            onOrderReturn={() => navigate(orderReturnPath(id))}
+            onOrderReturn={() => navigate(orderReturnUrl(id))}
             disabled={
               updateMetadataOpts.loading || updatePrivateMetadataOpts.loading
             }

src/pageTypes/views/PageTypeDetails.tsx

@@ -50,16 +50,19 @@ export const PageTypeDetails: React.FC<PageTypeDetailsProps> = ({
   const attributeListActions = useBulkActions();
   const intl = useIntl();
 
+  const notifySaved = () =>
+    notify({
+      status: "success",
+      text: intl.formatMessage(commonMessages.savedChanges)
+    });
+
   const [updatePageType, updatePageTypeOpts] = usePageTypeUpdateMutation({
     onCompleted: updateData => {
       if (
         !updateData.pageTypeUpdate.errors ||
         updateData.pageTypeUpdate.errors.length === 0
       ) {
-        notify({
+        notifySaved();
-          status: "success",
-          text: intl.formatMessage(commonMessages.savedChanges)
-        });
       }
     }
   });
@@ -80,10 +83,7 @@ export const PageTypeDetails: React.FC<PageTypeDetailsProps> = ({
     {
       onCompleted: data => {
         if (data.pageAttributeAssign.errors.length === 0) {
-          notify({
+          notifySaved();
-            status: "success",
-            text: intl.formatMessage(commonMessages.savedChanges)
-          });
           closeModal();
         }
       }
@@ -104,7 +104,13 @@ export const PageTypeDetails: React.FC<PageTypeDetailsProps> = ({
       }
     }
   });
-  const [reorderAttribute] = usePageTypeAttributeReorderMutation({});
+  const [reorderAttribute] = usePageTypeAttributeReorderMutation({
+    onCompleted: data => {
+      if (data.pageTypeReorderAttributes.errors.length === 0) {
+        notifySaved();
+      }
+    }
+  });
 
   const pageTypeDeleteData = usePageTypeDelete({
     singleId: id,

src/productTypes/views/ProductTypeUpdate/index.tsx

@@ -9,6 +9,7 @@ import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config";
 import {
   AssignProductAttributeMutation,
   ProductAttributeType,
+  ProductTypeAttributeReorderMutation,
   ProductTypeDeleteMutation,
   UnassignProductAttributeMutation,
   useProductAttributeAssignmentUpdateMutation,
@@ -219,6 +220,17 @@ export const ProductTypeUpdate: React.FC<ProductTypeUpdateProps> = ({
     }
   };
 
+  const handleAttributeReorderSuccess = (
+    data: ProductTypeAttributeReorderMutation
+  ) => {
+    if (data.productTypeReorderAttributes.errors.length === 0) {
+      notify({
+        status: "success",
+        text: intl.formatMessage(commonMessages.savedChanges)
+      });
+    }
+  };
+
   const {
     assignAttribute,
     deleteProductType,
@@ -226,7 +238,7 @@ export const ProductTypeUpdate: React.FC<ProductTypeUpdateProps> = ({
     reorderAttribute
   } = useProductTypeOperations({
     onAssignAttribute: handleAttributeAssignSuccess,
-    onProductTypeAttributeReorder: () => undefined,
+    onProductTypeAttributeReorder: handleAttributeReorderSuccess,
     onProductTypeDelete: handleProductTypeDeleteSuccess,
     onUnassignAttribute: handleAttributeUnassignSuccess,
     productType: data?.productType

src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx

@@ -21,7 +21,6 @@ import {
   ShippingPriceExcludeProductMutation
 } from "@saleor/graphql";
 import useSearchQuery from "@saleor/hooks/useSearchQuery";
-import { buttonMessages } from "@saleor/intl";
 import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
 import { renderCollection } from "@saleor/misc";
 import { FetchMoreProps, RelayToFlat } from "@saleor/types";
@@ -234,7 +233,10 @@ const ShippingMethodProductsAddDialog: React.FC<ShippingMethodProductsAddDialogP
           disabled={loading || !selectedProducts?.length}
           onClick={handleSubmit}
         >
-          <FormattedMessage {...buttonMessages.confirm} />
+          <FormattedMessage
+            defaultMessage="Assign and save"
+            description="assign products to shipping rate and save, button"
+          />
         </ConfirmButton>
       </DialogActions>
     </Dialog>

src/shipping/components/ShippingZoneCountriesAssignDialog/messages.ts

@@ -36,7 +36,7 @@ export const messages = defineMessages({
     description: "checkbox description"
   },
   assignCountriesButton: {
-    defaultMessage: "Assign countries",
+    defaultMessage: "Assign and save",
-    description: "button"
+    description: "assign countries to shipping zone and save, button"
   }
 });

src/shipping/components/UnassignDialog/UnassignDialog.tsx

@@ -30,6 +30,10 @@ export const UnassignDialog: React.FC<UnassignDialogProps> = ({
       confirmButtonState={confirmButtonState}
       onClose={closeModal}
       onConfirm={onConfirm}
+      confirmButtonLabel={intl.formatMessage({
+        defaultMessage: "Unassign and save",
+        description: "unassign products from shipping rate and save, button"
+      })}
     >
       <DialogContentText>
         <FormattedMessage

src/shipping/views/ShippingZoneDetails/index.tsx

@@ -330,14 +330,18 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
         }
         open={params.action === "unassign-country"}
         title={intl.formatMessage({
-          defaultMessage: "Delete from Shipping Zone",
+          defaultMessage: "Remove from Shipping Zone",
           description: "unassign country, dialog header"
         })}
         variant="delete"
+        confirmButtonLabel={intl.formatMessage({
+          defaultMessage: "Remove and save",
+          description: "remove country from shipping zone and save, button"
+        })}
       >
         <DialogContentText>
           <FormattedMessage
-            defaultMessage="Are you sure you want to delete {countryName} from this shipping zone?"
+            defaultMessage="Are you sure you want to remove {countryName} from this shipping zone?"
             description="unassign country"
             values={{
               countryName: (