1081664682

Committed 22 Nov 2023 02:11PM UTC coverage: 82.798% (-17.2%) from 99.964%

Build # 1081664682

Build Type

Pull #4214

gitlab-ci

Committed by

tranchitella

Commit Message

fix: Fixed the infinite page redirects when the back button is pressed

Remove the location and navigate from the useLocationParams.setValue callback
dependencies as they change the set function that is presented in other
useEffect dependencies. This happens when the back button is clicked, which
leads to the location changing infinitely.

Changelog: Title
Ticket: MEN-6847
Ticket: MEN-6796

Signed-off-by: Ihor Aleksandrychiev <ihor.aleksandrychiev@northern.tech>
Signed-off-by: Fabio Tranchitella <fabio.tranchitella@northern.tech>

Pull Request Pull Request #4214: fix: Fixed the infinite page redirects when the back button is pressed

Run Details

4319 of 6292 branches covered (0.0%)

8332 of 10063 relevant lines covered (82.8%)

191.0 hits per line

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

72.34

/src/js/components/search-result.js

// Copyright 2022 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 { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';

import { Close as CloseIcon } from '@mui/icons-material';
// material ui
import { ClickAwayListener, Drawer, IconButton, Typography } from '@mui/material';
import { makeStyles } from 'tss-react/mui';

import pluralize from 'pluralize';

import { setSearchState } from '../actions/appActions';
import { setDeviceListState } from '../actions/deviceActions';
import { SORTING_OPTIONS, TIMEOUTS } from '../constants/appConstants';
import { getIdAttribute, getMappedDevicesList, getUserSettings } from '../selectors';
import { getHeaders } from './devices/authorized-devices';
import { routes } from './devices/base-devices';
import Devicelist from './devices/devicelist';

const useStyles = makeStyles()(theme => ({
  drawerOffset: {
    top: theme.mixins.toolbar.minHeight + 1,
    left: 200
  },
  paper: {
    maxWidth: '100vw',
    minHeight: '20vh',
    boxShadow: 'none'
  }
}));

const leftNavOffset = 500;
const ResultTitle = ({ onClick, term, total }) => {
  const content = `${total ? total : 'No'} ${pluralize('device', total)} found for "${term}"`;
  let props = { className: 'bold' };
  let style = {};
  if (!total) {
    props = { className: 'info' };
    style = { width: `calc(100% - ${leftNavOffset}px)` };
  }
  return (
    <div className={`flexbox ${total ? 'center-aligned' : 'centered'}`} style={style}>
      <Typography variant="body2" {...props}>
        {content}
      </Typography>
      <a className="margin-left-large" onClick={onClick}>
        clear search
      </a>
    </div>
  );
};

