From b156267e394384ddc890435951d6f7fd380980ef Mon Sep 17 00:00:00 2001 From: Karl Persson Date: Wed, 25 Oct 2023 12:21:01 +0200 Subject: [PATCH] ServiceAccount: Add pagination to service accout table (#77044) * Add pagination to service account table --- .../ServiceAccountsListPage.test.tsx | 2 ++ .../ServiceAccountsListPage.tsx | 20 ++++++++++++++++++- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/public/app/features/serviceaccounts/ServiceAccountsListPage.test.tsx b/public/app/features/serviceaccounts/ServiceAccountsListPage.test.tsx index 8ccb8387f81..bce6b83e0d0 100644 --- a/public/app/features/serviceaccounts/ServiceAccountsListPage.test.tsx +++ b/public/app/features/serviceaccounts/ServiceAccountsListPage.test.tsx @@ -16,6 +16,7 @@ jest.mock('app/core/core', () => ({ })); const setup = (propOverrides: Partial) => { + const changePageMock = jest.fn(); const changeQueryMock = jest.fn(); const fetchACOptionsMock = jest.fn(); const fetchServiceAccountsMock = jest.fn(); @@ -33,6 +34,7 @@ const setup = (propOverrides: Partial) => { showPaging: false, totalPages: 1, serviceAccounts: [], + changePage: changePageMock, changeQuery: changeQueryMock, fetchACOptions: fetchACOptionsMock, fetchServiceAccounts: fetchServiceAccountsMock, diff --git a/public/app/features/serviceaccounts/ServiceAccountsListPage.tsx b/public/app/features/serviceaccounts/ServiceAccountsListPage.tsx index a5b1c7cdbd0..8aedc6dc563 100644 --- a/public/app/features/serviceaccounts/ServiceAccountsListPage.tsx +++ b/public/app/features/serviceaccounts/ServiceAccountsListPage.tsx @@ -4,7 +4,16 @@ import React, { useEffect, useState } from 'react'; import { connect, ConnectedProps } from 'react-redux'; import { GrafanaTheme2, OrgRole } from '@grafana/data'; -import { ConfirmModal, FilterInput, LinkButton, RadioButtonGroup, useStyles2, InlineField } from '@grafana/ui'; +import { + ConfirmModal, + FilterInput, + LinkButton, + RadioButtonGroup, + useStyles2, + InlineField, + Pagination, +} from '@grafana/ui'; +import { Flex } from '@grafana/ui/src/unstable'; import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA'; import { Page } from 'app/core/components/Page/Page'; import PageLoader from 'app/core/components/PageLoader/PageLoader'; @@ -15,6 +24,7 @@ import { CreateTokenModal, ServiceAccountToken } from './components/CreateTokenM import ServiceAccountListItem from './components/ServiceAccountsListItem'; import { changeQuery, + changePage, fetchACOptions, fetchServiceAccounts, deleteServiceAccount, @@ -34,6 +44,7 @@ function mapStateToProps(state: StoreState) { } const mapDispatchToProps = { + changePage, changeQuery, fetchACOptions, fetchServiceAccounts, @@ -46,6 +57,9 @@ const mapDispatchToProps = { const connector = connect(mapStateToProps, mapDispatchToProps); export const ServiceAccountsListPageUnconnected = ({ + page, + changePage, + totalPages, serviceAccounts, isLoading, roleOptions, @@ -238,6 +252,10 @@ export const ServiceAccountsListPageUnconnected = ({ ))} + + + + )}