Add workflow name editing capability

[MAILPOET-4422]

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

@@ -1,6 +1,7 @@
-import { Button, NavigableMenu } from '@wordpress/components';
+import { Button, NavigableMenu, TextControl } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { PinnedItems } from '@wordpress/interface';
+import { __ } from '@wordpress/i18n';
 import { DocumentActions } from './document_actions';
 import { InserterToggle } from './inserter_toggle';
 import { MoreMenu } from './more_menu';
@@ -32,8 +33,10 @@ function UpdateButton(): JSX.Element {
 }
 
 export function Header(): JSX.Element {
-  const { workflowStatus } = useSelect(
+  const { setWorkflowName } = useDispatch(store);
+  const { workflowName, workflowStatus } = useSelect(
     (select) => ({
+      workflowName: select(store).getWorkflowData().name,
       workflowStatus: select(store).getWorkflowData().status,
     }),
     [],
@@ -52,12 +55,23 @@ export function Header(): JSX.Element {
       </div>
 
       <div className="edit-site-header_center">
-        <DocumentActions>{() => <div>TODO: edit name</div>}</DocumentActions>
+        <DocumentActions>
+          {() => (
+            <div className="mailpoet-automation-editor-dropdown-name-edit">
+              <div className="mailpoet-automation-editor-dropdown-name-edit-title">{__('Automation name')}</div>
+              <TextControl
+                value={workflowName}
+                onChange={(newName) => setWorkflowName(newName)}
+                help={__(`Give the automation a name that indicates its purpose. E.g. "Abandoned cart recovery"`)}
+              />
+            </div>
+          )}
+        </DocumentActions>
       </div>
 
       <div className="edit-site-header_end">
         <div className="edit-site-header__actions">
-          <Button isTertiary>Save Draft</Button>
+          <Button isTertiary>{__('Save Draft')}</Button>
           {workflowStatus !== WorkflowStatus.ACTIVE && <ActivateButton />}
           {workflowStatus === WorkflowStatus.ACTIVE && <UpdateButton />}
           <PinnedItems.Slot scope={storeName} />

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

@@ -40,12 +40,22 @@ export function selectStep(value) {
   } as const;
 }
 
+export function setWorkflowName(name) {
+  const workflow = select(storeName).getWorkflowData();
+  workflow.name = name;
+  return {
+    type: 'UPDATE_WORKFLOW',
+    workflow,
+  } as const;
+}
+
 export function* activate() {
   const workflow = select(storeName).getWorkflowData();
   const data = yield apiFetch({
     path: `/workflows/${workflow.id}`,
     method: 'PUT',
     data: {
+      name: workflow.name,
       status: 'active',
     },
   });

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

@@ -24,6 +24,11 @@ export function reducer(state: State, action: Action): State {
         ...state,
         selectedStep: action.value,
       };
+    case 'UPDATE_WORKFLOW':
+      return {
+        ...state,
+        workflowData: action.workflow,
+      };
     case 'ACTIVATE':
       return {
         ...state,

mailpoet/lib/Automation/Engine/Builder/UpdateWorkflowController.php

@@ -27,6 +27,12 @@ class UpdateWorkflowController {
       throw Exceptions::workflowNotFound($id);
     }
 
+    if (array_key_exists('name', $data)) {
+      $this->checkWorkflowName($data['name']);
+      $workflow->setName($data['name']);
+      $this->storage->updateWorkflow($workflow);
+    }
+
     if (array_key_exists('status', $data)) {
       $this->checkWorkflowStatus($data['status']);
       $workflow->setStatus($data['status']);
@@ -40,6 +46,12 @@ class UpdateWorkflowController {
     return $workflow;
   }
 
+  private function checkWorkflowName(string $name): void {
+    if (empty($name)) {
+      throw UnexpectedValueException::create()->withMessage(__('Workflow name must not be empty', 'mailpoet'));
+    }
+  }
+
   private function checkWorkflowStatus(string $status): void {
     if (!in_array($status, [Workflow::STATUS_ACTIVE, Workflow::STATUS_INACTIVE, Workflow::STATUS_DRAFT], true)) {
       throw UnexpectedValueException::create()->withMessage(__(sprintf('Invalid status: %s', $status), 'mailpoet'));

mailpoet/lib/Automation/Engine/Workflows/Workflow.php

@@ -57,6 +57,10 @@ class Workflow {
     return $this->name;
   }
 
+  public function setName(string $name): void {
+    $this->name = $name;
+  }
+
   public function getStatus(): string {
     return $this->status;
   }