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

80.0

/src/js/components/helptips/onboardingtips.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 from 'react';
import { useDispatch } from 'react-redux';

import { Schedule as HelpIcon } from '@mui/icons-material';
import { Button } from '@mui/material';

import { advanceOnboarding, setShowDismissOnboardingTipsDialog } from '../../actions/onboardingActions';
import { setShowConnectingDialog } from '../../actions/userActions';
import { ALL_DEVICES } from '../../constants/deviceConstants';
import { onboardingSteps } from '../../constants/onboardingConstants';
import BaseOnboardingTip, { BaseOnboardingTooltip } from './baseonboardingtip';

export const DevicePendingTip = props => (
  <BaseOnboardingTip
    icon={<HelpIcon />}
    component={<div>If you followed the steps in &quot;Connecting a device&quot;, your device will show here shortly.</div>}
    {...props}
  />
);

export const GetStartedTip = props => {
  const dispatch = useDispatch();
  return (
    <BaseOnboardingTooltip {...props}>
      <div className="margin-top" style={{ marginBottom: -12 }}>
        <p>
          <b>Welcome to Mender!</b>
        </p>
        We can help you get started with connecting your first device and deploying an update to it.
        <div className="flexbox center-aligned margin-top-small space-between">
          <b className="clickable slightly-smaller" onClick={() => dispatch(setShowDismissOnboardingTipsDialog(true))}>
            No thanks, I don&apos;t need help
          </b>
          <Button onClick={() => dispatch(setShowConnectingDialog(true))}>Get started</Button>
        </div>
      </div>
    </BaseOnboardingTooltip>
  );
};

export const DevicesPendingDelayed = () => (
  <div>If your device still isn&apos;t showing, try following the connection steps again or see our documentation for more.</div>
);

export const DashboardOnboardingState = () => <div>Your device has requested to join the server. Click the row to expand the device details.</div>;

export const DevicesPendingAcceptingOnboarding = () => (
  <div>
    Your device has made a request to join the Mender server. You can inspect its identity details, such as mac address and public key, to verify it is
    definitely your device.
    <br />
    When you are ready, Accept it!
  </div>
);

export const DashboardOnboardingPendings = () => <div>Next accept your device</div>;

export const DevicesAcceptedOnboarding = props => {
  const dispatch = useDispatch();
  return (
    <BaseOnboardingTooltip {...props}>
      <div className="margin-top" style={{ marginBottom: -12 }}>
        <div>
          <p>Your device is now authenticated and has connected to the server! It&apos;s ready to receive updates, report its data and more.</p>
          Would you like to learn how to deploy your first update?
        </div>
        <div className="flexbox center-aligned margin-top-small space-between">
          <b className="clickable slightly-smaller" onClick={() => dispatch(setShowDismissOnboardingTipsDialog(true))}>
            Dismiss the tutorial
          </b>
          <Button onClick={() => dispatch(advanceOnboarding(onboardingSteps.DEVICES_ACCEPTED_ONBOARDING))}>Yes, let&apos;s deploy!</Button>
        </div>
      </div>
    </BaseOnboardingTooltip>
  );
};

export const DevicesDeployReleaseOnboarding = () => (
  <div>
    From the Device actions, choose &apos;Create a deployment for this device&apos;. You&apos;ll deploy an update to the device, using some demo software we
    have provided.
  </div>
);

export const SchedulingArtifactSelection = ({ selectedRelease }) => <div>{`Select the ${selectedRelease.name} release we included.`}</div>;

export const SchedulingAllDevicesSelection = () => (
  <div>
    Select &apos;All devices&apos; for now.<p>You can learn how to create device groups later.</p>
  </div>
);

export const SchedulingGroupSelection = ({ createdGroup }) => <div>{`Select the ${createdGroup} device group you just made.`}</div>;

export const SchedulingReleaseToDevices = ({ selectedDevice, selectedGroup, selectedRelease }) => (
  <div>{`Create the deployment! This will deploy the ${selectedRelease.name} Artifact to ${
    selectedDevice ? selectedDevice.id : selectedGroup || ALL_DEVICES
  }`}</div>
);

export const DeploymentsInprogress = () => <div>Your deployment is in progress. Click to view a report</div>;

export const DeploymentsPast = () => <div>Your deployment has finished, click here to view it</div>;

