[Tabs View] add ability to remove tabs from tabs view interface (#3147) (#3148)

* add ability to remove tabs from tabs view interface (#3147)

* an "X" on each tab is visible in edit mode

* replaced custom removeDialog with openmct.overlays.dialog

* Minor mods to markup and CSS

- Changed tab from button to div to allow a cleaner approach to the
nested close button;
- Changed close "icon-x" span to a button and added `c-click-icon` style
tag;
- Tweaked class naming to simplify and align with a more functional/
descriptive approach;

* use ES6 arrow func to avoid self=this

Co-authored-by: Deep Tailor <deep.j.tailor@nasa.gov>
Co-authored-by: charlesh88 <charlesh88@gmail.com>

src/plugins/tabs/components/tabs.scss

@@ -17,6 +17,19 @@
             margin-right: $interiorMarginSm;
             opacity: 0.7;
         }
+
+        &__label {
+            flex: 1 1 auto;
+        }
+
+        &__close-btn {
+            flex: 0 0 auto;
+            pointer-events: all;
+        }
+
+        > * + * {
+            margin-left: $interiorMargin;
+        }
     }
 
     &__object-holder {

src/plugins/tabs/components/tabs.vue

@@ -19,7 +19,7 @@
         >
             Drag objects here to add them to this view.
         </div>
-        <button
+        <div
             v-for="(tab,index) in tabsList"
             :key="index"
             class="c-tab c-tabs-view__tab"
@@ -28,19 +28,12 @@
             }"
             @click="showTab(tab, index)"
         >
-            <div class="c-object-label"
+            <span class="c-button__label c-tabs-view__tab__label">{{ tab.domainObject.name }}</span>
-                 :class="{'is-missing': tab.domainObject.status === 'missing'}"
+            <button v-if="isEditing"
-            >
+                    class="icon-x c-click-icon c-tabs-view__tab__close-btn"
-                <div class="c-object-label__type-icon"
+                    @click="showRemoveDialog(index)"
-                     :class="tab.type.definition.cssClass"
+            ></button>
-                >
+        </div>
-                    <span class="is-missing__indicator"
-                          title="This item is missing"
-                    ></span>
-                </div>
-                <span class="c-button__label c-object-label__name">{{ tab.domainObject.name }}</span>
-            </div>
-        </button>
     </div>
     <div
         v-for="(tab, index) in tabsList"
@@ -59,6 +52,7 @@
 
 <script>
 import ObjectView from '../../../ui/components/ObjectView.vue';
+import RemoveAction from '../../remove/RemoveAction.js';
 import {
     getSearchParam,
     setSearchParam,
@@ -123,6 +117,7 @@ export default {
 
         this.unsubscribe = this.openmct.objects.observe(this.internalDomainObject, '*', this.updateInternalDomainObject);
 
+        this.RemoveAction = new RemoveAction(this.openmct);
         document.addEventListener('dragstart', this.dragstart);
         document.addEventListener('dragend', this.dragend);
     },
@@ -153,6 +148,38 @@ export default {
 
             this.currentTab = tab;
         },
+        showRemoveDialog(index) {
+            if(!this.tabsList[index]) {
+                return;
+            }
+
+            let activeTab = this.tabsList[index];
+            let childDomainObject = activeTab.domainObject
+
+            let prompt = this.openmct.overlays.dialog({
+                iconClass: 'alert',
+                message: `This action will remove this tab from the Tabs Layout. Do you want to continue?`,
+                buttons: [
+                    {
+                        label: 'Ok',
+                        emphasis: 'true',
+                        callback: () => {
+                            this.removeFromComposition(childDomainObject);
+                            prompt.dismiss();
+                        }
+                    },
+                    {
+                        label: 'Cancel',
+                        callback: () => {
+                            prompt.dismiss();
+                        }
+                    }
+                ]
+            });
+        },
+        removeFromComposition(childDomainObject) {
+            this.composition.remove(childDomainObject);
+        },
         addItem(domainObject) {
             let type = this.openmct.types.get(domainObject.type) || unknownObjectType,
                 tabItem = {