[DRAFT] Collapse Readiness

frontend/__tests__/components/GScrollContainer.spec.js

@@ -0,0 +1,44 @@
+//
+// SPDX-FileCopyrightText: 2026 SAP SE or an SAP affiliate company and Gardener contributors
+//
+// SPDX-License-Identifier: Apache-2.0
+//
+
+import { mount } from '@vue/test-utils'
+
+import GScrollContainer from '@/components/GScrollContainer.vue'
+
+describe('components', () => {
+  describe('g-scroll-container', () => {
+    afterEach(() => {
+      vi.restoreAllMocks()
+    })
+
+    it('should pin the rendered width', async () => {
+      vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect')
+        .mockReturnValue({
+          width: 87,
+          height: 32,
+          top: 0,
+          right: 87,
+          bottom: 32,
+          left: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        })
+
+      const wrapper = mount(GScrollContainer, {
+        props: {
+          pinWidth: true,
+        },
+      })
+      await wrapper.vm.$nextTick()
+      await Promise.resolve()
+
+      expect(wrapper.attributes('style')).toContain('width: 87px')
+      expect(wrapper.attributes('style')).toContain('min-width: 87px')
+      expect(wrapper.attributes('style')).toContain('max-width: 87px')
+    })
+  })
+})

frontend/__tests__/components/GStatusTag.spec.js

@@ -79,7 +79,7 @@ describe('components', () => {
       expect(vm.chipTooltip.title).toBe('foo-bar')
       expect(vm.chipIcon).toBe('')
       expect(vm.isError || vm.isUnknown || vm.isProgressing).toBe(false)
-      expect(vm.color).toBe('primary')
+      expect(vm.color).toBe('success')
       expect(vm.visible).toBe(true)
     })
 
@@ -112,7 +112,7 @@ describe('components', () => {
       const vm = wrapper.vm
       expect(vm.visible).toBe(false)
       expect(vm.isProgressing).toBe(true)
-      expect(vm.color).toBe('primary')
+      expect(vm.color).toBe('success')
       expect(vm.chipStatus).toBe('Progressing')
       expect(vm.chipIcon).toBe('')
     })

frontend/__tests__/components/GStatusTags.spec.js

@@ -17,6 +17,9 @@ import { createShootItemComposable } from '@/composables/useShootItem'
 
 const { createVuetifyPlugin } = global.fixtures.helper
 
