hypertable v2: add support for empty_state_message (#217)

* hypertable v2: add support for empty_state_message

* add more test scenarios for rows and fix tests

* hyper-table-v2/filtering-renderers/numeric: add multiplier option, allows for extension in money-type columns

addon-test-support/rows-fetcher.ts

@@ -26,6 +26,17 @@ export default class RowsFetcher {
           bar: 'second bar',
           total: 123123,
           date: 0
+        },
+        {
+          influencerId: 44,
+          recordId: 14,
+          record_id: 14,
+          holderId: 58,
+          holderType: 'list',
+          foo: null,
+          bar: 'second bar',
+          total: null,
+          date: 0
         }
       ],
       meta: { total: 12 }

addon/components/hyper-table-v2/cell-renderers/date.hbs

@@ -1,5 +1,7 @@
 {{#if this.value}}
   {{this.formattedDate}}
 {{else}}
-  —
+  <span class="font-color-gray-500">
+    {{or @column.definition.empty_state_message "—"}}
+  </span>
 {{/if}}

addon/components/hyper-table-v2/cell-renderers/numeric.hbs

@@ -6,6 +6,8 @@
   </div>
 {{else}}
   <div class="fx-row fx-1 fx-malign-start">
-    —
+    <span class="font-color-gray-500">
+      {{or @column.definition.empty_state_message "—"}}
+    </span>
   </div>
 {{/if}}

addon/components/hyper-table-v2/cell-renderers/text.hbs

@@ -3,5 +3,7 @@
     {{this.value}}
   </span>
 {{else}}
-  —
+  <span class="font-color-gray-500">
+    —
+  </span>
 {{/if}}

addon/components/hyper-table-v2/filtering-renderers/numeric.ts

@@ -15,10 +15,11 @@ interface HyperTableV2FilteringRenderersNumericArgs {
 }
 
 const RANGE_DEBOUNCE_TIME = 500;
+const DEFAULT_MULTIPLIER = 1;
 
 export default class HyperTableV2FilteringRenderersNumeric extends Component<HyperTableV2FilteringRenderersNumericArgs> {
-  @tracked lowerBoundFilter = '';
-  @tracked upperBoundFilter = '';
+  @tracked lowerBoundFilter: string = '';
+  @tracked upperBoundFilter: string = '';
 
   orderingDirections: { [key: string]: OrderDirection } = Object.freeze({
     '0 — 9': 'asc',
@@ -27,14 +28,19 @@ export default class HyperTableV2FilteringRenderersNumeric extends Component<Hyp
 
   constructor(owner: unknown, args: HyperTableV2FilteringRenderersNumericArgs) {
     super(owner, args);
+
     args.handler.on('reset-columns', (columns) => {
       if (columns.includes(args.column)) {
         this._resetStates();
       }
     });
 
-    this.lowerBoundFilter = args.column.filters.find((filter) => filter.key === 'lower_bound')?.value || '';
-    this.upperBoundFilter = args.column.filters.find((filter) => filter.key === 'upper_bound')?.value || '';
+    this.initLowerBound();
+    this.initUpperBound();
+  }
+
+  get multiplier(): number {
+    return DEFAULT_MULTIPLIER;
   }
 
   get hasBoundFiltersDefined(): boolean {
@@ -69,8 +75,32 @@ export default class HyperTableV2FilteringRenderersNumeric extends Component<Hyp
 
   private _addRangeFilter(): void {
     this.args.handler.applyFilters(this.args.column, [
-      ...(this.lowerBoundFilter ? [{ key: 'lower_bound', value: this.lowerBoundFilter }] : []),
-      ...(this.upperBoundFilter ? [{ key: 'upper_bound', value: this.upperBoundFilter }] : [])
+      ...(this.lowerBoundFilter
+        ? [{ key: 'lower_bound', value: (parseInt(this.lowerBoundFilter) * this.multiplier).toString() }]
+        : []),
+      ...(this.upperBoundFilter
+        ? [{ key: 'upper_bound', value: (parseInt(this.upperBoundFilter) * this.multiplier).toString() }]
+        : [])
     ]);
   }
+
+  private initLowerBound(): void {
+    this.lowerBoundFilter = '';
+
+    if (this.args.column.filters.find((filter) => filter.key === 'lower_bound')?.value) {
+      this.lowerBoundFilter = (
+        parseInt(this.args.column.filters.find((filter) => filter.key === 'lower_bound')!.value) / this.multiplier
+      ).toString();
+    }
+  }
+
+  private initUpperBound(): void {
+    this.upperBoundFilter = '';
+
+    if (this.args.column.filters.find((filter) => filter.key === 'upper_bound')?.value) {
+      this.upperBoundFilter = (
+        parseInt(this.args.column.filters.find((filter) => filter.key === 'upper_bound')!.value) / this.multiplier
+      ).toString();
+    }
+  }
 }

addon/core/interfaces/column.ts

@@ -19,6 +19,7 @@ export type ColumnDefinition = {
   filterable_by: string[] | null;
   facetable: boolean;
   facetable_by: string[] | null;
+  empty_state_message?: string;
   position?: {
     sticky: boolean;
   };

tests/integration/components/hyper-table-v2-test.ts

@@ -42,9 +42,9 @@ module('Integration | Component | hyper-table-v2', function (hooks) {
   test('it sets up the rows correctly', async function (assert: Assert) {
     await render(hbs`<HyperTableV2 @handler={{this.handler}} />`);
 
-    assert.dom('.hypertable__cell').exists({ count: 8 });
-    assert.dom('.hypertable__sticky-columns .hypertable__column .hypertable__cell').exists({ count: 2 });
-    assert.dom('.hypertable__column:nth-child(2) .hypertable__cell').exists({ count: 2 });
+    assert.dom('.hypertable__cell').exists({ count: 12 });
+    assert.dom('.hypertable__sticky-columns .hypertable__column .hypertable__cell').exists({ count: 3 });
+    assert.dom('.hypertable__column:nth-child(2) .hypertable__cell').exists({ count: 3 });
   });
 
   test('it resets the filters', async function (assert: Assert) {
@@ -155,7 +155,7 @@ module('Integration | Component | hyper-table-v2', function (hooks) {
       await render(hbs`<HyperTableV2 @handler={{this.handler}} @features={{hash selection=true}} />`);
 
       assert.dom('.hypertable__column.hypertable__column--selection').exists();
-      assert.dom('.upf-checkbox').exists({ count: 3 });
+      assert.dom('.upf-checkbox').exists({ count: 4 });
     });
 
     test('the selection column is present when the feature is enabled', async function (assert: Assert) {
@@ -258,7 +258,7 @@ module('Integration | Component | hyper-table-v2', function (hooks) {
         await click('.hypertable__column.hypertable__column--selection header .upf-checkbox');
         assert
           .dom('.hypertable__column.hypertable__column--selection .hypertable__cell .upf-checkbox')
-          .exists({ count: 2 });
+          .exists({ count: 3 });
         findAll('.hypertable__column.hypertable__column--selection .hypertable__cell .upf-checkbox input').forEach(
           (checkbox) => {
             assert.dom(checkbox).isChecked();
@@ -309,7 +309,7 @@ module('Integration | Component | hyper-table-v2', function (hooks) {
 
         assert
           .dom('.hypertable__column.hypertable__column--selection .hypertable__cell .upf-checkbox')
-          .exists({ count: 2 });
+          .exists({ count: 3 });
         findAll('.hypertable__column.hypertable__column--selection .hypertable__cell .upf-checkbox input').forEach(
           (checkbox) => {
             assert.dom(checkbox).isChecked();

tests/integration/components/hyper-table-v2/cell-renderers/date-test.ts

@@ -42,4 +42,16 @@ module('Integration | Component | hyper-table-v2/cell-renderers/date', function
     assert.equal(this.row[this.column.definition.key], '0');
     assert.dom().hasText('—');
   });
+
+  test('it renders @column.definition.empty_state_message when present and the value is null', async function (assert) {
+    this.column = this.handler.columns[3];
+    this.column.definition.empty_state_message = 'No date';
+    this.row = this.handler.rows[1];
+
+    await render(
+      hbs`<HyperTableV2::CellRenderers::Date @handler={{this.handler}} @row={{this.row}} @column={{this.column}} />`
+    );
+
+    assert.dom().hasText('No date');
+  });
 });

tests/integration/components/hyper-table-v2/cell-renderers/numeric-test.ts

@@ -42,4 +42,27 @@ module('Integration | Component | hyper-table-v2/cell-renderers/numeric', functi
     assert.equal(this.row[this.column.definition.key], '123123');
     assert.dom().hasText('123k');
   });
+
+  test('it renders a default - when the value is null', async function (assert) {
+    this.column = this.handler.columns[2];
+    this.row = this.handler.rows[2];
+
+    await render(
+      hbs`<HyperTableV2::CellRenderers::Numeric @handler={{this.handler}} @row={{this.row}} @column={{this.column}} />`
+    );
+
+    assert.dom().hasText('—');
+  });
+
+  test('it renders @column.definition.empty_state_message when present and the value is null', async function (assert) {
+    this.column = this.handler.columns[2];
+    this.column.definition.empty_state_message = 'Custom empty';
+    this.row = this.handler.rows[2];
+
+    await render(
+      hbs`<HyperTableV2::CellRenderers::Numeric @handler={{this.handler}} @row={{this.row}} @column={{this.column}} />`
+    );
+
+    assert.dom().hasText('Custom empty');
+  });
 });

tests/integration/components/hyper-table-v2/cell-renderers/text-test.ts

@@ -29,4 +29,15 @@ module('Integration | Component | hyper-table-v2/cell-renderers/text', function
     assert.equal(this.row[this.column.definition.key], 'ekip');
     assert.dom('span').hasText('ekip');
   });
+
+  test('it renders a default - when the value is null', async function (assert) {
+    this.column = this.handler.columns[0];
+    this.row = this.handler.rows[2];
+
+    await render(
+      hbs`<HyperTableV2::CellRenderers::Text @handler={{this.handler}} @row={{this.row}} @column={{this.column}} />`
+    );
+
+    assert.dom().hasText('—');
+  });
 });

tests/unit/core/handler-test.ts

@@ -38,7 +38,7 @@ module('Unit | core/handler', function (hooks) {
       const handler = new TableHandler(getContext(), this.tableManager, this.rowsFetcher);
       assert.equal(handler.rows.length, 0);
       await handler.fetchRows();
-      assert.equal(handler.rows.length, 2);
+      assert.equal(handler.rows.length, 3);
     });
 
     test('it removes duplicated row by record_id', async function (assert: Assert) {
@@ -224,7 +224,7 @@ module('Unit | core/handler', function (hooks) {
       handler.applyOrder(handler.columns[1], 'asc');
       handler.toggleSelectAll(true);
 
-      assert.equal(handler.selection.length, 2);
+      assert.equal(handler.selection.length, 3);
 
       handler.resetColumns(handler.columns);
 
@@ -243,18 +243,18 @@ module('Unit | core/handler', function (hooks) {
     assert.ok(rowsFetcherSpy.fetch.calledTwice);
     // @ts-ignore
     assert.ok(rowsFetcherSpy.fetch.calledWithExactly(1, 20));
-    assert.equal(handler.rows.length, 2);
+    assert.equal(handler.rows.length, 3);
   });
 
   test('Handler#removeRow', async function (assert: Assert) {
     const handler = new TableHandler(getContext(), this.tableManager, this.rowsFetcher);
     const handlerTriggerEventSpy = sinon.spy(handler, 'triggerEvent');
 
     await handler.fetchRows();
-    assert.equal(handler.rows.length, 2);
+    assert.equal(handler.rows.length, 3);
 
     handler.removeRow(12);
-    assert.equal(handler.rows.length, 1);
+    assert.equal(handler.rows.length, 2);
     assert.equal(handler.rows[0].recordId, 13);
     // @ts-ignore
     assert.ok(handlerTriggerEventSpy.calledOnceWithExactly('remove-row'));
@@ -302,7 +302,7 @@ module('Unit | core/handler', function (hooks) {
 
       await handler.fetchRows();
       handler.toggleSelectAll(true);
-      assert.equal(handler.selection.length, 2);
+      assert.equal(handler.selection.length, 3);
     });
 
     test('it selects all the rows', async function (assert: Assert) {