Wait for notification to disappear

src/components/ConfirmButton/ConfirmButton.tsx

@@ -7,6 +7,7 @@ import {
   withStyles
 } from "@material-ui/core/styles";
 import CheckIcon from "@material-ui/icons/Check";
+import { DEFAULT_NOTIFICATION_SHOW_TIME } from "@saleor/config";
 import { buttonMessages } from "@saleor/intl";
 import classNames from "classnames";
 import React from "react";
@@ -61,6 +62,7 @@ export interface ConfirmButtonProps
   extends Omit<ButtonProps, "classes">,
     WithStyles<typeof styles> {
   transitionState: ConfirmButtonTransitionState;
+  onTransitionToDefault?: () => void;
 }
 
 interface ConfirmButtonState {
@@ -93,20 +95,21 @@ const ConfirmButton = withStyles(styles, { name: "ConfirmButton" })(
     }
 
     componentDidUpdate(prevProps: ConfirmButtonProps) {
-      const { transitionState } = this.props;
+      const { transitionState, onTransitionToDefault } = this.props;
       if (prevProps.transitionState !== transitionState) {
         if (
           (["error", "success"] as ConfirmButtonTransitionState[]).includes(
             transitionState
           )
         ) {
-          this.timeout = setTimeout(
+          this.timeout = setTimeout(() => {
-            () =>
+            this.setState({
-              this.setState({
+              displayCompletedActionState: false
-                displayCompletedActionState: false
+            });
-              }),
+            if (onTransitionToDefault) {
-            2000
+              onTransitionToDefault();
-          );
+            }
+          }, DEFAULT_NOTIFICATION_SHOW_TIME);
         } else if (transitionState === "loading") {
           clearTimeout(this.timeout);
         }
@@ -125,6 +128,7 @@ const ConfirmButton = withStyles(styles, { name: "ConfirmButton" })(
         disabled,
         transitionState,
         onClick,
+        onTransitionToDefault: _,
         ...props
       } = this.props;
       const { displayCompletedActionState } = this.state;

src/components/SaveButtonBar/SaveButtonBar.tsx

@@ -8,7 +8,6 @@ import { buttonMessages } from "@saleor/intl";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import { maybe } from "../../misc";
 import { useAppAction } from "../AppLayout/AppActionContext";
 import ConfirmButton, {
   ConfirmButtonTransitionState
@@ -85,10 +84,11 @@ export const SaveButtonBar: React.FC<SaveButtonBarProps> = props => {
   const scrollPosition = useWindowScroll();
 
   React.useEffect(() => {
-    appAction.setDocked(disabled);
+    if (!disabled && state !== "loading") {
-
+      appAction.setDocked(false);
-    return () => appAction.setDocked(true);
+    }
   }, [disabled]);
+  React.useEffect(() => () => appAction.setDocked(true), []);
 
   const scrolledToBottom =
     scrollPosition.y + window.innerHeight >= document.body.scrollHeight;
@@ -109,9 +109,7 @@ export const SaveButtonBar: React.FC<SaveButtonBarProps> = props => {
                   className={classes.deleteButton}
                   data-test="button-bar-delete"
                 >
-                  {labels && labels.delete
+                  {labels?.delete || intl.formatMessage(buttonMessages.delete)}
-                    ? labels.delete
-                    : intl.formatMessage(buttonMessages.delete)}
                 </Button>
               )}
               <div className={classes.spacer} />
@@ -121,21 +119,16 @@ export const SaveButtonBar: React.FC<SaveButtonBarProps> = props => {
                 onClick={onCancel}
                 data-test="button-bar-cancel"
               >
-                {maybe(
+                {labels?.cancel || intl.formatMessage(buttonMessages.back)}
-                  () => labels.cancel,
-                  intl.formatMessage(buttonMessages.back)
-                )}
               </Button>
               <ConfirmButton
                 disabled={disabled}
                 onClick={onSave}
                 transitionState={state}
                 data-test="button-bar-confirm"
+                onTransitionToDefault={() => appAction.setDocked(true)}
               >
-                {maybe(
+                {labels?.save || intl.formatMessage(buttonMessages.save)}
-                  () => labels.save,
-                  intl.formatMessage(buttonMessages.save)
-                )}
               </ConfirmButton>
             </CardContent>
           </Card>

src/components/messages/MessageManagerProvider.tsx

@@ -1,3 +1,4 @@
+import { DEFAULT_NOTIFICATION_SHOW_TIME } from "@saleor/config";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { TransitionGroup } from "react-transition-group";
@@ -43,32 +44,35 @@ const MessageManagerProvider = ({ children }) => {
     );
   }, []);
 
-  const show = useCallback((message = {}, timeout = 3000) => {
+  const show = useCallback(
-    const id = Date.now();
+    (message = {}, timeout = DEFAULT_NOTIFICATION_SHOW_TIME) => {
-    const notification = {
+      const id = Date.now();
-      close: () => remove(id),
+      const notification = {
-      id,
+        close: () => remove(id),
-      message,
+        id,
-      timeout
+        message,
-    };
+        timeout
-    if (timeout !== null) {
+      };
-      const timeoutId = window.setTimeout(() => {
+      if (timeout !== null) {
-        timerCallback(notification);
+        const timeoutId = window.setTimeout(() => {
-      }, timeout);
+          timerCallback(notification);
+        }, timeout);
 
-      timersArr.current.push({
+        timersArr.current.push({
-        id: notification.id,
+          id: notification.id,
-        notification,
+          notification,
-        remaining: timeout,
+          remaining: timeout,
-        start: new Date().getTime(),
+          start: new Date().getTime(),
-        timeoutId
+          timeoutId
-      });
+        });
-    }
+      }
 
-    setNotifications(state => [notification, ...state]);
+      setNotifications(state => [notification, ...state]);
 
-    return notification;
+      return notification;
-  }, []);
+    },
+    []
+  );
 
   const getCurrentTimer = (notification: INotification) => {
     const currentTimerIndex = timersArr.current.findIndex(

src/config.ts

@@ -96,3 +96,5 @@ export const defaultListSettings: AppListViewSettings = {
 export const APP_VERSION = packageInfo.version;
 export const DEMO_MODE = process.env.DEMO_MODE === "true";
 export const GTM_ID = process.env.GTM_ID;
+
+export const DEFAULT_NOTIFICATION_SHOW_TIME = 3000;