Added Save button for inactive automations (#28055)

closes https://linear.app/ghost/issue/NY-1257


https://github.com/user-attachments/assets/fc9315d4-f7f4-49f6-ac71-f059bf5c1ce1

This was largely written by GPT-5.5 (High) with the following prompt:

> Currently, the Automations editor has no way to save an inactive
automation without publishing it. For example, if you're working on an
automation and haven't finished but need to walk away, you want to click
Save, not Publish. Let's add this.
>
> When an automation is inactive, add a secondary "Save" button to the
left of the publish button in `<AutomationHeader>`. Clicking this button
should call `editMutation.mutate()` like we already do in
`Automations/editor.tsx`, but it shouldn't change the `status`.
>
> When an automation is active, I don't want it to look any different
from today. There should be no "Save" button or anything different in
that part of the UI.
>
> Use red/green TDD to accomplish this.

I manually cleaned up a small amount afterward.

Author: EvanHahn

apps/posts/src/views/Automations/components/automation-header.tsx

@@ -10,21 +10,29 @@ export type AutomationRequestState = 'idle' | 'loading' | 'error';
 interface AutomationHeaderProps {
     automation: AutomationDetail | undefined;
     isLoadingAutomation: boolean;
+    isSaveButtonEnabled: boolean;
     isPublishButtonEnabled: boolean;
+    saveButtonVariant: ButtonProps['variant'];
     publishButtonVariant: ButtonProps['variant'];
     isTurnOffButtonEnabled: boolean;
+    saveButtonChildren: React.ReactNode;
     publishButtonChildren: React.ReactNode;
+    onSave: () => void;
     onPublish: () => void;
     onTurnOff: () => void;
 }
 
 const AutomationHeader: React.FC<AutomationHeaderProps> = ({
     automation,
     isLoadingAutomation,
+    isSaveButtonEnabled,
     isPublishButtonEnabled,
+    saveButtonVariant,
     publishButtonVariant,
     isTurnOffButtonEnabled,
+    saveButtonChildren,
     publishButtonChildren,
+    onSave,
     onPublish,
     onTurnOff
 }) => {
@@ -64,6 +72,15 @@ const AutomationHeader: React.FC<AutomationHeaderProps> = ({
                         </DropdownMenuContent>
                     </DropdownMenu>
                 )}
+                {status === 'inactive' && (
+                    <Button
+                        disabled={!isSaveButtonEnabled}
+                        variant={saveButtonVariant}
+                        onClick={onSave}
+                    >
+                        {saveButtonChildren}
+                    </Button>
+                )}
                 <Button
                     disabled={!isPublishButtonEnabled}
                     variant={publishButtonVariant}

apps/posts/src/views/Automations/editor.tsx

@@ -45,19 +45,24 @@ const AutomationEditor: React.FC = () => {
     const onDraftChange = (next: AutomationDetail) => {
         setDraft(next);
         setEditState((prev) => {
-            if (prev === 'failed to publish' || prev === 'failed to unpublish') {
+            if (prev === 'failed to save' || prev === 'failed to publish' || prev === 'failed to unpublish') {
                 return 'idle';
             }
             return prev;
         });
     };
 
-    const editStatus = (status: AutomationStatus): void => {
+    const save = (statusToSave?: AutomationStatus) => {
         if (!draft) {
             throw new Error('Cannot edit an automation that has not loaded.');
         }
+
         let errorState: AutomationEditState;
-        switch (status) {
+        switch (statusToSave) {
+        case undefined:
+            setEditState('saving');
+            errorState = 'failed to save';
+            break;
         case 'active':
             setEditState('publishing');
             errorState = 'failed to publish';
@@ -67,14 +72,14 @@ const AutomationEditor: React.FC = () => {
             errorState = 'failed to unpublish';
             break;
         default: {
-            const _exhaustive: never = status;
+            const _exhaustive: never = statusToSave;
             throw new Error(`Unhandled status: ${_exhaustive}`);
         }
         }
         editMutation.mutate(
             {
                 id: draft.id,
-                status,
+                status: statusToSave ?? draft.status,
                 actions: draft.actions,
                 edges: draft.edges
             },
@@ -90,6 +95,9 @@ const AutomationEditor: React.FC = () => {
 
     let isConfirmUnpublishAlertOpen = false;
     let isEditRequestActive = false;
+    let isSaveButtonEnabled = !!draft && draft.actions.length > 0 && draft.status === 'inactive' && hasUnsavedChanges;
+    let saveButtonVariant: ButtonProps['variant'] = 'secondary';
+    let saveButtonChildren: React.ReactNode = 'Save';
     let isPublishButtonEnabled = !!draft && draft.actions.length > 0 && (draft.status === 'inactive' || hasUnsavedChanges);
     let publishButtonVariant: ButtonProps['variant'] = 'default';
     let publishButtonChildren: React.ReactNode = draft?.status === 'active'
@@ -98,8 +106,21 @@ const AutomationEditor: React.FC = () => {
     let isTurnOffButtonEnabled = true;
     let turnOffButtonChildren: React.ReactNode = 'Turn off';
     switch (editState) {
+    case 'saving':
+        isEditRequestActive = true;
+        isSaveButtonEnabled = false;
+        isPublishButtonEnabled = false;
+        isTurnOffButtonEnabled = false;
+        saveButtonChildren = (
+            <>
+                <LoadingIndicator size='sm' />
+                <span className='sr-only'>Saving...</span>
+            </>
+        );
+        break;
     case 'publishing':
         isEditRequestActive = true;
+        isSaveButtonEnabled = false;
         isPublishButtonEnabled = false;
         isTurnOffButtonEnabled = false;
         publishButtonChildren = (
@@ -112,6 +133,7 @@ const AutomationEditor: React.FC = () => {
     case 'unpublishing':
         isEditRequestActive = true;
         isConfirmUnpublishAlertOpen = true;
+        isSaveButtonEnabled = false;
         isPublishButtonEnabled = false;
         isTurnOffButtonEnabled = false;
         turnOffButtonChildren = (
@@ -123,9 +145,14 @@ const AutomationEditor: React.FC = () => {
         break;
     case 'confirming unpublish':
         isConfirmUnpublishAlertOpen = true;
+        isSaveButtonEnabled = false;
         isPublishButtonEnabled = false;
         isTurnOffButtonEnabled = false;
         break;
+    case 'failed to save':
+        saveButtonVariant = 'destructive';
+        saveButtonChildren = 'Retry';
+        break;
     case 'failed to publish':
         publishButtonVariant = 'destructive';
         publishButtonChildren = 'Retry';
@@ -141,10 +168,12 @@ const AutomationEditor: React.FC = () => {
         setEditState((oldEditState) => {
             switch (oldEditState) {
             case 'idle':
+            case 'failed to save':
             case 'failed to publish':
                 return open ? 'confirming unpublish' : oldEditState;
             case 'failed to unpublish':
                 return open ? 'confirming unpublish' : 'idle';
+            case 'saving':
             case 'publishing':
                 throw new Error('It should be impossible to hit this state');
             case 'unpublishing':
@@ -167,10 +196,14 @@ const AutomationEditor: React.FC = () => {
                 automation={draft}
                 isLoadingAutomation={isLoadingAutomation}
                 isPublishButtonEnabled={isPublishButtonEnabled}
+                isSaveButtonEnabled={isSaveButtonEnabled}
                 isTurnOffButtonEnabled={isTurnOffButtonEnabled}
                 publishButtonChildren={publishButtonChildren}
                 publishButtonVariant={publishButtonVariant}
-                onPublish={() => editStatus('active')}
+                saveButtonChildren={saveButtonChildren}
+                saveButtonVariant={saveButtonVariant}
+                onPublish={() => save('active')}
+                onSave={() => save()}
                 onTurnOff={() => setEditState('confirming unpublish')}
             />
 
@@ -197,7 +230,7 @@ const AutomationEditor: React.FC = () => {
                         <Button
                             disabled={isEditRequestActive}
                             variant={editState === 'failed to unpublish' ? 'destructive' : 'default'}
-                            onClick={() => editStatus('inactive')}
+                            onClick={() => save('inactive')}
                         >
                             {turnOffButtonChildren}
                         </Button>

apps/posts/src/views/Automations/types.ts

@@ -1 +1 @@
-export type AutomationEditState = 'idle' | 'publishing' | 'unpublishing' | 'confirming unpublish' | 'failed to publish' | 'failed to unpublish';
+export type AutomationEditState = 'idle' | 'saving' | 'publishing' | 'unpublishing' | 'confirming unpublish' | 'failed to save' | 'failed to publish' | 'failed to unpublish';

apps/posts/test/unit/views/automations/automation-editor.test.tsx

@@ -351,6 +351,30 @@ describe('AutomationEditor', () => {
         );
     });
 
+    it('saves an inactive automation without publishing it', async () => {
+        mockUseReadAutomation.mockReturnValue({
+            data: {automations: [{...automationDetail, status: 'inactive'}]},
+            isLoading: false,
+            isError: false
+        });
+
+        renderEditor();
+
+        fireEvent.click(screen.getByTestId('add-step-tail-button'));
+        const picker = await screen.findByTestId('step-picker');
+        fireEvent.click(within(picker).getByText('Wait'));
+
+        const button = screen.getByRole('button', {name: 'Save'});
+        expect(button).toBeEnabled();
+        fireEvent.click(button);
+
+        const mutateCall = mockEditMutation.mutate.mock.calls.at(-1)![0];
+        expect(mutateCall.id).toBe('automation-id-1');
+        expect(mutateCall.status).toBe('inactive');
+        expect(mutateCall.actions).toHaveLength(3);
+        expect(mutateCall.edges).toHaveLength(2);
+    });
+
     it('shows the dropdown for active automations', () => {
         mockUseReadAutomation.mockReturnValue({
             data: {automations: [automationDetail]},
@@ -362,6 +386,7 @@ describe('AutomationEditor', () => {
 
         expect(screen.getByRole('button', {name: 'Automation options'})).toBeInTheDocument();
         expect(screen.getByRole('button', {name: 'Published'})).toBeDisabled();
+        expect(screen.queryByRole('button', {name: 'Save'})).not.toBeInTheDocument();
     });
 
     it('hides the dropdown for inactive automations', () => {