Remove legacy auto-scroll code

Remove the dormant step log auto-scroll code leftover from the
recently removed legacy design. Also remove the related scroll
button code that has been replaced by the global scroll buttons
since v0.65.

Author: AlanGreene

packages/components/src/components/Log/Log.jsx

@@ -12,17 +12,13 @@ limitations under the License.
 */
 /* istanbul ignore file */
 
-import { Component, createRef } from 'react';
+import { Component } from 'react';
 import { PrefixContext, SkeletonText } from '@carbon/react';
 import { FixedSizeList as List } from 'react-window';
 import { injectIntl, useIntl } from 'react-intl';
 import { getStepStatusReason, isRunning } from '@tektoncd/dashboard-utils';
 import { Information } from '@carbon/react/icons';
 
-import {
-  hasElementPositiveVerticalScrollBottom,
-  isElementEndBelowViewBottom
-} from './domUtils';
 import DotSpinner from '../DotSpinner';
 import LogFormat from '../LogFormat';
 
@@ -81,34 +77,13 @@ export class LogContainer extends Component {
   constructor(props) {
     super(props);
     this.state = { groupsExpanded: {}, loading: true, logs: [] };
-    this.logRef = createRef();
-    this.textRef = createRef();
   }
 
   componentDidMount() {
     this.loadLog();
-    if (this.props.enableLogAutoScroll) {
-      this.wasRunningAfterMounting();
-      window.addEventListener('scroll', this.handleLogScroll, true);
-      this.handleLogScroll();
-    }
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    if (
-      this.props.enableLogAutoScroll &&
-      prevState.logs?.length !== this.state.logs?.length
-    ) {
-      if (this.shouldAutoScroll()) {
-        this.scrollToBottomLog();
-        return;
-      }
-      this.handleLogScroll();
-    }
   }
 
   componentWillUnmount() {
-    window.removeEventListener('scroll', this.handleLogScroll, true);
     clearTimeout(this.timer);
     this.cancelled = true;
   }
@@ -122,45 +97,6 @@ export class LogContainer extends Component {
     }));
   };
 
