Don't persist current tab when display is locked (#7882)

Check if a display is locked before saving current tab. 

---------

Co-authored-by: Andrew Henry <[email protected]>

e2e/tests/functional/plugins/tabs/tabs.e2e.spec.js

@@ -57,7 +57,7 @@ test.describe('Tabs View', () => {
     await page.goto(tabsView.url);
 
     // select first tab
-    await page.getByLabel(`${table.name} tab`, { exact: true }).click();
+    await page.getByLabel(`${table.name} tab - selected`, { exact: true }).click();
     // ensure table header visible
     await expect(page.getByRole('searchbox', { name: 'message filter input' })).toBeVisible();
 
@@ -92,6 +92,38 @@ test.describe('Tabs View', () => {
     // no canvas (i.e., sine wave generator) in the document should be visible
     await expect(page.locator('canvas[id=webglContext]')).toBeHidden();
   });
+
+  test('Changing the displayed tab should not be persisted if the view is locked', async ({
+    page
+  }) => {
+    await page.goto(tabsView.url);
+    //lock the view
+    await page.getByLabel('Unlocked for editing, click to lock.', { exact: true }).click();
+    // get the initial tab index
+    const initialTab = page.getByLabel(/- selected/);
+    // switch to a different tab in the view
+    const swgTab = page.getByLabel(`${sineWaveGenerator.name} tab`, { exact: true });
+    await swgTab.click();
+    await page.getByLabel(`${sineWaveGenerator.name} Object View`).isVisible();
+    // navigate away from the tabbed view and back
+    await page.getByRole('treeitem', { name: 'My Items' }).click();
+    await page.goto(tabsView.url);
+    // check that the initial tab is displayed
+    const lockedSelectedTab = page.getByLabel(/- selected/);
+    await expect(lockedSelectedTab).toHaveText(await initialTab.textContent());
+
+    //unlock the view
+    await page.getByLabel('Locked for editing. Click to unlock.', { exact: true }).click();
+    // switch to a different tab in the view
+    await swgTab.click();
+    await page.getByLabel(`${sineWaveGenerator.name} Object View`).isVisible();
+    // navigate away from the tabbed view and back
+    await page.getByRole('treeitem', { name: 'My Items' }).click();
+    await page.goto(tabsView.url);
+    // check that the newly selected tab is displayed
+    const unlockedSelectedTab = page.getByLabel(/- selected/);
+    await expect(unlockedSelectedTab).toBeVisible();
+  });
 });
 
 test.describe('Tabs View CRUD', () => {

e2e/tests/performance/tabs.perf.spec.js

@@ -64,7 +64,7 @@ test.describe('Tabs View', () => {
     page.goto(tabsView.url);
 
     // select first tab
-    await page.getByLabel(`${table.name} tab`, { exact: true }).click();
+    await page.getByLabel(`${table.name} tab - selected`, { exact: true }).click();
     // ensure table header visible
     await expect(page.getByRole('searchbox', { name: 'message filter input' })).toBeVisible();
 

src/plugins/tabs/components/TabsComponent.vue

@@ -38,11 +38,11 @@
         v-for="(tab, index) in tabsList"
         :ref="tab.keyString"
         :key="tab.keyString"
-        :aria-label="`${tab.domainObject.name} tab`"
+        :aria-label="`${tab.domainObject.name} tab${tab.keyString === currentTab.keyString ? ' - selected' : ''}`"
         class="c-tab c-tabs-view__tab js-tab"
         role="tab"
         :class="{
-          'is-current': isCurrent(tab)
+          'is-current': tab.keyString === currentTab.keyString
         }"
         @click="showTab(tab, index)"
         @mouseover.ctrl="showToolTip(tab)"
@@ -74,7 +74,7 @@
       :key="tab.keyString"
       :style="getTabStyles(tab)"
       class="c-tabs-view__object-holder"
-      :class="{ 'c-tabs-view__object-holder--hidden': !isCurrent(tab) }"
+      :class="{ 'c-tabs-view__object-holder--hidden': tab.keyString !== currentTab.keyString }"
     >
       <ObjectView
         v-if="shouldLoadTab(tab)"
@@ -353,7 +353,10 @@ export default {
       this.internalDomainObject = domainObject;
     },
     persistCurrentTabIndex(index) {
-      this.openmct.objects.mutate(this.internalDomainObject, 'currentTabIndex', index);
+      //only persist if the domain object is not locked. The object mutate API will deal with whether the object is persistable or not.
+      if (!this.internalDomainObject.locked) {
+        this.openmct.objects.mutate(this.internalDomainObject, 'currentTabIndex', index);
+      }
     },
     storeCurrentTabIndexInURL(index) {
       let currentTabIndexInURL = this.openmct.router.getSearchParam(this.searchTabKey);

src/ui/layout/BrowseBar.vue

@@ -24,6 +24,7 @@
     <div class="l-browse-bar__start">
       <button
         v-if="hasParent"
+        aria-label="Navigate up to parent"
         class="l-browse-bar__nav-to-parent-button c-icon-button c-icon-button--major icon-arrow-nav-to-parent"
         title="Navigate up to parent"
         @click="goToParent"