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
This commit is contained in:
Rishabh 2021-07-02 22:05:10 +05:30 committed by Rishabh Garg
parent ea2be4b2d8
commit a476d03d0d
4 changed files with 29 additions and 31 deletions

View File

@ -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
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" />
<GhPsmVisibilityInput @post={{this.post}} @triggerId="visibility-input" />
</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>

View File

@ -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) {

View File

@ -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);
}
}
}
});

View File

@ -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;
});
});