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

86.49

/src/js/components/common/mendertooltip.js

// Copyright 2021 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 { Help as HelpIcon } from '@mui/icons-material';
import { ClickAwayListener, Tooltip } from '@mui/material';
import { makeStyles, withStyles } from 'tss-react/mui';

import { TIMEOUTS } from '../../constants/appConstants';
import { READ_STATES } from '../../constants/userConstants';
import { toggle } from '../../helpers';
import { useDebounce } from '../../utils/debouncehook';

const useStyles = makeStyles()(theme => ({
  icon: {
    '&.read': {
      color: theme.palette.text.disabled
    }
  },
  iconAura: {
    position: 'absolute',
    top: -5,
    bottom: 0,
    left: -5,
    right: -5,
    border: `1px dashed ${theme.palette.primary.main}`,
    borderRadius: '50%',
    '&.read': {
      borderColor: theme.palette.text.disabled
    }
  }
}));

export const MenderTooltip = withStyles(Tooltip, ({ palette, shadows, spacing }) => ({
  arrow: {
    color: palette.background.paper
  },
  tooltip: {
    backgroundColor: palette.background.paper,
    boxShadow: shadows[1],
    color: palette.text.primary,
    padding: spacing(2),
    fontSize: 'small',
    maxWidth: 600,
    info: {
      maxWidth: 300,
      color: palette.text.hint,
      backgroundColor: palette.grey[500]
    }
  }
}));

export const MenderTooltipClickable = ({
  children,
  onboarding,
  startOpen = false,
  visibility = startOpen,
  onOpenChange,
  tooltipComponent = MenderTooltip,
  ...remainingProps
}) => {
  const [open, setOpen] = useState(startOpen || false);

  useEffect(() => {
    setOpen(visibility);
  }, [visibility]);

  useEffect(() => {
    if (!onOpenChange) {
      return;
    }
    onOpenChange(open);
  }, [open, onOpenChange]);

  const toggleVisibility = () => setOpen(toggle);

  const hide = () => setOpen(false);

  const Component = onboarding ? OnboardingTooltip : tooltipComponent;
  const extraProps = onboarding
    ? {
        PopperProps: {
          disablePortal: true,
          popperOptions: {
            strategy: 'fixed',
            modifiers: [
              { name: 'flip', enabled: false },
              { name: 'preventOverflow', enabled: true, options: { boundary: window, altBoundary: false } }
            ]
          }
        }
      }
    : {};
  return (
    <ClickAwayListener onClickAway={hide}>
      <Component
        arrow={!onboarding}
        open={open}
        disableFocusListener
        disableHoverListener
        disableTouchListener
        onOpen={() => setOpen(true)}
        {...extraProps}
        {...remainingProps}
      >
        <div onClick={toggleVisibility}>{children}</div>
      </Component>
    </ClickAwayListener>
  );
};

const iconWidth = 30;

export const OnboardingTooltip = withStyles(Tooltip, theme => ({
  arrow: {
    color: theme.palette.primary.main
  },
  tooltip: {
    backgroundColor: theme.palette.primary.main,
    boxShadow: theme.shadows[1],
    color: theme.palette.grey[500],
    fontSize: 14,
    maxWidth: 350,
    padding: '12px 18px',
    width: 350,
    '& a': {
      color: theme.palette.grey[500]
    },
    '&.MuiTooltip-tooltipPlacementTop': { marginLeft: iconWidth, marginBottom: 0, marginTop: `calc(${iconWidth} + ${theme.spacing(1.5)})` },
    '&.MuiTooltip-tooltipPlacementRight': { marginTop: iconWidth / 2 },
    '&.MuiTooltip-tooltipPlacementBottom': { marginLeft: iconWidth },
    '&.MuiTooltip-tooltipPlacementLeft': { marginTop: iconWidth / 2 }
  },
  popper: {
    opacity: 0.9
  }
}));
export default MenderTooltip;

const tooltipStateStyleMap = {
  [READ_STATES.read]: 'read muted',
  default: ''
};

const TooltipWrapper = ({ content, onClose, onReadAll }) => (
  <div>
    {content}
    <div className="flexbox space-between margin-top-small">
      <span className="link" onClick={onReadAll}>
        Mark all help tips as read
      </span>
      <span className="link" onClick={onClose}>
        Close
      </span>
    </div>
  </div>
);

