901187442

pending completion

Build # 901187442

Build Type

Pull #3795

gitlab-ci

Committed by

mzedel

Commit Message

feat: increased chances of adopting our intended navigation patterns instead of unsupported browser navigation

Ticket: None
Changelog: None
Signed-off-by: Manuel Zedel <manuel.zedel@northern.tech>

Pull Request Pull Request #3795: feat: increased chances of adopting our intended navigation patterns instead of unsupported browser navigation

Run Details

4389 of 6365 branches covered (68.96%)

5 of 5 new or added lines in 1 file covered. (100.0%)

1729 existing lines in 165 files now uncovered.

8274 of 10019 relevant lines covered (82.58%)

144.86 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

92.86

/src/js/components/common/pagination.js

// Copyright 2019 Northern.tech AS
//
//    Licensed under the Apache License, Version 2.0 (the "License");
//    you may not use this file except in compliance with the License.
//    You may obtain a copy of the License at
//
//        http://www.apache.org/licenses/LICENSE-2.0
//
//    Unless required by applicable law or agreed to in writing, software
//    distributed under the License is distributed on an "AS IS" BASIS,
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//    See the License for the specific language governing permissions and
//    limitations under the License.
import React, { useEffect, useState } from 'react';

import { KeyboardArrowLeft, KeyboardArrowRight } from '@mui/icons-material';
import { IconButton, TablePagination } from '@mui/material';

import { TIMEOUTS } from '../../constants/appConstants';
import { DEVICE_LIST_DEFAULTS, DEVICE_LIST_MAXIMUM_LENGTH } from '../../constants/deviceConstants';
import { useDebounce } from '../../utils/debouncehook';
import MenderTooltip from '../common/mendertooltip';

const defaultRowsPerPageOptions = [10, 20, DEVICE_LIST_MAXIMUM_LENGTH];
const { perPage: defaultPerPage } = DEVICE_LIST_DEFAULTS;
const paginationIndex = 1;
const paginationLimit = 10000;

const MaybeWrapper = ({ children, disabled }) =>
  disabled ? (
    <MenderTooltip arrow placement="top" title="Please refine your filter criteria first in order to proceed.">
      <div>{children}</div>
    </MenderTooltip>
  ) : (
    <div>{children}</div>
  );

export const TablePaginationActions = ({ count, page = 0, onPageChange, rowsPerPage = defaultPerPage, showCountInfo = true }) => {
  const [pageNo, setPageNo] = useState(page + paginationIndex);

  useEffect(() => {
    setPageNo(page + paginationIndex);
  }, [page, rowsPerPage, count]);

  const debouncedPage = useDebounce(pageNo, TIMEOUTS.debounceShort);

  useEffect(() => {
    const newPage = Math.min(Math.max(paginationIndex, debouncedPage), Math.max(paginationIndex, Math.ceil(count / rowsPerPage)));
    if (newPage !== page + paginationIndex) {
      onPageChange(newPage);
    }
  }, [debouncedPage]);

  const pages = Math.ceil(count / rowsPerPage);

  const isAtPaginationLimit = pageNo >= paginationLimit / rowsPerPage;
  return (
    <div className="flexbox center-aligned">
      {showCountInfo && <div>{`${(pageNo - paginationIndex) * rowsPerPage + 1}-${Math.min(pageNo * rowsPerPage, count)} of ${count}`}</div>}
      <IconButton onClick={() => setPageNo(pageNo - 1)} disabled={pageNo === paginationIndex} size="large">
        <KeyboardArrowLeft />
      </IconButton>
      <MaybeWrapper disabled={isAtPaginationLimit}>
        <IconButton onClick={() => setPageNo(pageNo + 1)} disabled={pageNo >= pages || isAtPaginationLimit} size="large">
          <KeyboardArrowRight />
        </IconButton>
      </MaybeWrapper>
    </div>
  );
};

const Pagination = props => {
  const { className, onChangeRowsPerPage, onChangePage, page = 0, rowsPerPageOptions = defaultRowsPerPageOptions, showCountInfo, ...remainingProps } = props;
  // this is required due to the MUI tablepagination being 0-indexed, whereas we work with 1-indexed apis
  // running it without adjustment will lead to warnings from MUI
  const propsPage = Math.max(page - paginationIndex, 0);
  return (
    <TablePagination
      className={`flexbox margin-top ${className || ''}`}
      classes={{ spacer: 'flexbox no-basis' }}
      component="div"
      labelDisplayedRows={() => ''}
      labelRowsPerPage="Rows"
      rowsPerPageOptions={rowsPerPageOptions}
      onRowsPerPageChange={e => onChangeRowsPerPage(e.target.value)}
      page={propsPage}
      onPageChange={onChangePage}
      ActionsComponent={actionProps => <TablePaginationActions {...actionProps} showCountInfo={showCountInfo} />}
      {...remainingProps}
    />
  );
};

