963002358

pending completion

Build # 963002358

Build Type

Pull #3870

gitlab-ci

Committed by

mzedel

Commit Message

chore: cleaned up left over onboarding tooltips & aligned with updated design

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

Pull Request Pull Request #3870: MEN-5413

Run Details

4348 of 6319 branches covered (68.81%)

95 of 122 new or added lines in 24 files covered. (77.87%)

1734 existing lines in 160 files now uncovered.

8174 of 9951 relevant lines covered (82.14%)

178.12 hits per line

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

75.0

/src/js/components/devices/device-details/authstatus.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, { useRef } from 'react';
import { useSelector } from 'react-redux';

import { Block as BlockIcon, CheckCircle as CheckCircleIcon, Check as CheckIcon } from '@mui/icons-material';
import { Chip, Icon } from '@mui/material';

import pendingIcon from '../../../../assets/img/pending_status.png';
import { DEVICE_STATES } from '../../../constants/deviceConstants';
import { onboardingSteps } from '../../../constants/onboardingConstants';
import { getOnboardingState } from '../../../selectors';
import { getOnboardingComponentFor } from '../../../utils/onboardingmanager';
import { AuthButton } from '../../helptips/helptooltips';
import Authsets from './authsets/authsets';
import DeviceDataCollapse from './devicedatacollapse';

const iconStyle = { margin: 12 };

const states = {
  default: <Icon style={iconStyle} component="img" src={pendingIcon} />,
  pending: <Icon style={iconStyle} component="img" src={pendingIcon} />,
  accepted: <CheckCircleIcon className="green" style={iconStyle} />,
  rejected: <BlockIcon className="red" style={iconStyle} />,
  preauthorized: <CheckIcon style={iconStyle} />
};

export const AuthStatus = ({ decommission, device, showHelptips }) => {
  const listRef = useRef();
  const statusRef = useRef();
  const onboardingState = useSelector(getOnboardingState);
  const { auth_sets = [], status = DEVICE_STATES.accepted } = device;

  let hasPending = '';
  if (status === DEVICE_STATES.accepted && auth_sets.length > 1) {
    hasPending = auth_sets.reduce((accu, set) => {
      return set.status === DEVICE_STATES.pending ? 'This device has a pending authentication set' : accu;
    }, hasPending);
  }

  const statusIcon = states[status] ? states[status] : states.default;
  const requestNotification = !!hasPending && <Chip size="small" label="new request" color="primary" />;
  let onboardingComponent;
  if (listRef.current?.querySelector('.action-buttons')) {
    const anchor = {
      top: listRef.current.offsetTop + listRef.current.offsetHeight,
      left: listRef.current.offsetLeft + listRef.current.querySelector('.action-buttons').offsetLeft + 15
    };
    onboardingComponent = getOnboardingComponentFor(
      onboardingSteps.DEVICES_PENDING_ACCEPTING_ONBOARDING,
      onboardingState,
      { anchor, place: 'top' },
      onboardingComponent
    );
  }
  if (statusRef.current) {
    const anchor = {
      top: statusRef.current.offsetTop + statusRef.current.offsetHeight,
      left: statusRef.current.offsetLeft + statusRef.current.offsetWidth / 2
    };
    onboardingComponent = getOnboardingComponentFor(
      onboardingSteps.DEVICES_ACCEPTED_ONBOARDING,
      onboardingState,
      { anchor, place: 'top' },
      onboardingComponent
    );
  }
  return (
    <DeviceDataCollapse
      title={
        <div className="flexbox center-aligned">
          <h4>Authentication status</h4>
          <div className="flexbox center-aligned margin-left margin-right" ref={statusRef}>
            <div className="capitalized">{status}</div>
            {statusIcon}
          </div>
          {requestNotification}
          {showHelptips && (
            <div style={{ position: 'relative', width: 50, height: 30 }}>{status === DEVICE_STATES.pending && <AuthButton highlightHelp={true} />}</div>
          )}
        </div>
      }
    >
      <Authsets decommission={decommission} device={device} listRef={listRef} showHelptips={showHelptips} />
      {onboardingComponent}
    </DeviceDataCollapse>
  );
};

