897326496

pending completion

Build # 897326496

Build Type

Pull #3752

gitlab-ci

Committed by

mzedel

Commit Message

chore(e2e): made use of shared timeout & login checking values to remove code duplication

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

Pull Request Pull Request #3752: chore(e2e-tests): slightly simplified log in test + separated log out test

Run Details

4395 of 6392 branches covered (68.76%)

8060 of 9780 relevant lines covered (82.41%)

126.17 hits per line

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

83.02

/src/js/components/helptips/helptooltips.js

// Copyright 2017 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 { connect } from 'react-redux';
import { Link } from 'react-router-dom';

import { Help as HelpIcon, InfoOutlined as InfoIcon } from '@mui/icons-material';

import { setSnackbar } from '../../actions/appActions';
import { toggleHelptips } from '../../actions/userActions';
import { getDocsVersion } from '../../selectors';
import ConfigurationObject from '../common/configurationobject';
import MenderTooltip, { MenderTooltipClickable } from '../common/mendertooltip';

const actionCreators = { setSnackbar, toggleHelptips };
const mapStateToProps = (state, ownProps) => {
  let device = {};
  if (ownProps.deviceId) {
    device = state.devices.byId[ownProps.deviceId];
  }
  return {
    device,
    docsVersion: getDocsVersion(state)
  };
};

const HideHelptipsButton = ({ toggleHelptips }) => (
  <p>
    <a className="hidehelp" onClick={toggleHelptips}>
      Hide all help tips
    </a>
  </p>
);

const AuthExplainComponent = ({ docsVersion }) => (
  <MenderTooltipClickable
    placement="left"
    className="absolute clickable"
    style={{ right: 0, top: -70 }}
    title={
      <>
        <h3>Device authorization status</h3>
        <p>
          Each device sends an authentication request containing its identity attributes and its current public key. You can accept, reject or dismiss these
          requests to determine the authorization status of the device.
        </p>
        <p>
          In cases such as key rotation, each device may have more than one identity/key combination listed. See the documentation for more on{' '}
          <a href={`https://docs.mender.io/${docsVersion}overview/device-authentication`} target="_blank" rel="noopener noreferrer">
            Device authentication
          </a>
          .
        </p>
      </>
    }
  >
    <InfoIcon />
  </MenderTooltipClickable>
);
export const AuthExplainButton = connect(mapStateToProps, actionCreators)(AuthExplainComponent);

const AuthButtonComponent = ({ docsVersion, highlightHelp, toggleHelptips }) => (
  <MenderTooltipClickable
    className={highlightHelp ? 'tooltip help highlight' : 'tooltip help'}
    style={{ left: '75%', top: 0 }}
    title={
      <div style={{ whiteSpace: 'normal' }}>
        <h3>Authorize devices</h3>
        <hr />
        <p>
          Expand this section to view the authentication options for this device. You can decide whether to accept it, reject it, or just dismiss this device
          for now.
        </p>
        <p>
          See the documentation for more on{' '}
          <a href={`https://docs.mender.io/${docsVersion}overview/device-authentication`} target="_blank" rel="noopener noreferrer">
            Device authentication
          </a>
          .
        </p>
        <HideHelptipsButton toggleHelptips={toggleHelptips} />
      </div>
    }
  >
    <HelpIcon />
  </MenderTooltipClickable>
);
export const AuthButton = connect(mapStateToProps, actionCreators)(AuthButtonComponent);

const AddGroupComponent = ({ toggleHelptips }) => (
  <MenderTooltipClickable
    className="tooltip help"
    style={{ bottom: -10 }}
    title={
      <>
        <h3>Device groups</h3>
        <hr />
        <p>
          It is possible to create groups of devices. Once you have created a group and added one or more devices to it, you can deploy an update to that
          specific group only.
        </p>
        <p>To avoid accidents, Mender only allows a device to be in one group at the time.</p>
        <p>
          You can find out additional information about device groups in <Link to="/help/devices">the help section</Link>.
        </p>
        <HideHelptipsButton toggleHelptips={toggleHelptips} />
      </>
    }
  >
    <HelpIcon />
  </MenderTooltipClickable>
);
export const AddGroup = connect(mapStateToProps, actionCreators)(AddGroupComponent);