+const originalRequestAnimationFrame = window.requestAnimationFrame
+const originalCancelAnimationFrame = window.cancelAnimationFrame
+
 describe('components', () => {
   describe('g-status-tags', () => {
     const lastTransitionTime = 'last-transition-time'
@@ -51,6 +54,12 @@ describe('components', () => {
     }
 
     beforeEach(() => {
+      window.requestAnimationFrame = callback => {
+        callback()
+        return 1
+      }
+      window.cancelAnimationFrame = () => {}
+
       pinia = createTestingPinia({ stubActions: false })
       const authnStore = useAuthnStore(pinia) // eslint-disable-line no-unused-vars
       const configStore = useConfigStore(pinia)
@@ -75,6 +84,12 @@ describe('components', () => {
       }
     })
 
+    afterEach(() => {
+      vi.useRealTimers()
+      window.requestAnimationFrame = originalRequestAnimationFrame
+      window.cancelAnimationFrame = originalCancelAnimationFrame
+    })
+
     it('should generate condition object for simple condition type', () => {
       const type = 'SampleConditionAvailability'
       const wrapper = mountStatusTags([type])
@@ -166,5 +181,84 @@ describe('components', () => {
       const shortNames = wrapper.vm.conditions.map(condition => condition.shortName)
       expect(shortNames).toEqual(['IC', 'C', 'D', 'CPO'])
     })
+
+    it('should auto scroll right when hovering near the right edge', async () => {
+      const wrapper = mountStatusTags(['APIServerAvailable'])
+      const scrollContainer = document.createElement('div')
+      Object.defineProperties(scrollContainer, {
+        scrollLeft: {
+          value: 0,
+          writable: true,
+        },
+        scrollWidth: {
+          value: 200,
+        },
+        clientWidth: {
+          value: 100,
+        },
+      })
+      scrollContainer.getBoundingClientRect = () => ({
+        left: 0,
+        right: 100,
+      })
+
+      wrapper.vm.containerRef = wrapper.element
+      wrapper.vm.containerRef.closest = vi.fn().mockReturnValue(scrollContainer)
+
+      wrapper.vm.onMouseMove({ clientX: 95 })
+      await wrapper.vm.$nextTick()
+
+      expect(scrollContainer.scrollLeft).toBeGreaterThan(0)
+    })
+
+    it('should stop auto scroll when cursor moves away from the edge', async () => {
+      const wrapper = mountStatusTags(['APIServerAvailable'])
+      const scrollContainer = document.createElement('div')
+      Object.defineProperties(scrollContainer, {
+        scrollLeft: {
+          value: 10,
+          writable: true,
+        },
+        scrollWidth: {
+          value: 200,
+        },
+        clientWidth: {
+          value: 100,
+        },
+      })
+      scrollContainer.getBoundingClientRect = () => ({
+        left: 0,
+        right: 100,
+      })
+
+      wrapper.vm.containerRef = wrapper.element
+      wrapper.vm.containerRef.closest = vi.fn().mockReturnValue(scrollContainer)
+
+      wrapper.vm.onMouseMove({ clientX: 50 })
+      await wrapper.vm.$nextTick()
+
+      expect(scrollContainer.scrollLeft).toBe(10)
+    })
+
+    it('should scroll back to the start when the chips collapse', async () => {
+      vi.useFakeTimers()
+      const wrapper = mountStatusTags(['APIServerAvailable'])
+      const scrollContainer = document.createElement('div')
+      scrollContainer.scrollTo = vi.fn()
+
+      wrapper.vm.containerRef = wrapper.element
+      wrapper.vm.containerRef.closest = vi.fn().mockReturnValue(scrollContainer)
+
+      wrapper.vm.onMouseEnter()
+      wrapper.vm.onMouseLeave()
+      await vi.advanceTimersByTimeAsync(3500)
+      await wrapper.vm.$nextTick()
+      expect(wrapper.vm.hovered).toBe(false)
+
+      expect(scrollContainer.scrollTo).toHaveBeenCalledWith({
+        left: 0,
+        behavior: 'smooth',
+      })
+    })
   })
 })

frontend/src/components/GScrollContainer.vue

@@ -19,10 +19,14 @@ SPDX-License-Identifier: Apache-2.0
 import {
   ref,
   computed,
+  nextTick,
+  onMounted,
 } from 'vue'
 import {
   useScroll,
   useElementSize,
+  useResizeObserver,
+  useMutationObserver,
 } from '@vueuse/core'
 
 const props = defineProps({
@@ -35,17 +39,39 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  pinWidth: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const scrollRef = ref(null)
+const pinnedWidth = ref(null)
+const scrollSize = ref({ width: 0, height: 0 })
 const { x, y } = useScroll(scrollRef)
 const { width, height } = useElementSize(scrollRef)
 
+const updateScrollSize = () => {
+  const el = scrollRef.value
+  if (!el) {
+    return
+  }
+  scrollSize.value = { width: el.scrollWidth, height: el.scrollHeight }
+}
+
+useResizeObserver(scrollRef, updateScrollSize)
+useMutationObserver(scrollRef, updateScrollSize, {
+  childList: true,
+  subtree: true,
+  attributes: true,
+  characterData: true,
+})
+
 const isVertical = computed(() => props.direction === 'y')
 
 const fadeLength = computed(() => {
   const size = isVertical.value ? height.value : width.value
-  return Math.max(40, size / 2)
+  return Math.min(60, Math.max(40, size / 2))
 })
 
 const fadeSize = computed(() => {
@@ -55,28 +81,48 @@ const fadeSize = computed(() => {
   }
 
   const remaining = isVertical.value
-    ? el.scrollHeight - (y.value + height.value)
-    : el.scrollWidth - (x.value + width.value)
+    ? scrollSize.value.height - (y.value + height.value)
+    : scrollSize.value.width - (x.value + width.value)
 
   return Math.min(fadeLength.value, Math.max(0, remaining))
 })
 
 const containerStyle = computed(() => {
+  const style = {}
+
+  if (pinnedWidth.value !== null) {
+    const width = `${pinnedWidth.value}px`
+    style.width = width
+    style.minWidth = width
+    style.maxWidth = width
+  }
+
   if (fadeSize.value <= 0) {
-    return {}
+    return style
   }
 
   const gradientDir = isVertical.value ? 'to bottom' : 'to right'
   const mask = `linear-gradient(${gradientDir}, black calc(100% - ${fadeSize.value}px), transparent)`
-  return {
-    maskImage: mask,
-    WebkitMaskImage: mask,
-  }
+  style.maskImage = mask
+  style.WebkitMaskImage = mask
+  return style
 })
 
 const directionClass = computed(() => {
   return isVertical.value ? 'scroll-y' : 'scroll-x'
 })
+
+onMounted(async () => {
+  if (!props.pinWidth) {
+    return
+  }
+
+  await nextTick()
+  const width = scrollRef.value?.getBoundingClientRect().width
+  if (width > 0) {
+    pinnedWidth.value = Math.ceil(width)
+  }
+})
 </script>
 
 <style scoped>