Move all log autoscroll logic into component (#2106)

Author: MetRonnie

src/components/cylc/log/Log.vue

@@ -16,8 +16,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div ref="wrapper">
-    <pre data-cy="log-text"><span
+  <div
+    ref="scrollWrapper"
+    class="h-100 overflow-auto px-4 pb-2"
+  >
+    <pre ref="logText" data-cy="log-text"><span
       v-for="(log, index) in computedLogs"
       :key="index"
       :class="wordWrap ? 'text-pre-wrap' : 'text-pre'"
@@ -26,21 +29,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       v-if="logs.length"
       position="fixed"
       location="bottom right"
-      class="ma-3"
+      class="ma-5"
       @click="scrollToTop"
       :icon="$options.icons.mdiMouseMoveUp"
+      data-cy="log-scroll-top"
     />
     <!-- a div to use for autoscrolling -->
     <div ref="autoScrollEnd"></div>
   </div>
 </template>
 
 <script>
-import { useTemplateRef, watch, onBeforeUnmount } from 'vue'
+import { useTemplateRef, watch, onBeforeUnmount, nextTick } from 'vue'
+import { useScroll, useVModel, whenever } from '@vueuse/core'
 import { when } from '@/utils'
 import {
   mdiMouseMoveUp
 } from '@mdi/js'
+
 export default {
   name: 'LogComponent',
 
@@ -70,28 +76,51 @@ export default {
     }
   },
 
-  setup (props) {
-    const wrapperRef = useTemplateRef('wrapper')
+  emits: [
+    'update:autoScroll'
+  ],
+
+  setup (props, { emit }) {
+    const logText = useTemplateRef('logText')
+    const scrollWrapper = useTemplateRef('scrollWrapper')
     const autoScrollEndRef = useTemplateRef('autoScrollEnd')
 
+    const autoScroll = useVModel(props, 'autoScroll', emit)
+    const { arrivedState, directions } = useScroll(scrollWrapper)
+
+    // Turn on autoscroll when user scrolls to bottom:
+    whenever(() => arrivedState.bottom && !arrivedState.top, () => {
+      // (when page first loads both top and bottom are true)
+      autoScroll.value = true
+    })
+    // Turn off autoscroll when user scrolls up:
+    whenever(() => props.logs.length && directions.top, () => {
+      autoScroll.value = false
+    })
+
     function scrollToEnd () {
       autoScrollEndRef.value?.scrollIntoView({ behavior: 'smooth' })
     }
 
-    function scrollToTop () {
-      wrapperRef.value?.scrollIntoView({ behavior: 'smooth' })
+    async function scrollToTop () {
+      autoScroll.value = false
+      // Wait for smooth scroll cancel to happen
+      await nextTick()
+      scrollWrapper.value?.scroll({ top: 0, left: 0, behavior: 'smooth' })
     }
 
     const ro = new ResizeObserver(scrollToEnd)
 
-    when(wrapperRef, () => {
+    when(logText, () => {
       watch(
-        () => props.autoScroll,
+        autoScroll,
         (val) => {
           if (val) {
             scrollToEnd()
-            ro.observe(wrapperRef.value)
+            ro.observe(logText.value)
           } else {
+            // When autoscroll is turned off, cancel any smooth scroll in progress:
+            scrollWrapper.value.scrollBy(0, 0)
             ro.disconnect()
           }
         },

src/views/Log.vue

@@ -139,49 +139,40 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           />
         </v-col>
       </v-row>
+      <v-alert
+        v-if="results.error"
+        type="error"
+        variant="tonal"
+        density="compact"
+        class="mt-2"
+        :icon="$options.icons.mdiFileAlertOutline"
+      >
+        <span class="text-pre-wrap text-break">
+          {{ results.error }}
+        </span>
+      </v-alert>
     </v-container>
 
     <!-- the log file viewer -->
-    <div
-      ref="logScroll"
-      no-gutters
-      class="h-100 overflow-auto px-4 pb-2"
-    >
-      <v-skeleton-loader
-        v-if="id && file && results.connected == null"
-        type="text@5"
-        class="mx-n4 align-content-start"
-      />
-      <template v-else >
-        <div class="d-flex flex-column justify-center">
-          <v-alert
-            v-if="results.error"
-            type="error"
-            variant="tonal"
-            density="comfortable"
-            class="mb-4"
-            :icon="$options.icons.mdiFileAlertOutline"
-          >
-            <span class="text-pre-wrap text-break">
-              {{ results.error }}
-            </span>
-          </v-alert>
-          <log-component
-            data-cy="log-viewer"
-            :logs="results.lines"
-            :timestamps="timestamps"
-            :word-wrap="wordWrap"
-            :autoScroll="autoScroll"
-          />
-        </div>
-      </template>
-    </div>
+    <v-skeleton-loader
+      v-if="id && file && results.connected == null"
+      type="text@5"
+      class="align-content-start"
+    />
+    <log-component
+      v-else
+      data-cy="log-viewer"
+      :logs="results.lines"
+      :timestamps="timestamps"
+      :word-wrap="wordWrap"
+      v-model:autoScroll="autoScroll"
+    />
   </v-container>
 </template>
 
 <script>
-import { ref, computed, useTemplateRef } from 'vue'
-import { usePrevious, useScroll, whenever } from '@vueuse/core'
+import { ref, computed } from 'vue'
+import { usePrevious, whenever } from '@vueuse/core'
 import { useStore } from 'vuex'
 import {
   mdiClockOutline,
@@ -385,23 +376,6 @@ export default {
 
     /** AutoScroll? */
     const autoScroll = useInitialOptions('autoScroll', { props, emit }, true)
-    const logScrollEl = useTemplateRef('logScroll')
-    const { arrivedState, directions } = useScroll(logScrollEl)
-    // Turn on autoscroll when user scrolls to bottom:
-    whenever(() => arrivedState.bottom && !arrivedState.top, () => {
-      // (when page first loads both top and bottom are true)
-      autoScroll.value = true
-    })
-    // Turn off autoscroll when user scrolls up:
-    whenever(() => directions.top, () => {
-      if (results.value.lines.length) {
-        autoScroll.value = false
-      }
-    })
-    // When autoscroll is turned off, cancel any smooth scroll in progress:
-    whenever(() => !autoScroll.value, () => {
-      logScrollEl.value?.scrollBy(0, 0)
-    })
 
     /** View toolbar button size */
     const toolbarBtnSize = '40'
@@ -430,7 +404,6 @@ export default {
       debouncedUpdateRelativeID,
       toolbarBtnSize,
       toolbarBtnProps: btnProps(toolbarBtnSize),
-      logScrollEl
     }
   },
 

tests/component/specs/log.cy.js

@@ -37,16 +37,6 @@ function logLines (length) {
 }
 
 describe('Log Component', () => {
-  beforeEach(() => {
-    // Cypress needs an ancestor that hides overflow for its visibility assertions
-    // to detect if an element is scrolled out of view
-    // https://docs.cypress.io/app/core-concepts/interacting-with-elements#An-element-is-considered-hidden-if
-    cy.get('[data-cy-root]')
-      .then(($el) => {
-        $el.css({ height: '100vh', overflow: 'auto' })
-      })
-  })
-
   it('renders', () => {
     // see: https://on.cypress.io/mounting-vue
     cy.mount(LogComponent, merge(mountOpts, {
@@ -101,7 +91,10 @@ describe('Log Component', () => {
         autoScroll: true,
       },
     })).as('component')
-    cy.get('.v-btn').click({ force: true }).click({ force: true })
+    // should be scrolled to bottom initially with autoScroll prop set to true
+    cy.get('span').contains('Line 30')
+      .should('be.visible')
+    cy.get('[data-cy=log-scroll-top').click()
     cy.get('span').contains('Line 1')
       .should('be.visible')
   })

tests/component/support/component-index.html

@@ -5,6 +5,13 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>Components App</title>
+    <style>
+      [data-v-app] {
+        /* Ensure we can use visibility assertions to test if an element has scrolled out of view.
+        See https://docs.cypress.io/app/core-concepts/interacting-with-elements#An-element-is-considered-hidden-if */
+        height: 100vh;
+      }
+    </style>
   </head>
   <body>
     <div data-cy-root></div>

tests/unit/setup.js

@@ -10,3 +10,7 @@ class ResizeObserverStub {
 }
 
 window.ResizeObserver ??= ResizeObserverStub
+
+// Mock element scroll API as not currently included in jsdom:
+// https://github.com/jsdom/jsdom/issues/1422
+Element.prototype.scrollBy ??= function () { }