Add new buttons for undo and redo

[MAILPOET-3085]

assets/js/src/form_editor/components/history_redo.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { redo as redoIcon } from '@wordpress/icons';
+
+function HistoryRedo(props) {
+  const hasRedo = useSelect(
+    (select) => select('mailpoet-form-editor').hasEditorRedo(),
+    []
+  );
+  const { historyMove } = useDispatch('mailpoet-form-editor');
+  const redoAction = () => {
+    historyMove('redo');
+  };
+  return (
+    <Button
+      {...props}
+      icon={redoIcon}
+      label={__('Redo')}
+      aria-disabled={!hasRedo}
+      onClick={hasRedo ? redoAction : undefined}
+      className="editor-history__redo"
+    />
+  );
+}
+
+export default HistoryRedo;

assets/js/src/form_editor/components/history_undo.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { undo as undoIcon } from '@wordpress/icons';
+
+function HistoryUndo(props) {
+  const hasUndo = useSelect(
+    (select) => select('mailpoet-form-editor').hasEditorUndo(),
+    []
+  );
+  const { historyMove } = useDispatch('mailpoet-form-editor');
+  const undoAction = () => {
+    historyMove('undo');
+  };
+  return (
+    <Button
+      {...props}
+      icon={undoIcon}
+      label={__('Undo')}
+      aria-disabled={!hasUndo}
+      onClick={hasUndo ? undoAction : undefined}
+      className="editor-history__undo"
+    />
+  );
+}
+
+export default HistoryUndo;