Merge

.github/workflows/migration-review.yml

@@ -11,7 +11,7 @@ jobs:
     if: github.repository_owner == 'TryGhost'
     name: Create checklist comment
     steps:
-      - uses: peter-evans/create-or-update-comment@6fcd282399b3c9ad0bd9bd8025b8fb2c18b085dd
+      - uses: peter-evans/create-or-update-comment@73054821735f5750dfe2ed26313889fde739e425
         with:
           issue-number: ${{ github.event.pull_request.number }}
           body: |

ghost/adapter-manager/package.json

@@ -17,7 +17,7 @@
   ],
   "devDependencies": {
     "c8": "7.12.0",
-    "mocha": "10.0.0",
+    "mocha": "10.1.0",
     "should": "13.2.3",
     "sinon": "14.0.1"
   },

ghost/admin/app/components/gh-explore-iframe.js

@@ -45,6 +45,6 @@ export default class GhExploreIframe extends Component {
     }
 
     _handleSiteDataUpdate(data) {
-        this.explore.siteData = data.siteData;
+        this.explore.siteData = data?.siteData ?? {};
     }
 }

ghost/admin/app/components/gh-resource-select.hbs

@@ -1,14 +1,19 @@
-<GhTokenInput
+<PowerSelect
+    @searchEnabled={{true}}
     @options={{this.options}}
-    @selected={{this.selectedOptions}}
-    @disabled={{or @disabled this.fetchOptionsTask.isRunning}}
-    @optionsComponent={{component "power-select/options"}}
-    @allowCreation={{false}}
-    @renderInPlace={{this.renderInPlace}}
+    @selected={{this.selectedOption}}
     @onChange={{this.onChange}}
-    @class="select-members"
+    @triggerClass="gh-resource-select-trigger"
+    @dropdownClass="gh-resource-select-dropdown"
     @placeholder={{this.placeholderText}}
-    as |resource|
+    @renderInPlace={{this.renderInPlace}}
+    @disabled={{or @disabled this.fetchOptionsTask.isRunning}}
+    @optionsComponent={{component "power-select/options"}}
+    @search={{this.searchAndSuggest}}
+    @searchField={{this.searchField}}
+    @searchMessage={{@searchMessage}}
+    @searchPlaceholder={{this.searchPlaceholderText}}
+  as |resource|
 >
-    {{resource.name}}
-</GhTokenInput>
+  {{resource.title}}
+</PowerSelect>

ghost/admin/app/components/gh-resource-select.js

@@ -1,5 +1,10 @@
 import Component from '@glimmer/component';
-import {action} from '@ember/object';
+import {A} from '@ember/array';
+import {action, get} from '@ember/object';
+import {
+    defaultMatcher,
+    filterOptions
+} from 'ember-power-select/utils/group-utils';
 import {inject as service} from '@ember/service';
 import {task} from 'ember-concurrency';
 import {tracked} from '@glimmer/tracking';
@@ -13,6 +18,45 @@ export default class GhResourceSelect extends Component {
         return this.args.renderInPlace === undefined ? false : this.args.renderInPlace;
     }
 
