🐛 Fixed missing server-side label search in recipient & segment selects (#26699)

kevinansfield · 9larsons · web-flow · commit ccf0833c66b5 · 2026-03-05T10:38:54.000Z
refs https://linear.app/tryghost/issue/ONC-1529 - The paginated label loading refactor (#26655) missed adding server-side search to `gh-members-recipient-select` and `gh-members-segment-select` - Users with many labels had to manually scroll through all pages before search could find labels not yet loaded client-side - Added conditional server-side search (via `labelsManager.searchLabelsTask`) to both components, matching the pattern already used by `gh-member-label-input` - Tiers, statuses, and offers are still filtered client-side since they're always fully loaded - Fixed labels found via search result not being selectable in some cases --------- Co-authored-by: Steve Larson <9larsons@gmail.com>
diff --git a/ghost/admin/app/components/gh-members-recipient-select.hbs b/ghost/admin/app/components/gh-members-recipient-select.hbs
@@ -55,7 +55,7 @@
             </div>
         </div>
     {{/if}}
-    {{#if this.specificOptions.length}}
+    {{#if this.hasSpecificOptions}}
         <div class="gh-publish-send-to-option">
             <div class="for-checkbox {{if @disabled "disabled"}}">
                 <label class="checkbox" for="send-email-to-specific">
@@ -81,20 +81,15 @@
 {{#if this.isSpecificChecked}}
     <div data-test-select="specific-members">
         <label class="gh-main-section-header small bn">Selection</label>
-        <GhTokenInput
-            @class="select-members select-members-recipient"
-            @dropdownClass={{@dropdownClass}}
-            @options={{this.specificOptions}}
-            @selected={{this.selectedSpecificOptions}}
+        <GhSegmentTokenInput
+            @nonLabelOptions={{this.nonLabelOptions}}
+            @selectedSegments={{this.selectedSpecificSegments}}
             @disabled={{@disabled}}
-            @searchMessage="All labels selected"
-            @optionsComponent={{component "power-select-options-with-scroll" lastReached=(perform this.loadMoreLabelsTask)}}
-            @allowCreation={{false}}
             @renderInPlace={{this.renderInPlace}}
             @onChange={{this.selectSpecificOptions}}
-            as |option|
-        >
-            {{option.name}}
-        </GhTokenInput>
+            @class="select-members select-members-recipient"
+            @dropdownClass={{@dropdownClass}}
+            @searchMessage="All labels selected"
+        />
     </div>
-{{/if}}
+{{/if}}
diff --git a/ghost/admin/app/components/gh-members-recipient-select.js b/ghost/admin/app/components/gh-members-recipient-select.js
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import flattenGroupedOptions from 'ghost-admin/utils/flatten-grouped-options';
 import {action} from '@ember/object';
 import {isBlank} from '@ember/utils';
 import {inject as service} from '@ember/service';
@@ -54,28 +53,16 @@ export default class GhMembersRecipientSelect extends Component {
         return this.forceSpecificChecked || this.specificFilters.size > 0;
     }
 
-    get specificOptions() {
-        const options = [...this._tierOptions];
-        const labels = this.labelsManager.labels;
-
-        if (labels.length > 0) {
-            options.push({
-                groupName: 'Labels',
-                options: labels.map(label => ({
-                    name: label.name,
-                    segment: `label:${label.slug}`,
-                    count: label.count?.members,
-                    class: 'segment-label'
-                }))
-            });
-        }
+    get hasSpecificOptions() {
+        return this._tierOptions.length > 0 || this.labelsManager.labels.length > 0;
+    }
 
-        return options;
+    get nonLabelOptions() {
+        return this._tierOptions;
     }
 
-    get selectedSpecificOptions() {
-        return flattenGroupedOptions(this.specificOptions)
-            .filter(o => this.specificFilters.has(o.segment));
+    get selectedSpecificSegments() {
+        return Array.from(this.specificFilters);
     }
 
     @action
@@ -155,15 +142,9 @@ export default class GhMembersRecipientSelect extends Component {
         this.args.onChange?.(newFilter);
     }
 
-    @task({drop: true})
-    *loadMoreLabelsTask() {
-        yield this.labelsManager.loadMoreTask.perform();
-    }
-
     @task
     *fetchSpecificOptionsTask() {
-        // fetch first page of labels (labels are last so infinite scroll works)
-        // TODO: add `include: 'count.members` to query once API is fixed
+        // fetch first page of labels for "Specific people" checkbox visibility
         yield this.labelsManager.loadMoreTask.perform();
 
         // fetch all tiers w̶i̶t̶h̶ c̶o̶u̶n̶t̶s̶
diff --git a/ghost/admin/app/components/gh-members-segment-select.hbs b/ghost/admin/app/components/gh-members-segment-select.hbs
@@ -1,17 +1,13 @@
-<GhTokenInput
-    @options={{this.options}}
-    @selected={{this.selectedOptions}}
+<GhSegmentTokenInput
+    @nonLabelOptions={{this.nonLabelOptions}}
+    @selectedSegments={{this.selectedSegments}}
+    @hideLabels={{this.hideLabelsComputed}}
     @disabled={{or @disabled this.fetchOptionsTask.isRunning}}
-    @optionsComponent={{component "power-select-options-with-scroll" lastReached=(perform this.loadMoreLabelsTask)}}
-    @allowCreation={{false}}
     @renderInPlace={{this.renderInPlace}}
     @onChange={{this.setSegment}}
     @class="select-members"
     @placeholder="Select a tier"
-    as |option|
->
-    {{option.name}}
-</GhTokenInput>
+/>
 
 <GhMembersSegmentCount
     @segment={{@segment}}
diff --git a/ghost/admin/app/components/gh-members-segment-select.js b/ghost/admin/app/components/gh-members-segment-select.js
@@ -7,7 +7,6 @@ import {tracked} from '@glimmer/tracking';
 export default class GhMembersSegmentSelect extends Component {
     @service store;
     @service feature;
-    @service labelsManager;
 
     @tracked _baseOptions = [];
 
@@ -20,55 +19,23 @@ export default class GhMembersSegmentSelect extends Component {
         this.fetchOptionsTask.perform();
     }
 
-    get _options() {
-        const options = [...this._baseOptions];
-        const labels = this.labelsManager.labels;
-
-        if (labels.length > 0 && !this.args.hideLabels) {
-            options.push({
-                groupName: 'Labels',
-                options: labels.map(label => ({
-                    name: label.name,
-                    segment: `label:${label.slug}`,
-                    count: label.count?.members,
-                    class: 'segment-label'
-                }))
-            });
-        }
-
-        return options;
-    }
-
-    get options() {
+    get nonLabelOptions() {
         if (this.args.hideOptionsWhenAllSelected) {
-            const selectedSegments = this.selectedOptions.mapBy('segment');
-            if (selectedSegments.includes('status:free') && selectedSegments.includes('status:-free')) {
-                return this._options.filter(option => !option.groupName);
+            const segments = (this.args.segment || '').split(',');
+            if (segments.includes('status:free') && segments.includes('status:-free')) {
+                return this._baseOptions.filter(option => !option.groupName);
             }
         }
 
-        return this._options;
+        return this._baseOptions;
     }
 
-    get flatOptions() {
-        const options = [];
-
-        function getOptions(option) {
-            if (option.options) {
-                return option.options.forEach(getOptions);
-            }
-
-            options.push(option);
-        }
-
-        this._options.forEach(getOptions);
-
-        return options;
+    get selectedSegments() {
+        return (this.args.segment || '').split(',').filter(Boolean);
     }
 
-    get selectedOptions() {
-        const segments = (this.args.segment || '').split(',');
-        return this.flatOptions.filter(option => segments.includes(option.segment));
+    get hideLabelsComputed() {
+        return !!this.args.hideLabels;
     }
 
     @action
@@ -77,11 +44,6 @@ export default class GhMembersSegmentSelect extends Component {
         this.args.onChange?.(segment);
     }
 
-    @task({drop: true})
-    *loadMoreLabelsTask() {
-        yield this.labelsManager.loadMoreTask.perform();
-    }
-
     @task
     *fetchOptionsTask() {
         const options = yield [];
@@ -157,9 +119,5 @@ export default class GhMembersSegmentSelect extends Component {
         }
 
         this._baseOptions = options;
-
-        // fetch first page of labels (labels are last so infinite scroll works)
-        // TODO: add `include: 'count.members` to query once API is fixed
-        yield this.labelsManager.loadMoreTask.perform();
     }
 }
diff --git a/ghost/admin/app/components/gh-segment-token-input.hbs b/ghost/admin/app/components/gh-segment-token-input.hbs
@@ -0,0 +1,17 @@
+<GhTokenInput
+    @options={{this.mergedOptions}}
+    @selected={{this.selectedOptions}}
+    @disabled={{@disabled}}
+    @optionsComponent={{component "power-select-options-with-scroll" lastReached=(perform this.loadMoreLabelsTask)}}
+    @allowCreation={{false}}
+    @search={{if this.useServerSideSearch (perform this.searchTask) null}}
+    @renderInPlace={{this.renderInPlace}}
+    @onChange={{@onChange}}
+    @class={{@class}}
+    @dropdownClass={{@dropdownClass}}
+    @searchMessage={{@searchMessage}}
+    @placeholder={{@placeholder}}
+    as |option|
+>
+    {{option.name}}
+</GhTokenInput>
diff --git a/ghost/admin/app/components/gh-segment-token-input.js b/ghost/admin/app/components/gh-segment-token-input.js
@@ -0,0 +1,98 @@
+import Component from '@glimmer/component';
+import flattenGroupedOptions from 'ghost-admin/utils/flatten-grouped-options';
+import {inject as service} from '@ember/service';
+import {task} from 'ember-concurrency';
+
+export default class GhSegmentTokenInput extends Component {
+    @service labelsManager;
+
+    constructor() {
+        super(...arguments);
+        if (!this.args.hideLabels && !this.labelsManager.hasLoaded) {
+            this.labelsManager.loadMoreTask.perform();
+        }
+    }
+
+    get mergedOptions() {
+        const options = [...(this.args.nonLabelOptions || [])];
+        const labels = this.labelsManager.labels;
+
+        if (labels.length > 0 && !this.args.hideLabels) {
+            options.push({
+                groupName: 'Labels',
+                options: labels.map(label => ({
+                    name: label.name,
+                    segment: `label:${label.slug}`,
+                    count: label.count?.members,
+                    class: 'segment-label'
+                }))
+            });
+        }
+
+        return options;
+    }
+
+    get selectedOptions() {
+        const segments = this.args.selectedSegments || [];
+        const segmentSet = new Set(segments);
+        return flattenGroupedOptions(this.mergedOptions)
+            .filter(option => segmentSet.has(option.segment));
+    }
+
+    get useServerSideSearch() {
+        if (this.args.hideLabels) {
+            return false;
+        }
+        return !this.labelsManager.hasLoadedAll;
+    }
+
+    get renderInPlace() {
+        return this.args.renderInPlace === undefined ? false : this.args.renderInPlace;
+    }
+
+    @task({restartable: true})
+    *searchTask(term) {
+        const results = [];
+        const selectedSegments = new Set(this.args.selectedSegments || []);
+        const lowerTerm = term.toLowerCase();
+
+        // Client-side filter non-label options
+        for (const item of (this.args.nonLabelOptions || [])) {
+            if (item.options) {
+                for (const opt of item.options) {
+                    if (opt.name.toLowerCase().includes(lowerTerm) && !selectedSegments.has(opt.segment)) {
+                        results.push(opt);
+                    }
+                }
+            } else if (item.name.toLowerCase().includes(lowerTerm) && !selectedSegments.has(item.segment)) {
+                results.push(item);
+            }
+        }
+
+        // Server-side search labels
+        if (!this.args.hideLabels) {
+            const labels = yield this.labelsManager.searchLabelsTask.perform(term);
+            labels.forEach((label) => {
+                const segment = `label:${label.slug}`;
+                if (!selectedSegments.has(segment)) {
+                    results.push({
+                        name: label.name,
+                        segment,
+                        count: label.count?.members,
+                        class: 'segment-label'
+                    });
+                }
+            });
+        }
+
+        return results;
+    }
+
+    @task({drop: true})
+    *loadMoreLabelsTask() {
+        if (this.args.hideLabels) {
+            return;
+        }
+        yield this.labelsManager.loadMoreTask.perform();
+    }
+}
diff --git a/ghost/admin/app/services/labels-manager.js b/ghost/admin/app/services/labels-manager.js
@@ -74,6 +74,12 @@ export default class LabelsManagerService extends Service {
     *searchLabelsTask(term, {page = 1} = {}) {
         yield timeout(250);
         const safeTerm = term.replace(/'/g, `\\'`);
-        return yield this.store.query('label', {filter: `name:~'${safeTerm}'`, limit: PAGE_SIZE, page, order: 'name asc'});
+        const labels = yield this.store.query('label', {filter: `name:~'${safeTerm}'`, limit: PAGE_SIZE, page, order: 'name asc'});
+
+        // Register search results so they can be resolved by findBySlug/selectedOptions
+        // even if they weren't in the initially paginated set
+        labels.forEach(label => this.addLabel(label));
+
+        return labels;
     }
 }
diff --git a/ghost/admin/mirage/config/labels.js b/ghost/admin/mirage/config/labels.js
@@ -1,8 +1,28 @@
-import {paginatedResponse} from '../utils';
+import {extractFilterParam, paginateModelCollection} from '../utils';
 
 export default function mockLabels(server) {
     server.post('/labels/');
-    server.get('/labels/', paginatedResponse('labels'));
+
+    server.get('/labels/', function ({labels}, request) {
+        let page = +request.queryParams.page || 1;
+        let limit = request.queryParams.limit;
+        let collection = labels.all();
+
+        // Handle filter param for server-side search (e.g. filter=name:~'term')
+        const nameFilter = extractFilterParam('name', request.queryParams.filter);
+        if (nameFilter) {
+            const term = nameFilter.toLowerCase();
+            collection.models = collection.models.filter(
+                label => label.name.toLowerCase().includes(term)
+            );
+        }
+
+        if (limit !== 'all') {
+            limit = +limit || 15;
+        }
+
+        return paginateModelCollection('labels', collection, page, limit);
+    });
 
     server.get('/labels/:id/', function ({labels}, {params}) {
         let {id} = params;
diff --git a/ghost/admin/tests/integration/components/gh-members-recipient-select-test.js b/ghost/admin/tests/integration/components/gh-members-recipient-select-test.js
diff --git a/ghost/admin/tests/integration/components/gh-members-segment-select-test.js b/ghost/admin/tests/integration/components/gh-members-segment-select-test.js
diff --git a/ghost/admin/tests/integration/services/labels-manager-test.js b/ghost/admin/tests/integration/services/labels-manager-test.js

Original file line number	Diff line number	Diff line change
`@@ -74,6 +74,12 @@ export default class LabelsManagerService extends Service {`
`74`	`74`	`*searchLabelsTask(term, {page = 1} = {}) {`
`75`	`75`	`yield timeout(250);`
`76`	`76`	const safeTerm = term.replace(/'/g, `\\'`);
`77`		- return yield this.store.query('label', {filter: `name:~'${safeTerm}'`, limit: PAGE_SIZE, page, order: 'name asc'});
	`77`	+ const labels = yield this.store.query('label', {filter: `name:~'${safeTerm}'`, limit: PAGE_SIZE, page, order: 'name asc'});
	`78`	`+`
	`79`	`+ // Register search results so they can be resolved by findBySlug/selectedOptions`
	`80`	`+ // even if they weren't in the initially paginated set`
	`81`	`+ labels.forEach(label => this.addLabel(label));`
	`82`	`+`
	`83`	`+ return labels;`
`78`	`84`	`}`
`79`	`85`	`}`