Unify saving button behavior with WP post editor

[MAILPOET-4968]

mailpoet/assets/css/src/components-automation-editor/_saved-state.scss

@@ -0,0 +1,22 @@
+/* See: https://github.com/WordPress/gutenberg/blob/0b4ad0072a5c3dd4832081ed00d4e27389ae88c8/packages/editor/src/components/post-saved-state/index.js */
+.mailpoet-automation-editor-saved-state {
+  align-items: center;
+  color: #757575;
+  display: flex;
+  overflow: hidden;
+  white-space: nowrap;
+
+  &.is-saving[aria-disabled='true'],
+  &.is-saving[aria-disabled='true']:hover,
+  &.is-saved[aria-disabled='true'],
+  &.is-saved[aria-disabled='true']:hover {
+    background: transparent;
+    color: #757575;
+  }
+
+  svg {
+    display: inline-block;
+    fill: currentColor;
+    flex: 0 0 auto;
+  }
+}

mailpoet/assets/css/src/components-automation-editor/editor.scss

@@ -13,6 +13,7 @@
 @import './empty-automation';
 @import './errors';
 @import './panel';
+@import './saved-state';
 @import './separator';
 @import './status';
 @import './step';

mailpoet/assets/js/src/automation/editor/components/header/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import {
   Button,
   NavigableMenu,
@@ -6,6 +6,7 @@ import {
   Tooltip,
 } from '@wordpress/components';
 import { dispatch, useDispatch, useSelect } from '@wordpress/data';
+import { Icon, check, cloud } from '@wordpress/icons';
 import { PinnedItems } from '@wordpress/interface';
 import { __ } from '@wordpress/i18n';
 import { ErrorBoundary } from 'common';
@@ -106,11 +107,36 @@ function UpdateButton(): JSX.Element {
 }
 
 function SaveDraftButton(): JSX.Element {
+  const savedState = useSelect(
+    (select) => select(storeName).getSavedState(),
+    [],
+  );
   const { save } = useDispatch(storeName);
 
+  const label = useMemo(() => {
+    if (savedState === 'saving') {
+      return __('Saving', 'mailpoet');
+    }
+    if (savedState === 'saved') {
+      return __('Saved', 'mailpoet');
+    }
+    return __('Save draft', 'mailpoet');
+  }, [savedState]);
+
+  const isDisabled = savedState === 'saving' || savedState === 'saved';
+
+  // use single Button instance for all states so that focus is not lost
   return (
-    <Button variant="tertiary" onClick={save}>
-      {__('Save draft', 'mailpoet')}
+    <Button
+      className={`mailpoet-automation-editor-saved-state is-${savedState}`}
+      variant="tertiary"
+      label={label}
+      disabled={isDisabled}
+      aria-disabled={isDisabled}
+      onClick={save}
+    >
+      {savedState === 'saving' && <Icon icon={cloud} />}
+      {savedState === 'saved' && <Icon icon={check} />}
     </Button>
   );
 }

mailpoet/assets/js/src/automation/editor/store/actions.ts

@@ -89,6 +89,11 @@ export function setAutomationName(name) {
 
 export function* save() {
   const automation = select(storeName).getAutomationData();
+
+  yield {
+    type: 'SAVING',
+  };
+
   const data = yield apiFetch({
     path: `/automations/${automation.id}`,
     method: 'PUT',

mailpoet/assets/js/src/automation/editor/store/reducer.ts

@@ -58,6 +58,11 @@ export function reducer(state: State, action): State {
         automationData: action.automation,
         savedState: 'saved',
       };
+    case 'SAVING':
+      return {
+        ...state,
+        savedState: 'saving',
+      };
     case 'REGISTER_STEP_TYPE':
       return {
         ...state,

mailpoet/assets/js/src/automation/editor/store/types.ts

@@ -92,7 +92,7 @@ export type Errors = {
 };
 
 export type State = {
-  savedState: 'unsaved' | 'saved';
+  savedState: 'unsaved' | 'saving' | 'saved';
   registry: Registry;
   context: Context;
   stepTypes: Record<string, StepType>;