export const SearchResult = ({ onToggleSearchResult, open = true }) => {
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const { columnSelection } = useSelector(getUserSettings);
  const customColumnSizes = useSelector(state => state.users.customColumns);
  const devices = useSelector(state => getMappedDevicesList(state, 'search'));
  const idAttribute = useSelector(getIdAttribute);
  const searchState = useSelector(state => state.app.searchState);

  const { classes } = useStyles();

  const [columnHeaders, setColumnHeaders] = useState(getHeaders(columnSelection, routes.devices.defaultHeaders, idAttribute));

  const { isSearching, searchTerm, searchTotal, sort = {} } = searchState;
  const { direction: sortDown = SORTING_OPTIONS.desc, key: sortCol } = sort;

  useEffect(() => {
    const columnHeaders = getHeaders(columnSelection, routes.devices.defaultHeaders, idAttribute);
    setColumnHeaders(columnHeaders);
  }, [columnSelection, idAttribute, idAttribute.attribute]);

  useEffect(() => {
    if (!open && isSearching) {
      onToggleSearchResult();
    }
  }, [open, isSearching, onToggleSearchResult]);

  useEffect(() => {
    if (open && !searchTerm) {
      onToggleSearchResult();
    }
  }, [onToggleSearchResult, open, searchTerm]);

  const onDeviceSelect = device => {
    dispatch(setDeviceListState({ selectedId: device.id }));
    onToggleSearchResult();
    setTimeout(() => navigate(`/devices/${device.status}?id=${device.id}`), TIMEOUTS.debounceShort);
  };

  const handlePageChange = page => {
    dispatch(setSearchState({ page }));
  };

  const onSortChange = attribute => {
    let changedSortCol = attribute.name;
    let changedSortDown = sortDown === SORTING_OPTIONS.desc ? SORTING_OPTIONS.asc : SORTING_OPTIONS.desc;
    if (changedSortCol !== sortCol) {
      changedSortDown = SORTING_OPTIONS.desc;
    }
    dispatch(setSearchState({ page: 1, sort: { direction: changedSortDown, key: changedSortCol, scope: attribute.scope } }));
  };

  const onClearClick = () => {
    dispatch(setSearchState({ searchTerm: '' }));
    onToggleSearchResult();
  };

  return (
    <ClickAwayListener onClickAway={onToggleSearchResult}>
      <Drawer
        anchor="top"
        classes={classes}
        disableEnforceFocus
        open={open}
        ModalProps={{ className: classes.drawerOffset, BackdropProps: { className: classes.drawerOffset } }}
        PaperProps={{ className: `${classes.drawerOffset} ${classes.paper}` }}
        SlideProps={{ direction: 'left' }}
      >
        <div className="flexbox center-aligned margin-bottom-small space-between">
          <ResultTitle onClick={onClearClick} term={searchTerm} total={searchTotal} />
          <IconButton onClick={onToggleSearchResult} aria-label="close" size="large">
            <CloseIcon />
          </IconButton>
        </div>
        {!!searchTotal && (
          <Devicelist
            columnHeaders={columnHeaders}
            customColumnSizes={customColumnSizes}
            deviceListState={{ perPage: 10, sort: {} }}
            devices={devices}
            idAttribute={idAttribute}
            onSort={onSortChange}
            PaginationProps={{ rowsPerPageOptions: [10] }}
            pageTotal={searchTotal}
            onPageChange={handlePageChange}
            pageLoading={isSearching}
            onExpandClick={onDeviceSelect}
          />
        )}
      </Drawer>
    </ClickAwayListener>
  );
};

export default SearchResult;

