Merge pull request finos#1603 from LeighFinegold/vertical-table

feat(calm-widgets): table enhancements to allow user to create a vertical orientated table

Author: rocketstack-matt

calm-widgets/README.md

@@ -17,9 +17,11 @@ Renders data as Markdown tables with support for nested objects and column filte
 
 {{!-- Filter specific columns --}}
 {{table services columns="name,port,version" key="id"}}
-```
 
+{{table services oritentation='vertical' columns="name,status"}}
+```
 **Options:**
+- `oritentation` (vertical | horizontal): table layout (default: horizontal)
 - `headers` (boolean): Show/hide table headers (default: true)
 - `columns` (string): Comma-separated list of columns to include
 - `key` (string): Property to use as unique identifier (default: "unique-id")

calm-widgets/src/widgets.e2e.spec.ts

@@ -54,6 +54,15 @@ describe('Widgets E2E - Handlebars Integration', () => {
 
             expect(result.trim()).toBe(expected);
         });
+
+        it('renders an flat vertical table', () => {
+            const { context, template, expected } = fixtures.loadFixture('table-widget', 'flat-vertical-table');
+
+            const compiledTemplate = handlebars.compile(template);
+            const result = compiledTemplate(context);
+
+            expect(result.trim()).toBe(expected);
+        });
     });
 
     describe('List Widget', () => {

calm-widgets/src/widgets/table/index.spec.ts

@@ -26,122 +26,146 @@ describe('TableWidget', () => {
         });
     });
 
