fix: limit delegate query to 100 & dynamic per page options (#1625)

* fix: limit delegate query to 100

* refactor: calculate per page options based on activeDelegates

* fix: edge case for less than 25 active delegates

* test: add unit tests

__tests__/unit/components/Wallet/WalletDelegates.spec.js

@@ -1,3 +1,4 @@
+import { merge } from 'lodash'
 import { mount } from '@vue/test-utils'
 import { useI18nGlobally } from '../../__utils__/i18n'
 import { WalletDelegates } from '@/components/Wallet'
@@ -8,8 +9,20 @@ describe('WalletDelegates', () => {
   let showExplanation
   let walletVote = {}
 
-  const mountWrapper = () => {
-    return mount(WalletDelegates, {
+  const activeDelegatesMock = count => {
+    return {
+      mocks: {
+        session_network: {
+          constants: {
+            activeDelegates: count
+          }
+        }
+      }
+    }
+  }
+
+  const mountWrapper = config => {
+    return mount(WalletDelegates, merge({
       i18n,
       provide: {
         walletVote
@@ -33,14 +46,30 @@ describe('WalletDelegates', () => {
       stubs: {
         TableWrapper: true
       }
-    })
+    }, config))
   }
 
   it('should render', () => {
     const wrapper = mountWrapper()
     expect(wrapper.isVueInstance()).toBeTrue()
   })
 
+  it('should dynamically calculate the per page options', () => {
+    let wrapper = mountWrapper(activeDelegatesMock(25))
+    expect(wrapper.vm.perPageOptions).toEqual([25])
+
+    wrapper = mountWrapper(activeDelegatesMock(53))
+    expect(wrapper.vm.perPageOptions).toEqual([25, 53])
+
+    wrapper = mountWrapper(activeDelegatesMock(101))
+    expect(wrapper.vm.perPageOptions).toEqual([25, 50, 75, 100])
+  })
+
+  it('should cap the query limit at 100', () => {
+    const wrapper = mountWrapper(activeDelegatesMock(101))
+    expect(wrapper.vm.queryParams.limit).toBe(100)
+  })
+
   describe('when the wallet is voting', () => {
     beforeEach(() => {
       walletVote = { username: 'key' }

src/renderer/components/Wallet/WalletDelegates/WalletDelegates.vue

@@ -39,7 +39,7 @@
       :no-data-message="$t('TABLE.NO_DELEGATES')"
       :current-page="currentPage"
       :per-page="queryParams.limit"
-      :per-page-dropdown="[25, 51]"
+      :per-page-dropdown="perPageOptions"
       class="WalletDelegates__table"
       @on-row-click="onRowClick"
       @on-per-page-change="onPerPageChange"
@@ -103,6 +103,28 @@ export default {
   }),
 
   computed: {
+    perPageOptions () {
+      if (this.activeDelegates < 25) {
+        return [this.activeDelegates]
+      }
+
+      const options = []
+
+      for (let i = 25; i <= this.activeDelegates && i <= 100; i = i + 25) {
+        options.push(i)
+      }
+
+      if (this.activeDelegates < 100) {
+        if (this.activeDelegates - options[options.length - 1] > 10) {
+          options.push(this.activeDelegates)
+        } else {
+          options[options.length - 1] = this.activeDelegates
+        }
+      }
+
+      return options
+    },
+
     activeDelegates () {
       return this.session_network.constants.activeDelegates || 51
     },
@@ -140,7 +162,7 @@ export default {
   },
 
   mounted () {
-    this.queryParams.limit = this.activeDelegates
+    this.queryParams.limit = Math.min(100, this.activeDelegates)
     this.fetchDelegates()
   },