Add Collapse to Recent Objects (#7502)

* initial functional implementation

* removing vestigial code

* Fix styles for button bar

* Remove bound for :persist-position

* Revert "Remove bound for :persist-position"

This reverts commit ce2ea422d7.

* test(e2e): modify existing test to verify collapse/expand recent objects pane

---------

Co-authored-by: Jamie V <jamie.j.vigliotta@nasa.gov>
Co-authored-by: Jesse Mazzella <jesse.d.mazzella@nasa.gov>

e2e/tests/functional/recentObjects.e2e.spec.js

@@ -298,7 +298,7 @@ test.describe('Recent Objects', () => {
     // Assert that the list is empty
     expect(await recentObjectsList.locator('.c-recentobjects-listitem').count()).toBe(0);
   });
-  test('Ensure clear recent objects button is active or inactive', async ({ page }) => {
+  test('Verify functionality of "clear" and "collapse pane" buttons', async ({ page }) => {
     // Assert that the list initially contains 3 objects (clock, folder, my items)
     expect(await recentObjectsList.locator('.c-recentobjects-listitem').count()).toBe(3);
 
@@ -331,6 +331,24 @@ test.describe('Recent Objects', () => {
     expect(await page.getByRole('button', { name: 'Clear Recently Viewed' }).isEnabled()).toBe(
       true
     );
+
+    // Assert initial state of pane and collapse the Recent Objects panel
+    await expect(page.getByLabel('Expand Recently Viewed Pane')).toBeHidden();
+    await expect(page.getByLabel('Collapse Recently Viewed Pane')).toBeVisible();
+    await page.getByLabel('Collapse Recently Viewed Pane').click();
+
+    // Assert that the "Expand Recently Viewed Pane" button is visible
+    // and that the "Collapse Recently Viewed Pane" button is hidden
+    await expect(page.getByLabel('Expand Recently Viewed Pane')).toBeVisible();
+    await expect(page.getByLabel('Collapse Recently Viewed Pane')).toBeHidden();
+
+    // Expand the Recent Objects panel by clicking on the "Expand Recently Viewed Pane" button
+    await page.getByLabel('Expand Recently Viewed Pane').click();
+
+    // Assert that the "Expand Recently Viewed Pane" button is hidden
+    // and that the "Collapse Recently Viewed Pane" button is visible
+    await expect(page.getByLabel('Expand Recently Viewed Pane')).toBeHidden();
+    await expect(page.getByLabel('Collapse Recently Viewed Pane')).toBeVisible();
   });
 
   function assertInitialRecentObjectsListState() {

src/ui/layout/AppLayout.vue

@@ -105,7 +105,13 @@
               class="l-shell__tree"
             />
           </pane>
-          <pane handle="before" label="Recently Viewed" :persist-position="true">
+          <pane
+            handle="before"
+            label="Recently Viewed"
+            :persist-position="true"
+            collapse-type="horizontal"
+            hide-param="hideRecents"
+          >
             <RecentObjectsList
               ref="recentObjectsList"
               class="l-shell__tree"

src/ui/layout/PaneContainer.vue

@@ -56,6 +56,10 @@ const LOCAL_STORAGE_KEY__PANE_POSITIONS = 'mct-pane-positions';
 export default {
   inject: ['openmct'],
   props: {
+    collapseType: {
+      type: String,
+      default: 'vertical'
+    },
     handle: {
       type: String,
       default: '',
@@ -107,6 +111,7 @@ export default {
         'l-pane--vertical-handle-before': this.type === 'vertical' && this.handle === 'before',
         'l-pane--vertical-handle-after': this.type === 'vertical' && this.handle === 'after',
         'l-pane--collapsed': this.collapsed,
+        'collapse-horizontal': this.collapseType === 'horizontal',
         'l-pane--reacts': !this.handle,
         'l-pane--resizing': this.resizing === true
       };
@@ -177,7 +182,9 @@ export default {
       this.collapsed = true;
     },
     handleExpand() {
-      this.$el.style[this.styleProp] = this.currentSize;
+      let size = this.currentSize ? this.currentSize : this.getSavedPosition();
+      this.$el.style[this.styleProp] = size;
+
       delete this.currentSize;
       delete this.dragCollapse;
       this.collapsed = false;

src/ui/layout/pane.scss

@@ -146,7 +146,9 @@
       &:before {
         // '+' icon
         font-size: 0.8em;
-        margin-bottom: $interiorMarginSm;
+        margin-bottom: $interiorMarginSm; // margin-bottom is needed for Tree and Inspector
+        margin-right: $interiorMarginSm; // margin-right and margin-left are needed for Recent Objects
+        margin-left: $interiorMarginSm;
       }
 
       &:hover {
@@ -191,6 +193,36 @@
       }
     }
 
+    &[class*='--collapsed'] { // For Recent Objects Button  
+      &.collapse-horizontal {
+        [class*='expand-button'] {
+          display: block;
+          position: absolute;
+          top: 0;
+          width: 100%;
+          border-top-right-radius: $controlCr;
+          border-top-left-radius: $controlCr;
+        }
+      }
+      [class*='expand-button'] {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        height: auto;
+        width: 100%;
+        padding: $interiorMarginSm 1px;
+        font-size: 11px;
+
+        [class*='label'] {
+          text-orientation: mixed;
+          text-transform: uppercase;
+          writing-mode: horizontal-tb;
+        }
+      }
+    }
+
     &[class*='--horizontal'] {
       > .l-pane__handle {
         cursor: col-resize;
@@ -256,7 +288,7 @@
       }
 
       /************************** Horizontal Splitter After */
-      // Example: Tree pane
+      // Example: Tree pane and Recent Objects
       &[class*='-after'] {
         margin-right: nth($shellPanePad, 2);
         padding-right: nth($shellPanePad, 2);
@@ -292,7 +324,7 @@
       }
 
       /************************** Vertical Splitter Before */
-      // Pane collapses downward. Used by Elements pool in Inspector
+      // Pane collapses downward. Used by Recent Objects in Tree 
       &[class*='-before'] {
         $m: $interiorMarginLg;
         margin-top: $m;
@@ -303,7 +335,7 @@
         }
 
         .l-pane__collapse-button:before {
-          content: $glyph-icon-arrow-down;
+          content: $glyph-icon-line-horz;
         }
 
         &.l-pane--collapsed {