1091795320

Committed 01 Dec 2023 04:32AM UTC coverage: 82.784% (-17.2%) from 99.964%

Build # 1091795320

Build Type

Pull #4229

gitlab-ci

Committed by

web-flow

Commit Message

chore: Bump node from 21.1.0-alpine to 21.2.0-alpine

Bumps node from 21.1.0-alpine to 21.2.0-alpine.

---
updated-dependencies:
- dependency-name: node
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Pull Request Pull Request #4229: chore: Bump node from 21.1.0-alpine to 21.2.0-alpine

Run Details

4316 of 6292 branches covered (0.0%)

8333 of 10066 relevant lines covered (82.78%)

188.98 hits per line

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

83.05

/src/js/components/header/header.js

// Copyright 2015 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, { useCallback, useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Link } from 'react-router-dom';

import {
  AccountCircle as AccountCircleIcon,
  ArrowDropDown as ArrowDropDownIcon,
  ArrowDropUp as ArrowDropUpIcon,
  ExitToApp as ExitIcon
} from '@mui/icons-material';
import { Button, IconButton, ListItemSecondaryAction, ListItemText, Menu, MenuItem, Toolbar } from '@mui/material';
import { makeStyles } from 'tss-react/mui';

import moment from 'moment';
import Cookies from 'universal-cookie';

import enterpriseLogo from '../../../assets/img/headerlogo-enterprise.png';
import logo from '../../../assets/img/headerlogo.png';
import whiteEnterpriseLogo from '../../../assets/img/whiteheaderlogo-enterprise.png';
import whiteLogo from '../../../assets/img/whiteheaderlogo.png';
import { setFirstLoginAfterSignup, setSearchState } from '../../actions/appActions';
import { getAllDeviceCounts } from '../../actions/deviceActions';
import { initializeSelf, logoutUser, setAllTooltipsReadState, setHideAnnouncement } from '../../actions/userActions';
import { TIMEOUTS } from '../../constants/appConstants';
import { READ_STATES } from '../../constants/userConstants';
import { isDarkMode } from '../../helpers';
import {
  getAcceptedDevices,
  getCurrentSession,
  getCurrentUser,
  getDeviceCountsByStatus,
  getDeviceLimit,
  getFeatures,
  getIsEnterprise,
  getOrganization,
  getShowHelptips,
  getUserCapabilities,
  getUserSettings
} from '../../selectors';
import Tracking from '../../tracking';
import { useDebounce } from '../../utils/debouncehook';
import Search from '../common/search';
import Announcement from './announcement';
import DemoNotification from './demonotification';
import DeploymentNotifications from './deploymentnotifications';
import DeviceNotifications from './devicenotifications';
import OfferHeader from './offerheader';
import TrialNotification from './trialnotification';

// Change this when a new feature/offer is introduced
const currentOffer = {
  name: 'add-ons',
  expires: '2021-12-30',
  trial: true,
  os: true,
  professional: true,
  enterprise: true
};

const cookies = new Cookies();

const useStyles = makeStyles()(theme => ({
  header: {
    minHeight: 'unset',
    paddingLeft: theme.spacing(4),
    paddingRight: theme.spacing(5),
    width: '100%',
    borderBottom: `1px solid ${theme.palette.grey[100]}`,
    display: 'grid'
  },
  banner: { gridTemplateRows: `1fr ${theme.mixins.toolbar.minHeight}px` },
  buttonColor: { color: theme.palette.grey[600] },
  dropDown: { height: '100%', marginLeft: theme.spacing(0.5), textTransform: 'none' },
  exitIcon: { color: theme.palette.grey[600], fill: theme.palette.grey[600] },
  demoTrialAnnouncement: {
    fontSize: 14,
    height: 'auto'
  },
  demoAnnouncementIcon: {
    height: 16,
    color: theme.palette.primary.main,
    '&.MuiButton-textPrimary': {
      color: theme.palette.primary.main,
      height: 'inherit'
    }
  },
  redAnnouncementIcon: {
    color: theme.palette.error.dark
  }
}));

