fix: 🐛 Fix filters sometimes not being displayed

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

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`<FilterTags @filters={{this.filter}} />`);
+
+    assert.dom('.hds-tag__text').hasText('1');
+  });
 });

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],