From 8ca2c6935a9bd0482963ba6e131a09589964d7a3 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Wed, 20 Apr 2022 18:41:29 +0100
Subject: [PATCH] Added static mockup of basic publish flow

refs https://github.com/TryGhost/Team/issues/1542

- adds `<EditorLabs::PublishManagement>` component that displays the relevant button for triggering publishing flows and will eventually store publish options for the editing session duration and manage the saving flow
  - displays a "Publish" button that triggers the publish flow modal
- adds `editor-labs/publish-flow` full-screen modal containing a static mockup of the desired sentence-structure publish options design
---
 .../editor-labs/publish-management.hbs        |  8 ++++++
 .../editor-labs/publish-management.js         | 20 +++++++++++++
 .../modals/editor-labs/publish-flow.hbs       | 28 +++++++++++++++++++
 .../modals/editor-labs/publish-flow.js        |  8 ++++++
 ghost/admin/app/styles/components/modals.css  |  4 +++
 ghost/admin/app/templates/editor.hbs          | 18 +++++++-----
 6 files changed, 79 insertions(+), 7 deletions(-)
 create mode 100644 ghost/admin/app/components/editor-labs/publish-management.hbs
 create mode 100644 ghost/admin/app/components/editor-labs/publish-management.js
 create mode 100644 ghost/admin/app/components/modals/editor-labs/publish-flow.hbs
 create mode 100644 ghost/admin/app/components/modals/editor-labs/publish-flow.js

diff --git a/ghost/admin/app/components/editor-labs/publish-management.hbs b/ghost/admin/app/components/editor-labs/publish-management.hbs
new file mode 100644
index 0000000000..f81b8e0b29
--- /dev/null
+++ b/ghost/admin/app/components/editor-labs/publish-management.hbs
@@ -0,0 +1,8 @@
+<button
+    type="button"
+    class="gh-btn gh-btn-editor green gh-publishmenu-trigger"
+    {{on "click" this.openPublishFlow}}
+    data-test-button="publish-flow"
+>
+    <span>Publish</span>
+</button>
\ No newline at end of file
diff --git a/ghost/admin/app/components/editor-labs/publish-management.js b/ghost/admin/app/components/editor-labs/publish-management.js
new file mode 100644
index 0000000000..c2b7b3fe0d
--- /dev/null
+++ b/ghost/admin/app/components/editor-labs/publish-management.js
@@ -0,0 +1,20 @@
+import Component from '@glimmer/component';
+import PublishFlowModal from '../modals/editor-labs/publish-flow';
+import {action} from '@ember/object';
+import {inject as service} from '@ember/service';
+
+export default class PublishFlow extends Component {
+    @service modals;
+
+    publishFlowModal = null;
+
+    willDestroy() {
+        super.willDestroy(...arguments);
+        this.publishFlowModal?.close();
+    }
+
+    @action
+    openPublishFlow() {
+        this.publishFlowModal = this.modals.open(PublishFlowModal);
+    }
+}
diff --git a/ghost/admin/app/components/modals/editor-labs/publish-flow.hbs b/ghost/admin/app/components/modals/editor-labs/publish-flow.hbs
new file mode 100644
index 0000000000..31b8e6f609
--- /dev/null
+++ b/ghost/admin/app/components/modals/editor-labs/publish-flow.hbs
@@ -0,0 +1,28 @@
+<div class="flex flex-column h-100 items-center">
+    <header class="gh-editor-header" data-test-modal="publish">
+        <div class="ml3">
+            <button class="gh-editor-back-button" title="Close" type="button" {{on "click" @close}}>
+                <span>{{svg-jar "arrow-left"}} Back to edit</span>
+            </button>
+        </div>
+        <div class="flex-grow-1"></div>
+    </header>
+
+    <div class="flex flex-column flex-auto justify-center items-center w-50">
+        <div class="mb8 f1 fw6 midgrey">
+            Ready?
+            <strong class="darkgrey">Right now</strong>
+            this post will be
+            <strong class="darkgrey">published and sent</strong>
+            to
+            <strong class="darkgrey">all subscribers</strong>
+            of
+            <strong class="darkgrey">The Weekly Roundup</strong>.
+        </div>
+
+        <div class="flex flex-row w-100">
+            <button type="button" class="gh-btn gh-btn-black" {{on "click" (noop)}}><span>Continue</span></button>
+            <button type="button" class="gh-btn gh-btn-link" {{on "click" @close}}><span>Cancel</span></button>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/ghost/admin/app/components/modals/editor-labs/publish-flow.js b/ghost/admin/app/components/modals/editor-labs/publish-flow.js
new file mode 100644
index 0000000000..0f0cc02683
--- /dev/null
+++ b/ghost/admin/app/components/modals/editor-labs/publish-flow.js
@@ -0,0 +1,8 @@
+import Component from '@glimmer/component';
+
+export default class PublishModalComponent extends Component {
+    static modalOptions = {
+        className: 'fullscreen-modal-total-overlay',
+        omitBackdrop: true
+    };
+}
diff --git a/ghost/admin/app/styles/components/modals.css b/ghost/admin/app/styles/components/modals.css
index 942067ba9f..fcc897967b 100644
--- a/ghost/admin/app/styles/components/modals.css
+++ b/ghost/admin/app/styles/components/modals.css
@@ -78,6 +78,10 @@
     background: var(--white)
 }
 
+.fullscreen-modal-total-overlay .modal-content {
+    height: 100%;
+}
+
 .fullscreen-modal-action {
     margin: 6vw 0;
 }
diff --git a/ghost/admin/app/templates/editor.hbs b/ghost/admin/app/templates/editor.hbs
index 9a326a9740..34c27de3c7 100644
--- a/ghost/admin/app/templates/editor.hbs
+++ b/ghost/admin/app/templates/editor.hbs
@@ -43,14 +43,18 @@
                                 @task={{this.save}}
                                 @runningText="Saving"
                                 @class="gh-btn gh-btn-icon gh-btn-editor contributor-save-button"
-                                data-test-contributor-save=true />
+                                data-test-contributor-save />
                         {{else}}
-                            <GhPublishmenu
-                                @post={{this.post}}
-                                @postStatus={{this.post.status}}
-                                @saveTask={{this.saveTask}}
-                                @setSaveType={{action "setSaveType"}}
-                                @onOpen={{action "cancelAutosave"}} />
+                            {{#if (feature "publishingFlow")}}
+                                <EditorLabs::PublishManagement @post={{this.post}} />
+                            {{else}}
+                                <GhPublishmenu
+                                    @post={{this.post}}
+                                    @postStatus={{this.post.status}}
+                                    @saveTask={{this.saveTask}}
+                                    @setSaveType={{action "setSaveType"}}
+                                    @onOpen={{action "cancelAutosave"}} />
+                            {{/if}}
                         {{/if}}
 
                         {{#unless this.showSettingsMenu}}