From 4fe82b31240f186b41e5b2856b9a52065acf2df0 Mon Sep 17 00:00:00 2001 From: David Tsay Date: Thu, 2 Nov 2023 16:59:01 -0700 Subject: [PATCH 1/5] convert tabs plugin to use es6 import/export --- src/plugins/plugins.js | 2 +- src/plugins/tabs/plugin.js | 70 +++++++++++++++++++------------------- 2 files changed, 36 insertions(+), 36 deletions(-) diff --git a/src/plugins/plugins.js b/src/plugins/plugins.js index 0393a333a62..dacc32759a8 100644 --- a/src/plugins/plugins.js +++ b/src/plugins/plugins.js @@ -199,7 +199,7 @@ define([ plugins.FaultManagement = FaultManagementPlugin.default; plugins.FormActions = FormActions; plugins.FolderView = FolderView.default; - plugins.Tabs = Tabs; + plugins.Tabs = Tabs.default; plugins.FlexibleLayout = FlexibleLayout; plugins.LADTable = LADTable.default; plugins.Filters = Filters; diff --git a/src/plugins/tabs/plugin.js b/src/plugins/tabs/plugin.js index e62ba670c1e..58cd41f740a 100644 --- a/src/plugins/tabs/plugin.js +++ b/src/plugins/tabs/plugin.js @@ -20,40 +20,40 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ -define(['./tabs'], function (Tabs) { - return function plugin() { - return function install(openmct) { - openmct.objectViews.addProvider(new Tabs.default(openmct)); +import Tabs from './tabs'; - openmct.types.addType('tabs', { - name: 'Tabs View', - description: 'Quickly navigate between multiple objects of any type using tabs.', - creatable: true, - cssClass: 'icon-tabs-view', - initialize(domainObject) { - domainObject.composition = []; - domainObject.keep_alive = true; - }, - form: [ - { - key: 'keep_alive', - name: 'Eager Load Tabs', - control: 'select', - options: [ - { - name: 'True', - value: true - }, - { - name: 'False', - value: false - } - ], - required: true, - cssClass: 'l-input' - } - ] - }); - }; +export default function plugin() { + return function install(openmct) { + openmct.objectViews.addProvider(new Tabs(openmct)); + + openmct.types.addType('tabs', { + name: 'Tabs View', + description: 'Quickly navigate between multiple objects of any type using tabs.', + creatable: true, + cssClass: 'icon-tabs-view', + initialize(domainObject) { + domainObject.composition = []; + domainObject.keep_alive = false; + }, + form: [ + { + key: 'keep_alive', + name: 'Eager Load Tabs', + control: 'select', + options: [ + { + name: 'True', + value: true + }, + { + name: 'False', + value: false + } + ], + required: true, + cssClass: 'l-input' + } + ] + }); }; -}); +} From aa2dc44b5235fee9da6814469bd72b8fcd7c6a6d Mon Sep 17 00:00:00 2001 From: David Tsay Date: Thu, 2 Nov 2023 17:09:34 -0700 Subject: [PATCH 2/5] default of eager load is false but configurable --- src/plugins/tabs/plugin.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/plugins/tabs/plugin.js b/src/plugins/tabs/plugin.js index 58cd41f740a..a7983c98bfc 100644 --- a/src/plugins/tabs/plugin.js +++ b/src/plugins/tabs/plugin.js @@ -22,8 +22,10 @@ import Tabs from './tabs'; -export default function plugin() { +export default function plugin(options) { return function install(openmct) { + const eagerLoad = options?.eagerLoad ?? false; + openmct.objectViews.addProvider(new Tabs(openmct)); openmct.types.addType('tabs', { @@ -33,7 +35,7 @@ export default function plugin() { cssClass: 'icon-tabs-view', initialize(domainObject) { domainObject.composition = []; - domainObject.keep_alive = false; + domainObject.keep_alive = eagerLoad; }, form: [ { From 2f9837db16e2bcba6df9c445ad00433fc49cf343 Mon Sep 17 00:00:00 2001 From: David Tsay Date: Thu, 2 Nov 2023 17:13:37 -0700 Subject: [PATCH 3/5] change true/false select to toggleSwitch --- src/plugins/tabs/plugin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/tabs/plugin.js b/src/plugins/tabs/plugin.js index a7983c98bfc..b29ccdb309c 100644 --- a/src/plugins/tabs/plugin.js +++ b/src/plugins/tabs/plugin.js @@ -41,7 +41,7 @@ export default function plugin(options) { { key: 'keep_alive', name: 'Eager Load Tabs', - control: 'select', + control: 'toggleSwitch', options: [ { name: 'True', From 04ddde1bb200ac9bf7e0cd9926c25d46129a26e6 Mon Sep 17 00:00:00 2001 From: David Tsay Date: Thu, 2 Nov 2023 18:52:43 -0700 Subject: [PATCH 4/5] add and clean up unit tests --- src/plugins/tabs/pluginSpec.js | 55 +++++++++++++++++++++++++++++----- 1 file changed, 48 insertions(+), 7 deletions(-) diff --git a/src/plugins/tabs/pluginSpec.js b/src/plugins/tabs/pluginSpec.js index 6942ce3c1c1..37fc8284c05 100644 --- a/src/plugins/tabs/pluginSpec.js +++ b/src/plugins/tabs/pluginSpec.js @@ -30,7 +30,8 @@ describe('the plugin', function () { let element; let child; let openmct; - let tabsLayoutDefinition; + let tabsType; + const testViewObject = { identifier: { key: 'mock-tabs-object', @@ -85,8 +86,7 @@ describe('the plugin', function () { beforeEach((done) => { openmct = createOpenMct(); - openmct.install(new TabsLayout()); - tabsLayoutDefinition = openmct.types.get('tabs'); + tabsType = openmct.types.get('tabs'); element = document.createElement('div'); child = document.createElement('div'); @@ -100,15 +100,56 @@ describe('the plugin', function () { }); afterEach(() => { + child = undefined; + element = undefined; + return resetApplicationState(openmct); }); - it('defines a tabs object type with the correct key', () => { - expect(tabsLayoutDefinition.definition.name).toEqual('Tabs View'); + it('is installed by default and provides a tabs object', () => { + expect(tabsType.definition.name).toEqual('Tabs View'); + }); + + it('the tabs object is creatable', () => { + expect(tabsType.definition.creatable).toEqual(true); }); - it('is creatable', () => { - expect(tabsLayoutDefinition.definition.creatable).toEqual(true); + it('sets eager load to false by default', () => { + const tabsObject = { + identifier: { + key: 'some-tab-object', + namespace: '' + }, + type: 'tabs' + }; + + tabsType.definition.initialize(tabsObject); + + expect(tabsObject.keep_alive).toBeFalse(); + }); + + it('can be installed with eager load defaulting to true', () => { + const options = { + eagerLoad: true + }; + const openmct2 = createOpenMct(); + openmct2.install(new TabsLayout(options)); + openmct2.startHeadless(); + + const tabsObject = { + identifier: { + key: 'some-tab-object', + namespace: '' + }, + type: 'tabs' + }; + + const overriddenTabsType = openmct2.types.get('tabs'); + overriddenTabsType.definition.initialize(tabsObject); + + expect(tabsObject.keep_alive).toBeTrue(); + + return resetApplicationState(openmct2); }); describe('the view', function () { From 7b45c63e4f3f982e1d44adda33c4eed6df4edb0a Mon Sep 17 00:00:00 2001 From: John Hill Date: Mon, 29 Jan 2024 11:50:18 -0800 Subject: [PATCH 5/5] Update test --- e2e/tests/functional/plugins/tabs/tabs.e2e.spec.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/e2e/tests/functional/plugins/tabs/tabs.e2e.spec.js b/e2e/tests/functional/plugins/tabs/tabs.e2e.spec.js index 91b5b1cd1d9..508a08a75b1 100644 --- a/e2e/tests/functional/plugins/tabs/tabs.e2e.spec.js +++ b/e2e/tests/functional/plugins/tabs/tabs.e2e.spec.js @@ -104,12 +104,18 @@ test.describe('Tabs View CRUD', () => { }); }); - test('Eager Load Tabs is the default', async ({ page }) => { + test('Eager Load Tabs is the default and then can be toggled off', async ({ page }) => { + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/nasa/openmct/issues/7198' + }); await page.goto(tabsView.url); await page.getByLabel('Edit Object').click(); await page.getByLabel('More actions').click(); await page.getByLabel('Edit Properties...').click(); - await expect(await page.getByLabel('Eager Load Tabs')).toHaveValue('true'); + await expect(await page.getByLabel('Eager Load Tabs')).not.toBeChecked(); + await page.getByLabel('Eager Load Tabs').setChecked(true); + await expect(await page.getByLabel('Eager Load Tabs')).toBeChecked(); }); });