export const DeploymentsPastCompletedFailure = () => (
  <div>Your deployment has finished, but it looks like there was a problem. Click to view the deployment report, where you can see the error log.</div>
);

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 from 'react';
15	import { useDispatch } from 'react-redux';
16
17	import { Schedule as HelpIcon } from '@mui/icons-material';
18	import { Button } from '@mui/material';
19
20	import { advanceOnboarding, setShowDismissOnboardingTipsDialog } from '../../actions/onboardingActions';
21	import { setShowConnectingDialog } from '../../actions/userActions';
22	import { ALL_DEVICES } from '../../constants/deviceConstants';
23	import { onboardingSteps } from '../../constants/onboardingConstants';
24	import BaseOnboardingTip, { BaseOnboardingTooltip } from './baseonboardingtip';
25
26	export const DevicePendingTip = props => (	183✔
27	<BaseOnboardingTip	1✔
28	icon={<HelpIcon />}
29	component={<div>If you followed the steps in "Connecting a device", your device will show here shortly.</div>}
30	{...props}
31	/>
32	);
33
34	export const GetStartedTip = props => {	183✔
35	const dispatch = useDispatch();	1✔
36	return (	1✔
37	<BaseOnboardingTooltip {...props}>
38	<div className="margin-top" style={{ marginBottom: -12 }}>
39	<p>
40	<b>Welcome to Mender!</b>
41	</p>
42	We can help you get started with connecting your first device and deploying an update to it.
43	<div className="flexbox center-aligned margin-top-small space-between">
44	<b className="clickable slightly-smaller" onClick={() => dispatch(setShowDismissOnboardingTipsDialog(true))}>	×
45	No thanks, I don't need help
46	</b>
47	<Button onClick={() => dispatch(setShowConnectingDialog(true))}>Get started</Button>	×
48	</div>
49	</div>
50	</BaseOnboardingTooltip>
51	);
52	};
53
54	export const DevicesPendingDelayed = () => (	183✔
55	<div>If your device still isn't showing, try following the connection steps again or see our documentation for more.</div>	×
56	);
57
58	export const DashboardOnboardingState = () => <div>Your device has requested to join the server. Click the row to expand the device details.</div>;	183✔
59
60	export const DevicesPendingAcceptingOnboarding = () => (	183✔
61	<div>	1✔
62	Your device has made a request to join the Mender server. You can inspect its identity details, such as mac address and public key, to verify it is
63	definitely your device.
64	<br />
65	When you are ready, Accept it!
66	</div>
67	);
68
69	export const DashboardOnboardingPendings = () => <div>Next accept your device</div>;	183✔
70
71	export const DevicesAcceptedOnboarding = props => {	183✔
72	const dispatch = useDispatch();	2✔
73	return (	1✔
74	<BaseOnboardingTooltip {...props}>
75	<div className="margin-top" style={{ marginBottom: -12 }}>
76	<div>
77	<p>Your device is now authenticated and has connected to the server! It's ready to receive updates, report its data and more.</p>
78	Would you like to learn how to deploy your first update?
79	</div>
80	<div className="flexbox center-aligned margin-top-small space-between">
81	<b className="clickable slightly-smaller" onClick={() => dispatch(setShowDismissOnboardingTipsDialog(true))}>	×
82	Dismiss the tutorial
83	</b>
84	<Button onClick={() => dispatch(advanceOnboarding(onboardingSteps.DEVICES_ACCEPTED_ONBOARDING))}>Yes, let's deploy!</Button>	×
85	</div>
86	</div>
87	</BaseOnboardingTooltip>
88	);
89	};
90
91	export const DevicesDeployReleaseOnboarding = () => (	183✔
92	<div>	×
93	From the Device actions, choose 'Create a deployment for this device'. You'll deploy an update to the device, using some demo software we
94	have provided.
95	</div>
96	);
97
98	export const SchedulingArtifactSelection = ({ selectedRelease }) => <div>{`Select the ${selectedRelease.name} release we included.`}</div>;	183✔
99
100	export const SchedulingAllDevicesSelection = () => (	183✔
101	<div>	1✔
102	Select 'All devices' for now.<p>You can learn how to create device groups later.</p>
103	</div>
104	);
105
106	export const SchedulingGroupSelection = ({ createdGroup }) => <div>{`Select the ${createdGroup} device group you just made.`}</div>;	183✔
107
108	export const SchedulingReleaseToDevices = ({ selectedDevice, selectedGroup, selectedRelease }) => (	183✔
109	<div>{`Create the deployment! This will deploy the ${selectedRelease.name} Artifact to ${	1✔
110	selectedDevice ? selectedDevice.id : selectedGroup \|\| ALL_DEVICES	3!
111	}`}</div>
112	);
113
114	export const DeploymentsInprogress = () => <div>Your deployment is in progress. Click to view a report</div>;	183✔
115
116	export const DeploymentsPast = () => <div>Your deployment has finished, click here to view it</div>;	183✔
117
118	export const DeploymentsPastCompletedFailure = () => (	183✔
119	<div>Your deployment has finished, but it looks like there was a problem. Click to view the deployment report, where you can see the error log.</div>	1✔
120	);

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