Added ability to set post access to segments

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

- This reverts commit de560733c5
- brings back members segment select component to post access, which allows setting access to specific labels/products
- only works behind the alpha feature flag - `multipleProducts`

ghost/admin/app/components/gh-post-settings-menu.hbs

@@ -79,10 +79,43 @@
 
 
                 {{#if this.showVisibilityInput}}
-                    <div class="form-group">
-                        <label for="visibility-input">Post access</label>
-                        <GhPsmVisibilityInput @post={{this.post}} @triggerId="visibility-input" />
-                    </div>
+                    {{#if (feature "multipleProducts")}}
+                        <GhFormGroup @errors={{this.post.errors}} @hasValidated={{this.post.hasValidated}} @property="visibility">
+                            <label for="visibility-input">Post access</label>
+                            <div
+                                class="gh-radio {{if this.post.isPublic "active"}}"
+                                {{on "click" (action "setVisibility" "public")}}
+                            >
+                                <div class="gh-radio-button"></div>
+                                <div class="gh-radio-content">
+                                    <div class="gh-radio-label">Public</div>
+                                </div>
+                            </div>
+                            <div
+                                class="gh-radio {{if (not this.post.isPublic) "active"}}"
+                                {{on "click" (action "setVisibility" this.post.visibilitySegment)}}
+                            >
+                                <div class="gh-radio-button"></div>
+                                <div class="gh-radio-content">
+                                    <div class="gh-radio-label">Members-only</div>
+                                    <div class="gh-radio-desc">
+                                        <GhMembersSegmentSelect
+                                            @segment={{this.post.visibilitySegment}}
+                                            @onChange={{action "setVisibility"}}
+                                            @renderInPlace={{true}}
+                                            @hideOptionsWhenAllSelected={{true}}
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                            <GhErrorMessage @errors={{this.post.errors}} @property="visibility" class="no-selection" data-test-error="visibility" />
+                        </GhFormGroup>
+                    {{else}}
+                        <div class="form-group">
+                            <label for="visibility-input">Post access</label>
+                            <GhPsmVisibilityInput @post={{this.post}} @triggerId="visibility-input" />
+                        </div>
+                    {{/if}}
                 {{/if}}
 
 
@@ -438,4 +471,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>

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

@@ -153,6 +153,23 @@ export default Component.extend({
             }
         },
 
+        async setVisibility(segment) {
+            this.post.set('visibility', segment);
+            try {
+                await this.post.validate({property: 'visibility'});
+                if (this.post.changedAttributes().visibility) {
+                    await this.savePostTask.perform();
+                }
+            } catch (e) {
+                if (!e) {
+                    // validation error
+                    return;
+                }
+
+                throw e;
+            }
+        },
+
         setPublishedAtBlogTime(time) {
             let post = this.post;
 

ghost/admin/app/models/post.js

@@ -171,6 +171,24 @@ export default Model.extend(Comparable, ValidationEngine, {
         return this.get('ghostPaths.url').join(blogUrl, previewKeyword, uuid);
     }),
 
+    isPublic: computed('visibility', function () {
+        return this.visibility === 'public' ? true : false;
+    }),
+
+    visibilitySegment: computed('visibility', 'isPublic', function () {
+        if (this.isPublic) {
+            return this.settings.get('defaultContentVisibility') === 'paid' ? 'status:-free' : 'status:free,status:-free';
+        } else {
+            if (this.visibility === 'members') {
+                return 'status:free,status:-free';
+            }
+            if (this.visibility === 'paid') {
+                return 'status:-free';
+            }
+            return this.visibility;
+        }
+    }),
+
     // check every second to see if we're past the scheduled time
     // will only re-compute if this property is being observed elsewhere
     pastScheduledTime: computed('isScheduled', 'publishedAtUTC', 'clock.second', function () {

ghost/admin/app/transforms/visibility-string.js

@@ -0,0 +1,29 @@
+import Transform from '@ember-data/serializer/transform';
+
+// post visibility supports `'members'` and `'paid'` as special-case options
+// but that doesn't map well for options in our token select inputs so we
+// expand/convert them here to make usage elsewhere easier
+
+export default class VisibilityString extends Transform {
+    deserialize(serialized) {
+        if (serialized === 'members') {
+            return 'status:free,status:-free';
+        }
+        if (serialized === 'paid') {
+            return 'status:-free';
+        }
+
+        return serialized;
+    }
+
+    serialize(deserialized) {
+        if (deserialized === 'status:free,status:-free') {
+            return 'members';
+        }
+        if (deserialized === 'status:-free') {
+            return 'paid';
+        }
+
+        return deserialized;
+    }
+}

ghost/admin/app/validators/post.js

@@ -67,6 +67,13 @@ export default BaseValidator.create({
         }
     },
 
+    visibility(model) {
+        if (isBlank(model.visibility) && !model.isNew) {
+            model.errors.add('visibility', 'A members group must be selected for members-only posts');
+            this.invalidate();
+        }
+    },
+
     codeinjectionFoot(model) {
         if (!validator.isLength(model.codeinjectionFoot || '', 0, 65535)) {
             model.errors.add('codeinjectionFoot', 'Footer code cannot be longer than 65535 characters.');