PR Feedback

frontend/__tests__/components/Vuetify.spec.js

@@ -104,4 +104,86 @@ describe('components', () => {
       expect(wrapper.find(selector).text()).toBe(hint)
     })
   })
+
+  describe('v-data-table-virtual', () => {
+    // These tests basically test that nothing changes in the way vuetify renders the virtual table
+    // as the way it behaves in case no item-height is defined is kind of undeterministic
+    const TestTableRow = {
+      name: 'TestTableRow',
+      props: {
+        item: {
+          type: Object,
+          required: true,
+        },
+      },
+      template: '<div class="test-table-row">{{ item.name }}</div>',
+    }
+
+    function mountDataTableVirtual ({ itemHeight, itemsCount = 50 } = {}) {
+      const items = Array.from({ length: itemsCount }).map((_, i) => ({
+        id: i,
+        name: `Item ${i}`,
+      }))
+      const columns = [
+        { key: 'name', title: 'Name' },
+      ]
+
+      const Component = {
+        name: 'TestVirtualTable',
+        components: {
+          TestTableRow,
+        },
+        template: `
+          <v-app>
+            <v-main>
+              <v-data-table-virtual
+                :items="items"
+                :columns="columns"
+                :item-height="itemHeight"
+                :height="400"
+              >
+                <template #item="{ item }">
+                  <TestTableRow :item="item" />
+                </template>
+              </v-data-table-virtual>
+            </v-main>
+          </v-app>
+        `,
+        data () {
+          return {
+            items,
+            columns,
+            itemHeight,
+          }
+        },
+      }
+
+      return mount(Component, {
+        global: {
+          plugins: [
+            createVuetifyPlugin(),
+          ],
+        },
+      })
+    }
+
+    it('should render default number of rows if item-height is not defined', async () => {
+      const wrapper = mountDataTableVirtual({ itemsCount: 50 })
+      await nextTick()
+
+      const rows = wrapper.findAllComponents(TestTableRow)
+      expect(rows).toHaveLength(25) // by default, the table expects 16px tall rows
+    })
+
+    it('should only render the visible rows if item-height is defined', async () => {
+      const wrapper = mountDataTableVirtual({
+        itemsCount: 50,
+        itemHeight: 40,
+      })
+      await nextTick()
+
+      const rows = wrapper.findAllComponents(TestTableRow)
+      expect(rows).toHaveLength(10) // 400px / 40px = 10 rows
+    })
+  })
 })

frontend/src/components/GDataTableFooter.vue

@@ -87,7 +87,6 @@ const props = defineProps({
       { value: 25, title: '25' },
       { value: 50, title: '50' },
       { value: 100, title: '100' },
-      { value: -1, title: 'Infinite' },
     ]),
   },
   page: {

frontend/src/views/GShootList.vue

@@ -166,7 +166,7 @@ SPDX-License-Identifier: Apache-2.0
         fixed-header
         class="g-table"
         height="calc(100vh - 240px)"
-        item-height="50px"
+        item-height="52px"
       >
         <template #progress>
           <g-shoot-list-progress />
@@ -387,16 +387,6 @@ export default {
     defaultSortBy () {
       return [{ key: 'name', order: 'asc' }]
     },
-    clusterAccessDialog: {
-      get () {
-        return this.dialog === 'access'
-      },
-      set (value) {
-        if (!value) {
-          this.hideDialog()
-        }
-      },
-    },
     focusModeInternal: {
       get () {
         return this.focusMode