const ExpandDeviceComponent = ({ docsVersion, toggleHelptips }) => (
  <MenderTooltipClickable
    className="tooltip help"
    style={{ left: 'inherit', right: '45px' }}
    title={
      <>
        <h3>Device inventory</h3>
        <hr />
        <p>
          Mender automatically collects identity and inventory information from connected devices. You can view this information by clicking on a device to
          expand the row.
        </p>
        <p>
          Which information is collected about devices is fully configurable;{' '}
          <a href={`https://docs.mender.io/${docsVersion}client-installation/identity`} target="_blank" rel="noopener noreferrer">
            see the documentation for how to configure this
          </a>
          .
        </p>
        <HideHelptipsButton toggleHelptips={toggleHelptips} />
      </>
    }
  >
    <HelpIcon />
  </MenderTooltipClickable>
);
export const ExpandDevice = connect(mapStateToProps, actionCreators)(ExpandDeviceComponent);

const ExpandArtifactComponent = ({ docsVersion, toggleHelptips }) => (
  <MenderTooltipClickable
    className="tooltip help"
    title={
      <>
        <h3>Device type compatibility</h3>
        <hr />
        <p>
          Mender Artifacts have <b>Device types compatible</b> as part of their metadata. All devices report which device type they are, as part of their
          inventory information. During a deployment, Mender makes sure that a device will only download and install an Artifact it is compatible with.
        </p>
        <p>You can click on each Artifact in the Release to expand the row and view more information about it.</p>
        <p>
          For more information on how to specify the device type compatibility and other artifact metadata,{' '}
          <a href={`https://docs.mender.io/${docsVersion}artifact-creation/create-an-artifact`} target="_blank" rel="noopener noreferrer">
            see the documentation
          </a>
          .
        </p>
        <HideHelptipsButton toggleHelptips={toggleHelptips} />
      </>
    }
  >
    <HelpIcon />
  </MenderTooltipClickable>
);
export const ExpandArtifact = connect(mapStateToProps, actionCreators)(ExpandArtifactComponent);

const DeviceSupportTipComponent = ({ docsVersion }) => (
  <MenderTooltipClickable
    className="tooltip help"
    style={{ bottom: '2.5%', left: '88%' }}
    title={
      <p>
        The steps in the guide should work on most operating systems in the Debian family (e.g. Debian, Ubuntu, Raspberry Pi OS) and devices based on ARMv6 or
        newer (e.g. Raspberry Pi 2/3/4, Beaglebone). Visit{' '}
        <a href={`https://docs.mender.io/${docsVersion}overview/device-support`} target="_blank" rel="noopener noreferrer">
          our documentation
        </a>{' '}
        for more information about device support.
      </p>
    }
  >
    <HelpIcon />
  </MenderTooltipClickable>
);

export const DeviceSupportTip = connect(mapStateToProps, actionCreators)(DeviceSupportTipComponent);

const ConfigureTimezoneTipComponent = ({ anchor, device, toggleHelptips }) => {
  const { attributes = {} } = device;
  if (!['qemux86-64', 'raspberry', 'rpi'].some(type => attributes.device_type?.some(deviceType => deviceType.startsWith(type)))) {
    return null;
  }
  return (
    <MenderTooltipClickable
      className="fadeIn tooltip help"
      style={anchor}
      title={
        <>
          To see the effects of applying a configuration to your device you can set one of the below values to modify the timezone of your device. While all
          values from <i>timedatectl list-timezones</i> will work, to easily see the impact of the changed value you can use one of the following values:
          <ul>
            <li>Europe/Oslo</li>
            <li>America/Los_Angeles</li>
            <li>Asia/Tokyo</li>
          </ul>
          Once the configuration has been applied you can see the effect by opening the Remote Terminal to the device and executing the <i>date</i> command.
          <HideHelptipsButton toggleHelptips={toggleHelptips} />
        </>
      }
    >
      <HelpIcon />
    </MenderTooltipClickable>
  );
};