1	// Copyright 2022 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	import { useDispatch, useSelector } from 'react-redux';
16	import { useNavigate } from 'react-router-dom';
17
18	import { Close as CloseIcon } from '@mui/icons-material';
19	// material ui
20	import { ClickAwayListener, Drawer, IconButton, Typography } from '@mui/material';
21	import { makeStyles } from 'tss-react/mui';
22
23	import pluralize from 'pluralize';
24
25	import { setSearchState } from '../actions/appActions';
26	import { setDeviceListState } from '../actions/deviceActions';
27	import { SORTING_OPTIONS, TIMEOUTS } from '../constants/appConstants';
28	import { getIdAttribute, getMappedDevicesList, getUserSettings } from '../selectors';
29	import { getHeaders } from './devices/authorized-devices';
30	import { routes } from './devices/base-devices';
31	import Devicelist from './devices/devicelist';
32
33	const useStyles = makeStyles()(theme => ({	5✔
34	drawerOffset: {
35	top: theme.mixins.toolbar.minHeight + 1,
36	left: 200
37	},
38	paper: {
39	maxWidth: '100vw',
40	minHeight: '20vh',
41	boxShadow: 'none'
42	}
43	}));
44
45	const leftNavOffset = 500;	2✔
46	const ResultTitle = ({ onClick, term, total }) => {	2✔
47	const content = `${total ? total : 'No'} ${pluralize('device', total)} found for "${term}"`;	1!
48	let props = { className: 'bold' };	1✔
49	let style = {};	1✔
50	if (!total) {	1!
51	props = { className: 'info' };	1✔
52	style = { width: `calc(100% - ${leftNavOffset}px)` };	1✔
53	}
54	return (	1✔
55	<div className={`flexbox ${total ? 'center-aligned' : 'centered'}`} style={style}>	1!
56	<Typography variant="body2" {...props}>
57	{content}
58	</Typography>
59	<a className="margin-left-large" onClick={onClick}>
60	clear search
61	</a>
62	</div>
63	);
64	};
65
66	export const SearchResult = ({ onToggleSearchResult, open = true }) => {	2!
67	const navigate = useNavigate();	950✔
68	const dispatch = useDispatch();	950✔
69
70	const { columnSelection } = useSelector(getUserSettings);	950✔
71	const customColumnSizes = useSelector(state => state.users.customColumns);	1,912✔
72	const devices = useSelector(state => getMappedDevicesList(state, 'search'));	1,912✔
73	const idAttribute = useSelector(getIdAttribute);	950✔
74	const searchState = useSelector(state => state.app.searchState);	1,912✔
75
76	const { classes } = useStyles();	950✔
77
78	const [columnHeaders, setColumnHeaders] = useState(getHeaders(columnSelection, routes.devices.defaultHeaders, idAttribute));	950✔
79
80	const { isSearching, searchTerm, searchTotal, sort = {} } = searchState;	950!
81	const { direction: sortDown = SORTING_OPTIONS.desc, key: sortCol } = sort;	950✔
82
83	useEffect(() => {	950✔
84	const columnHeaders = getHeaders(columnSelection, routes.devices.defaultHeaders, idAttribute);	3✔
85	setColumnHeaders(columnHeaders);	3✔
86	}, [columnSelection, idAttribute, idAttribute.attribute]);
87
88	useEffect(() => {	950✔
89	if (!open && isSearching) {	5!
90	onToggleSearchResult();	×
91	}
92	}, [open, isSearching, onToggleSearchResult]);
93
94	useEffect(() => {	950✔
95	if (open && !searchTerm) {	5!
96	onToggleSearchResult();	×
97	}
98	}, [onToggleSearchResult, open, searchTerm]);
99
100	const onDeviceSelect = device => {	950✔
101	dispatch(setDeviceListState({ selectedId: device.id }));	×
102	onToggleSearchResult();	×
103	setTimeout(() => navigate(`/devices/${device.status}?id=${device.id}`), TIMEOUTS.debounceShort);	×
104	};
105
106	const handlePageChange = page => {	950✔
107	dispatch(setSearchState({ page }));	×
108	};
109
110	const onSortChange = attribute => {	950✔
111	let changedSortCol = attribute.name;	×
112	let changedSortDown = sortDown === SORTING_OPTIONS.desc ? SORTING_OPTIONS.asc : SORTING_OPTIONS.desc;	×
113	if (changedSortCol !== sortCol) {	×
114	changedSortDown = SORTING_OPTIONS.desc;	×
115	}
116	dispatch(setSearchState({ page: 1, sort: { direction: changedSortDown, key: changedSortCol, scope: attribute.scope } }));	×
117	};
118
119	const onClearClick = () => {	950✔
120	dispatch(setSearchState({ searchTerm: '' }));	×
121	onToggleSearchResult();	×
122	};
123
124	return (	950✔
125	<ClickAwayListener onClickAway={onToggleSearchResult}>
126	<Drawer
127	anchor="top"
128	classes={classes}
129	disableEnforceFocus
130	open={open}
131	ModalProps={{ className: classes.drawerOffset, BackdropProps: { className: classes.drawerOffset } }}
132	PaperProps={{ className: `${classes.drawerOffset} ${classes.paper}` }}
133	SlideProps={{ direction: 'left' }}
134	>
135	<div className="flexbox center-aligned margin-bottom-small space-between">
136	<ResultTitle onClick={onClearClick} term={searchTerm} total={searchTotal} />
137	<IconButton onClick={onToggleSearchResult} aria-label="close" size="large">
138	<CloseIcon />
139	</IconButton>
140	</div>
141	{!!searchTotal && (	950!
142	<Devicelist
143	columnHeaders={columnHeaders}
144	customColumnSizes={customColumnSizes}
145	deviceListState={{ perPage: 10, sort: {} }}
146	devices={devices}
147	idAttribute={idAttribute}
148	onSort={onSortChange}
149	PaginationProps={{ rowsPerPageOptions: [10] }}
150	pageTotal={searchTotal}
151	onPageChange={handlePageChange}
152	pageLoading={isSearching}
153	onExpandClick={onDeviceSelect}
154	/>
155	)}
156	</Drawer>
157	</ClickAwayListener>
158	);
159	};
160
161	export default SearchResult;

mendersoftware / gui / 1081664682

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