diff --git a/src/plugins/telemetryTable/TelemetryTableConfiguration.js b/src/plugins/telemetryTable/TelemetryTableConfiguration.js index 3ba170303b..8e50626696 100644 --- a/src/plugins/telemetryTable/TelemetryTableConfiguration.js +++ b/src/plugins/telemetryTable/TelemetryTableConfiguration.js @@ -35,8 +35,8 @@ define([ this.removeColumnsForObject = this.removeColumnsForObject.bind(this); this.objectMutated = this.objectMutated.bind(this); - //Make copy of configuration, otherwise change detection is impossible if shared instance is being modified. - this.oldConfiguration = JSON.parse(JSON.stringify(this.getConfiguration())); + + this.unlistenFromMutation = openmct.objects.observe(domainObject, 'configuration', this.objectMutated); } getConfiguration() { @@ -58,14 +58,9 @@ define([ * @private * @param {*} object */ - objectMutated(object) { - //Synchronize domain object reference. Duplicate object otherwise change detection becomes impossible. - this.domainObject = object; - //Was it the configuration that changed? - if (object.configuration !== undefined && !_.eq(object.configuration, this.oldConfiguration)) { - //Make copy of configuration, otherwise change detection is impossible if shared instance is being modified. - this.oldConfiguration = JSON.parse(JSON.stringify(this.getConfiguration())); - this.emit('change', object.configuration); + objectMutated(configuration) { + if (configuration !== undefined) { + this.emit('change', configuration); } } @@ -162,7 +157,9 @@ define([ this.updateConfiguration(configuration); } - destroy() {} + destroy() { + this.unlistenFromMutation(); + } } return TelemetryTableConfiguration; diff --git a/src/plugins/telemetryTable/components/table-row.vue b/src/plugins/telemetryTable/components/table-row.vue index 7af5273d8f..605ab6a977 100644 --- a/src/plugins/telemetryTable/components/table-row.vue +++ b/src/plugins/telemetryTable/components/table-row.vue @@ -93,11 +93,6 @@ export default { rowTop: (this.rowOffset + this.rowIndex) * this.rowHeight + 'px', rowClass: this.row.getRowClass(), cellLimitClasses: this.row.getCellLimitClasses(), - componentList: Object.keys(this.headers).reduce((components, header) => { - components[header] = this.row.getCellComponentName(header) || 'table-cell'; - - return components; - }, {}), selectableColumns: Object.keys(this.row.columns).reduce((selectable, columnKeys) => { selectable[columnKeys] = this.row.columns[columnKeys].selectable; @@ -125,6 +120,13 @@ export default { } return listenersObject; + }, + componentList() { + return Object.keys(this.headers).reduce((components, header) => { + components[header] = this.row.getCellComponentName(header) || 'table-cell'; + + return components; + }, {}); } }, // TODO: use computed properties diff --git a/src/plugins/telemetryTable/pluginSpec.js b/src/plugins/telemetryTable/pluginSpec.js index 81961c9af4..91db9bc41c 100644 --- a/src/plugins/telemetryTable/pluginSpec.js +++ b/src/plugins/telemetryTable/pluginSpec.js @@ -48,6 +48,7 @@ describe("the plugin", () => { let tablePlugin; let element; let child; + let unlistenConfigMutation; beforeEach((done) => { openmct = createOpenMct(); @@ -87,6 +88,10 @@ describe("the plugin", () => { end: 1 }); + if (unlistenConfigMutation) { + unlistenConfigMutation(); + } + return resetApplicationState(openmct); }); @@ -154,6 +159,14 @@ describe("the plugin", () => { range: 2 } }] + }, + configuration: { + hiddenColumns: { + name: false, + utc: false, + 'some-key': false, + 'some-other-key': false + } } }; const testTelemetry = [ @@ -277,5 +290,39 @@ describe("the plugin", () => { }); }); }); + + it("displays the correct number of column headers when the configuration is mutated", async () => { + const tableInstanceConfiguration = tableInstance.domainObject.configuration; + tableInstanceConfiguration.hiddenColumns['some-key'] = true; + unlistenConfigMutation = tableInstance.openmct.objects.mutate(tableInstance.domainObject, 'configuration', tableInstanceConfiguration); + + await Vue.nextTick(); + let tableHeaderElements = element.querySelectorAll('.c-telemetry-table__headers__label'); + expect(tableHeaderElements.length).toEqual(3); + + tableInstanceConfiguration.hiddenColumns['some-key'] = false; + unlistenConfigMutation = tableInstance.openmct.objects.mutate(tableInstance.domainObject, 'configuration', tableInstanceConfiguration); + + await Vue.nextTick(); + tableHeaderElements = element.querySelectorAll('.c-telemetry-table__headers__label'); + expect(tableHeaderElements.length).toEqual(4); + }); + + it("displays the correct number of table cells in a row when the configuration is mutated", async () => { + const tableInstanceConfiguration = tableInstance.domainObject.configuration; + tableInstanceConfiguration.hiddenColumns['some-key'] = true; + unlistenConfigMutation = tableInstance.openmct.objects.mutate(tableInstance.domainObject, 'configuration', tableInstanceConfiguration); + + await Vue.nextTick(); + let tableRowCells = element.querySelectorAll('table.c-telemetry-table__body > tbody > tr:first-child td'); + expect(tableRowCells.length).toEqual(3); + + tableInstanceConfiguration.hiddenColumns['some-key'] = false; + unlistenConfigMutation = tableInstance.openmct.objects.mutate(tableInstance.domainObject, 'configuration', tableInstanceConfiguration); + + await Vue.nextTick(); + tableRowCells = element.querySelectorAll('table.c-telemetry-table__body > tbody > tr:first-child td'); + expect(tableRowCells.length).toEqual(4); + }); }); });