export default Pagination;

1	// Copyright 2019 Northern.tech AS
2	//
3	// Licensed under the Apache License, Version 2.0 (the "License");
4	// you may not use this file except in compliance with the License.
5	// You may obtain a copy of the License at
6	//
7	// http://www.apache.org/licenses/LICENSE-2.0
8	//
9	// Unless required by applicable law or agreed to in writing, software
10	// distributed under the License is distributed on an "AS IS" BASIS,
11	// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12	// See the License for the specific language governing permissions and
13	// limitations under the License.
14	import React, { useEffect, useState } from 'react';
15
16	import { KeyboardArrowLeft, KeyboardArrowRight } from '@mui/icons-material';
17	import { IconButton, TablePagination } from '@mui/material';
18
19	import { TIMEOUTS } from '../../constants/appConstants';
20	import { DEVICE_LIST_DEFAULTS, DEVICE_LIST_MAXIMUM_LENGTH } from '../../constants/deviceConstants';
21	import { useDebounce } from '../../utils/debouncehook';
22	import MenderTooltip from '../common/mendertooltip';
23
24	const defaultRowsPerPageOptions = [10, 20, DEVICE_LIST_MAXIMUM_LENGTH];	29✔
25	const { perPage: defaultPerPage } = DEVICE_LIST_DEFAULTS;	29✔
26	const paginationIndex = 1;	29✔
27	const paginationLimit = 10000;	29✔
28
29	const MaybeWrapper = ({ children, disabled }) =>	29✔
30	disabled ? (	111✔
31	<MenderTooltip arrow placement="top" title="Please refine your filter criteria first in order to proceed.">
32	<div>{children}</div>
33	</MenderTooltip>
34	) : (
35	<div>{children}</div>
36	);
37
38	export const TablePaginationActions = ({ count, page = 0, onPageChange, rowsPerPage = defaultPerPage, showCountInfo = true }) => {	29!
39	const [pageNo, setPageNo] = useState(page + paginationIndex);	111✔
40
41	useEffect(() => {	111✔
42	setPageNo(page + paginationIndex);	92✔
43	}, [page, rowsPerPage, count]);
44
45	const debouncedPage = useDebounce(pageNo, TIMEOUTS.debounceShort);	111✔
46
47	useEffect(() => {	111✔
48	const newPage = Math.min(Math.max(paginationIndex, debouncedPage), Math.max(paginationIndex, Math.ceil(count / rowsPerPage)));	95✔
49	if (newPage !== page + paginationIndex) {	95✔
50	onPageChange(newPage);	3✔
51	}
52	}, [debouncedPage]);
53
54	const pages = Math.ceil(count / rowsPerPage);	111✔
55
56	const isAtPaginationLimit = pageNo >= paginationLimit / rowsPerPage;	111✔
57	return (	111✔
58	<div className="flexbox center-aligned">
59	{showCountInfo && <div>{`${(pageNo - paginationIndex) * rowsPerPage + 1}-${Math.min(pageNo * rowsPerPage, count)} of ${count}`}</div>}	222✔
60	<IconButton onClick={() => setPageNo(pageNo - 1)} disabled={pageNo === paginationIndex} size="large">	1✔
61	<KeyboardArrowLeft />
62	</IconButton>
63	<MaybeWrapper disabled={isAtPaginationLimit}>
64	<IconButton onClick={() => setPageNo(pageNo + 1)} disabled={pageNo >= pages \|\| isAtPaginationLimit} size="large">	2✔
65	<KeyboardArrowRight />
66	</IconButton>
67	</MaybeWrapper>
68	</div>
69	);
70	};
71
72	const Pagination = props => {	29✔
73	const { className, onChangeRowsPerPage, onChangePage, page = 0, rowsPerPageOptions = defaultRowsPerPageOptions, showCountInfo, ...remainingProps } = props;	88!
74	// this is required due to the MUI tablepagination being 0-indexed, whereas we work with 1-indexed apis
75	// running it without adjustment will lead to warnings from MUI
76	const propsPage = Math.max(page - paginationIndex, 0);	88✔
77	return (	88✔
78	<TablePagination
79	className={`flexbox margin-top ${className \|\| ''}`}	138✔
80	classes={{ spacer: 'flexbox no-basis' }}
81	component="div"
82	labelDisplayedRows={() => ''}	101✔
83	labelRowsPerPage="Rows"
84	rowsPerPageOptions={rowsPerPageOptions}
UNCOV 85	onRowsPerPageChange={e => onChangeRowsPerPage(e.target.value)}	×
86	page={propsPage}
87	onPageChange={onChangePage}
88	ActionsComponent={actionProps => <TablePaginationActions {...actionProps} showCountInfo={showCountInfo} />}	101✔
89	{...remainingProps}
90	/>
91	);
92	};
93
94	export default Pagination;

mendersoftware / gui / 901187442

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous