Added custom segment option to post settings access option

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

With multiple products flag we are re-enabling segmentation by product for posts. This change adds new segment option for post access option in post-settings menu, which allows option to choose specific products for post access.

- updates post settings and post settings labs menu to add new option for segment
- handles visibility filter changes for API based on selected segment
- the new behavior is behind the alpha flag for multiple products

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

@@ -74,35 +74,22 @@
                     {{#if (feature "multipleProducts")}}
                         <GhFormGroup @errors={{this.post.errors}} @hasValidated={{this.post.hasValidated}} @property="visibility">
                             <label for="visibility-input">Post access</label>
-                            <div
+                            <GhPsmVisibilityInput @post={{this.post}} @triggerId="visibility-input" />
-                                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
-                                            @hideLabels={{true}}
-                                            @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>
+
+                        {{#if (eq this.post.visibility "filter")}}
+                            <GhFormGroup @errors={{this.post.errors}} @hasValidated={{this.post.hasValidated}} @property="visibilityFilter">
+                                <GhMembersSegmentSelect
+                                    @hideLabels={{true}}
+                                    @segment={{this.post.visibilitySegment}}
+                                    @onChange={{action "setVisibility"}}
+                                    @renderInPlace={{true}}
+                                    @hideDefaultSegments={{true}}
+                                    @hideOptionsWhenAllSelected={{true}}
+                                />
+                                <GhErrorMessage @errors={{this.post.errors}} @property="visibilityFilter" data-test-error="visibilityFilter" />
+                            </GhFormGroup>
+                        {{/if}}
                     {{else}}
                         <div class="form-group">
                             <label for="visibility-input">Post access</label>

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

@@ -138,10 +138,11 @@ export default Component.extend({
         },
 
         async setVisibility(segment) {
-            this.post.set('visibility', segment);
+            this.post.set('visibilityFilter', segment);
             try {
                 await this.post.validate({property: 'visibility'});
-                if (this.post.changedAttributes().visibility) {
+                await this.post.validate({property: 'visibilityFilter'});
+                if (this.post.changedAttributes().visibilityFilter) {
                     await this.savePostTask.perform();
                 }
             } catch (e) {

ghost/admin/app/components/gh-psm-visibility-input.js

@@ -11,6 +11,7 @@ const VISIBILITIES = [
 export default Component.extend({
 
     settings: service(),
+    feature: service(),
 
     // public attrs
     post: null,
@@ -22,11 +23,19 @@ export default Component.extend({
     init() {
         this._super(...arguments);
         this.availableVisibilities = VISIBILITIES;
+        if (this.feature.get('multipleProducts')) {
+            this.availableVisibilities.push(
+                {label: 'A segment', name: 'filter'}
+            );
+        }
     },
 
     actions: {
         updateVisibility(newVisibility) {
             this.post.set('visibility', newVisibility);
+            if (newVisibility !== 'filter') {
+                this.post.set('visibilityFilter', null);
+            }
         }
     }
 });

ghost/admin/tests/integration/components/gh-psm-visibility-input-test.js

@@ -37,7 +37,8 @@ describe('Integration: Component: gh-psm-visibility-input', function () {
         await fillIn('select', 'paid');
         await blur('select');
 
-        expect(setVisibility.calledOnce).to.be.true;
+        expect(setVisibility.calledTwice).to.be.true;
         expect(setVisibility.calledWith('visibility', 'paid')).to.be.true;
+        expect(setVisibility.calledWith('visibilityFilter', null)).to.be.true;
     });
 });