Updated facets loader to include radio button exclusive option

addon/components/hyper-table-v2/filtering-renderers/common/facets-loader.hbs

@@ -31,12 +31,19 @@
                 <OSS::Icon @icon="fa-spinner-third fa-spin" />
               </span>
             {{else}}
-              <OSS::Checkbox
-                @checked={{array-includes this.appliedFacets facet.identifier}}
-                @size="sm"
-                @onChange={{fn this.toggleFacet facet}}
-                class="margin-right-px-12"
-              />
+              {{#if @exclusive}}
+                <OSS::RadioButton
+                  @selected={{array-includes this.appliedFacets facet.identifier}}
+                  class="margin-right-px-12"
+                />
+              {{else}}
+                <OSS::Checkbox
+                  @checked={{array-includes this.appliedFacets facet.identifier}}
+                  @size="sm"
+                  @onChange={{fn this.toggleFacet facet}}
+                  class="margin-right-px-12"
+                />
+              {{/if}}
             {{/if}}
             {{yield (hash appliedFacets=this.appliedFacets facet=facet) to="facet-item"}}
           </div>

addon/components/hyper-table-v2/filtering-renderers/common/facets-loader.ts

@@ -17,6 +17,7 @@ interface FacetsLoaderArgs {
   searchEnabled: boolean;
   searchPlaceholder?: string;
   displaySearchLabel?: boolean;
+  exclusive?: boolean;
   sortCompareFn?(a: Facet, b: Facet): number;
 }
 
@@ -79,7 +80,9 @@ export default class HyperTableV2FacetsLoader extends Component<FacetsLoaderArgs
     if (this.ongoingFacetApply) return;
     debounce(
       this,
-      this.appliedFacets.includes(facet.identifier) ? this.removeFacet : this.addFacet,
+      () => {
+        this.appliedFacets.includes(facet.identifier) ? this.removeFacet(facet) : this.addFacet(facet);
+      },
       facet,
       FACET_APPLY_DEBOUNCE_TIME
     );
@@ -89,22 +92,22 @@ export default class HyperTableV2FacetsLoader extends Component<FacetsLoaderArgs
     let facetFilter: Filter = { key: this.filteringKey, value: facet.identifier };
     const existingFilter = this.args.column.filters.find((filter) => filter.key === this.filteringKey);
 
-    if (existingFilter) {
+    if (existingFilter && !this.args.exclusive) {
       facetFilter = { key: this.filteringKey, value: [existingFilter.value, facet.identifier].join(',') };
     }
 
     this.ongoingFacetApply = true;
     this.args.handler
       .applyFilters(this.args.column, [facetFilter])
       .then(() => {
-        this.appliedFacets = [...this.appliedFacets, ...[facet.identifier]];
+        this.appliedFacets = [...(this.args.exclusive ? [] : this.appliedFacets), ...[facet.identifier]];
       })
       .finally(() => {
         this.ongoingFacetApply = false;
       });
   }
 
-  private removeFacet(facet: Facet): void {
+  private removeFacet(facet: Facet): Promise<void> {
     const existingFilter = this.args.column.filters.find((filter) => filter.key === this.filteringKey);
 
     if (existingFilter) {
@@ -118,7 +121,7 @@ export default class HyperTableV2FacetsLoader extends Component<FacetsLoaderArgs
       }
 
       this.ongoingFacetApply = true;
-      this.args.handler
+      return this.args.handler
         .applyFilters(this.args.column, [facetFilter])
         .then(() => {
           this.appliedFacets = this.appliedFacets.filter((x) => x !== facet.identifier);
@@ -127,6 +130,7 @@ export default class HyperTableV2FacetsLoader extends Component<FacetsLoaderArgs
           this.ongoingFacetApply = false;
         });
     }
+    return Promise.resolve();
   }
 
   private fetchFacets(): void {

tests/integration/components/hyper-table-v2/filtering-renderers/common/facets-loader-test.ts

@@ -1,7 +1,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { setupIntl } from 'ember-intl/test-support';
-import { click, fillIn, triggerKeyEvent, render, type TestContext } from '@ember/test-helpers';
+import { click, fillIn, triggerKeyEvent, render, type TestContext, findAll } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import sinon from 'sinon';
 
@@ -212,4 +212,44 @@ module('Integration | Component | hyper-table-v2/facets-loader', function (hooks
       assert.dom('.hypertable__facetting').hasText('nothing here');
     });
   });
+
+  module('@exclusive mode', function () {
+    test('When @exclusive is true, facets are displayed as radio buttons', async function (this: TestContext, assert: Assert) {
+      await render(
+        hbs`<HyperTableV2::FilteringRenderers::Common::FacetsLoader @handler={{this.handler}} @column={{this.column}} @searchEnabled={{false}} @exclusive={true}/>`
+      );
+
+      assert.dom('.hypertable__facetting .item').exists({ count: 2 });
+      assert.dom('.hypertable__facetting .item .oss-radio-btn').exists({ count: 2 });
+      assert.dom('.hypertable__facetting .item .upf-checkbox').doesNotExist();
+    });
+
+    test('when @exclusive is true, selecting a facet removes previously applied facets', async function (this: TestContext, assert: Assert) {
+      await render(
+        hbs`<HyperTableV2::FilteringRenderers::Common::FacetsLoader @handler={{this.handler}} @column={{this.column}} @searchEnabled={{false}} @exclusive={true}/>`
+      );
+
+      const radioRows = findAll('.hypertable__facetting .item');
+      await click(radioRows[0]);
+      assert.dom('.hypertable__facetting .item:nth-child(1) .oss-radio-btn--selected').exists();
+
+      await click(radioRows[1]);
+      assert.dom(radioRows[1].querySelector('.oss-radio-btn--selected')).exists();
+      assert.dom(radioRows[0].querySelector('.oss-radio-btn--selected')).doesNotExist();
+    });
+
+    test('when @exclusive is true, selecting a facet calls the applyFilters method of the table handler', async function (this: TestContext, assert: Assert) {
+      const applyFiltersSpy = sinon.spy(this.handler, 'applyFilters');
+      await render(
+        hbs`<HyperTableV2::FilteringRenderers::Common::FacetsLoader @handler={{this.handler}} @column={{this.column}} @searchEnabled={{false}} @exclusive={true}/>`
+      );
+
+      const radioRows = findAll('.hypertable__facetting .item');
+      await click(radioRows[0]);
+      assert.ok(applyFiltersSpy.calledWithExactly(this.column, [{ key: 'value', value: 'band:1' }]));
+
+      await click(radioRows[1]);
+      assert.ok(applyFiltersSpy.calledWithExactly(this.column, [{ key: 'value', value: 'band:2' }]));
+    });
+  });
 });

tests/integration/components/hyper-table/cell-renderers/image-test.js

@@ -7,8 +7,8 @@ module('Integration | Component | hyper-table/cell-renderers/image', function (h
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
-    this.item = { imageURL: 'foo.png' };
-    this.column = { key: 'imageURL' };
+    this.item = { imageURL: 'foo.png', name: 'FooBar' };
+    this.column = { key: 'imageURL', labels: ['name'] };
 
     await render(hbs`<HyperTable::CellRenderers::Image @item={{this.item}} @column={{this.column}} />`);