-    describe('transformToViewModel', () => {
+    describe('transformToViewModel (array context)', () => {
         const data = [
             { 'unique-id': '1', name: 'Alice' },
             { 'unique-id': '2', name: 'Bob', extra: undefined },
             { 'unique-id': '', name: 'Empty ID' },
             { name: 'No ID' },
-            { 'unique-id': null }
+            { 'unique-id': null },
         ];
 
         it('transforms array with default options', () => {
             const vm = TableWidget.transformToViewModel!(data, {});
-            expect(vm.rows.length).toBe(5); // Now processes all valid objects
             expect(vm.headers).toBe(true);
-            expect(vm.rows[0]).toEqual({
-                id: '1', // Uses the unique-id value
-                data: { 'unique-id': '1', name: 'Alice' }
-            });
-            expect(vm.rows[1]).toEqual({
-                id: '2',
-                data: { 'unique-id': '2', name: 'Bob' }
-            });
-            expect(vm.rows[2]).toEqual({
-                id: '2', // Uses array index as fallback for empty unique-id
-                data: { 'unique-id': '', name: 'Empty ID' }
-            });
-            expect(vm.rows[3]).toEqual({
-                id: '3', // Uses array index as fallback for missing unique-id
-                data: { name: 'No ID' }
-            });
-            expect(vm.rows[4]).toEqual({
-                id: '4', // Uses array index as fallback for null unique-id
-                data: { 'unique-id': null }
-            });
-        });
-
-        it('transforms object into entries', () => {
-            const input = {
-                foo: { name: 'Foo' },
-                bar: { name: 'Bar' }
-            };
-            const vm = TableWidget.transformToViewModel!(input, {});
-            expect(vm.rows.length).toBe(2);
-            expect(vm.rows[0].id).toBe('foo');
-            expect(vm.rows[0].data).toEqual({ name: 'Foo', 'unique-id': 'foo' });
+            expect(vm.flatTable).toBe(false);
+            expect(vm.rows.length).toBe(5);
+            expect(vm.rows[0]).toEqual({ id: '1', data: { 'unique-id': '1', name: 'Alice' } });
+            expect(vm.rows[1]).toEqual({ id: '2', data: { 'unique-id': '2', name: 'Bob' } });
+            expect(vm.rows[2]).toEqual({ id: '2', data: { 'unique-id': '', name: 'Empty ID' } });
+            expect(vm.rows[3]).toEqual({ id: '3', data: { name: 'No ID' } });
+            expect(vm.rows[4]).toEqual({ id: '4', data: { 'unique-id': null } });
+        });
+
+        it('trims whitespace id and falls back to index', () => {
+            const vm = TableWidget.transformToViewModel!([{ 'unique-id': '   ', name: 'X' }], {});
+            expect(vm.rows[0]).toEqual({ id: '0', data: { 'unique-id': '   ', name: 'X' } });
+        });
+
+        it('respects headers option = false', () => {
+            const vm = TableWidget.transformToViewModel!(data, { headers: false });
+            expect(vm.headers).toBe(false);
+        });
+
+        it('filters columns correctly and sets flatTable', () => {
+            const vm = TableWidget.transformToViewModel!(data, { columns: 'name' });
+            expect(vm.flatTable).toBe(true);
+            expect(vm.columnNames).toEqual(['name']);
+            expect(vm.rows[0]).toEqual({ id: '1', data: { name: 'Alice' } });
+        });
+
+        it('filters columns and keeps key out of data', () => {
+            const vm = TableWidget.transformToViewModel!(data, { columns: 'name', key: 'unique-id' });
+            expect(vm.rows[0]).toEqual({ id: '1', data: { name: 'Alice' } });
+        });
+
+        it('injects unique-id into data when requested in columns', () => {
+            const vm = TableWidget.transformToViewModel!([{ name: 'Z' }], { columns: 'unique-id, name' });
+            expect(vm.rows[0]).toEqual({ id: '0', data: { 'unique-id': '0', name: 'Z' } });
+        });
+
+        it('injects id into data when requested in columns', () => {
+            const vm = TableWidget.transformToViewModel!([{ name: 'Y' }], { columns: 'id, name' });
+            expect(vm.rows[0]).toEqual({ id: '0', data: { id: '0', name: 'Y' } });
         });
 
         it('uses custom key', () => {
-            const custom = [{ key: 'abc', name: 'Test' }];
-            const vm = TableWidget.transformToViewModel!(custom, {
-                key: 'key'
-            });
+            const vm = TableWidget.transformToViewModel!([{ key: 'abc', name: 'Test' }], { key: 'key' });
             expect(vm.rows[0].id).toBe('abc');
+            expect(vm.rows[0].data).toEqual({ key: 'abc', name: 'Test' });
+        });
+
+        it('handles missing/non-string key by falling back to index', () => {
+            const vm = TableWidget.transformToViewModel!([{ id: 123 }, { id: null }, {}], { key: 'id' });
+            expect(vm.rows.length).toBe(3);
+            expect(vm.rows[0].id).toBe('123'); // numeric id is stringified, not dropped
+            expect(vm.rows[1].id).toBe('1');   // null -> fallback
+            expect(vm.rows[2].id).toBe('2');   // missing -> fallback
         });
+    });
 
-        it('skips records with missing or non-string key', () => {
-            const invalid = [{ id: 123 }, { id: null }, {}];
-            const vm = TableWidget.transformToViewModel!(invalid, {
-                key: 'id'
-            });
-            expect(vm.rows.length).toBe(3); // All objects processed with fallback indices
-            expect(vm.rows[0].id).toBe('0'); // Uses array index
-            expect(vm.rows[1].id).toBe('1');
-            expect(vm.rows[2].id).toBe('2');
+    describe('transformToViewModel (object context)', () => {
+        it('expands object entries where values are objects and attaches key', () => {
+            const input = { foo: { name: 'Foo' }, bar: { name: 'Bar' } };
+            const vm = TableWidget.transformToViewModel!(input, {});
+            expect(vm.flatTable).toBe(false);
+            expect(vm.rows.length).toBe(2);
+            expect(vm.rows[0]).toEqual({ id: 'foo', data: { name: 'Foo', 'unique-id': 'foo' } });
+            expect(vm.rows[1]).toEqual({ id: 'bar', data: { name: 'Bar', 'unique-id': 'bar' } });
         });
 
-        it('respects headers option = false', () => {
-            const vm = TableWidget.transformToViewModel!(data, {
-                headers: false
-            });
-            expect(vm.headers).toBe(false);
+        it('expands primitive values into { value, key } records', () => {
+            const input = { a: 1, b: 'x', c: { y: 2 } };
+            const vm = TableWidget.transformToViewModel!(input, {});
+            const asMap = Object.fromEntries(vm.rows.map(r => [r.id, r.data]));
+            expect(asMap['a']).toEqual({ value: 1, 'unique-id': 'a' });
+            expect(asMap['b']).toEqual({ value: 'x', 'unique-id': 'b' });
+            expect(asMap['c']).toEqual({ y: 2, 'unique-id': 'c' });
         });
 
-        it('filters columns correctly', () => {
-            const vm = TableWidget.transformToViewModel!(data, {
-                columns: 'name'
-            });
-            expect(vm.rows[0].data).toEqual({ name: 'Alice' });
+        it('single-row with columns when object itself has those columns', () => {
+            const input = { a: 1, b: 2, 'unique-id': 'row1', extra: undefined };
+            const vm = TableWidget.transformToViewModel!(input, { columns: 'a, b' });
+            expect(vm.flatTable).toBe(true);
+            expect(vm.rows.length).toBe(1);
+            expect(vm.rows[0]).toEqual({ id: '0', data: { a: 1, b: 2 } });
         });
 
-        it('filters columns and keeps key out of data', () => {
-            const vm = TableWidget.transformToViewModel!(data, {
-                columns: 'name', key: 'unique-id'
-            });
-            expect(vm.rows[0]).toEqual({
-                id: '1',
-                data: { name: 'Alice' }
-            });
-        });
-
-        it('works with object and columns', () => {
-            const input = {
-                foo: { a: 1, b: 2 },
-                bar: { a: 3, b: 4 }
-            };
-            const vm = TableWidget.transformToViewModel!(input, {
-                columns: 'a'
-            });
-            expect(vm.rows[0].data).toEqual({ a: 1 });
+
+        it('object with nested values and columns does not flatten (flatTable=false)', () => {
+            const input = { foo: { a: 1, b: 2 }, bar: { a: 3, b: 4 } };
+            const vm = TableWidget.transformToViewModel!(input, { columns: 'a' });
+            expect(vm.flatTable).toBe(false);
+            expect(vm.rows[0]).toEqual({ id: 'foo', data: { a: 1, b: 2, 'unique-id': 'foo' } });
+            expect(vm.rows[1]).toEqual({ id: 'bar', data: { a: 3, b: 4, 'unique-id': 'bar' } });
+        });
+
+        it('orientation="vertical" keeps single row; with columns uses only those fields', () => {
+            const input = { a: 1, b: 2, c: 3 };
+            const vm = TableWidget.transformToViewModel!(input, { orientation: 'vertical', columns: 'a, c' });
+            expect(vm.isVertical).toBe(true);
+            expect(vm.flatTable).toBe(true);
+            expect(vm.rows.length).toBe(1);
+            expect(vm.rows[0]).toEqual({ id: '0', data: { a: 1, c: 3 } });
         });
     });
 
-    describe('registerHelpers', () => {
-        const helpers = TableWidget.registerHelpers?.();
-        const fn = helpers?.objectEntries;
+    describe('error handling', () => {
+        it('throws on unsupported context', () => {
+            // @ts-expect-error – intentionally passing wrong type to validate error branch
+            expect(() => TableWidget.transformToViewModel!('nope', {})).toThrow();
+        });
+    });
 
-        it('objectEntries returns id/data pairs', () => {
-            const result = fn?.({ a: 1, b: 2 });
-            expect(result).toEqual([
+    describe('registerHelpers', () => {
+        it('exposes objectEntries and and, and they behave', () => {
+            expect(TableWidget.registerHelpers).toBeDefined();
+            const helpers = TableWidget.registerHelpers!();
+            const { objectEntries, and } = helpers;
+            expect(typeof objectEntries).toBe('function');
+            expect(typeof and).toBe('function');
+            expect(objectEntries({ a: 1, b: 2 })).toEqual([
                 { id: 'a', data: 1 },
-                { id: 'b', data: 2 }
+                { id: 'b', data: 2 },
             ]);
-        });
-
-        it('objectEntries returns empty for non-object or array', () => {
-            expect(fn?.(null)).toEqual([]);
-            expect(fn?.([1, 2, 3])).toEqual([]);
+            expect(objectEntries(null)).toEqual([]);
+            expect(objectEntries([1, 2, 3])).toEqual([]);
+            const opts: Record<string, never> = {};
+            expect(and(true, true, opts)).toBe(true);
+            expect(and(true, false, opts)).toBe(false);
+            expect(and(1, 'x', opts)).toBe(true);
+            expect(and(0, 'x', opts)).toBe(false);
         });
     });
+
 });