diff --git a/mailpoet/assets/css/src/components-automation-editor/_saved-state.scss b/mailpoet/assets/css/src/components-automation-editor/_saved-state.scss new file mode 100644 index 0000000000..dc71867bfb --- /dev/null +++ b/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; + } +} diff --git a/mailpoet/assets/css/src/components-automation-editor/editor.scss b/mailpoet/assets/css/src/components-automation-editor/editor.scss index 436dec816f..deaccc0eae 100644 --- a/mailpoet/assets/css/src/components-automation-editor/editor.scss +++ b/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'; diff --git a/mailpoet/assets/js/src/automation/editor/components/header/index.tsx b/mailpoet/assets/js/src/automation/editor/components/header/index.tsx index cf206edb07..7a32b49207 100644 --- a/mailpoet/assets/js/src/automation/editor/components/header/index.tsx +++ b/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 ( - ); } diff --git a/mailpoet/assets/js/src/automation/editor/store/actions.ts b/mailpoet/assets/js/src/automation/editor/store/actions.ts index 010070109b..4497a4c509 100644 --- a/mailpoet/assets/js/src/automation/editor/store/actions.ts +++ b/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', diff --git a/mailpoet/assets/js/src/automation/editor/store/reducer.ts b/mailpoet/assets/js/src/automation/editor/store/reducer.ts index fe549b0edf..eef2f80748 100644 --- a/mailpoet/assets/js/src/automation/editor/store/reducer.ts +++ b/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, diff --git a/mailpoet/assets/js/src/automation/editor/store/types.ts b/mailpoet/assets/js/src/automation/editor/store/types.ts index 4d49d458a9..305058579a 100644 --- a/mailpoet/assets/js/src/automation/editor/store/types.ts +++ b/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;