Fix Plan View duplicate scrollbars (#6865)

* Closes #6864
- CSS fixes to remove problematic duplicate overflow handling.

* fix(e2e): stabilize autoscale test

* fix(e2e): mark overlay plot tagging test as slow

* fix(e2e): stabilize ITC e2e test

* fix(e2e): don't use hard wait

* fix: remove .only 😳

---------

Co-authored-by: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>

e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js

@@ -79,22 +79,22 @@ test.describe('Example Imagery Object', () => {
     // Test independent fixed time with global fixed time
     // flip on independent time conductor
     await page.getByRole('switch', { name: 'Enable Independent Time Conductor' }).click();
+
+    // Adding in delay to address flakiness of ITC test-- button event handlers not registering in time
+    await expect(page.locator('#independentTCToggle')).toBeChecked();
+    await expect(page.locator('.c-compact-tc').first()).toBeVisible();
+
     await page.getByRole('button', { name: 'Independent Time Conductor Settings' }).click();
-    await page.getByRole('textbox', { name: 'Start date' }).fill('');
+
     await page.getByRole('textbox', { name: 'Start date' }).fill('2021-12-30');
     await page.keyboard.press('Tab');
-    await page.getByRole('textbox', { name: 'Start time' }).fill('');
-    await page.getByRole('textbox', { name: 'Start time' }).type('01:01:00');
+    await page.getByRole('textbox', { name: 'Start time' }).fill('01:01:00');
     await page.keyboard.press('Tab');
-    await page.getByRole('textbox', { name: 'End date' }).fill('');
-    await page.getByRole('textbox', { name: 'End date' }).type('2021-12-30');
+    await page.getByRole('textbox', { name: 'End date' }).fill('2021-12-30');
     await page.keyboard.press('Tab');
-    await page.getByRole('textbox', { name: 'End time' }).fill('');
-    await page.getByRole('textbox', { name: 'End time' }).type('01:11:00');
+    await page.getByRole('textbox', { name: 'End time' }).fill('01:11:00');
     await page.keyboard.press('Tab');
     await page.keyboard.press('Enter');
-    // expect(await page.getByRole('button', { name: 'Submit time bounds' }).isEnabled()).toBe(true);
-    // await page.getByRole('button', { name: 'Submit time bounds' }).click();
 
     // check image date
     await expect(page.getByText('2021-12-30 01:11:00.000Z').first()).toBeVisible();
@@ -106,9 +106,12 @@ test.describe('Example Imagery Object', () => {
 
     // Test independent fixed time with global realtime
     await setRealTimeMode(page);
+    await expect(
+      page.getByRole('switch', { name: 'Enable Independent Time Conductor' })
+    ).toBeEnabled();
     await page.getByRole('switch', { name: 'Enable Independent Time Conductor' }).click();
     // check image date to be in the past
-    await expect(page.getByText('2021-12-30 01:11:00.000Z').first()).toBeVisible();
+    await expect(page.getByText('2021-12-30 01:01:00.000Z').first()).toBeVisible();
     // flip it off
     await page.getByRole('switch', { name: 'Disable Independent Time Conductor' }).click();
     // timestamp shouldn't be in the past anymore

e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js

@@ -24,7 +24,7 @@
 Testsuite for plot autoscale.
 */
 
-const { selectInspectorTab, setTimeConductorBounds } = require('../../../../appActions');
+const { selectInspectorTab, createDomainObjectWithDefaults } = require('../../../../appActions');
 const { test, expect } = require('../../../../pluginFixtures');
 test.use({
   viewport: {
@@ -34,17 +34,26 @@ test.use({
 });
 
 test.describe('Autoscale', () => {
-  test('User can set autoscale with a valid range @snapshot', async ({ page, openmctConfig }) => {
-    const { myItemsFolderName } = openmctConfig;
-
+  test('User can set autoscale with a valid range @snapshot', async ({ page }) => {
     //This is necessary due to the size of the test suite.
     test.slow();
 
     await page.goto('./', { waitUntil: 'domcontentloaded' });
 
-    await setTimeRange(page);
+    const overlayPlot = await createDomainObjectWithDefaults(page, {
+      name: 'Test Overlay Plot',
+      type: 'Overlay Plot'
+    });
+    await createDomainObjectWithDefaults(page, {
+      name: 'Test Sine Wave Generator',
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
 
-    await createSinewaveOverlayPlot(page, myItemsFolderName);
+    // Switch to fixed time, start: 2022-03-28 22:00:00.000 UTC, end: 2022-03-28 22:00:30.000 UTC
+    await page.goto(
+      `${overlayPlot.url}?tc.mode=fixed&tc.startBound=1648591200000&tc.endBound=1648591230000&tc.timeSystem=utc&view=plot-overlay`
+    );
 
     await testYTicks(page, ['-1.00', '-0.50', '0.00', '0.50', '1.00']);
 
@@ -118,72 +127,6 @@ test.describe('Autoscale', () => {
   });
 });
 
-/**
- * @param {import('@playwright/test').Page} page
- * @param {string} start
- * @param {string} end
- */
-async function setTimeRange(
-  page,
-  start = '2022-03-29 22:00:00.000Z',
-  end = '2022-03-29 22:00:30.000Z'
-) {
-  // Set a specific time range for consistency, otherwise it will change
-  // on every test to a range based on the current time.
-
-  await setTimeConductorBounds(page, start, end);
-}
-
-/**
- * @param {import('@playwright/test').Page} page
- * @param {string} myItemsFolderName
- */
-async function createSinewaveOverlayPlot(page, myItemsFolderName) {
-  // click create button
-  await page.locator('button:has-text("Create")').click();
-
-  // add overlay plot with defaults
-  await page.locator('li[role="menuitem"]:has-text("Overlay Plot")').click();
-  await Promise.all([
-    page.waitForNavigation(),
-    page.locator('button:has-text("OK")').click(),
-    //Wait for Save Banner to appear1
-    page.waitForSelector('.c-message-banner__message')
-  ]);
-  //Wait until Save Banner is gone
-  await page.locator('.c-message-banner__close-button').click();
-  await page.waitForSelector('.c-message-banner__message', { state: 'detached' });
-
-  // save (exit edit mode)
-  await page
-    .locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button')
-    .nth(1)
-    .click();
-  await page.locator('text=Save and Finish Editing').click();
-
-  // click create button
-  await page.locator('button:has-text("Create")').click();
-
-  // add sine wave generator with defaults
-  await page.locator('li[role="menuitem"]:has-text("Sine Wave Generator")').click();
-  await Promise.all([
-    page.waitForNavigation(),
-    page.locator('button:has-text("OK")').click(),
-    //Wait for Save Banner to appear1
-    page.waitForSelector('.c-message-banner__message')
-  ]);
-  //Wait until Save Banner is gone
-  await page.locator('.c-message-banner__close-button').click();
-  await page.waitForSelector('.c-message-banner__message', { state: 'detached' });
-
-  // focus the overlay plot
-  await page.locator(`text=Open MCT ${myItemsFolderName} >> span`).nth(3).click();
-  await Promise.all([
-    page.waitForNavigation(),
-    page.locator('text=Unnamed Overlay Plot').first().click()
-  ]);
-}
-
 /**
  * @param {import('@playwright/test').Page} page
  */

e2e/tests/functional/plugins/plot/tagging.e2e.spec.js

@@ -167,6 +167,7 @@ test.describe('Plot Tagging', () => {
   });
 
   test('Tags work with Overlay Plots', async ({ page }) => {
+    test.slow();
     test.info().annotations.push({
       type: 'issue',
       description: 'https://github.com/nasa/openmct/issues/6822'

src/plugins/timeline/timeline.scss

@@ -2,11 +2,6 @@
   overflow: hidden;
 }
 
-.c-plan.c-timeline-holder {
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
 .c-timeline__objects {
   display: contents;
 }