From 5e2fe7dc42311435d8a01959b12bc5b844a992b2 Mon Sep 17 00:00:00 2001
From: Deep Tailor <deep.j.tailor@nasa.gov>
Date: Tue, 9 Feb 2021 11:02:11 -0800
Subject: [PATCH] improve tab loading logic and fix delete tab issue (#3671)

---
 src/plugins/tabs/components/tabs.vue | 41 ++++++++++++++++++----------
 src/plugins/tabs/plugin.js           |  2 +-
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/plugins/tabs/components/tabs.vue b/src/plugins/tabs/components/tabs.vue
index 5e2e778e70..abb235229f 100644
--- a/src/plugins/tabs/components/tabs.vue
+++ b/src/plugins/tabs/components/tabs.vue
@@ -53,7 +53,7 @@
         :class="{'c-tabs-view__object-holder--hidden': !isCurrent(tab)}"
     >
         <object-view
-            v-if="internalDomainObject.keep_alive ? currentTab : isCurrent(tab)"
+            v-if="isTabLoaded(tab)"
             class="c-tabs-view__object"
             :default-object="tab.domainObject"
             :object-path="tab.objectPath"
@@ -100,7 +100,8 @@ export default {
             setCurrentTab: true,
             isDragging: false,
             allowDrop: false,
-            searchTabKey: `tabs.pos.${keyString}`
+            searchTabKey: `tabs.pos.${keyString}`,
+            loadedTabs: {}
         };
     },
     computed: {
@@ -151,9 +152,12 @@ export default {
         document.removeEventListener('dragend', this.dragend);
     },
     methods: {
+        addTabToLoaded(tab) {
+            this.loadedTabs[tab.keyString] = true;
+        },
         setCurrentTabByIndex(index) {
             if (this.tabsList[index]) {
-                this.currentTab = this.tabsList[index];
+                this.showTab(this.tabsList[index]);
             }
         },
         showTab(tab, index) {
@@ -162,6 +166,7 @@ export default {
             }
 
             this.currentTab = tab;
+            this.addTabToLoaded(tab);
         },
         showRemoveDialog(index) {
             if (!this.tabsList[index]) {
@@ -179,7 +184,7 @@ export default {
                         label: 'Ok',
                         emphasis: 'true',
                         callback: () => {
-                            this.removeFromComposition(childDomainObject);
+                            this.composition.remove(childDomainObject);
                             prompt.dismiss();
                         }
                     },
@@ -192,9 +197,6 @@ export default {
                 ]
             });
         },
-        removeFromComposition(childDomainObject) {
-            this.composition.remove(childDomainObject);
-        },
         addItem(domainObject) {
             let type = this.openmct.types.get(domainObject.type) || unknownObjectType;
             let keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
@@ -215,7 +217,7 @@ export default {
             this.tabsList.push(tabItem);
 
             if (this.setCurrentTab) {
-                this.currentTab = tabItem;
+                this.showTab(tabItem);
                 this.setCurrentTab = false;
             }
         },
@@ -224,15 +226,21 @@ export default {
             this.setCurrentTab = true;
         },
         removeItem(identifier) {
-            let pos = this.tabsList.findIndex(tab =>
-                tab.domainObject.identifier.namespace === identifier.namespace && tab.domainObject.identifier.keyString === identifier.keyString
-            );
+            let keyStringToBeRemoved = this.openmct.objects.makeKeyString(identifier);
+
+            let pos = this.tabsList.findIndex(tab => {
+                return tab.keyString === keyStringToBeRemoved;
+            });
+
             let tabToBeRemoved = this.tabsList[pos];
 
             tabToBeRemoved.statusUnsubscribe();
 
             this.tabsList.splice(pos, 1);
 
+            this.loadedTabs[keyStringToBeRemoved] = undefined;
+            delete this.loadedTabs[keyStringToBeRemoved];
+
             if (this.isCurrent(tabToBeRemoved)) {
                 this.showTab(this.tabsList[this.tabsList.length - 1], this.tabsList.length - 1);
             }
@@ -291,10 +299,15 @@ export default {
             let tabPos = this.tabsList.findIndex((tab) => {
                 return tab.keyString === keyString;
             });
+            let tab = this.tabsList[tabPos];
 
-            if (tabPos !== -1) {
-                let tab = this.tabsList[tabPos];
-                this.$set(tab, 'status', status);
+            this.$set(tab, 'status', status);
+        },
+        isTabLoaded(tab) {
+            if (this.internalDomainObject.keep_alive) {
+                return true;
+            } else {
+                return this.loadedTabs[tab.keyString];
             }
         }
     }
diff --git a/src/plugins/tabs/plugin.js b/src/plugins/tabs/plugin.js
index dc1bd76128..2f3bd9ff76 100644
--- a/src/plugins/tabs/plugin.js
+++ b/src/plugins/tabs/plugin.js
@@ -41,7 +41,7 @@ define([
                 form: [
                     {
                         "key": "keep_alive",
-                        "name": "Keep Tabs Alive",
+                        "name": "Eager Load Tabs",
                         "control": "select",
                         "options": [
                             {