+    get searchField() {
+        return this.args.searchField === undefined ? 'name' : this.args.searchField;
+    }
+
+    @action
+    searchAndSuggest(term, select) {
+        return this.searchAndSuggestTask.perform(term, select);
+    }
+
+    @task
+    *searchAndSuggestTask(term) {
+        let newOptions = this.flatOptions.toArray();
+
+        if (term.length === 0) {
+            return newOptions;
+        }
+
+        // todo: we can do actual filtering on posts here (allow searching when we have lots and lots of posts)
+        yield undefined;
+
+        newOptions = this._filter(A(newOptions), term);
+
+        return newOptions;
+    }
+
+    get matcher() {
+        return this.args.matcher || defaultMatcher;
+    }
+
+    _filter(options, searchText) {
+        let matcher;
+        if (this.searchField) {
+            matcher = (option, text) => this.matcher(get(option, this.searchField), text);
+        } else {
+            matcher = (option, text) => this.matcher(option, text);
+        }
+        return filterOptions(options || [], searchText, matcher);
+    }
+
     constructor() {
         super(...arguments);
         this.fetchOptionsTask.perform();
@@ -38,9 +82,12 @@ export default class GhResourceSelect extends Component {
         return options;
     }
 
-    get selectedOptions() {
-        const resources = this.args.resources || [];
-        return this.flatOptions.filter(option => resources.find(resource => resource.id === option.id));
+    get selectedOption() {
+        if (this.args.resource.title) {
+            return this.args.resource;
+        }
+        const resource = this.args.resource ?? {};
+        return this.flatOptions.find(option => resource.id === option.id);
     }
 
     @action
@@ -55,16 +102,20 @@ export default class GhResourceSelect extends Component {
         return 'Select a page/post';
     }
 
+    get searchPlaceholderText() {
+        if (this.args.type === 'email') {
+            return 'Search emails';
+        }
+        return 'Search posts/pages';
+    }
+
     @task
     *fetchOptionsTask() {
         const options = yield [];
 
         if (this.args.type === 'email') {
             const posts = yield this.store.query('post', {filter: '(status:published,status:sent)+newsletter_id:-null', limit: 'all'});
-            options.push({
-                groupName: 'Emails',
-                options: posts.map(mapResource)
-            });
+            options.push(...posts.map(mapResource));
             this._options = options;
             return;
         }
@@ -74,8 +125,8 @@ export default class GhResourceSelect extends Component {
 
         function mapResource(resource) {
             return {
-                name: resource.title,
-                id: resource.id
+                id: resource.id,
+                title: resource.title
             };
         }
 

ghost/admin/app/components/koenig-lexical-editor.js

@@ -1,6 +1,7 @@
 import * as Sentry from '@sentry/ember';
 import Component from '@glimmer/component';
 import React, {Suspense} from 'react';
+import ghostPaths from 'ghost-admin/utils/ghost-paths';
 import {action} from '@ember/object';
 import {inject as service} from '@ember/service';
 
@@ -108,11 +109,44 @@ export default class KoenigLexicalEditor extends Component {
     }
 
     ReactComponent = () => {
+        const [uploadProgressPercentage] = React.useState(0); // not in use right now, but will need to decide how to handle the percentage state and pass to the Image Cards
+
+        // const uploadProgress = (event) => {
+        //     const percentComplete = (event.loaded / event.total) * 100;
+        //     setUploadProgressPercentage(percentComplete);
+        // };
+
+        async function imageUploader(files) {
+            function uploadToUrl(formData, url) {
+                return new Promise((resolve, reject) => {
+                    const xhr = new XMLHttpRequest();
+                    xhr.open('POST', url);
+                    // xhr.upload.onprogress = (event) => {
+                    //     uploadProgress(event);
+                    // };
+                    xhr.onload = () => resolve(xhr.response);
+                    xhr.onerror = () => reject(xhr.statusText);
+                    xhr.send(formData);
+                });
+            }
+            const formData = new FormData();
+            formData.append('file', files[0]);
+            const url = `${ghostPaths().apiRoot}/images/upload/`;
+            const response = await uploadToUrl(formData, url);
+            const dataset = JSON.parse(response);
+            const imageUrl = dataset?.images?.[0].url;
+            return {
+                src: imageUrl
+            };
+        }
         return (
             <div className={['koenig-react-editor', this.args.className].filter(Boolean).join(' ')}>
                 <ErrorHandler>
                     <Suspense fallback={<p className="koenig-react-editor-loading">Loading editor...</p>}>
-                        <KoenigComposer initialEditorState={this.args.lexical} onError={this.onError}>
+                        <KoenigComposer 
+                            initialEditorState={this.args.lexical} 
+                            onError={this.onError} 
+                            imageUploadFunction={{imageUploader, uploadProgressPercentage}} >
                             <KoenigEditor onChange={this.args.onChange} />
                         </KoenigComposer>
                     </Suspense>

ghost/admin/app/components/member-attribution/source-attribution-table.js

@@ -36,7 +36,7 @@ export default class SourceAttributionTable extends Component {
             return null;
         }
 
-        if (this.sortedSources.length === 5 && !this.unavailableSource.length) {
+        if (this.sortedSources.length === 5 && !this.unavailableSource?.length) {
             return null;
         }
 

ghost/admin/app/components/member/activity-feed.hbs

@@ -6,7 +6,7 @@
         </div>
     </div>
 {{else}}
-    {{#let (members-event-fetcher filter=(members-event-filter [email protected]) pageSize=5) as |eventsFetcher|}}
+    {{#let (members-event-fetcher filter=(members-event-filter [email protected] excludedEvents=this.excludedEventTypes) pageSize=5) as |eventsFetcher|}}
         <div class="gh-main-section-content grey {{if eventsFetcher.data "" "mt8"}}">
             <div class="gh-member-feed {{if eventsFetcher.data "" "gh-member-feed-no-data"}}" ...attributes>
                 <div class="flex-auto flex flex-column items-stretch {{if eventsFetcher.data "justify-between" "h-100 justify-center"}}">

ghost/admin/app/components/member/activity-feed.js

@@ -3,6 +3,7 @@ import {action} from '@ember/object';
 
 export default class ActivityFeed extends Component {
     linkScrollerTimeout = null; // needs to be global so can be cleared when needed across functions
+    excludedEventTypes = ['email_sent_event'];
 
     @action
     enterLinkURL(event) {
@@ -29,4 +30,4 @@ export default class ActivityFeed extends Component {
         child.style.transform = 'translateX(0)';
         parent.classList.remove('scroller');
     }
-}
+}

ghost/admin/app/components/members-activity/event-type-filter.js

@@ -22,6 +22,12 @@ export default class MembersActivityEventTypeFilter extends Component {
         if (this.settings.commentsEnabled !== 'off') {
             extended.push({event: 'comment_event', icon: 'event-comment', name: 'Comments'});
         }
+        if (this.settings.emailTrackClicks) {
+            extended.push({event: 'click_event', icon: 'event-click', name: 'Clicked link'});
+        }
+        if (this.feature.audienceFeedback) {
+            extended.push({event: 'feedback_event', icon: 'event-more-like-this', name: 'Feedback'});
+        }
 
         if (this.args.hiddenEvents?.length) {
             return extended.filter(t => !this.args.hiddenEvents.includes(t.event));

ghost/admin/app/components/members/filter-value.hbs

@@ -47,47 +47,15 @@
          <GhResourceSelect
             @onChange={{fn this.setResourceFilterValue @filter}}
             @type={{this.resourceFilterType}}
-            @resources={{this.resourceFilterValue}}
+            @resource={{this.resourceFilterValue}}
         />
     </div>
 
-{{else if (eq @filter.type 'subscribed')}}
+{{else if (eq @filter.valueType 'options')}}
     <span class="gh-select">
         <OneWaySelect
             @value={{@filter.value}}
-            @options={{this.availableFilterOptions.subscribed}}
-            @optionValuePath="name"
-            @optionLabelPath="label"
-            @optionTargetPath="name"
-            @update={{fn @setFilterValue @filter}}
-            data-test-select="members-filter-value"
-        />
-        {{svg-jar "arrow-down-small"}}
-    </span>
-
-{{else if (eq @filter.type 'last_seen_at')}}
-    <GhDatePicker
-        @value={{@filter.value}}
-        @maxDate={{now}}
-        @maxDateError="Must be in the past"
-        @onChange={{fn @setFilterValue @filter}}
-        data-test-input="members-filter-value"
-    />
-
-{{else if (eq @filter.type 'created_at')}}
-    <GhDatePicker
-        @value={{@filter.value}}
-        @maxDate={{now}}
-        @maxDateError="Must be in the past"
-        @onChange={{fn @setFilterValue @filter}}
-        data-test-input="members-filter-value"
-    />
-
-{{else if (eq @filter.type 'status')}}
-    <span class="gh-select">
-        <OneWaySelect
-            @value={{@filter.value}}
-            @options={{this.availableFilterOptions.status}}
+            @options={{@filter.options}}
             @optionValuePath="name"
             @optionLabelPath="label"
             @optionTargetPath="name"
@@ -132,46 +100,19 @@
             {{on "input" (fn this.setInputFilterValue @filter)}}
             {{on "blur" (fn this.updateInputFilterValue @filter)}}
             {{on "keypress" (fn this.updateInputFilterValueOnEnter @filter)}}
-        data-test-input="members-filter-value"
+            data-test-input="members-filter-value"
         />
     </div>
-
-{{else if (eq @filter.type 'subscriptions.plan_interval')}}
-    <span class="gh-select">
-        <OneWaySelect
-            @value={{@filter.value}}
-            @options={{this.availableFilterOptions.subscriptionPriceInterval}}
-            @optionValuePath="name"
-            @optionLabelPath="label"
-            @optionTargetPath="name"
-            @update={{fn @setFilterValue @filter}}
-            data-test-select="members-filter-value"
-        />
-        {{svg-jar "arrow-down-small"}}
-    </span>
-
-{{else if (eq @filter.type 'subscriptions.status')}}
-    <span class="gh-select">
-        <OneWaySelect
-            @value={{@filter.value}}
-            @options={{this.availableFilterOptions.subscriptionStripeStatus}}
-            @optionValuePath="name"
-            @optionLabelPath="label"
-            @optionTargetPath="name"
-            @update={{fn @setFilterValue @filter}}
-            data-test-select="members-filter-value"
-        />
-        {{svg-jar "arrow-down-small"}}
-    </span>
-
-{{else if (eq @filter.type 'subscriptions.start_date')}}
+{{else if (or (eq @filter.type 'last_seen_at') (eq @filter.type 'created_at'))}}
     <GhDatePicker
         @value={{@filter.value}}
+        @maxDate={{now}}
+        @maxDateError="Must be in the past"
         @onChange={{fn @setFilterValue @filter}}
         data-test-input="members-filter-value"
     />
 
-{{else if (eq @filter.type 'subscriptions.current_period_end')}}
+{{else if (eq @filter.valueType 'date')}}
     <GhDatePicker
         @value={{@filter.value}}
         @onChange={{fn @setFilterValue @filter}}