-  handleLogScroll = () => {
-    if (!this.state.loading) {
-      const isLogBottomUnseen = this.isLogBottomUnseen();
-      if (isLogBottomUnseen !== this.state.isLogBottomUnseen) {
-        this.setState({
-          isLogBottomUnseen
-        });
-      }
-    }
-  };
-
-  shouldAutoScroll = () => {
-    return (
-      this.props.enableLogAutoScroll &&
-      this.state.isLogBottomUnseen === false &&
-      this.wasRunningAfterMounting() &&
-      this.isLogBottomUnseen()
-    );
-  };
-
-  isLogBottomUnseen = () => {
-    return (
-      isElementEndBelowViewBottom(this.logRef?.current) ||
-      hasElementPositiveVerticalScrollBottom(
-        this.textRef?.current?.firstElementChild
-      )
-    );
-  };
-
-  scrollToBottomLog = () => {
-    const longTextElement = this.textRef?.current?.firstElementChild;
-    if (longTextElement) {
-      longTextElement.scrollTop =
-        longTextElement.scrollHeight - longTextElement.clientHeight;
-    }
-    const rootElement = document.documentElement;
-    rootElement.scrollTop = rootElement.scrollHeight - rootElement.clientHeight;
-  };
-
   wasRunningAfterMounting = () => {
     if (this.alreadyWasRunningAfterMounting) {
       return true;
@@ -497,15 +433,13 @@ export class LogContainer extends Component {
     const { toolbar } = this.props;
     const { loading } = this.state;
     return (
-      <pre className="tkn--log tkn--theme-dark" ref={this.logRef}>
+      <pre className="tkn--log tkn--theme-dark">
         {loading ? (
           <SkeletonText paragraph width="60%" />
         ) : (
           <>
             {toolbar}
-            <div className="tkn--log-container" ref={this.textRef}>
-              {this.getLogList()}
-            </div>
+            <div className="tkn--log-container">{this.getLogList()}</div>
             {this.logTrailer()}
           </>
         )}

packages/components/src/components/Log/Log.test.jsx

@@ -114,98 +114,6 @@ describe('Log', () => {
     await waitFor(() => getByText('Line 1'));
   });
 
-  it('auto-scrolls down, for a running step, when new logs are added and the Log component bottom is below the viewport', async () => {
-    const medium = Array.from(
-      { length: 199 },
-      (_v, i) => `Line ${i + 2}\n`
-    ).join('');
-    vi.spyOn(Element.prototype, 'getBoundingClientRect')
-      .mockReturnValue({ bottom: 2500 })
-      .mockReturnValueOnce({ bottom: 0 });
-    const spiedFn = vi.spyOn(Element.prototype, 'scrollTop', 'set'); // the scrollTop value is changed in scrollToBottomLog
-
-    const { rerender } = render(
-      <Log
-        stepStatus={{ running: true }}
-        enableLogAutoScroll
-        pollingInterval={100}
-        fetchLogs={() => 'Line 1'}
-      />
-    );
-    rerender(
-      <Log
-        stepStatus={{ running: true }}
-        enableLogAutoScroll
-        pollingInterval={100}
-        fetchLogs={() => `Line1\n${medium}`}
-      />
-    );
-    await waitFor(() => expect(spiedFn).toHaveBeenCalled());
-  });
-
-  it('auto-scrolls down, for a running step, when new logs are added and the Log component is scrollable', async () => {
-    const long = Array.from(
-      { length: 19999 },
-      (_v, i) => `Line ${i + 1}\n`
-    ).join('');
-    vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
-      bottom: 0
-    });
-    vi.spyOn(Element.prototype, 'scrollTop', 'get')
-      .mockReturnValue(-1) // to ensure el.scrollHeight - el.clientHeight > el.scrollTop i.e. 0 - 0 > -1
-      .mockReturnValueOnce(0);
-    const spiedFn = vi.spyOn(Element.prototype, 'scrollTop', 'set'); // the scrollTop value is changed in scrollToBottomLog
-
-    const { rerender } = render(
-      <Log
-        stepStatus={{ running: true }}
-        enableLogAutoScroll
-        pollingInterval={100}
-        fetchLogs={() => long}
-      />
-    );
-    rerender(
-      <Log
-        stepStatus={{ running: true }}
-        enableLogAutoScroll
-        pollingInterval={100}
-        fetchLogs={() => `${long}\nLine 20000`}
-      />
-    );
-    await waitFor(() => expect(spiedFn).toHaveBeenCalled());
-  });
-
-  it('does not auto-scroll down when the step was never running after the component mounting', async () => {
-    const long = Array.from(
-      { length: 19999 },
-      (_v, i) => `Line ${i + 1}\n`
-    ).join('');
-    vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
-      bottom: 0
-    });
-    vi.spyOn(Element.prototype, 'scrollTop', 'get')
-      .mockReturnValue(-1) // to ensure el.scrollHeight - el.clientHeight > el.scrollTop i.e. 0 - 0 > -1
-      .mockReturnValueOnce(0);
-    const spiedFn = vi.spyOn(Element.prototype, 'scrollTop', 'set'); // the scrollTop value is changed in scrollToBottomLog
-
-    const { rerender } = render(
-      <Log
-        stepStatus={{ terminated: { reason: 'Completed' } }}
-        enableLogAutoScroll
-        pollingInterval={100}
-        fetchLogs={() => long}
-      />
-    );
-    rerender(
-      <Log
-        stepStatus={{ terminated: { reason: 'Completed' } }}
-        enableLogAutoScroll
-        pollingInterval={100}
-        fetchLogs={() => `${long}\nLine 20000`}
-      />
-    );
-    await waitFor(() => expect(spiedFn).not.toHaveBeenCalled());
-  });
   it('renders the provided content when streaming logs', async () => {
     const { getByText } = render(
       <Log

packages/components/src/components/Log/domUtils.js

@@ -40,8 +40,6 @@ export default /* istanbul ignore next */ function PipelineRun({
   description,
   displayRunHeader,
   duration,
-  enableLogAutoScroll,
-  enableLogScrollButtons,
   error,
   fetchLogs,
   forceLogPolling,
@@ -109,8 +107,6 @@ export default /* istanbul ignore next */ function PipelineRun({
 
     return (
       <Log
-        enableLogAutoScroll={enableLogAutoScroll}
-        enableLogScrollButtons={enableLogScrollButtons}
         fetchLogs={() => fetchLogs({ stepName, stepStatus, taskRun })}
         forcePolling={forceLogPolling}
         isSidecar={isSidecar}