diff --git a/src/plugins/tabs/components/tabs.scss b/src/plugins/tabs/components/tabs.scss
index efc7b0ade9..c3ce0f38c3 100644
--- a/src/plugins/tabs/components/tabs.scss
+++ b/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 {
diff --git a/src/plugins/tabs/components/tabs.vue b/src/plugins/tabs/components/tabs.vue
index 294ba41470..0cfaa2c4b9 100644
--- a/src/plugins/tabs/components/tabs.vue
+++ b/src/plugins/tabs/components/tabs.vue
@@ -19,7 +19,7 @@
>
Drag objects here to add them to this view.
-
+ {{ tab.domainObject.name }}
+
+
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 = {