From 95c3a68c34352b586c0fe5a0c628477153aca0af Mon Sep 17 00:00:00 2001 From: Elena Baidakova Date: Wed, 30 Nov 2022 17:39:37 +0400 Subject: [PATCH] Updated the filter naming in Post Analytics (#15898) closes TryGhost/Team#2329 - Replace 'Received' on 'Sent' in member's filter - Moved links for feedback analytics from chart to table --- ghost/admin/app/components/members/filter.js | 30 +++++++---- .../members/filters/email-received.js | 7 +-- .../components/members/filters/email-sent.js | 16 ++++++ .../app/components/members/filters/index.js | 1 + .../admin/app/components/posts/analytics.hbs | 13 ++--- .../posts/feedback-events-chart.hbs | 2 +- .../components/posts/post-activity-feed.hbs | 41 ++++++-------- .../posts/post-activity-feed/footer-links.hbs | 44 +++++++++++++++ .../posts/post-activity-feed/footer-links.js | 48 +++++++++++++++++ .../posts/post-activity-feed/link.hbs | 5 ++ .../post-activity-feed/footer-links-test.js | 54 +++++++++++++++++++ 11 files changed, 214 insertions(+), 47 deletions(-) create mode 100644 ghost/admin/app/components/members/filters/email-sent.js create mode 100644 ghost/admin/app/components/posts/post-activity-feed/footer-links.hbs create mode 100644 ghost/admin/app/components/posts/post-activity-feed/footer-links.js create mode 100644 ghost/admin/app/components/posts/post-activity-feed/link.hbs create mode 100644 ghost/admin/tests/integration/components/posts/post-activity-feed/footer-links-test.js diff --git a/ghost/admin/app/components/members/filter.js b/ghost/admin/app/components/members/filter.js index 032589b12e..6c79c0cf49 100644 --- a/ghost/admin/app/components/members/filter.js +++ b/ghost/admin/app/components/members/filter.js @@ -1,7 +1,7 @@ import Component from '@glimmer/component'; import moment from 'moment-timezone'; import nql from '@tryghost/nql-lang'; -import {AUDIENCE_FEEDBACK_FILTER, CREATED_AT_FILTER, EMAIL_CLICKED_FILTER, EMAIL_COUNT_FILTER, EMAIL_FILTER, EMAIL_OPENED_COUNT_FILTER, EMAIL_OPENED_FILTER, EMAIL_OPEN_RATE_FILTER, EMAIL_RECEIVED_FILTER, LABEL_FILTER, LAST_SEEN_FILTER, NAME_FILTER, NEXT_BILLING_DATE_FILTER, PLAN_INTERVAL_FILTER, SIGNUP_ATTRIBUTION_FILTER, STATUS_FILTER, SUBSCRIBED_FILTER, SUBSCRIPTION_ATTRIBUTION_FILTER, SUBSCRIPTION_START_DATE_FILTER, SUBSCRIPTION_STATUS_FILTER, TIER_FILTER} from './filters'; +import {AUDIENCE_FEEDBACK_FILTER, CREATED_AT_FILTER, EMAIL_CLICKED_FILTER, EMAIL_COUNT_FILTER, EMAIL_FILTER, EMAIL_OPENED_COUNT_FILTER, EMAIL_OPENED_FILTER, EMAIL_OPEN_RATE_FILTER, EMAIL_RECEIVED_FILTER, EMAIL_SENT_FILTER, LABEL_FILTER, LAST_SEEN_FILTER, NAME_FILTER, NEXT_BILLING_DATE_FILTER, PLAN_INTERVAL_FILTER, SIGNUP_ATTRIBUTION_FILTER, STATUS_FILTER, SUBSCRIBED_FILTER, SUBSCRIPTION_ATTRIBUTION_FILTER, SUBSCRIPTION_START_DATE_FILTER, SUBSCRIPTION_STATUS_FILTER, TIER_FILTER} from './filters'; import {TrackedArray} from 'tracked-built-ins'; import {action} from '@ember/object'; import {inject as service} from '@ember/service'; @@ -44,6 +44,7 @@ const FILTER_GROUPS = [ EMAIL_OPENED_COUNT_FILTER, EMAIL_OPEN_RATE_FILTER, EMAIL_RECEIVED_FILTER, + EMAIL_SENT_FILTER, EMAIL_OPENED_FILTER, EMAIL_CLICKED_FILTER, AUDIENCE_FEEDBACK_FILTER @@ -143,13 +144,20 @@ export default class MembersFilter extends Component { }) ]); - get availableFilterProperties() { + get filterProperties() { let availableFilters = FILTER_PROPERTIES; - const hasMultipleTiers = this.membersUtils.hasMultipleTiers; // exclude any filters that are behind disabled feature flags availableFilters = availableFilters.filter(prop => !prop.feature || this.feature[prop.feature]); availableFilters = availableFilters.filter(prop => !prop.setting || this.settings[prop.setting]); + availableFilters = availableFilters.filter(prop => !prop.excludeForFeature || !this.feature[prop.excludeForFeature]); + + return availableFilters; + } + + get availableFilterProperties() { + let availableFilters = this.filterProperties; + const hasMultipleTiers = this.membersUtils.hasMultipleTiers; // exclude tiers filter if site has only single tier availableFilters = availableFilters @@ -224,7 +232,7 @@ export default class MembersFilter extends Component { let query = ''; filters.forEach((filter) => { - const filterProperty = FILTER_PROPERTIES.find(prop => prop.name === filter.type); + const filterProperty = this.filterProperties.find(prop => prop.name === filter.type); if (filterProperty.buildNqlFilter) { query += `${filterProperty.buildNqlFilter(filter)}+`; @@ -283,7 +291,7 @@ export default class MembersFilter extends Component { const parsedFilters = []; // Check custom parsing - for (const filterProperties of FILTER_PROPERTIES) { + for (const filterProperties of this.filterProperties) { if (filterProperties.parseNqlFilter) { // This filter has a custom parsing function const parsedFilter = filterProperties.parseNqlFilter(filter); @@ -305,7 +313,7 @@ export default class MembersFilter extends Component { parsedFilters.push(...this.parseNqlFilter(filter.yg)); } else { const filterKeys = Object.keys(filter); - const validKeys = FILTER_PROPERTIES.map(prop => prop.name); + const validKeys = this.filterProperties.map(prop => prop.name); for (const key of filterKeys) { if (validKeys.includes(key)) { @@ -339,7 +347,7 @@ export default class MembersFilter extends Component { const key = keys[0]; const nqlValue = nqlFilter[key]; - const filterProperty = FILTER_PROPERTIES.find(prop => prop.name === key); + const filterProperty = this.filterProperties.find(prop => prop.name === key); let relation; let value; @@ -415,8 +423,8 @@ export default class MembersFilter extends Component { } if (relation && value) { - const properties = FILTER_PROPERTIES.find(prop => key === prop.name); - if (FILTER_PROPERTIES.find(prop => key === prop.name)) { + const properties = this.filterProperties.find(prop => key === prop.name); + if (this.filterProperties.find(prop => key === prop.name)) { return new Filter({ properties, relation, @@ -473,7 +481,7 @@ export default class MembersFilter extends Component { newType = newType.target.value; } - const newProp = FILTER_PROPERTIES.find(prop => prop.name === newType); + const newProp = this.filterProperties.find(prop => prop.name === newType); if (!newProp) { // eslint-disable-next-line no-console @@ -534,7 +542,7 @@ export default class MembersFilter extends Component { this.fetchFilterResourcesTask.perform(); } - @action + @action applyFiltersPressed(dropdown) { dropdown?.actions.close(); this.applyFilter(); diff --git a/ghost/admin/app/components/members/filters/email-received.js b/ghost/admin/app/components/members/filters/email-received.js index 11605a7ef2..6e852bb506 100644 --- a/ghost/admin/app/components/members/filters/email-received.js +++ b/ghost/admin/app/components/members/filters/email-received.js @@ -2,9 +2,10 @@ import {MATCH_RELATION_OPTIONS} from './relation-options'; export const EMAIL_RECEIVED_FILTER = { label: 'Received email', - name: 'emails.post_id', - valueType: 'string', - resource: 'email', + name: 'emails.post_id', + valueType: 'string', + resource: 'email', + excludeForFeature: 'suppressionList', relationOptions: MATCH_RELATION_OPTIONS, columnLabel: 'Received email', getColumnValue: (member, filter) => { diff --git a/ghost/admin/app/components/members/filters/email-sent.js b/ghost/admin/app/components/members/filters/email-sent.js new file mode 100644 index 0000000000..d1a7cb48fc --- /dev/null +++ b/ghost/admin/app/components/members/filters/email-sent.js @@ -0,0 +1,16 @@ +import {MATCH_RELATION_OPTIONS} from './relation-options'; + +export const EMAIL_SENT_FILTER = { + label: 'Sent email', + name: 'emails.post_id', + valueType: 'string', + resource: 'email', + feature: 'suppressionList', + relationOptions: MATCH_RELATION_OPTIONS, + columnLabel: 'Sent email', + getColumnValue: (member, filter) => { + return { + text: filter.resource?.title ?? '' + }; + } +}; diff --git a/ghost/admin/app/components/members/filters/index.js b/ghost/admin/app/components/members/filters/index.js index 143ad6b61a..78cb1fb281 100644 --- a/ghost/admin/app/components/members/filters/index.js +++ b/ghost/admin/app/components/members/filters/index.js @@ -19,4 +19,5 @@ export * from './email-opened-count'; export * from './email-open-rate'; export * from './email-clicked'; export * from './email-received'; +export * from './email-sent'; export * from './audience-feedback'; diff --git a/ghost/admin/app/components/posts/analytics.hbs b/ghost/admin/app/components/posts/analytics.hbs index 8410003dad..18187f84a9 100644 --- a/ghost/admin/app/components/posts/analytics.hbs +++ b/ghost/admin/app/components/posts/analytics.hbs @@ -50,10 +50,9 @@ @@ -65,10 +64,9 @@ {{/if}} @@ -81,10 +79,9 @@ {{/if}} @@ -97,7 +94,7 @@ @@ -112,7 +109,7 @@ - + {{/if}} diff --git a/ghost/admin/app/components/posts/feedback-events-chart.hbs b/ghost/admin/app/components/posts/feedback-events-chart.hbs index d59db304b2..e4cb3a648c 100644 --- a/ghost/admin/app/components/posts/feedback-events-chart.hbs +++ b/ghost/admin/app/components/posts/feedback-events-chart.hbs @@ -30,7 +30,7 @@ {{this.tooltipData.label}} - {{#if this.tooltipData.href}} + {{#if (and this.tooltipData.href (not (feature "suppressionList")))}}
- {{#let (activity-feed-fetcher filter=(members-event-filter post=@postId includeEvents=this.getEventTypes) pageSize=this.pageSize) as |eventsFetcher|}} + {{#let (activity-feed-fetcher filter=(members-event-filter post=@post.id includeEvents=this.getEventTypes) pageSize=this.pageSize) as |eventsFetcher|}} {{#if eventsFetcher.isError}}
@@ -84,29 +84,22 @@ {{/if}}
- {{#if @linkQuery}} - {{#if (feature "suppressionList")}} -
- {{svg-jar "filter"}} - See members for - - {{@linkText}} - -
- {{else}} - - {{svg-jar "filter"}} - See members - - {{/if}} + {{#if (feature "suppressionList")}} + + {{/if}} + + {{#if (and @linkQuery (not (feature "suppressionList")))}} + + {{svg-jar "filter"}} + See members + {{/if}}
diff --git a/ghost/admin/app/components/posts/post-activity-feed/footer-links.hbs b/ghost/admin/app/components/posts/post-activity-feed/footer-links.hbs new file mode 100644 index 0000000000..f6a0e0780e --- /dev/null +++ b/ghost/admin/app/components/posts/post-activity-feed/footer-links.hbs @@ -0,0 +1,44 @@ +{{#if (eq @eventType "sent")}} + + + Sent + + +{{else if (eq @eventType "opened")}} + + + Opened + + +{{else if (eq @eventType "clicked")}} + + + Clicked + + +{{else if (eq @eventType "feedback")}} + + {{#each this.feedbackLinks as |link|}} + + {{link.label}} + + {{link.separator}} + {{/each}} + +{{/if}} diff --git a/ghost/admin/app/components/posts/post-activity-feed/footer-links.js b/ghost/admin/app/components/posts/post-activity-feed/footer-links.js new file mode 100644 index 0000000000..076b63ed41 --- /dev/null +++ b/ghost/admin/app/components/posts/post-activity-feed/footer-links.js @@ -0,0 +1,48 @@ +import Component from '@glimmer/component'; + +export default class FooterLinks extends Component { + get feedbackLinks() { + const post = this.args.post; + const positiveLink = {filterParam: '(feedback.post_id:' + post.id + '+feedback.score:1)', label: 'More like this'}; + const negativeLink = {filterParam: '(feedback.post_id:' + post.id + '+feedback.score:0)', label: 'Less like this'}; + + const data = [ + {link: positiveLink, hidden: !post.count.positive_feedback}, + {link: negativeLink, hidden: !post.count.negative_feedback} + ]; + + const links = this.collectLinks(data); + return this.addSeparator(links, 'and'); + } + + collectLinks(list) { + const data = []; + list.forEach((item) => { + if (item.hidden) { + return; + } + + data.push(item.link); + }); + + return data; + } + + addSeparator(links, separator) { + const data = []; + links.forEach((item, index) => { + const link = {...item}; + const isLastItem = links.length - 1 === index; + + if (isLastItem) { + data.push(link); + return; + } + + link.separator = separator; + data.push(link); + }); + + return data; + } +} diff --git a/ghost/admin/app/components/posts/post-activity-feed/link.hbs b/ghost/admin/app/components/posts/post-activity-feed/link.hbs new file mode 100644 index 0000000000..12de30af54 --- /dev/null +++ b/ghost/admin/app/components/posts/post-activity-feed/link.hbs @@ -0,0 +1,5 @@ +
+ {{svg-jar "filter"}} + See members for + {{yield}} +
\ No newline at end of file diff --git a/ghost/admin/tests/integration/components/posts/post-activity-feed/footer-links-test.js b/ghost/admin/tests/integration/components/posts/post-activity-feed/footer-links-test.js new file mode 100644 index 0000000000..94516e99c2 --- /dev/null +++ b/ghost/admin/tests/integration/components/posts/post-activity-feed/footer-links-test.js @@ -0,0 +1,54 @@ +import {describe, it} from 'mocha'; +import {expect} from 'chai'; +import {find, render} from '@ember/test-helpers'; +import {hbs} from 'ember-cli-htmlbars'; +import {setupRenderingTest} from 'ember-mocha'; + +describe('Integration: Component: posts/post-activity-feed/footer-links', function () { + setupRenderingTest(); + + it('renders just one link if negative feedback > 0', async function () { + this.set('post', {id: 'id', count: {positive_feedback: 0, negative_feedback: 1}}); + await render(hbs` + `); + + const link = find('.gh-post-activity-feed-pagination-link-wrapper'); + + expect(link).to.contain.text('Less like this'); + expect(link).not.to.contain.text('and'); + expect(link).not.to.contain.text('More like this'); + }); + + it('renders just one link if positive feedback > 0', async function () { + this.set('post', {id: 'id', count: {positive_feedback: 1, negative_feedback: 0}}); + await render(hbs` + `); + + const link = find('.gh-post-activity-feed-pagination-link-wrapper'); + + expect(link).not.to.contain.text('Less like this'); + expect(link).not.to.contain.text('and'); + expect(link).to.contain.text('More like this'); + }); + + it('renders positive and negative links with separator', async function () { + this.set('post', {id: 'id', count: {positive_feedback: 1, negative_feedback: 1}}); + await render(hbs` + `); + + const link = find('.gh-post-activity-feed-pagination-link-wrapper'); + + expect(link).to.contain.text('Less like this'); + expect(link).to.contain.text('and'); + expect(link).to.contain.text('More like this'); + }); +});