export const HelpTooltip = ({ icon = undefined, id, contentProps = {}, tooltip, device, setAllTooltipsReadState, setTooltipReadState, ...props }) => {
  const [isOpen, setIsOpen] = useState(false);
  const debouncedIsOpen = useDebounce(isOpen, TIMEOUTS.threeSeconds);
  const { classes } = useStyles();
  const { Component, SpecialComponent, isRelevant, readState } = tooltip;

  useEffect(() => {
    if (!debouncedIsOpen) {
      return;
    }
    setTooltipReadState(id, READ_STATES.read, true);
  }, [debouncedIsOpen, id, setTooltipReadState]);

  const onReadAllClick = () => setAllTooltipsReadState(READ_STATES.read);

  const title = SpecialComponent ? (
    <SpecialComponent device={device} {...contentProps} />
  ) : (
    <TooltipWrapper content={<Component device={device} {...contentProps} />} onClose={() => setIsOpen(false)} onReadAll={onReadAllClick} />
  );

  if (!isRelevant({ device, ...contentProps })) {
    return null;
  }

  const className = tooltipStateStyleMap[readState] ?? tooltipStateStyleMap.default;
  return (
    <MenderTooltipClickable className={isOpen ? 'muted' : ''} title={title} visibility={isOpen} onOpenChange={setIsOpen} {...props}>
      <div className="relative">
        {icon || <HelpIcon className={`${classes.icon} ${className}`} color="primary" />}
        <div className={`${classes.iconAura} ${className}`} />
      </div>
    </MenderTooltipClickable>
  );
};

