wip

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({
               displayCompletedActionState: false
-              }),
-            2000
-          );
+            });
+            if (onTransitionToDefault) {
+              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);
-
-    return () => appAction.setDocked(true);
+    if (!disabled && state !== "loading") {
+      appAction.setDocked(false);
+    }
   }, [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,7 +44,8 @@ const MessageManagerProvider = ({ children }) => {
     );
   }, []);
 
-  const show = useCallback((message = {}, timeout = 3000) => {
+  const show = useCallback(
+    (message = {}, timeout = DEFAULT_NOTIFICATION_SHOW_TIME) => {
       const id = Date.now();
       const notification = {
         close: () => remove(id),
@@ -68,7 +70,9 @@ const MessageManagerProvider = ({ children }) => {
       setNotifications(state => [notification, ...state]);
 
       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;