export const Header = ({ mode }) => {
  const { classes } = useStyles();
  const [anchorEl, setAnchorEl] = useState(null);
  const [gettingUser, setGettingUser] = useState(false);
  const [hasOfferCookie, setHasOfferCookie] = useState(false);

  const organization = useSelector(getOrganization);
  const { canManageUsers: allowUserManagement } = useSelector(getUserCapabilities);
  const { total: acceptedDevices = 0 } = useSelector(getAcceptedDevices);
  const announcement = useSelector(state => state.app.hostedAnnouncement);
  const deviceLimit = useSelector(getDeviceLimit);
  const firstLoginAfterSignup = useSelector(state => state.app.firstLoginAfterSignup);
  const { trackingConsentGiven: hasTrackingEnabled } = useSelector(getUserSettings);
  const inProgress = useSelector(state => state.deployments.byStatus.inprogress.total);
  const isEnterprise = useSelector(getIsEnterprise);
  const { isDemoMode: demo, hasMultitenancy, isHosted } = useSelector(getFeatures);
  const { isSearching, searchTerm, refreshTrigger } = useSelector(state => state.app.searchState);
  const multitenancy = hasMultitenancy || isEnterprise || isHosted;
  const { pending: pendingDevices } = useSelector(getDeviceCountsByStatus);
  const user = useSelector(getCurrentUser);
  const { token } = useSelector(getCurrentSession);
  const userId = useDebounce(user.id, TIMEOUTS.debounceDefault);

  const dispatch = useDispatch();
  const deviceTimer = useRef();
  const showHelptips = useSelector(getShowHelptips);

  useEffect(() => {
    if ((!userId || !user.email?.length) && !gettingUser && token) {
      setGettingUser(true);
      dispatch(initializeSelf());
      return;
    }
    Tracking.setTrackingEnabled(hasTrackingEnabled);
    if (hasTrackingEnabled && user.id && organization.id) {
      Tracking.setOrganizationUser(organization, user);
      if (firstLoginAfterSignup) {
        Tracking.pageview('/signup/complete');
        dispatch(setFirstLoginAfterSignup(false));
      }
    }
  }, [dispatch, firstLoginAfterSignup, gettingUser, hasTrackingEnabled, organization, token, user, user.email, userId]);

  useEffect(() => {
    const showOfferCookie = cookies.get('offer') === currentOffer.name;
    setHasOfferCookie(showOfferCookie);
    clearInterval(deviceTimer.current);
    deviceTimer.current = setInterval(() => dispatch(getAllDeviceCounts()), TIMEOUTS.refreshDefault);
    return () => {
      clearInterval(deviceTimer.current);
    };
  }, [dispatch]);

  const onLogoutClick = () => {
    setAnchorEl(null);
    dispatch(logoutUser()).then(() => window.location.replace('/ui/'));
  };

  const onSearch = useCallback((searchTerm, refreshTrigger) => dispatch(setSearchState({ refreshTrigger, searchTerm, page: 1 })), [dispatch]);

  const onToggleTooltips = () => dispatch(setAllTooltipsReadState(showHelptips ? READ_STATES.read : READ_STATES.unread));

  const setHideOffer = () => {
    cookies.set('offer', currentOffer.name, { path: '/', maxAge: 2629746 });
    setHasOfferCookie(true);
  };

  const handleClose = () => setAnchorEl(null);

  const showOffer =
    isHosted && moment().isBefore(currentOffer.expires) && (organization.trial ? currentOffer.trial : currentOffer[organization.plan]) && !hasOfferCookie;

  const headerLogo = isDarkMode(mode) ? (isEnterprise ? whiteEnterpriseLogo : whiteLogo) : isEnterprise ? enterpriseLogo : logo;

  return (
    <Toolbar id="fixedHeader" className={showOffer ? `${classes.header} ${classes.banner}` : classes.header}>
      {!!announcement && (
        <Announcement
          announcement={announcement}
          errorIconClassName={classes.redAnnouncementIcon}
          iconClassName={classes.demoAnnouncementIcon}
          sectionClassName={classes.demoTrialAnnouncement}
          onHide={() => dispatch(setHideAnnouncement(true))}
        />
      )}
      {showOffer && <OfferHeader onHide={setHideOffer} />}
      <div className="flexbox space-between">
        <div className="flexbox center-aligned">
          <Link to="/">
            <img id="logo" src={headerLogo} />
          </Link>
          {demo && <DemoNotification iconClassName={classes.demoAnnouncementIcon} sectionClassName={classes.demoTrialAnnouncement} />}
          {organization.trial && (
            <TrialNotification
              expiration={organization.trial_expiration}
              iconClassName={classes.demoAnnouncementIcon}
              sectionClassName={classes.demoTrialAnnouncement}
            />
          )}
        </div>
        <Search isSearching={isSearching} searchTerm={searchTerm} onSearch={onSearch} trigger={refreshTrigger} />
        <div className="flexbox center-aligned">
          <DeviceNotifications pending={pendingDevices} total={acceptedDevices} limit={deviceLimit} />
          <DeploymentNotifications inprogress={inProgress} />
          <Button
            className={`header-dropdown ${classes.dropDown}`}
            onClick={e => setAnchorEl(e.currentTarget)}
            startIcon={<AccountCircleIcon className={classes.buttonColor} />}
            endIcon={anchorEl ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}
          >
            {user.email}
          </Button>
          <Menu
            anchorEl={anchorEl}
            onClose={handleClose}
            open={Boolean(anchorEl)}
            anchorOrigin={{
              vertical: 'center',
              horizontal: 'center'
            }}
            transformOrigin={{
              vertical: 'bottom',
              horizontal: 'center'
            }}
          >
            <MenuItem component={Link} to="/settings" onClick={handleClose}>
              Settings
            </MenuItem>
            <MenuItem component={Link} to="/settings/my-profile" onClick={handleClose}>
              My profile
            </MenuItem>
            {multitenancy && (
              <MenuItem component={Link} to="/settings/organization-and-billing" onClick={handleClose}>
                My organization
              </MenuItem>
            )}
            {allowUserManagement && (
              <MenuItem component={Link} to="/settings/user-management" onClick={handleClose}>
                User management
              </MenuItem>
            )}
            <MenuItem onClick={onToggleTooltips}>{`Mark help tips as ${showHelptips ? '' : 'un'}read`}</MenuItem>
            <MenuItem component={Link} to="/help/get-started" onClick={handleClose}>
              Help & support
            </MenuItem>
            <MenuItem onClick={onLogoutClick}>
              <ListItemText primary="Log out" />
              <ListItemSecondaryAction>
                <IconButton>
                  <ExitIcon className={classes.exitIcon} />
                </IconButton>
              </ListItemSecondaryAction>
            </MenuItem>
          </Menu>
        </div>
      </div>
    </Toolbar>
  );
};

