Implement add trigger placeholder & button

[PREMIUM-194]
[MAILPOET-4585]

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

@@ -0,0 +1,19 @@
+.mailpoet-automation-workflow-add-trigger {
+  align-items: center;
+  border: 1px dashed #c3c4c7;
+  border-radius: 4px;
+  color: #757575;
+  cursor: pointer;
+  display: flex;
+  fill: #757575;
+  height: 73px;
+  justify-content: center;
+  margin: 4px auto;
+  padding: 20px 32px;
+
+  &:focus {
+    box-shadow:
+      0 0 0 1px #fbfbfb, // space
+      0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color), // focus ring
+  }
+}

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

@@ -4,6 +4,7 @@
 @import '../../../node_modules/@wordpress/block-editor/build-style/style'; // for inserter styles
 @import 'settings/colors';
 @import './components-automation-editor/add-step-button';
+@import './components-automation-editor/add-trigger';
 @import './components-automation-editor/block-icon';
 @import './components-automation-editor/dropdown';
 @import './components-automation-editor/empty-workflow';

mailpoet/assets/js/src/automation/editor/components/workflow/add-trigger.tsx

@@ -0,0 +1,30 @@
+import { useContext } from 'react';
+import { __unstableCompositeItem as CompositeItem } from '@wordpress/components';
+import { Icon, plus } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { WorkflowCompositeContext } from './context';
+import { store } from '../../store';
+
+export function AddTrigger(): JSX.Element {
+  const compositeState = useContext(WorkflowCompositeContext);
+  const { setInserterPopoverAnchor } = useDispatch(store);
+
+  return (
+    <CompositeItem
+      state={compositeState}
+      role="treeitem"
+      className="mailpoet-automation-workflow-add-trigger"
+      focusable
+      onClick={(event) => {
+        event.stopPropagation();
+        setInserterPopoverAnchor(
+          (event.target as HTMLElement).closest('button'),
+        );
+      }}
+    >
+      <Icon icon={plus} size={16} />
+      {__('Add trigger', 'mailpoet')}
+    </CompositeItem>
+  );
+}

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

@@ -12,6 +12,7 @@ import { Separator } from './separator';
 import { Step } from './step';
 import { InserterPopover } from '../inserter-popover';
 import { store } from '../../store';
+import { AddTrigger } from './add-trigger';
 
 export function Workflow(): JSX.Element {
   const { workflowData, selectedStep } = useSelect(
@@ -75,10 +76,14 @@ export function Workflow(): JSX.Element {
           <div />
           {steps.map((step) => (
             <Fragment key={step.id}>
+              {step.type === 'trigger' && step.key === 'core:empty' ? (
+                <AddTrigger />
+              ) : (
                 <Step
                   step={step}
                   isSelected={selectedStep && step.id === selectedStep.id}
                 />
+              )}
               <Separator />
             </Fragment>
           ))}

mailpoet/assets/js/src/automation/testing.tsx

@@ -1,10 +1,24 @@
 import { ReactNode } from 'react';
 import { useMutation } from './api';
+import { id } from './id';
 
-const createWorkflow = () => ({
+export const createEmptyTrigger = () =>
+  ({
+    id: id(),
+    type: 'trigger',
+    key: 'core:empty',
+    args: {},
+  } as const);
+
+const createWorkflow = () => {
+  const emptyTrigger = createEmptyTrigger();
+  return {
     name: 'Empty workflow',
-  steps: {},
+    steps: {
-});
+      [emptyTrigger.id]: emptyTrigger,
+    },
+  };
+};
 
 export function CreateEmptyWorkflowButton(): JSX.Element {
   const [createSchema, { loading, error }] = useMutation('workflows', {