graphing/designer: scroll to added rows

Change-Id: If8e0655513a4e689e8b64437985b0dec10075f79

Author: ottermata

packages/cmk-frontend-vue/src/graphing/designer/components/MetricsTable.vue

@@ -12,7 +12,7 @@ import CmkIcon from 'cmk-ui-library/components/CmkIcon'
 import CmkScrollContainer from 'cmk-ui-library/components/CmkScrollContainer.vue'
 import CmkInput from 'cmk-ui-library/components/user-input/CmkInput.vue'
 import usei18n from 'cmk-ui-library/lib/i18n'
-import { computed, ref } from 'vue'
+import { computed, nextTick, ref, useTemplateRef } from 'vue'
 
 import EditableTable from '@/monitoring/shared/components/EditableTable.vue'
 import type { CellAction } from '@/monitoring/shared/components/cell/ActionsCell.vue'
@@ -78,6 +78,13 @@ const titleMacroHelp = renderTitleMacroHelp(titleMacros)
 const rowSelection = ref<RowSelectionState>({})
 const expandedRows = ref<Record<string, boolean>>({})
 
+const table = useTemplateRef<{ scrollToRow: (key: ItemId) => void }>('table')
+
+async function scrollToRow(id: ItemId): Promise<void> {
+  await nextTick()
+  table.value?.scrollToRow(id)
+}
+
 const columns: ColumnDef<DesignerItem>[] = [
   { id: 'drag', header: '', meta: { justify: 'center' } },
   { id: 'visibility', header: '', meta: { justify: 'center' } },
@@ -140,6 +147,7 @@ function onAddSource(value: string): void {
     }
   })
   expandedRows.value = { ...expandedRows.value, [id]: true }