export default AuthStatus;

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, { useRef } from 'react';
15	import { useSelector } from 'react-redux';
16
17	import { Block as BlockIcon, CheckCircle as CheckCircleIcon, Check as CheckIcon } from '@mui/icons-material';
18	import { Chip, Icon } from '@mui/material';
19
20	import pendingIcon from '../../../../assets/img/pending_status.png';
21	import { DEVICE_STATES } from '../../../constants/deviceConstants';
22	import { onboardingSteps } from '../../../constants/onboardingConstants';
23	import { getOnboardingState } from '../../../selectors';
24	import { getOnboardingComponentFor } from '../../../utils/onboardingmanager';
25	import { AuthButton } from '../../helptips/helptooltips';
26	import Authsets from './authsets/authsets';
27	import DeviceDataCollapse from './devicedatacollapse';
28
29	const iconStyle = { margin: 12 };	11✔
30
31	const states = {	11✔
32	default: <Icon style={iconStyle} component="img" src={pendingIcon} />,
33	pending: <Icon style={iconStyle} component="img" src={pendingIcon} />,
34	accepted: <CheckCircleIcon className="green" style={iconStyle} />,
35	rejected: <BlockIcon className="red" style={iconStyle} />,
36	preauthorized: <CheckIcon style={iconStyle} />
37	};
38
39	export const AuthStatus = ({ decommission, device, showHelptips }) => {	11✔
40	const listRef = useRef();	2✔
41	const statusRef = useRef();	2✔
42	const onboardingState = useSelector(getOnboardingState);	2✔
43	const { auth_sets = [], status = DEVICE_STATES.accepted } = device;	2!
44
45	let hasPending = '';	2✔
46	if (status === DEVICE_STATES.accepted && auth_sets.length > 1) {	2✔
47	hasPending = auth_sets.reduce((accu, set) => {	1✔
48	return set.status === DEVICE_STATES.pending ? 'This device has a pending authentication set' : accu;	2✔
49	}, hasPending);
50	}
51
52	const statusIcon = states[status] ? states[status] : states.default;	2!
53	const requestNotification = !!hasPending && <Chip size="small" label="new request" color="primary" />;	2✔
54	let onboardingComponent;
55	if (listRef.current?.querySelector('.action-buttons')) {	2!
NEW 56	const anchor = {	×
57	top: listRef.current.offsetTop + listRef.current.offsetHeight,
58	left: listRef.current.offsetLeft + listRef.current.querySelector('.action-buttons').offsetLeft + 15
59	};
NEW 60	onboardingComponent = getOnboardingComponentFor(	×
61	onboardingSteps.DEVICES_PENDING_ACCEPTING_ONBOARDING,
62	onboardingState,
63	{ anchor, place: 'top' },
64	onboardingComponent
65	);
66	}
67	if (statusRef.current) {	2!
NEW 68	const anchor = {	×
69	top: statusRef.current.offsetTop + statusRef.current.offsetHeight,
70	left: statusRef.current.offsetLeft + statusRef.current.offsetWidth / 2
71	};
NEW 72	onboardingComponent = getOnboardingComponentFor(	×
73	onboardingSteps.DEVICES_ACCEPTED_ONBOARDING,
74	onboardingState,
75	{ anchor, place: 'top' },
76	onboardingComponent
77	);
78	}
79	return (	2✔
80	<DeviceDataCollapse
81	title={
82	<div className="flexbox center-aligned">
83	<h4>Authentication status</h4>
84	<div className="flexbox center-aligned margin-left margin-right" ref={statusRef}>
85	<div className="capitalized">{status}</div>
86	{statusIcon}
87	</div>
88	{requestNotification}
89	{showHelptips && (	3✔
90	<div style={{ position: 'relative', width: 50, height: 30 }}>{status === DEVICE_STATES.pending && <AuthButton highlightHelp={true} />}</div>	1!
91	)}
92	</div>
93	}
94	>
95	<Authsets decommission={decommission} device={device} listRef={listRef} showHelptips={showHelptips} />
96	{onboardingComponent}
97	</DeviceDataCollapse>
98	);
99	};
100
101	export default AuthStatus;

mendersoftware / gui / 963002358

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