From d3e34d8448fb606c3c2a8ead8b041d04be27d4db Mon Sep 17 00:00:00 2001 From: Maycon Santos Date: Tue, 28 Feb 2023 16:32:12 +0100 Subject: [PATCH] Use single page size helper with new larger values (#143) Reduce duplicated code with single helper for pagination On larger deployments we should allow for larger pages fix popover key issue and vertical spacing update deprecated keys --- src/components/AccessControlModalGroups.tsx | 2 +- src/utils/pageSize.tsx | 24 +++++++++++++++++++++ src/views/AccessControl.tsx | 19 +++++----------- src/views/Activity.tsx | 14 +++--------- src/views/Nameservers.tsx | 13 +++-------- src/views/Peers.tsx | 16 ++++---------- src/views/Routes.tsx | 14 ++---------- src/views/SetupKeys.tsx | 13 ++--------- src/views/Users.tsx | 13 +++-------- 9 files changed, 47 insertions(+), 81 deletions(-) create mode 100644 src/utils/pageSize.tsx diff --git a/src/components/AccessControlModalGroups.tsx b/src/components/AccessControlModalGroups.tsx index cd5a51d..5fcaea0 100644 --- a/src/components/AccessControlModalGroups.tsx +++ b/src/components/AccessControlModalGroups.tsx @@ -16,7 +16,7 @@ const AccessControlModalGroups:React.FC = ({data, title, visible, onCance return ( <> - onCancel()} footer={null}> + onCancel()} footer={null}> { + + const [pageSize, setPageSize] = useState(10); + + const onChangePageSize = (value: string) => { + setPageSize(parseInt(value.toString())) + } + + const pageSizeOptions = [ + {label: "10", value: "10"}, + {label: "25", value: "25"}, + {label: "50", value: "50"}, + {label: "100", value: "100"}, + {label: "1000", value: "1000"} + ] + + return { + onChangePageSize, + pageSize, + pageSizeOptions + } +} \ No newline at end of file diff --git a/src/views/AccessControl.tsx b/src/views/AccessControl.tsx index 07c23e4..f00363d 100644 --- a/src/views/AccessControl.tsx +++ b/src/views/AccessControl.tsx @@ -36,6 +36,7 @@ import {Group} from "../store/group/types"; import AccessControlModalGroups from "../components/AccessControlModalGroups"; import tableSpin from "../components/Spin"; import {useGetAccessTokenSilently} from "../utils/token"; +import {usePageSizeHelpers} from "../utils/pageSize"; const {Title, Paragraph, Text} = Typography; const {Column} = Table; @@ -56,6 +57,7 @@ interface GroupsToShow { } export const AccessControl = () => { + const {onChangePageSize,pageSizeOptions,pageSize} = usePageSizeHelpers() const {getAccessTokenSilently} = useGetAccessTokenSilently() const dispatch = useDispatch() @@ -68,7 +70,6 @@ export const AccessControl = () => { const [showTutorial, setShowTutorial] = useState(true) const [textToSearch, setTextToSearch] = useState(''); const [optionAllEnable, setOptionAllEnable] = useState('enabled'); - const [pageSize, setPageSize] = useState(5); const [currentPage, setCurrentPage] = useState(1); const [dataTable, setDataTable] = useState([] as RuleDataTable[]); const [ruleToAction, setRuleToAction] = useState(null as RuleDataTable | null); @@ -76,11 +77,6 @@ export const AccessControl = () => { const setupNewRuleVisible = useSelector((state: RootState) => state.rule.setupNewRuleVisible); const [groupPopupVisible, setGroupPopupVisible] = useState(false as boolean | undefined) - const pageSizeOptions = [ - {label: "5", value: "5"}, - {label: "10", value: "10"}, - {label: "15", value: "15"} - ] const optionsAllEnabled = [{label: 'Enabled', value: 'enabled'}, {label: 'All', value: 'all'}] @@ -200,10 +196,6 @@ export const AccessControl = () => { setOptionAllEnable(value) } - const onChangePageSize = (value: string) => { - setPageSize(parseInt(value.toString())) - } - const showConfirmDelete = () => { confirm({ icon: , @@ -327,7 +319,6 @@ export const AccessControl = () => { const _g = g as Group const peersCount = ` - ${_g.peers_count || 0} ${(!_g.peers_count || parseInt(_g.peers_count) !== 1) ? 'peers' : 'peer'} ` return ( -
{ {peersCount}
- ) }) + const mainContent = ({content}) return ( @@ -459,7 +450,7 @@ export const AccessControl = () => { if (deletedRule.loading || savedRule.loading) return <> return { + onOpenChange={visible => { if (visible) setRuleToAction(record as RuleDataTable) }}> }} diff --git a/src/views/Activity.tsx b/src/views/Activity.tsx index 0a4dec6..6a71255 100644 --- a/src/views/Activity.tsx +++ b/src/views/Activity.tsx @@ -12,6 +12,7 @@ import UserUpdate from "../components/UserUpdate"; import {useOidcUser} from "@axa-fr/react-oidc"; import {capitalize, formatDateTime} from "../utils/common"; import {User} from "../store/user/types"; +import {usePageSizeHelpers} from "../utils/pageSize"; const {Title, Paragraph, Text} = Typography; const {Column} = Table; @@ -20,6 +21,7 @@ interface EventDataTable extends Event { } export const Activity = () => { + const {onChangePageSize,pageSizeOptions,pageSize} = usePageSizeHelpers() const {getAccessTokenSilently} = useGetAccessTokenSilently() const {oidcUser} = useOidcUser(); const dispatch = useDispatch() @@ -31,14 +33,8 @@ export const Activity = () => { const setupKeys = useSelector((state: RootState) => state.setupKey.data); const [textToSearch, setTextToSearch] = useState(''); - const [pageSize, setPageSize] = useState(20); const [dataTable, setDataTable] = useState([] as EventDataTable[]); - const pageSizeOptions = [ - {label: "5", value: "5"}, - {label: "10", value: "10"}, - {label: "15", value: "15"}, - {label: "20", value: "20"} - ] + const transformDataTable = (d: Event[]): EventDataTable[] => { return d.map(p => ({key: p.id, ...p} as EventDataTable)) @@ -73,10 +69,6 @@ export const Activity = () => { setDataTable(transformDataTable(data)) } - const onChangePageSize = (value: string) => { - setPageSize(parseInt(value.toString())) - } - const getActivityRow = (group:string,text:string) => { return Group {group} {text} } diff --git a/src/views/Nameservers.tsx b/src/views/Nameservers.tsx index e9d4b6e..ad4d0a7 100644 --- a/src/views/Nameservers.tsx +++ b/src/views/Nameservers.tsx @@ -33,6 +33,7 @@ import {NameServer, NameServerGroup} from "../store/nameservers/types"; import NameServerGroupUpdate from "../components/NameServerGroupUpdate"; import {ExclamationCircleOutlined} from "@ant-design/icons"; import {useGetGroupTagHelpers} from "../utils/groups"; +import {usePageSizeHelpers} from "../utils/pageSize"; const {Title, Paragraph} = Typography; const {Column} = Table; @@ -45,6 +46,7 @@ interface NameserverGroupDataTable extends NameServerGroup { const styleNotification = {marginTop: 85} export const Nameservers = () => { + const {onChangePageSize,pageSizeOptions,pageSize} = usePageSizeHelpers() const {getAccessTokenSilently} = useGetAccessTokenSilently() const dispatch = useDispatch() @@ -63,14 +65,9 @@ export const Nameservers = () => { const [nsGroupToAction, setNsGroupToAction] = useState(null as NameserverGroupDataTable | null); const [textToSearch, setTextToSearch] = useState(''); const [optionAllEnable, setOptionAllEnable] = useState('enabled'); - const [pageSize, setPageSize] = useState(10); const [dataTable, setDataTable] = useState([] as NameserverGroupDataTable[]); const [showTutorial, setShowTutorial] = useState(false) - const pageSizeOptions = [ - {label: "5", value: "5"}, - {label: "10", value: "10"}, - {label: "15", value: "15"} - ] + const optionsAllEnabled = [{label: 'Enabled', value: 'enabled'}, {label: 'All', value: 'all'}] @@ -141,10 +138,6 @@ export const Nameservers = () => { setDataTable(transformDataTable(filterDataTable())) } - const onChangePageSize = (value: string) => { - setPageSize(parseInt(value.toString())) - } - const onClickEdit = () => { dispatch(nsGroupActions.setSetupNewNameServerGroupVisible(true)); dispatch(nsGroupActions.setNameServerGroup({ diff --git a/src/views/Peers.tsx b/src/views/Peers.tsx index 7e5e140..75d52ef 100644 --- a/src/views/Peers.tsx +++ b/src/views/Peers.tsx @@ -40,6 +40,7 @@ import {TooltipPlacement} from "antd/es/tooltip"; import {useGetAccessTokenSilently} from "../utils/token"; import {actions as userActions} from "../store/user"; import ButtonCopyMessage from "../components/ButtonCopyMessage"; +import {usePageSizeHelpers} from "../utils/pageSize"; const {Title, Paragraph, Text} = Typography; const {Column} = Table; @@ -47,7 +48,8 @@ const {confirm} = Modal; export const Peers = () => { - //const {accessToken} = useOidcAccessToken() + const {onChangePageSize,pageSizeOptions,pageSize} = usePageSizeHelpers() + const {getAccessTokenSilently} = useGetAccessTokenSilently() const dispatch = useDispatch() @@ -65,17 +67,12 @@ export const Peers = () => { const [textToSearch, setTextToSearch] = useState(''); const [optionOnOff, setOptionOnOff] = useState('all'); - const [pageSize, setPageSize] = useState(10); const [dataTable, setDataTable] = useState([] as PeerDataTable[]); const [peerToAction, setPeerToAction] = useState(null as PeerDataTable | null); const [groupPopupVisible, setGroupPopupVisible] = useState(false as boolean | undefined) const [showTutorial, setShowTutorial] = useState(false) - const pageSizeOptions = [ - {label: "5", value: "5"}, - {label: "10", value: "10"}, - {label: "15", value: "15"} - ] + const optionsOnOff = [{label: 'Online', value: 'on'}, {label: 'All', value: 'all'}] @@ -230,11 +227,6 @@ export const Peers = () => { setOptionOnOff(value) } - const onChangePageSize = (value: string) => { - setPageSize(parseInt(value.toString())) - } - - const showConfirmDelete = () => { let peerRoutes: string[] = [] routes.forEach((r) => { diff --git a/src/views/Routes.tsx b/src/views/Routes.tsx index 913551f..8be42e9 100644 --- a/src/views/Routes.tsx +++ b/src/views/Routes.tsx @@ -46,12 +46,14 @@ import {Group} from "../store/group/types"; import {TooltipPlacement} from "antd/es/tooltip"; import {actions as groupActions} from "../store/group"; import {useGetGroupTagHelpers} from "../utils/groups"; +import {usePageSizeHelpers} from "../utils/pageSize"; const {Title, Paragraph, Text} = Typography; const {Column} = Table; const {confirm} = Modal; export const Routes = () => { + const {onChangePageSize,pageSizeOptions,pageSize} = usePageSizeHelpers() const {getAccessTokenSilently} = useGetAccessTokenSilently() const dispatch = useDispatch() const { @@ -70,7 +72,6 @@ export const Routes = () => { const [showTutorial, setShowTutorial] = useState(true) const [textToSearch, setTextToSearch] = useState(''); const [optionAllEnable, setOptionAllEnable] = useState('enabled'); - const [pageSize, setPageSize] = useState(5); const [currentPage, setCurrentPage] = useState(1); const [dataTable, setDataTable] = useState([] as RouteDataTable[]); const [routeToAction, setRouteToAction] = useState(null as RouteDataTable | null); @@ -79,13 +80,6 @@ export const Routes = () => { const [groupPopupVisible, setGroupPopupVisible] = useState(false as boolean | undefined) const [peerNameToIP, peerIPToName] = initPeerMaps(peers); - - const pageSizeOptions = [ - {label: "5", value: "5"}, - {label: "10", value: "10"}, - {label: "15", value: "15"} - ] - const optionsAllEnabled = [{label: 'Enabled', value: 'enabled'}, {label: 'All', value: 'all'}] const itemsMenuAction = [ @@ -211,10 +205,6 @@ export const Routes = () => { setOptionAllEnable(value) } - const onChangePageSize = (value: string) => { - setPageSize(parseInt(value.toString())) - } - const showConfirmDelete = () => { confirm({ icon: , diff --git a/src/views/SetupKeys.tsx b/src/views/SetupKeys.tsx index db308fa..aedc88c 100644 --- a/src/views/SetupKeys.tsx +++ b/src/views/SetupKeys.tsx @@ -34,6 +34,7 @@ import {actions as groupActions} from "../store/group"; import {Group} from "../store/group/types"; import {TooltipPlacement} from "antd/es/tooltip"; import {useGetAccessTokenSilently} from "../utils/token"; +import {usePageSizeHelpers} from "../utils/pageSize"; const {Title, Text, Paragraph} = Typography; const {Column} = Table; @@ -45,7 +46,7 @@ interface SetupKeyDataTable extends SetupKey { } export const SetupKeys = () => { - //const {accessToken} = useOidcAccessToken() + const {onChangePageSize,pageSizeOptions,pageSize} = usePageSizeHelpers() const {getAccessTokenSilently} = useGetAccessTokenSilently() const dispatch = useDispatch() @@ -58,7 +59,6 @@ export const SetupKeys = () => { const [textToSearch, setTextToSearch] = useState(''); const [optionValidAll, setOptionValidAll] = useState('valid'); - const [pageSize, setPageSize] = useState(10); const [dataTable, setDataTable] = useState([] as SetupKeyDataTable[]); const [setupKeyToAction, setSetupKeyToAction] = useState(null as SetupKeyDataTable | null); const setupNewKeyVisible = useSelector((state: RootState) => state.setupKey.setupNewKeyVisible) @@ -66,11 +66,6 @@ export const SetupKeys = () => { const styleNotification = {marginTop: 85} - const pageSizeOptions = [ - {label: "5", value: "5"}, - {label: "10", value: "10"}, - {label: "15", value: "15"} - ] const optionsValidAll = [{label: 'Valid', value: 'valid'}, {label: 'All', value: 'all'}] @@ -180,10 +175,6 @@ export const SetupKeys = () => { setOptionValidAll(value) } - const onChangePageSize = (value: string) => { - setPageSize(parseInt(value.toString())) - } - const showConfirmRevoke = () => { confirm({ icon: , diff --git a/src/views/Users.tsx b/src/views/Users.tsx index 8775c90..0658c98 100644 --- a/src/views/Users.tsx +++ b/src/views/Users.tsx @@ -33,6 +33,7 @@ import {Link} from "react-router-dom"; import {actions as setupKeyActions} from "../store/setup-key"; import {SetupKey} from "../store/setup-key/types"; import {isLocalDev, isNetBirdHosted} from "../utils/common"; +import {usePageSizeHelpers} from "../utils/pageSize"; const {Title, Paragraph, Text} = Typography; const {Column} = Table; @@ -44,6 +45,7 @@ interface UserDataTable extends User { const styleNotification = {marginTop: 85} export const Users = () => { + const {onChangePageSize,pageSizeOptions,pageSize} = usePageSizeHelpers() const {getAccessTokenSilently} = useGetAccessTokenSilently() const {oidcUser} = useOidcUser(); const {idTokenPayload} = useOidcIdToken() @@ -59,14 +61,9 @@ export const Users = () => { const [groupPopupVisible, setGroupPopupVisible] = useState(false as boolean | undefined) const [userToAction, setUserToAction] = useState(null as UserDataTable | null); const [textToSearch, setTextToSearch] = useState(''); - const [pageSize, setPageSize] = useState(10); const [dataTable, setDataTable] = useState([] as UserDataTable[]); const [currentUser, setCurrentUser] = useState({} as User) - const pageSizeOptions = [ - {label: "5", value: "5"}, - {label: "10", value: "10"}, - {label: "15", value: "15"} - ] + // setUserAndView makes the UserUpdate drawer visible (right side) and sets the user object const setUserAndView = (user: User) => { @@ -129,10 +126,6 @@ export const Users = () => { setDataTable(transformDataTable(data)) } - const onChangePageSize = (value: string) => { - setPageSize(parseInt(value.toString())) - } - const onClickEdit = () => { dispatch(userActions.setUpdateUserDrawerVisible(true)); dispatch(userActions.setUser({