export const ConfigureTimezoneTip = connect(mapStateToProps, actionCreators)(ConfigureTimezoneTipComponent);

const ConfigureRaspberryLedComponent = ({ anchor, device, setSnackbar, toggleHelptips }) => {
  const { attributes = {} } = device;
  if (!['raspberry', 'rpi'].some(type => attributes.device_type?.some(deviceType => deviceType.startsWith(type)))) {
    return null;
  }
  return (
    <MenderTooltipClickable
      className="fadeIn tooltip help"
      style={anchor}
      title={
        <>
          To see the effects of applying a configuration to your device you can set one of the below values to modify the behaviour of your Raspberry Pi green
          status LED
          <ConfigurationObject
            className="margin-top-small margin-bottom-small"
            config={{
              mmc0: 'The default, which blinks the led on storage activity',
              on: 'Turn on the light permanently',
              off: 'Turn off the light permanently',
              heartbeat: 'Enable heartbeat blinking'
            }}
            compact
            setSnackbar={setSnackbar}
          />
          There are other possible values, but we won&apos;t advertise them here. See
          <a href="http://www.d3noob.org/2020/07/controlling-activity-led-on-raspberry-pi.html" target="_blank" rel="noopener noreferrer">
            this blog post
          </a>{' '}
          or{' '}
          <a href="https://www.raspberrypi.org/forums/viewtopic.php?t=273194#p1658930" target="_blank" rel="noopener noreferrer">
            in the Raspberry Pi forums
          </a>{' '}
          for more information.
          <HideHelptipsButton toggleHelptips={toggleHelptips} />
        </>
      }
    >
      <HelpIcon />
    </MenderTooltipClickable>
  );
};

export const ConfigureRaspberryLedTip = connect(mapStateToProps, actionCreators)(ConfigureRaspberryLedComponent);

const ConfigureAddOnTipComponent = ({ docsVersion }) => (
  <MenderTooltipClickable
    className="tooltip help"
    style={{ top: '10%', left: '75%' }}
    title={
      <p>
        Mender deploys the configuration attributes using the same mechanisms as software updates. The configuration is stored as a JSON file at
        <code>/var/lib/mender-configure/device-config.json</code> on the device and then all the scripts in{' '}
        <code>/usr/lib/mender-configure/apply-device-config.d/</code> are executed to apply the configuration attributes. To add a new configuration attribute,
        you simply need to input it in the UI and add a script to that directory that applies it accordingly. Read more about how it works in the{' '}
        <a href={`https://docs.mender.io/${docsVersion}add-ons/configure`} target="_blank" rel="noopener noreferrer">
          Configure documentation
        </a>
        .
      </p>
    }
  >
    <HelpIcon />
  </MenderTooltipClickable>
);

export const ConfigureAddOnTip = connect(mapStateToProps, actionCreators)(ConfigureAddOnTipComponent);

export const NameTagTip = () => (
  <MenderTooltip
    arrow
    title={
      <>
        The <i>Name</i> tag will be available as a device indentifier too.
      </>
    }
  >
    <div className="tooltip help" style={{ top: '15%', left: '85%' }}>
      <HelpIcon />
    </div>
  </MenderTooltip>
);

