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

88.89

/src/js/components/devices/devicelistitem.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, { memo, useCallback, useState } from 'react';

// material ui
import { Checkbox } from '@mui/material';
import { makeStyles } from 'tss-react/mui';

import { DEVICE_STATES } from '../../constants/deviceConstants';
import { deepCompare } from '../../helpers';
import DeviceIdentityDisplay from '../common/deviceidentity';
import { DefaultAttributeRenderer } from './base-devices';

const useStyles = makeStyles()(theme => ({
  active: {
    [`> *`]: {
      backgroundColor: theme.palette.background.light
    }
  }
}));

const DeviceListItem = ({ columnHeaders, device, deviceListState, idAttribute, index, onClick, onRowSelect, selectable, selected }) => {
  const [isHovering, setIsHovering] = useState(false);
  const { classes } = useStyles();

  const onMouseOut = () => setIsHovering(false);
  const onMouseOver = () => setIsHovering(true);

  const handleOnClick = useCallback(
    event => {
      if (event && event.target.closest('input')?.hasOwnProperty('checked')) {
        return;
      }
      onClick(device);
    },
    [device.id, onClick, deviceListState.selectedId]
  );

  const handleRowSelect = () => onRowSelect(index);

  return (
    <div
      className={`deviceListRow deviceListItem clickable ${isHovering ? classes.active : ''} ${device.status === DEVICE_STATES.pending ? classes.active : ''}`}
      onClick={handleOnClick}
      onMouseEnter={onMouseOver}
      onMouseLeave={onMouseOut}
    >
      {/*
        we need to wrap the checkbox into a div here to ensure the bottom border etc. works as intended since the outer div will
        not create an own box due to "display: contents" being needed until subgrid support lands in browsers
      */}
      {selectable && (
        <div>
          <Checkbox checked={selected} onChange={handleRowSelect} />
        </div>
      )}
      <DeviceIdentityDisplay device={device} idAttribute={idAttribute} isHovered={isHovering} />
      {/* we'll skip the first column, since this is the id and that gets resolved differently in the lines above */}
      {columnHeaders.slice(1).map((column, index) => {
        let Component = column.component ? column.component : DefaultAttributeRenderer;
        return <Component column={column} device={device} idAttribute={idAttribute} key={`column-${index}`} />;
      })}
    </div>
  );
};

const areEqual = (prevProps, nextProps) => {
  if (
    prevProps.idAttribute != nextProps.idAttribute ||
    prevProps.selected != nextProps.selected ||
    !deepCompare(prevProps.columnHeaders, nextProps.columnHeaders) ||
    !deepCompare(prevProps.device, nextProps.device)
  ) {
    return false;
  }
  return deepCompare(prevProps.deviceListState, nextProps.deviceListState);
};

export default memo(DeviceListItem, areEqual);

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, { memo, useCallback, useState } from 'react';
15
16	// material ui
17	import { Checkbox } from '@mui/material';
18	import { makeStyles } from 'tss-react/mui';
19
20	import { DEVICE_STATES } from '../../constants/deviceConstants';
21	import { deepCompare } from '../../helpers';
22	import DeviceIdentityDisplay from '../common/deviceidentity';
23	import { DefaultAttributeRenderer } from './base-devices';
24
25	const useStyles = makeStyles()(theme => ({	10✔
26	active: {
27	[`> *`]: {
28	backgroundColor: theme.palette.background.light
29	}
30	}
31	}));
32
33	const DeviceListItem = ({ columnHeaders, device, deviceListState, idAttribute, index, onClick, onRowSelect, selectable, selected }) => {	10✔
34	const [isHovering, setIsHovering] = useState(false);	10✔
35	const { classes } = useStyles();	10✔
36
37	const onMouseOut = () => setIsHovering(false);	10✔
38	const onMouseOver = () => setIsHovering(true);	10✔
39
40	const handleOnClick = useCallback(	10✔
41	event => {
42	if (event && event.target.closest('input')?.hasOwnProperty('checked')) {	2✔
43	return;	1✔
44	}
45	onClick(device);	1✔
46	},
47	[device.id, onClick, deviceListState.selectedId]
48	);
49
50	const handleRowSelect = () => onRowSelect(index);	10✔
51
52	return (	10✔
53	<div
54	className={`deviceListRow deviceListItem clickable ${isHovering ? classes.active : ''} ${device.status === DEVICE_STATES.pending ? classes.active : ''}`}	20!
55	onClick={handleOnClick}
56	onMouseEnter={onMouseOver}
57	onMouseLeave={onMouseOut}
58	>
59	{/*
60	we need to wrap the checkbox into a div here to ensure the bottom border etc. works as intended since the outer div will
61	not create an own box due to "display: contents" being needed until subgrid support lands in browsers
62	*/}
63	{selectable && (	20✔
64	<div>
65	<Checkbox checked={selected} onChange={handleRowSelect} />
66	</div>
67	)}
68	<DeviceIdentityDisplay device={device} idAttribute={idAttribute} isHovered={isHovering} />
69	{/* we'll skip the first column, since this is the id and that gets resolved differently in the lines above */}
70	{columnHeaders.slice(1).map((column, index) => {
71	let Component = column.component ? column.component : DefaultAttributeRenderer;	36!
72	return <Component column={column} device={device} idAttribute={idAttribute} key={`column-${index}`} />;	36✔
73	})}
74	</div>
75	);
76	};
77
78	const areEqual = (prevProps, nextProps) => {	10✔
79	if (	4!
80	prevProps.idAttribute != nextProps.idAttribute \|\|	16✔
81	prevProps.selected != nextProps.selected \|\|
82	!deepCompare(prevProps.columnHeaders, nextProps.columnHeaders) \|\|
83	!deepCompare(prevProps.device, nextProps.device)
84	) {
UNCOV 85	return false;	×
86	}
87	return deepCompare(prevProps.deviceListState, nextProps.deviceListState);	4✔
88	};
89
90	export default memo(DeviceListItem, areEqual);

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