+  void scrollToRow(id)
 }
 
 const rowActions: CellAction[] = [
@@ -171,7 +179,10 @@ const rowDelete = useDeleteWithDependents(store, () => {
 
 function onRowAction(row: DesignerItem, action: CellAction): void {
   if (action.id === 'clone') {
-    store.clone([row.id])
+    const [created] = store.clone([row.id])
+    if (created !== undefined) {
+      void scrollToRow(created)
+    }
   } else if (action.id === 'delete') {
     rowDelete.request([row.id])
   } else if (action.id === 'add-rule' && row.type === 'metric_backend' && isComplete(row)) {
@@ -180,8 +191,11 @@ function onRowAction(row: DesignerItem, action: CellAction): void {
 }
 
 function onBulkClone(): void {
-  store.clone(selectedIds.value)
+  const [firstCreated] = store.clone(selectedIds.value)
   rowSelection.value = {}
+  if (firstCreated !== undefined) {
+    void scrollToRow(firstCreated)
+  }
 }
 
 function onLineStyleChange(row: DesignerItem, value: string | null): void {
@@ -224,6 +238,7 @@ function onTitleChange(row: DesignerItem, title: string | undefined): void {
       :style="{ overflow: 'var(--graphing-designer-body-table-overflow, auto)' }"
     >
       <EditableTable
+        ref="table"
         v-model:row-selection="rowSelection"
         :rows="[...store.items.value]"
         :columns="columns"

packages/cmk-frontend-vue/src/monitoring/shared/components/EditableTable.vue

@@ -12,7 +12,7 @@ import {
   useVueTable
 } from '@tanstack/vue-table'
 import useDragging from 'cmk-ui-library/lib/useDragging'
-import { computed, provide, ref } from 'vue'
+import { type ComponentPublicInstance, computed, provide, ref } from 'vue'
 
 import {
   COLUMN_LAYOUT_KEY,
@@ -123,6 +123,23 @@ provide(ROW_DRAG_KEY, {
 function isRowExpanded(row: T, index: number): boolean {
   return props.expandedRows?.[String(props.getRowKey(row, index))] === true
 }
+
+const rowGroups = new Map<string, HTMLElement>()
+
+function registerRowGroup(key: string, element: Element | ComponentPublicInstance | null): void {
+  if (element instanceof HTMLElement) {
+    rowGroups.set(key, element)
+  } else {
+    rowGroups.delete(key)
+  }
+}
+
+defineExpose({
+  /** Scroll the row with this key into view, together with its expansion. */
+  scrollToRow: (key: string | number): void => {
+    rowGroups.get(String(key))?.scrollIntoView({ block: 'center', behavior: 'smooth' })
+  }
+})
 </script>
 
 <template>
@@ -146,6 +163,7 @@ function isRowExpanded(row: T, index: number): boolean {
       <tbody
         v-for="(row, index) in rows"
         :key="getRowKey(row, index)"
+        :ref="(element) => registerRowGroup(String(getRowKey(row, index)), element)"
         class="monitoring-editable-table__row-group"
         :class="{ 'monitoring-editable-table__row-group--dragging': draggedRowIndex === index }"
       >

packages/cmk-frontend-vue/tests/graphing/designer/components/MetricsTable.test.ts

@@ -3,9 +3,9 @@
  * This file is part of Checkmk (https://checkmk.com). It is subject to the terms and
  * conditions defined in the file COPYING, which is part of this source code package.
  */
-import { fireEvent, render, screen, waitFor } from '@testing-library/vue'
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/vue'
 import type { TitleMacroGroup } from 'cmk-shared-typing/typescript/custom_graph_designer'
-import { vi } from 'vitest'
+import { type MockInstance, vi } from 'vitest'
 
 import MetricsTable from '@/graphing/designer/components/MetricsTable.vue'
 import { useGraphItems } from '@/graphing/designer/composables/useGraphItems'
@@ -25,6 +25,10 @@ vi.mock('@/graphing/designer/components/MetricBackendRuleSlideIn.vue', () => ({
   }
 }))
 
+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
 const ADD_RULE_LABEL = 'Add rule: Metric backend (Custom query)'
 
 const PALETTE: readonly string[] = ['#28a2f3', '#ff8400', '#ec48b6', '#ffd703']
@@ -33,6 +37,15 @@ const TITLE_MACROS: TitleMacroGroup[] = [
   { source_type: 'rrd_metric', macros: ['$DEFAULT_TITLE$', '$METRIC_NAME$'] }
 ]
 
+/** Waits for the row group holding `id` to have been scrolled into view. */
+async function expectScrolledToRow(scrollIntoView: MockInstance, id: string): Promise<void> {
+  await waitFor(() => {
+    const scrolled = scrollIntoView.mock.contexts.at(-1)
+    expect(scrolled).toBeInstanceOf(HTMLElement)
+    expect(within(scrolled as HTMLElement).getByText(id)).toBeInTheDocument()
+  })
+}
+
 function renderTable(
   seed: DesignerItem[] = [],
   metricBackendAvailable = true,
@@ -63,6 +76,23 @@ test('adding a source appends an auto-expanded draft row', async () => {
   expect(await screen.findByText('Single metric')).toBeInTheDocument()
 })
 
+test('the added row is scrolled into view', async () => {
+  const scrollIntoView = vi.spyOn(window.HTMLElement.prototype, 'scrollIntoView')
+  renderTable([rrdMetricItem('A')])
+  await fireEvent.click(screen.getByRole('combobox', { name: 'Add source' }))
+  await fireEvent.click(await screen.findByRole('option', { name: 'Checkmk RRD' }))
+
+  await expectScrolledToRow(scrollIntoView, 'B')
+})
+
+test('a cloned row is scrolled into view', async () => {
+  const scrollIntoView = vi.spyOn(window.HTMLElement.prototype, 'scrollIntoView')
+  renderTable([rrdMetricItem('A')])
+  await fireEvent.click(screen.getByRole('button', { name: 'Clone' }))
+
+  await expectScrolledToRow(scrollIntoView, 'B')
+})
+
 test('adding a constant line opens the constant form', async () => {
   const { store } = renderTable()
   await fireEvent.click(screen.getByRole('combobox', { name: 'Add source' }))