🎨 Improved save/update button copy in editor (#2413)

no issue

- renamed "Update" to "Unpublish" or "Unschedule" to match the available actions
- renamed "Save" to "Update" and made it always visible but disabled when there are no unsaved changes
- switched <Editor::PublishManagement> to a provider component and extracted `<Editor::PublishButtons>`
  - allows for the management flow to wrap other UI elements and have the yielded actions passed down so the publish/update flow can be opened from more than just the publish/unschedule/unpublish buttons
- added link to "Sent" in editor status that opens the update flow for email-only posts

Co-authored-by: Peter Zimon <peter.zimon@gmail.com>

ghost/admin/app/components/editor/modals/update-flow.hbs

@@ -4,9 +4,13 @@
             <span>{{svg-jar "arrow-left"}} Editor</span>
         </button>
         <div class="flex">
-            <button class="gh-btn gh-btn-editor darkgrey gh-publish-trigger active" title="Close" type="button" {{on "click" @close}}>
+            {{#let @data.publishOptions.post as |post|}}
-                <span>Update</span>
+                {{#if (not (and post.isSent (not post.isPublished)))}}
-            </button>
+                    <button class="gh-btn gh-btn-editor darkgrey gh-publish-trigger active" title="Close" type="button" {{on "click" @close}}>
+                        <span>{{if post.isScheduled "Unschedule" "Unpublish"}}</span>
+                    </button>
+                {{/if}}
+            {{/let}}
             <div class="settings-menu-toggle-spacer"></div>
         </div>
     </header>

ghost/admin/app/components/editor/publish-buttons.hbs

@@ -0,0 +1,72 @@
+{{#if @publishManagement.publishOptions.user.isContributor}}
+    {{#if @publishManagement.post.isDraft}}
+        <button
+            type="button"
+            class="gh-btn gh-btn-editor gh-editor-preview-trigger"
+            {{on "click" @publishManagement.openPreview}}
+            {{on-key "cmd+p" @publishManagement.togglePreview}}
+            data-test-button="contributor-preview"
+        >
+            <span>Preview</span>
+        </button>
+    {{/if}}
+
+    <GhTaskButton
+        @buttonText="Save"
+        @task={{@publishManagement.saveTask}}
+        @runningText="Saving"
+        @class="gh-btn gh-btn-icon gh-btn-editor gh-editor-save-trigger contributor-save-button"
+        data-test-button="contributor-save" />
+{{else}}
+    {{#if @publishManagement.post.isDraft}}
+        <button
+            type="button"
+            class="gh-btn gh-btn-editor gh-editor-preview-trigger"
+            {{on "click" @publishManagement.openPreview}}
+            {{on-key "cmd+p" @publishManagement.togglePreview}}
+            data-test-button="publish-preview"
+        >
+            <span>Preview</span>
+        </button>
+
+        <button
+            type="button"
+            class="gh-btn gh-btn-editor darkgrey gh-publish-trigger"
+            {{on "click" @publishManagement.openPublishFlow}}
+            {{on-key "cmd+shift+p"}}
+            disabled={{@publishManagement.publishOptions.isLoading}}
+            data-test-button="publish-flow"
+        >
+            <span>Publish</span>
+        </button>
+    {{else}}
+        <GhTaskButton
+            @task={{@publishManagement.saveTask}}
+            @buttonText="Update"
+            @runningText="Updating..."
+            @successText="Updated"
+            @class="gh-btn gh-btn-editor gh-editor-save-trigger gh-publish-trigger"
+            @idleClass="green"
+            @runningClass="midlightgrey"
+            @successClass="midlightgrey"
+            @failureClass="red"
+            @showIcon={{false}}
+            @disabled={{not @publishManagement.hasUnsavedChanges}}
+            @autoReset={{true}}
+            data-test-button="publish-save"
+        />
+
+        {{#if (not (and @publishManagement.post.isSent (not @publishManagement.post.isPublished)))}}
+            <button
+                type="button"
+                class="gh-btn gh-btn-editor darkgrey gh-publish-trigger"
+                {{on "click" @publishManagement.openUpdateFlow}}
+                data-test-button="update-flow"
+            >
+                <span>
+                    {{if @publishManagement.post.isScheduled "Unschedule" "Unpublish"}}
+                </span>
+            </button>
+        {{/if}}
+    {{/if}}
+{{/if}}

ghost/admin/app/components/editor/publish-management.hbs

@@ -1,67 +1,11 @@
-{{#if this.publishOptions.user.isContributor}}
+{{yield (hash
-    {{#if @post.isDraft}}
+    post=@post
-        <button
+    publishOptions=this.publishOptions
-            type="button"
+    openPreview=this.openPreview
-            class="gh-btn gh-btn-editor gh-editor-preview-trigger"
+    togglePreview=this.togglePreview
-            {{on "click" this.openPreview}}
+    saveTask=this.saveTask
-            {{on-key "cmd+p" this.togglePreview}}
+    saveButtonTaskGroup=this.saveButtonTaskGroup
-            data-test-button="contributor-preview"
+    hasUnsavedChanges=@hasUnsavedChanges
-        >
+    openPublishFlow=this.openPublishFlow
-            <span>Preview</span>
+    openUpdateFlow=this.openUpdateFlow
-        </button>
+)}}
-    {{/if}}
-
-    <GhTaskButton
-        @buttonText="Save"
-        @task={{this.saveTask}}
-        @runningText="Saving"
-        @class="gh-btn gh-btn-icon gh-btn-editor gh-editor-save-trigger contributor-save-button"
-        data-test-button="contributor-save" />
-{{else}}
-    {{#if @post.isDraft}}
-        <button
-            type="button"
-            class="gh-btn gh-btn-editor gh-editor-preview-trigger"
-            {{on "click" this.openPreview}}
-            {{on-key "cmd+p" this.togglePreview}}
-            data-test-button="publish-preview"
-        >
-            <span>Preview</span>
-        </button>
-
-        <button
-            type="button"
-            class="gh-btn gh-btn-editor darkgrey gh-publish-trigger"
-            {{on "click" this.openPublishFlow}}
-            {{on-key "cmd+shift+p"}}
-            disabled={{this.publishOptions.isLoading}}
-            data-test-button="publish-flow"
-        >
-            <span>Publish</span>
-        </button>
-    {{else}}
-        {{#if (or @hasUnsavedChanges this.saveButtonTaskGroup.isRunning)}}
-            <GhTaskButton
-                @task={{this.saveTask}}
-                @runningText="Saving..."
-                @class="gh-btn gh-btn-editor gh-editor-save-trigger gh-publish-trigger"
-                @idleClass="green"
-                @runningClass="midlightgrey"
-                @successClass="midlightgrey"
-                @failureClass="red"
-                @showIcon={{false}}
-                @autoReset={{false}}
-                data-test-button="publish-save"
-            />
-        {{/if}}
-
-        <button
-            type="button"
-            class="gh-btn gh-btn-editor darkgrey gh-publish-trigger"
-            {{on "click" this.openUpdateFlow}}
-            data-test-button="update-flow"
-        >
-            <span>Update</span>
-        </button>
-    {{/if}}
-{{/if}}

ghost/admin/app/components/gh-editor-post-status.hbs

@@ -1,8 +1,10 @@
-<div role="tooltip" {{on "mouseover" this.onMouseover}} {{on "mouseleave" this.onMouseleave}} data-test-editor-post-status ...attributes>
+{{!-- template-lint-disable no-invalid-interactive --}}
+<div {{on "mouseover" this.onMouseover}} {{on "mouseleave" this.onMouseleave}} data-test-editor-post-status ...attributes>
     {{#if (and this.isSaving @post.isDraft)}}
         Saving...
     {{else if @post.isSent}}
-        Sent to {{gh-pluralize @post.email.emailCount "member"}}
+        <button type="button" {{on "click" @openUpdateFlow}} class="gh-editor-post-status-btn">Sent</button>
+        to {{gh-pluralize @post.email.emailCount "member"}}
     {{else if (and @post.emailOnly @post.isScheduled)}}
         Scheduled
         {{#if this.isHovered}}

ghost/admin/app/styles/app-dark.css

@@ -1207,3 +1207,7 @@ kbd {
 .gh-dashboard-tooltip {
     background: var(--whitegrey);
 }
+
+.gh-editor-post-status-btn::after {
+    background: var(--hairline-color-2);
+}

ghost/admin/app/styles/layouts/editor.css

@@ -625,6 +625,21 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
     border-radius: 3px;
 }
 
+.gh-editor-post-status-btn {
+    position: relative;
+}
+
+.gh-editor-post-status-btn::after {
+    position: absolute;
+    content: "";
+    display: block;
+    bottom: 6px;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: var(--lightgrey);
+}
+
 .gh-editor-save-trigger {
     margin-right: 8px;
 }

ghost/admin/app/templates/editor.hbs

@@ -6,41 +6,45 @@
             as |editor|
         >
             <header class="gh-editor-header br2 pe-none">
-                <div class="flex items-center pe-auto h-100">
+                <Editor::PublishManagement
-                    {{#if this.ui.isFullScreen}}
+                    @post={{this.post}}
-                        <LinkTo @route={{pluralize this.post.displayName }} class="gh-btn-editor gh-editor-back-button" data-test-link={{pluralize this.post.displayName}}>
+                    @hasUnsavedChanges={{this.hasDirtyAttributes}}
+                    @beforePublish={{perform this.beforeSaveTask}}
+                    @afterPublish={{this.afterSave}}
+                    @saveTask={{this.saveTask}}
+                    as |publishManagement|
+                >
+                    <div class="flex items-center pe-auto h-100">
+                        {{#if this.ui.isFullScreen}}
+                            <LinkTo @route={{pluralize this.post.displayName }} class="gh-btn-editor gh-editor-back-button" data-test-link={{pluralize this.post.displayName}}>
+                                <span>
+                                    {{svg-jar "arrow-left"}}
+                                    {{capitalize (pluralize this.post.displayName)}}
+                                </span>
+                            </LinkTo>
+                        {{/if}}
+                        <div class="gh-editor-post-status">
                             <span>
-                                {{svg-jar "arrow-left"}}
+                                <GhEditorPostStatus
-                                {{capitalize (pluralize this.post.displayName)}}
+                                    @post={{this.post}}
+                                    @hasDirtyAttributes={{this.hasDirtyAttributes}}
+                                    @isSaving={{or this.autosaveTask.isRunning this.saveTasks.isRunning}}
+                                    @openUpdateFlow={{publishManagement.openUpdateFlow}}
+                                />
                             </span>
-                        </LinkTo>
+                        </div>
-                    {{/if}}
-                    <div class="gh-editor-post-status">
-                        <span>
-                            <GhEditorPostStatus
-                                @post={{this.post}}
-                                @hasDirtyAttributes={{this.hasDirtyAttributes}}
-                                @isSaving={{or this.autosaveTask.isRunning this.saveTasks.isRunning}}
-                            />
-                        </span>
                     </div>
-                </div>
 
-                <section class="flex items-center pe-auto h-100">
+                    <section class="flex items-center pe-auto h-100">
-                    {{#unless this.post.isNew}}
+                        {{#unless this.post.isNew}}
-                        <Editor::PublishManagement
+                            <Editor::PublishButtons @publishManagement={{publishManagement}} />
-                            @post={{this.post}}
-                            @hasUnsavedChanges={{this.hasDirtyAttributes}}
-                            @beforePublish={{perform this.beforeSaveTask}}
-                            @afterPublish={{this.afterSave}}
-                            @saveTask={{this.saveTask}}
-                        />
 
-                        {{#unless this.showSettingsMenu}}
+                            {{#unless this.showSettingsMenu}}
-                            <div class="settings-menu-toggle-spacer"></div>
+                                <div class="settings-menu-toggle-spacer"></div>
+                            {{/unless}}
                         {{/unless}}
-                    {{/unless}}
+                    </section>
-                </section>
+                </Editor::PublishManagement>
             </header>
 
             {{!--