1	// Copyright 2017 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 { connect } from 'react-redux';
16	import { Link } from 'react-router-dom';
17
18	import { Help as HelpIcon, InfoOutlined as InfoIcon } from '@mui/icons-material';
19
20	import { setSnackbar } from '../../actions/appActions';
21	import { toggleHelptips } from '../../actions/userActions';
22	import { getDocsVersion } from '../../selectors';
23	import ConfigurationObject from '../common/configurationobject';
24	import MenderTooltip, { MenderTooltipClickable } from '../common/mendertooltip';
25
26	const actionCreators = { setSnackbar, toggleHelptips };	22✔
27	const mapStateToProps = (state, ownProps) => {	22✔
28	let device = {};	30✔
29	if (ownProps.deviceId) {	30✔
30	device = state.devices.byId[ownProps.deviceId];	8✔
31	}
32	return {	30✔
33	device,
34	docsVersion: getDocsVersion(state)
35	};
36	};
37
38	const HideHelptipsButton = ({ toggleHelptips }) => (	22✔
39	<p>	×
40	<a className="hidehelp" onClick={toggleHelptips}>
41	Hide all help tips
42	</a>
43	</p>
44	);
45
46	const AuthExplainComponent = ({ docsVersion }) => (	22✔
47	<MenderTooltipClickable	1✔
48	placement="left"
49	className="absolute clickable"
50	style={{ right: 0, top: -70 }}
51	title={
52	<>
53	<h3>Device authorization status</h3>
54	<p>
55	Each device sends an authentication request containing its identity attributes and its current public key. You can accept, reject or dismiss these
56	requests to determine the authorization status of the device.
57	</p>
58	<p>
59	In cases such as key rotation, each device may have more than one identity/key combination listed. See the documentation for more on{' '}
60	<a href={`https://docs.mender.io/${docsVersion}overview/device-authentication`} target="_blank" rel="noopener noreferrer">
61	Device authentication
62	</a>
63	.
64	</p>
65	</>
66	}
67	>
68	<InfoIcon />
69	</MenderTooltipClickable>
70	);
71	export const AuthExplainButton = connect(mapStateToProps, actionCreators)(AuthExplainComponent);	22✔
72
73	const AuthButtonComponent = ({ docsVersion, highlightHelp, toggleHelptips }) => (	22✔
74	<MenderTooltipClickable	1✔
75	className={highlightHelp ? 'tooltip help highlight' : 'tooltip help'}	1!
76	style={{ left: '75%', top: 0 }}
77	title={
78	<div style={{ whiteSpace: 'normal' }}>
79	<h3>Authorize devices</h3>
80	<hr />
81	<p>
82	Expand this section to view the authentication options for this device. You can decide whether to accept it, reject it, or just dismiss this device
83	for now.
84	</p>
85	<p>
86	See the documentation for more on{' '}
87	<a href={`https://docs.mender.io/${docsVersion}overview/device-authentication`} target="_blank" rel="noopener noreferrer">
88	Device authentication
89	</a>
90	.
91	</p>
92	<HideHelptipsButton toggleHelptips={toggleHelptips} />
93	</div>
94	}
95	>
96	<HelpIcon />
97	</MenderTooltipClickable>
98	);
99	export const AuthButton = connect(mapStateToProps, actionCreators)(AuthButtonComponent);	22✔
100
101	const AddGroupComponent = ({ toggleHelptips }) => (	22✔
102	<MenderTooltipClickable	1✔
103	className="tooltip help"
104	style={{ bottom: -10 }}
105	title={
106	<>
107	<h3>Device groups</h3>
108	<hr />
109	<p>
110	It is possible to create groups of devices. Once you have created a group and added one or more devices to it, you can deploy an update to that
111	specific group only.
112	</p>
113	<p>To avoid accidents, Mender only allows a device to be in one group at the time.</p>
114	<p>
115	You can find out additional information about device groups in <Link to="/help/devices">the help section</Link>.
116	</p>
117	<HideHelptipsButton toggleHelptips={toggleHelptips} />
118	</>
119	}
120	>
121	<HelpIcon />
122	</MenderTooltipClickable>
123	);
124	export const AddGroup = connect(mapStateToProps, actionCreators)(AddGroupComponent);	22✔
125
126	const ExpandDeviceComponent = ({ docsVersion, toggleHelptips }) => (	22✔
127	<MenderTooltipClickable	3✔
128	className="tooltip help"
129	style={{ left: 'inherit', right: '45px' }}
130	title={
131	<>
132	<h3>Device inventory</h3>
133	<hr />
134	<p>
135	Mender automatically collects identity and inventory information from connected devices. You can view this information by clicking on a device to
136	expand the row.
137	</p>
138	<p>
139	Which information is collected about devices is fully configurable;{' '}
140	<a href={`https://docs.mender.io/${docsVersion}client-installation/identity`} target="_blank" rel="noopener noreferrer">
141	see the documentation for how to configure this
142	</a>
143	.
144	</p>
145	<HideHelptipsButton toggleHelptips={toggleHelptips} />
146	</>
147	}
148	>
149	<HelpIcon />
150	</MenderTooltipClickable>
151	);
152	export const ExpandDevice = connect(mapStateToProps, actionCreators)(ExpandDeviceComponent);	22✔
153
154	const ExpandArtifactComponent = ({ docsVersion, toggleHelptips }) => (	22✔
155	<MenderTooltipClickable	17✔
156	className="tooltip help"
157	title={
158	<>
159	<h3>Device type compatibility</h3>
160	<hr />
161	<p>
162	Mender Artifacts have <b>Device types compatible</b> as part of their metadata. All devices report which device type they are, as part of their
163	inventory information. During a deployment, Mender makes sure that a device will only download and install an Artifact it is compatible with.
164	</p>
165	<p>You can click on each Artifact in the Release to expand the row and view more information about it.</p>
166	<p>
167	For more information on how to specify the device type compatibility and other artifact metadata,{' '}
168	<a href={`https://docs.mender.io/${docsVersion}artifact-creation/create-an-artifact`} target="_blank" rel="noopener noreferrer">
169	see the documentation
170	</a>
171	.
172	</p>
173	<HideHelptipsButton toggleHelptips={toggleHelptips} />
174	</>
175	}
176	>
177	<HelpIcon />
178	</MenderTooltipClickable>
179	);
180	export const ExpandArtifact = connect(mapStateToProps, actionCreators)(ExpandArtifactComponent);	22✔
181
182	const DeviceSupportTipComponent = ({ docsVersion }) => (	22✔
183	<MenderTooltipClickable	4✔
184	className="tooltip help"
185	style={{ bottom: '2.5%', left: '88%' }}
186	title={
187	<p>
188	The steps in the guide should work on most operating systems in the Debian family (e.g. Debian, Ubuntu, Raspberry Pi OS) and devices based on ARMv6 or
189	newer (e.g. Raspberry Pi 2/3/4, Beaglebone). Visit{' '}
190	<a href={`https://docs.mender.io/${docsVersion}overview/device-support`} target="_blank" rel="noopener noreferrer">
191	our documentation
192	</a>{' '}
193	for more information about device support.
194	</p>
195	}
196	>
197	<HelpIcon />
198	</MenderTooltipClickable>
199	);
200
201	export const DeviceSupportTip = connect(mapStateToProps, actionCreators)(DeviceSupportTipComponent);	22✔
202
203	const ConfigureTimezoneTipComponent = ({ anchor, device, toggleHelptips }) => {	22✔
204	const { attributes = {} } = device;	1!
205	if (!['qemux86-64', 'raspberry', 'rpi'].some(type => attributes.device_type?.some(deviceType => deviceType.startsWith(type)))) {	2!
206	return null;	×
207	}
208	return (	1✔
209	<MenderTooltipClickable
210	className="fadeIn tooltip help"
211	style={anchor}
212	title={
213	<>
214	To see the effects of applying a configuration to your device you can set one of the below values to modify the timezone of your device. While all
215	values from <i>timedatectl list-timezones</i> will work, to easily see the impact of the changed value you can use one of the following values:
216	<ul>
217	<li>Europe/Oslo</li>
218	<li>America/Los_Angeles</li>
219	<li>Asia/Tokyo</li>
220	</ul>
221	Once the configuration has been applied you can see the effect by opening the Remote Terminal to the device and executing the <i>date</i> command.
222	<HideHelptipsButton toggleHelptips={toggleHelptips} />
223	</>
224	}
225	>
226	<HelpIcon />
227	</MenderTooltipClickable>
228	);
229	};
230
231	export const ConfigureTimezoneTip = connect(mapStateToProps, actionCreators)(ConfigureTimezoneTipComponent);	22✔
232
233	const ConfigureRaspberryLedComponent = ({ anchor, device, setSnackbar, toggleHelptips }) => {	22✔
234	const { attributes = {} } = device;	1!
235	if (!['raspberry', 'rpi'].some(type => attributes.device_type?.some(deviceType => deviceType.startsWith(type)))) {	1!
236	return null;	×
237	}
238	return (	1✔
239	<MenderTooltipClickable
240	className="fadeIn tooltip help"
241	style={anchor}
242	title={
243	<>
244	To see the effects of applying a configuration to your device you can set one of the below values to modify the behaviour of your Raspberry Pi green
245	status LED
246	<ConfigurationObject
247	className="margin-top-small margin-bottom-small"
248	config={{
249	mmc0: 'The default, which blinks the led on storage activity',
250	on: 'Turn on the light permanently',
251	off: 'Turn off the light permanently',
252	heartbeat: 'Enable heartbeat blinking'
253	}}
254	compact
255	setSnackbar={setSnackbar}
256	/>
257	There are other possible values, but we won't advertise them here. See
258	<a href="http://www.d3noob.org/2020/07/controlling-activity-led-on-raspberry-pi.html" target="_blank" rel="noopener noreferrer">
259	this blog post
260	</a>{' '}
261	or{' '}
262	<a href="https://www.raspberrypi.org/forums/viewtopic.php?t=273194#p1658930" target="_blank" rel="noopener noreferrer">
263	in the Raspberry Pi forums
264	</a>{' '}
265	for more information.
266	<HideHelptipsButton toggleHelptips={toggleHelptips} />
267	</>
268	}
269	>
270	<HelpIcon />
271	</MenderTooltipClickable>
272	);
273	};
274
275	export const ConfigureRaspberryLedTip = connect(mapStateToProps, actionCreators)(ConfigureRaspberryLedComponent);	22✔
276
277	const ConfigureAddOnTipComponent = ({ docsVersion }) => (	22✔
278	<MenderTooltipClickable	1✔
279	className="tooltip help"
280	style={{ top: '10%', left: '75%' }}
281	title={
282	<p>
283	Mender deploys the configuration attributes using the same mechanisms as software updates. The configuration is stored as a JSON file at
284	<code>/var/lib/mender-configure/device-config.json</code> on the device and then all the scripts in{' '}
285	<code>/usr/lib/mender-configure/apply-device-config.d/</code> are executed to apply the configuration attributes. To add a new configuration attribute,
286	you simply need to input it in the UI and add a script to that directory that applies it accordingly. Read more about how it works in the{' '}
287	<a href={`https://docs.mender.io/${docsVersion}add-ons/configure`} target="_blank" rel="noopener noreferrer">
288	Configure documentation
289	</a>
290	.
291	</p>
292	}
293	>
294	<HelpIcon />
295	</MenderTooltipClickable>
296	);
297
298	export const ConfigureAddOnTip = connect(mapStateToProps, actionCreators)(ConfigureAddOnTipComponent);	22✔
299
300	export const NameTagTip = () => (	22✔
301	<MenderTooltip	×
302	arrow
303	title={
304	<>
305	The <i>Name</i> tag will be available as a device indentifier too.
306	</>
307	}
308	>
309	<div className="tooltip help" style={{ top: '15%', left: '85%' }}>
310	<HelpIcon />
311	</div>
312	</MenderTooltip>
313	);

mendersoftware / gui / 897326496

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