🐛 clear date error when closing the PSM (#657)

closes TryGhost/Ghost#8359

- if the date/time picker is in an error state when the PSM is closed, reset it to the currently saved time
- resolves the problem with the flash of an error as the publish menu is closed as it's no longer possible to be in a hidden error state

app/components/gh-post-settings-menu.js

@@ -24,10 +24,13 @@ export default Component.extend(SettingsMenuMixin, {
     session: injectService(),
     settings: injectService(),
 
+    model: null,
     slugValue: boundOneWay('model.slug'),
     metaTitleScratch: alias('model.metaTitleScratch'),
     metaDescriptionScratch: alias('model.metaDescriptionScratch'),
 
+    _showSettingsMenu: false,
+
     didReceiveAttrs() {
         this._super(...arguments);
 
@@ -38,6 +41,19 @@ export default Component.extend(SettingsMenuMixin, {
         this.get('model.author').then((author) => {
             this.set('selectedAuthor', author);
         });
+
+        // reset the publish date on close if it has an error
+        if (!this.get('showSettingsMenu') && this._showSettingsMenu) {
+            let post = this.get('model');
+            let errors = post.get('errors');
+
+            if (errors.has('publishedAtBlogDate') || errors.has('publishedAtBlogTime')) {
+                post.set('publishedAtBlogTZ', post.get('publishedAtUTC'));
+                post.validate({attribute: 'publishedAtBlog'});
+            }
+        }
+
+        this._showSettingsMenu = this.get('showSettingsMenu');
     },
 
     seoTitle: computed('model.titleScratch', 'metaTitleScratch', function () {

app/templates/components/gh-post-settings-menu.hbs

@@ -3,7 +3,9 @@
     <div class="{{if isViewingSubview 'settings-menu-pane-out-left' 'settings-menu-pane-in'}} settings-menu settings-menu-pane">
         <div class="settings-menu-header">
             <h4>Post Settings</h4>
-            <button class="close settings-menu-header-action" {{action "closeMenus"}}>{{inline-svg "close"}}<span class="hidden">Close</span></button>
+            <button class="close settings-menu-header-action" {{action "closeMenus"}} data-test-close-settings-menu>
+                {{inline-svg "close"}}<span class="hidden">Close</span>
+            </button>
         </div>
         <div class="settings-menu-content">
             {{gh-image-uploader-with-preview

tests/acceptance/editor-test.js

@@ -79,7 +79,7 @@ describe('Acceptance: Editor', function() {
         });
 
         it('renders the editor correctly, PSM Publish Date and Save Button', async function () {
-            server.createList('post', 2);
+            let [post1] = server.createList('post', 2);
             let futureTime = moment().tz('Etc/UTC').add(10, 'minutes');
 
             // post id 1 is a draft, checking for draft behaviour now
@@ -99,13 +99,34 @@ describe('Acceptance: Editor', function() {
                 .to.equal('Must be in format: "15:00"');
 
             // should error, if the publish time is in the future
+            // NOTE: date must be selected first, changing the time first will save
+            // with the new time
+            await datepickerSelect(testSelector('date-time-picker-datepicker'), moment.tz('Etc/UTC'));
             await fillIn(testSelector('date-time-picker-time-input'), futureTime.format('HH:mm'));
             await triggerEvent(testSelector('date-time-picker-time-input'), 'blur');
-            await datepickerSelect(testSelector('date-time-picker-datepicker'), futureTime);
 
             expect(find(testSelector('date-time-picker-error')).text().trim(), 'inline error response for future time')
                 .to.equal('Must be in the past');
 
+            // closing the PSM will reset the invalid date/time
+            await click(testSelector('close-settings-menu'));
+            await click(testSelector('psm-trigger'));
+
+            expect(
+                find(testSelector('date-time-picker-error')).text().trim(),
+                'date picker error after closing PSM'
+            ).to.equal('');
+
+            expect(
+                find(testSelector('date-time-picker-date-input')).val(),
+                'PSM date value after closing with invalid date'
+            ).to.equal(moment(post1.publishedAt).format('MM/DD/YYYY'));
+
+            expect(
+                find(testSelector('date-time-picker-time-input')).val(),
+                'PSM time value after closing with invalid date'
+            ).to.equal(moment(post1.publishedAt).format('HH:mm'));
+
             // saves the post with the new date
             let validTime = moment('2017-04-09 12:00');
             await fillIn(testSelector('date-time-picker-time-input'), validTime.format('HH:mm'));