export default Header;

1	// Copyright 2015 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, { useCallback, useEffect, useRef, useState } from 'react';
15	import { useDispatch, useSelector } from 'react-redux';
16	import { Link } from 'react-router-dom';
17
18	import {
19	AccountCircle as AccountCircleIcon,
20	ArrowDropDown as ArrowDropDownIcon,
21	ArrowDropUp as ArrowDropUpIcon,
22	ExitToApp as ExitIcon
23	} from '@mui/icons-material';
24	import { Button, IconButton, ListItemSecondaryAction, ListItemText, Menu, MenuItem, Toolbar } from '@mui/material';
25	import { makeStyles } from 'tss-react/mui';
26
27	import moment from 'moment';
28	import Cookies from 'universal-cookie';
29
30	import enterpriseLogo from '../../../assets/img/headerlogo-enterprise.png';
31	import logo from '../../../assets/img/headerlogo.png';
32	import whiteEnterpriseLogo from '../../../assets/img/whiteheaderlogo-enterprise.png';
33	import whiteLogo from '../../../assets/img/whiteheaderlogo.png';
34	import { setFirstLoginAfterSignup, setSearchState } from '../../actions/appActions';
35	import { getAllDeviceCounts } from '../../actions/deviceActions';
36	import { initializeSelf, logoutUser, setAllTooltipsReadState, setHideAnnouncement } from '../../actions/userActions';
37	import { TIMEOUTS } from '../../constants/appConstants';
38	import { READ_STATES } from '../../constants/userConstants';
39	import { isDarkMode } from '../../helpers';
40	import {
41	getAcceptedDevices,
42	getCurrentSession,
43	getCurrentUser,
44	getDeviceCountsByStatus,
45	getDeviceLimit,
46	getFeatures,
47	getIsEnterprise,
48	getOrganization,
49	getShowHelptips,
50	getUserCapabilities,
51	getUserSettings
52	} from '../../selectors';
53	import Tracking from '../../tracking';
54	import { useDebounce } from '../../utils/debouncehook';
55	import Search from '../common/search';
56	import Announcement from './announcement';
57	import DemoNotification from './demonotification';
58	import DeploymentNotifications from './deploymentnotifications';
59	import DeviceNotifications from './devicenotifications';
60	import OfferHeader from './offerheader';
61	import TrialNotification from './trialnotification';
62
63	// Change this when a new feature/offer is introduced
64	const currentOffer = {	2✔
65	name: 'add-ons',
66	expires: '2021-12-30',
67	trial: true,
68	os: true,
69	professional: true,
70	enterprise: true
71	};
72
73	const cookies = new Cookies();	2✔
74
75	const useStyles = makeStyles()(theme => ({	7✔
76	header: {
77	minHeight: 'unset',
78	paddingLeft: theme.spacing(4),
79	paddingRight: theme.spacing(5),
80	width: '100%',
81	borderBottom: `1px solid ${theme.palette.grey[100]}`,
82	display: 'grid'
83	},
84	banner: { gridTemplateRows: `1fr ${theme.mixins.toolbar.minHeight}px` },
85	buttonColor: { color: theme.palette.grey[600] },
86	dropDown: { height: '100%', marginLeft: theme.spacing(0.5), textTransform: 'none' },
87	exitIcon: { color: theme.palette.grey[600], fill: theme.palette.grey[600] },
88	demoTrialAnnouncement: {
89	fontSize: 14,
90	height: 'auto'
91	},
92	demoAnnouncementIcon: {
93	height: 16,
94	color: theme.palette.primary.main,
95	'&.MuiButton-textPrimary': {
96	color: theme.palette.primary.main,
97	height: 'inherit'
98	}
99	},
100	redAnnouncementIcon: {
101	color: theme.palette.error.dark
102	}
103	}));
104
105	export const Header = ({ mode }) => {	2✔
106	const { classes } = useStyles();	380✔
107	const [anchorEl, setAnchorEl] = useState(null);	380✔
108	const [gettingUser, setGettingUser] = useState(false);	380✔
109	const [hasOfferCookie, setHasOfferCookie] = useState(false);	380✔
110
111	const organization = useSelector(getOrganization);	380✔
112	const { canManageUsers: allowUserManagement } = useSelector(getUserCapabilities);	380✔
113	const { total: acceptedDevices = 0 } = useSelector(getAcceptedDevices);	380!
114	const announcement = useSelector(state => state.app.hostedAnnouncement);	1,330✔
115	const deviceLimit = useSelector(getDeviceLimit);	380✔
116	const firstLoginAfterSignup = useSelector(state => state.app.firstLoginAfterSignup);	1,330✔
117	const { trackingConsentGiven: hasTrackingEnabled } = useSelector(getUserSettings);	380✔
118	const inProgress = useSelector(state => state.deployments.byStatus.inprogress.total);	1,330✔
119	const isEnterprise = useSelector(getIsEnterprise);	380✔
120	const { isDemoMode: demo, hasMultitenancy, isHosted } = useSelector(getFeatures);	380✔
121	const { isSearching, searchTerm, refreshTrigger } = useSelector(state => state.app.searchState);	1,330✔
122	const multitenancy = hasMultitenancy \|\| isEnterprise \|\| isHosted;	380✔
123	const { pending: pendingDevices } = useSelector(getDeviceCountsByStatus);	380✔
124	const user = useSelector(getCurrentUser);	380✔
125	const { token } = useSelector(getCurrentSession);	380✔
126	const userId = useDebounce(user.id, TIMEOUTS.debounceDefault);	380✔
127
128	const dispatch = useDispatch();	380✔
129	const deviceTimer = useRef();	380✔
130	const showHelptips = useSelector(getShowHelptips);	380✔
131
132	useEffect(() => {	380✔
133	if ((!userId \|\| !user.email?.length) && !gettingUser && token) {	6!
134	setGettingUser(true);	×
135	dispatch(initializeSelf());	×
136	return;	×
137	}
138	Tracking.setTrackingEnabled(hasTrackingEnabled);	6✔
139	if (hasTrackingEnabled && user.id && organization.id) {	6!
140	Tracking.setOrganizationUser(organization, user);	×
141	if (firstLoginAfterSignup) {	×
142	Tracking.pageview('/signup/complete');	×
143	dispatch(setFirstLoginAfterSignup(false));	×
144	}
145	}
146	}, [dispatch, firstLoginAfterSignup, gettingUser, hasTrackingEnabled, organization, token, user, user.email, userId]);
147
148	useEffect(() => {	380✔
149	const showOfferCookie = cookies.get('offer') === currentOffer.name;	5✔
150	setHasOfferCookie(showOfferCookie);	5✔
151	clearInterval(deviceTimer.current);	5✔
152	deviceTimer.current = setInterval(() => dispatch(getAllDeviceCounts()), TIMEOUTS.refreshDefault);	186✔
153	return () => {	5✔
154	clearInterval(deviceTimer.current);	5✔
155	};
156	}, [dispatch]);
157
158	const onLogoutClick = () => {	380✔
159	setAnchorEl(null);	2✔
160	dispatch(logoutUser()).then(() => window.location.replace('/ui/'));	2✔
161	};
162
163	const onSearch = useCallback((searchTerm, refreshTrigger) => dispatch(setSearchState({ refreshTrigger, searchTerm, page: 1 })), [dispatch]);	380✔
164
165	const onToggleTooltips = () => dispatch(setAllTooltipsReadState(showHelptips ? READ_STATES.read : READ_STATES.unread));	380!
166
167	const setHideOffer = () => {	380✔
168	cookies.set('offer', currentOffer.name, { path: '/', maxAge: 2629746 });	×
169	setHasOfferCookie(true);	×
170	};
171
172	const handleClose = () => setAnchorEl(null);	380✔
173
174	const showOffer =
175	isHosted && moment().isBefore(currentOffer.expires) && (organization.trial ? currentOffer.trial : currentOffer[organization.plan]) && !hasOfferCookie;	380!
176
177	const headerLogo = isDarkMode(mode) ? (isEnterprise ? whiteEnterpriseLogo : whiteLogo) : isEnterprise ? enterpriseLogo : logo;	380!
178
179	return (	380✔
180	<Toolbar id="fixedHeader" className={showOffer ? `${classes.header} ${classes.banner}` : classes.header}>	380!
181	{!!announcement && (	380!
182	<Announcement
183	announcement={announcement}
184	errorIconClassName={classes.redAnnouncementIcon}
185	iconClassName={classes.demoAnnouncementIcon}
186	sectionClassName={classes.demoTrialAnnouncement}
187	onHide={() => dispatch(setHideAnnouncement(true))}	×
188	/>
189	)}
190	{showOffer && <OfferHeader onHide={setHideOffer} />}	380!
191	<div className="flexbox space-between">
192	<div className="flexbox center-aligned">
193	<Link to="/">
194	<img id="logo" src={headerLogo} />
195	</Link>
196	{demo && <DemoNotification iconClassName={classes.demoAnnouncementIcon} sectionClassName={classes.demoTrialAnnouncement} />}	380!
197	{organization.trial && (	380!
198	<TrialNotification
199	expiration={organization.trial_expiration}
200	iconClassName={classes.demoAnnouncementIcon}
201	sectionClassName={classes.demoTrialAnnouncement}
202	/>
203	)}
204	</div>
205	<Search isSearching={isSearching} searchTerm={searchTerm} onSearch={onSearch} trigger={refreshTrigger} />
206	<div className="flexbox center-aligned">
207	<DeviceNotifications pending={pendingDevices} total={acceptedDevices} limit={deviceLimit} />
208	<DeploymentNotifications inprogress={inProgress} />
209	<Button
210	className={`header-dropdown ${classes.dropDown}`}
211	onClick={e => setAnchorEl(e.currentTarget)}	2✔
212	startIcon={<AccountCircleIcon className={classes.buttonColor} />}
213	endIcon={anchorEl ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}	380✔
214	>
215	{user.email}
216	</Button>
217	<Menu
218	anchorEl={anchorEl}
219	onClose={handleClose}
220	open={Boolean(anchorEl)}
221	anchorOrigin={{
222	vertical: 'center',
223	horizontal: 'center'
224	}}
225	transformOrigin={{
226	vertical: 'bottom',
227	horizontal: 'center'
228	}}
229	>
230	<MenuItem component={Link} to="/settings" onClick={handleClose}>
231	Settings
232	</MenuItem>
233	<MenuItem component={Link} to="/settings/my-profile" onClick={handleClose}>
234	My profile
235	</MenuItem>
236	{multitenancy && (	750✔
237	<MenuItem component={Link} to="/settings/organization-and-billing" onClick={handleClose}>
238	My organization
239	</MenuItem>
240	)}
241	{allowUserManagement && (	760✔
242	<MenuItem component={Link} to="/settings/user-management" onClick={handleClose}>
243	User management
244	</MenuItem>
245	)}
246	<MenuItem onClick={onToggleTooltips}>{`Mark help tips as ${showHelptips ? '' : 'un'}read`}</MenuItem>	380!
247	<MenuItem component={Link} to="/help/get-started" onClick={handleClose}>
248	Help & support
249	</MenuItem>
250	<MenuItem onClick={onLogoutClick}>
251	<ListItemText primary="Log out" />
252	<ListItemSecondaryAction>
253	<IconButton>
254	<ExitIcon className={classes.exitIcon} />
255	</IconButton>
256	</ListItemSecondaryAction>
257	</MenuItem>
258	</Menu>
259	</div>
260	</div>
261	</Toolbar>
262	);
263	};
264
265	export default Header;

mendersoftware / gui / 1091795320

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