1	// Copyright 2021 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 { Help as HelpIcon } from '@mui/icons-material';
17	import { ClickAwayListener, Tooltip } from '@mui/material';
18	import { makeStyles, withStyles } from 'tss-react/mui';
19
20	import { TIMEOUTS } from '../../constants/appConstants';
21	import { READ_STATES } from '../../constants/userConstants';
22	import { toggle } from '../../helpers';
23	import { useDebounce } from '../../utils/debouncehook';
24
25	const useStyles = makeStyles()(theme => ({	183✔
26	icon: {
27	'&.read': {
28	color: theme.palette.text.disabled
29	}
30	},
31	iconAura: {
32	position: 'absolute',
33	top: -5,
34	bottom: 0,
35	left: -5,
36	right: -5,
37	border: `1px dashed ${theme.palette.primary.main}`,
38	borderRadius: '50%',
39	'&.read': {
40	borderColor: theme.palette.text.disabled
41	}
42	}
43	}));
44
45	export const MenderTooltip = withStyles(Tooltip, ({ palette, shadows, spacing }) => ({	5,838✔
46	arrow: {
47	color: palette.background.paper
48	},
49	tooltip: {
50	backgroundColor: palette.background.paper,
51	boxShadow: shadows[1],
52	color: palette.text.primary,
53	padding: spacing(2),
54	fontSize: 'small',
55	maxWidth: 600,
56	info: {
57	maxWidth: 300,
58	color: palette.text.hint,
59	backgroundColor: palette.grey[500]
60	}
61	}
62	}));
63
64	export const MenderTooltipClickable = ({	183✔
65	children,
66	onboarding,
67	startOpen = false,	4,846✔
68	visibility = startOpen,	1,270✔
69	onOpenChange,
70	tooltipComponent = MenderTooltip,	3,457✔
71	...remainingProps
72	}) => {
73	const [open, setOpen] = useState(startOpen \|\| false);	4,847✔
74
75	useEffect(() => {	4,847✔
76	setOpen(visibility);	161✔
77	}, [visibility]);
78
79	useEffect(() => {	4,847✔
80	if (!onOpenChange) {	161✔
81	return;	46✔
82	}
83	onOpenChange(open);	115✔
84	}, [open, onOpenChange]);
85
86	const toggleVisibility = () => setOpen(toggle);	4,847✔
87
88	const hide = () => setOpen(false);	4,847✔
89
90	const Component = onboarding ? OnboardingTooltip : tooltipComponent;	4,847✔
91	const extraProps = onboarding	4,847✔
92	? {
93	PopperProps: {
94	disablePortal: true,
95	popperOptions: {
96	strategy: 'fixed',
97	modifiers: [
98	{ name: 'flip', enabled: false },
99	{ name: 'preventOverflow', enabled: true, options: { boundary: window, altBoundary: false } }
100	]
101	}
102	}
103	}
104	: {};
105	return (	4,847✔
106	<ClickAwayListener onClickAway={hide}>
107	<Component
108	arrow={!onboarding}
109	open={open}
110	disableFocusListener
111	disableHoverListener
112	disableTouchListener
113	onOpen={() => setOpen(true)}	×
114	{...extraProps}
115	{...remainingProps}
116	>
117	<div onClick={toggleVisibility}>{children}</div>
118	</Component>
119	</ClickAwayListener>
120	);
121	};
122
123	const iconWidth = 30;	183✔
124
125	export const OnboardingTooltip = withStyles(Tooltip, theme => ({	183✔
126	arrow: {
127	color: theme.palette.primary.main
128	},
129	tooltip: {
130	backgroundColor: theme.palette.primary.main,
131	boxShadow: theme.shadows[1],
132	color: theme.palette.grey[500],
133	fontSize: 14,
134	maxWidth: 350,
135	padding: '12px 18px',
136	width: 350,
137	'& a': {
138	color: theme.palette.grey[500]
139	},
140	'&.MuiTooltip-tooltipPlacementTop': { marginLeft: iconWidth, marginBottom: 0, marginTop: `calc(${iconWidth} + ${theme.spacing(1.5)})` },
141	'&.MuiTooltip-tooltipPlacementRight': { marginTop: iconWidth / 2 },
142	'&.MuiTooltip-tooltipPlacementBottom': { marginLeft: iconWidth },
143	'&.MuiTooltip-tooltipPlacementLeft': { marginTop: iconWidth / 2 }
144	},
145	popper: {
146	opacity: 0.9
147	}
148	}));
149	export default MenderTooltip;
150
151	const tooltipStateStyleMap = {	183✔
152	[READ_STATES.read]: 'read muted',
153	default: ''
154	};
155
156	const TooltipWrapper = ({ content, onClose, onReadAll }) => (	183✔
157	<div>	×
158	{content}
159	<div className="flexbox space-between margin-top-small">
160	<span className="link" onClick={onReadAll}>
161	Mark all help tips as read
162	</span>
163	<span className="link" onClick={onClose}>
164	Close
165	</span>
166	</div>
167	</div>
168	);
169
170	export const HelpTooltip = ({ icon = undefined, id, contentProps = {}, tooltip, device, setAllTooltipsReadState, setTooltipReadState, ...props }) => {	183✔
171	const [isOpen, setIsOpen] = useState(false);	2,188✔
172	const debouncedIsOpen = useDebounce(isOpen, TIMEOUTS.threeSeconds);	2,188✔
173	const { classes } = useStyles();	2,188✔
174	const { Component, SpecialComponent, isRelevant, readState } = tooltip;	2,188✔
175
176	useEffect(() => {	2,188✔
177	if (!debouncedIsOpen) {	68!
178	return;	68✔
179	}
180	setTooltipReadState(id, READ_STATES.read, true);	×
181	}, [debouncedIsOpen, id, setTooltipReadState]);
182
183	const onReadAllClick = () => setAllTooltipsReadState(READ_STATES.read);	2,188✔
184
185	const title = SpecialComponent ? (	2,188✔
186	<SpecialComponent device={device} {...contentProps} />
187	) : (
188	<TooltipWrapper content={<Component device={device} {...contentProps} />} onClose={() => setIsOpen(false)} onReadAll={onReadAllClick} />	×
189	);
190
191	if (!isRelevant({ device, ...contentProps })) {	2,188!
192	return null;	×
193	}
194
195	const className = tooltipStateStyleMap[readState] ?? tooltipStateStyleMap.default;	2,188✔
196	return (	2,188✔
197	<MenderTooltipClickable className={isOpen ? 'muted' : ''} title={title} visibility={isOpen} onOpenChange={setIsOpen} {...props}>	2,188!
198	<div className="relative">
199	{icon \|\| <HelpIcon className={`${classes.icon} ${className}`} color="primary" />}	4,376✔
200	<div className={`${classes.iconAura} ${className}`} />
201	</div>
202	</MenderTooltipClickable>
203	);
204	};

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