Make Tabs eager loading configurable but default to false (#7199)

* convert tabs plugin to use es6 import/export

* default of eager load is false but configurable

* change true/false select to toggleSwitch

* add and clean up unit tests

* Update test

---------

Co-authored-by: John Hill <john.c.hill@nasa.gov>

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();
   });
 });

src/plugins/tabs/plugin.js

@@ -21,8 +21,10 @@
  *****************************************************************************/
 import Tabs from './tabs.js';
 
-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', {
@@ -32,13 +34,13 @@ export default function plugin() {
       cssClass: 'icon-tabs-view',
       initialize(domainObject) {
         domainObject.composition = [];
-        domainObject.keep_alive = true;
+        domainObject.keep_alive = eagerLoad;
       },
       form: [
         {
           key: 'keep_alive',
           name: 'Eager Load Tabs',
-          control: 'select',
+          control: 'toggleSwitch',
           options: [
             {
               name: 'True',

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('is creatable', () => {
-    expect(tabsLayoutDefinition.definition.creatable).toEqual(true);
+  it('the tabs object is creatable', () => {
+    expect(tabsType.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 () {