diff --git a/addons/core/addon/components/filter-tags/index.js b/addons/core/addon/components/filter-tags/index.js index 2882b1e74..dec96a3ca 100644 --- a/addons/core/addon/components/filter-tags/index.js +++ b/addons/core/addon/components/filter-tags/index.js @@ -17,16 +17,27 @@ export default class FilterTagsIndexComponent extends Component { get filters() { const { allFilters, selectedFilters } = this.args.filters; - return Object.entries(allFilters).flatMap(([key, value]) => { - assert(`Tags must be an array for key ${key}`, Array.isArray(value)); - const paramsSet = new Set(selectedFilters[key]); - const filters = value.filter((item) => paramsSet.has(item.id)); + return Object.entries(allFilters).flatMap(([key, values]) => { + assert(`Tags must be an array for key ${key}`, Array.isArray(values)); + const uniqueSelectedFilters = [...new Set(selectedFilters[key])]; + if (!uniqueSelectedFilters.length) { + return []; + } - return filters.map((item) => ({ - id: item.id, - name: item.name, - type: key, - })); + const valueMap = new Map(values.map((value) => [value.id, value.name])); + + return uniqueSelectedFilters.filter(Boolean).map((item) => { + const filter = { + id: item, + type: key, + }; + + if (valueMap.has(item)) { + filter.name = valueMap.get(item); + } + + return filter; + }); }); } diff --git a/addons/core/tests/integration/components/filter-tags/index-test.js b/addons/core/tests/integration/components/filter-tags/index-test.js index 93cc8bfff..95349d7f4 100644 --- a/addons/core/tests/integration/components/filter-tags/index-test.js +++ b/addons/core/tests/integration/components/filter-tags/index-test.js @@ -22,4 +22,14 @@ module('Integration | Component | filter-tags/index', function (hooks) { assert.dom('.hds-tag__text').hasText('Project 1'); }); + + test('it renders id if allFilter does not have corresponding value', async function (assert) { + this.set('filter', { + allFilters: { scopes: [{ id: '2', name: 'Project 2' }] }, + selectedFilters: { scopes: ['1'] }, + }); + await render(hbs``); + + assert.dom('.hds-tag__text').hasText('1'); + }); }); diff --git a/ui/admin/app/controllers/scopes/scope/session-recordings/index.js b/ui/admin/app/controllers/scopes/scope/session-recordings/index.js index 658458fb5..cde82dc9a 100644 --- a/ui/admin/app/controllers/scopes/scope/session-recordings/index.js +++ b/ui/admin/app/controllers/scopes/scope/session-recordings/index.js @@ -12,7 +12,25 @@ import { restartableTask } from 'ember-concurrency'; class FilterOptions { @tracked search; - @tracked options = []; + @tracked _options = []; + #allOptions = new Map(); + + get options() { + return this._options; + } + + set options(newOptions) { + this._options = newOptions; + newOptions.forEach((option) => { + this.#allOptions.set(option.id, option); + }); + } + + // Keep track of all filter options that are loaded so they can be + // displayed in the selected filters regardless of search input + get allOptions() { + return Array.from(this.#allOptions.values()); + } } export default class ScopesScopeSessionRecordingsIndexController extends Controller { @@ -60,9 +78,9 @@ export default class ScopesScopeSessionRecordingsIndexController extends Control return { allFilters: { time: this.timeOptions, - users: this.userFilters.options, - scopes: this.scopeFilters.options, - targets: this.targetFilters.options, + users: this.userFilters.allOptions, + scopes: this.scopeFilters.allOptions, + targets: this.targetFilters.allOptions, }, selectedFilters: { time: [this.time],