• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

mendersoftware / gui / 951400782

pending completion
951400782

Pull #3900

gitlab-ci

web-flow
chore: bump @testing-library/jest-dom from 5.16.5 to 5.17.0

Bumps [@testing-library/jest-dom](https://github.com/testing-library/jest-dom) from 5.16.5 to 5.17.0.
- [Release notes](https://github.com/testing-library/jest-dom/releases)
- [Changelog](https://github.com/testing-library/jest-dom/blob/main/CHANGELOG.md)
- [Commits](https://github.com/testing-library/jest-dom/compare/v5.16.5...v5.17.0)

---
updated-dependencies:
- dependency-name: "@testing-library/jest-dom"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Pull Request #3900: chore: bump @testing-library/jest-dom from 5.16.5 to 5.17.0

4446 of 6414 branches covered (69.32%)

8342 of 10084 relevant lines covered (82.73%)

186.0 hits per line

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

64.57
/src/js/components/settings/global.js
1
// Copyright 2018 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, useRef, useState } from 'react';
15
import { useDispatch, useSelector } from 'react-redux';
16

17
import { Button, Checkbox, FormControl, FormControlLabel, FormHelperText, InputLabel, MenuItem, Select, Switch, TextField } from '@mui/material';
18
import { makeStyles } from 'tss-react/mui';
19

20
import { getDeviceAttributes } from '../../actions/deviceActions';
21
import { changeNotificationSetting } from '../../actions/monitorActions';
22
import { getGlobalSettings, saveGlobalSettings } from '../../actions/userActions';
23
import { TIMEOUTS } from '../../constants/appConstants';
24
import { offlineThresholds } from '../../constants/deviceConstants';
25
import { alertChannels } from '../../constants/monitorConstants';
26
import { settingsKeys } from '../../constants/userConstants';
27
import {
28
  getFeatures,
29
  getGlobalSettings as getGlobalSettingsSelector,
30
  getIdAttribute,
31
  getOfflineThresholdSettings,
32
  getTenantCapabilities,
33
  getUserCapabilities,
34
  getUserRoles
35
} from '../../selectors';
36
import { useDebounce } from '../../utils/debouncehook';
37
import DocsLink from '../common/docslink';
38
import InfoHint from '../common/info-hint';
39
import ArtifactGenerationSettings from './artifactgeneration';
40
import ReportingLimits from './reportinglimits';
41

42
const maxWidth = 750;
6✔
43

44
const useStyles = makeStyles()(theme => ({
6✔
45
  threshold: {
46
    display: 'grid',
47
    gridTemplateColumns: '100px 100px',
48
    columnGap: theme.spacing(2)
49
  },
50
  textInput: {
51
    marginTop: 0,
52
    minWidth: 'initial'
53
  }
54
}));
55

56
export const IdAttributeSelection = ({ attributes, dialog, onCloseClick, onSaveClick, selectedAttribute = '' }) => {
6!
57
  const [attributeSelection, setAttributeSelection] = useState('name');
2✔
58

59
  useEffect(() => {
2✔
60
    setAttributeSelection(selectedAttribute);
1✔
61
  }, [selectedAttribute]);
62

63
  const changed = selectedAttribute !== attributeSelection;
2✔
64

65
  const onChangeIdAttribute = ({ target: { value: attributeSelection } }) => {
2✔
66
    setAttributeSelection(attributeSelection);
×
67
    if (dialog) {
×
68
      return;
×
69
    }
70
    onSaveClick(undefined, { attribute: attributeSelection, scope: attributes.find(({ value }) => value === attributeSelection).scope });
×
71
  };
72

73
  const undoChanges = e => {
2✔
74
    setAttributeSelection(selectedAttribute);
×
75
    if (dialog) {
×
76
      onCloseClick(e);
×
77
    }
78
  };
79

80
  const saveSettings = e => onSaveClick(e, { attribute: attributeSelection, scope: attributes.find(({ value }) => value === attributeSelection).scope });
2✔
81

82
  return (
2✔
83
    <div className="flexbox space-between" style={{ alignItems: 'flex-start', maxWidth }}>
84
      <FormControl>
85
        <InputLabel shrink id="device-id">
86
          Device identity attribute
87
        </InputLabel>
88
        <Select value={attributeSelection} onChange={onChangeIdAttribute}>
89
          {attributes.map(item => (
90
            <MenuItem key={item.value} value={item.value}>
6✔
91
              {item.label}
92
            </MenuItem>
93
          ))}
94
        </Select>
95
        <FormHelperText className="info" component="div">
96
          <div className="margin-top-small margin-bottom-small">Choose a device identity attribute to use to identify your devices throughout the UI.</div>
97
          <div className="margin-top-small margin-bottom-small">
98
            <DocsLink path="client-installation/identity" title="Learn how to add custom identity attributes" /> to your devices.
99
          </div>
100
        </FormHelperText>
101
      </FormControl>
102
      {dialog && (
2!
103
        <div className="margin-left margin-top flexbox">
104
          <Button onClick={undoChanges} style={{ marginRight: 10 }}>
105
            Cancel
106
          </Button>
107
          <Button variant="contained" onClick={saveSettings} disabled={!changed} color="primary">
108
            Save
109
          </Button>
110
        </div>
111
      )}
112
    </div>
113
  );
114
};
115

116
export const GlobalSettingsDialog = ({
6✔
117
  attributes,
118
  hasReporting,
119
  isAdmin,
120
  notificationChannelSettings,
121
  offlineThresholdSettings,
122
  onChangeNotificationSetting,
123
  onCloseClick,
124
  onSaveClick,
125
  saveGlobalSettings,
126
  selectedAttribute,
127
  settings,
128
  tenantCapabilities,
129
  userCapabilities
130
}) => {
131
  const [channelSettings, setChannelSettings] = useState(notificationChannelSettings);
2✔
132
  const [currentInterval, setCurrentInterval] = useState(offlineThresholdSettings.interval);
2✔
133
  const [currentIntervalUnit, setCurrentIntervalUnit] = useState(offlineThresholdSettings.intervalUnit);
2✔
134
  const [intervalErrorText, setIntervalErrorText] = useState('');
2✔
135
  const debouncedInterval = useDebounce(currentInterval, TIMEOUTS.debounceShort);
2✔
136
  const debouncedIntervalUnit = useDebounce(currentIntervalUnit, TIMEOUTS.debounceShort);
2✔
137
  const timer = useRef(false);
2✔
138
  const { classes } = useStyles();
2✔
139
  const { needsDeploymentConfirmation = false } = settings;
2✔
140
  const { canDelta, hasMonitor } = tenantCapabilities;
2✔
141
  const { canManageReleases } = userCapabilities;
2✔
142

143
  useEffect(() => {
2✔
144
    setChannelSettings(notificationChannelSettings);
1✔
145
  }, [notificationChannelSettings]);
146

147
  useEffect(() => {
2✔
148
    setCurrentInterval(offlineThresholdSettings.interval);
1✔
149
    setCurrentIntervalUnit(offlineThresholdSettings.intervalUnit);
1✔
150
  }, [offlineThresholdSettings.interval, offlineThresholdSettings.intervalUnit]);
151

152
  useEffect(() => {
2✔
153
    if (!window.sessionStorage.getItem(settingsKeys.initialized) || !timer.current) {
1!
154
      return;
1✔
155
    }
156
    saveGlobalSettings({ offlineThreshold: { interval: debouncedInterval, intervalUnit: debouncedIntervalUnit } }, false, true);
×
157
  }, [debouncedInterval, debouncedIntervalUnit]);
158

159
  useEffect(() => {
2✔
160
    const initTimer = setTimeout(() => (timer.current = true), TIMEOUTS.threeSeconds);
1✔
161
    return () => {
1✔
162
      clearTimeout(initTimer);
1✔
163
    };
164
  }, []);
165

166
  const onNotificationSettingsClick = ({ target: { checked } }, channel) => {
2✔
167
    setChannelSettings({ ...channelSettings, channel: { enabled: !checked } });
×
168
    onChangeNotificationSetting(!checked, channel);
×
169
  };
170

171
  const onChangeOfflineIntervalUnit = ({ target: { value } }) => setCurrentIntervalUnit(value);
2✔
172
  const onChangeOfflineInterval = ({ target: { validity, value } }) => {
2✔
173
    if (validity.valid) {
×
174
      setCurrentInterval(value || 1);
×
175
      return setIntervalErrorText('');
×
176
    }
177
    setIntervalErrorText('Please enter a valid number between 1 and 1000.');
×
178
  };
179

180
  const toggleDeploymentConfirmation = () => {
2✔
181
    saveGlobalSettings({ needsDeploymentConfirmation: !needsDeploymentConfirmation });
×
182
  };
183

184
  return (
2✔
185
    <div style={{ maxWidth }} className="margin-top-small">
186
      <h2 className="margin-top-small">Global settings</h2>
187
      <InfoHint content="These settings apply to all users, so changes made here may affect other users' experience." style={{ marginBottom: 30 }} />
188
      <IdAttributeSelection attributes={attributes} onCloseClick={onCloseClick} onSaveClick={onSaveClick} selectedAttribute={selectedAttribute} />
189
      {hasReporting && <ReportingLimits />}
4✔
190
      <InputLabel className="margin-top" shrink>
191
        Deployments
192
      </InputLabel>
193
      <div className="clickable flexbox center-aligned" onClick={toggleDeploymentConfirmation}>
194
        <p className="help-content">Require confirmation on deployment creation</p>
195
        <Switch checked={needsDeploymentConfirmation} />
196
      </div>
197
      {canManageReleases && canDelta && <ArtifactGenerationSettings />}
6✔
198
      {isAdmin &&
4!
199
        hasMonitor &&
200
        Object.keys(alertChannels).map(channel => (
201
          <FormControl key={channel}>
×
202
            <InputLabel className="capitalized-start" shrink id={`${channel}-notifications`}>
203
              {channel} notifications
204
            </InputLabel>
205
            <FormControlLabel
206
              control={<Checkbox checked={!channelSettings[channel].enabled} onChange={e => onNotificationSettingsClick(e, channel)} />}
×
207
              label={`Mute ${channel} notifications`}
208
            />
209
            <FormHelperText className="info" component="div">
210
              Mute {channel} notifications for deployment and monitoring issues for all users
211
            </FormHelperText>
212
          </FormControl>
213
        ))}
214

215
      <InputLabel className="margin-top" shrink id="offline-theshold">
216
        Offline threshold
217
      </InputLabel>
218
      <div className={classes.threshold}>
219
        <Select onChange={onChangeOfflineIntervalUnit} value={currentIntervalUnit}>
220
          {offlineThresholds.map(value => (
221
            <MenuItem key={value} value={value}>
6✔
222
              <div className="capitalized-start">{value}</div>
223
            </MenuItem>
224
          ))}
225
        </Select>
226
        <TextField
227
          className={classes.textInput}
228
          type="number"
229
          onChange={onChangeOfflineInterval}
230
          inputProps={{ min: '1', max: '1000' }}
231
          error={!!intervalErrorText}
232
          value={currentInterval}
233
        />
234
      </div>
235
      {!!intervalErrorText && (
2!
236
        <FormHelperText className="warning" component="div">
237
          {intervalErrorText}
238
        </FormHelperText>
239
      )}
240
      <FormHelperText className="info" component="div">
241
        Choose how long a device can go without reporting to the server before it is considered “offline”.
242
      </FormHelperText>
243
    </div>
244
  );
245
};
246

247
export const GlobalSettingsContainer = ({ closeDialog, dialog }) => {
6✔
248
  const dispatch = useDispatch();
2✔
249
  const attributes = useSelector(state => {
2✔
250
    // limit the selection of the available attribute to AVAILABLE_ATTRIBUTE_LIMIT
251
    const attributes = state.devices.filteringAttributes.identityAttributes.slice(0, state.devices.filteringAttributesLimit);
3✔
252
    return attributes.reduce(
3✔
253
      (accu, value) => {
254
        accu.push({ value, label: value, scope: 'identity' });
3✔
255
        return accu;
3✔
256
      },
257
      [
258
        { value: 'name', label: 'Name', scope: 'tags' },
259
        { value: 'id', label: 'Device ID', scope: 'identity' }
260
      ]
261
    );
262
  });
263
  const { hasReporting } = useSelector(getFeatures);
2✔
264
  const { isAdmin } = useSelector(getUserRoles);
2✔
265
  const notificationChannelSettings = useSelector(state => state.monitor.settings.global.channels);
3✔
266
  const offlineThresholdSettings = useSelector(getOfflineThresholdSettings);
2✔
267
  const { attribute: selectedAttribute } = useSelector(getIdAttribute);
2✔
268
  const settings = useSelector(getGlobalSettingsSelector);
2✔
269
  const tenantCapabilities = useSelector(getTenantCapabilities);
2✔
270
  const userCapabilities = useSelector(getUserCapabilities);
2✔
271

272
  const [updatedSettings, setUpdatedSettings] = useState({ ...settings });
2✔
273

274
  useEffect(() => {
2✔
275
    if (!settings) {
1!
276
      dispatch(getGlobalSettings());
×
277
    }
278
    dispatch(getDeviceAttributes());
1✔
279
  }, []);
280

281
  useEffect(() => {
2✔
282
    setUpdatedSettings({ ...updatedSettings, ...settings });
1✔
283
  }, [JSON.stringify(settings)]);
284

285
  const onCloseClick = e => {
2✔
286
    if (dialog) {
×
287
      return closeDialog(e);
×
288
    }
289
  };
290

291
  const saveAttributeSetting = (e, id_attribute) => {
2✔
292
    return dispatch(saveGlobalSettings({ ...updatedSettings, id_attribute }, false, true)).then(() => {
×
293
      if (dialog) {
×
294
        closeDialog(e);
×
295
      }
296
    });
297
  };
298

299
  if (dialog) {
2!
300
    return (
×
301
      <IdAttributeSelection
302
        attributes={attributes}
303
        dialog
304
        onCloseClick={onCloseClick}
305
        onSaveClick={saveAttributeSetting}
306
        selectedAttribute={selectedAttribute}
307
      />
308
    );
309
  }
310
  return (
2✔
311
    <GlobalSettingsDialog
312
      attributes={attributes}
313
      hasReporting={hasReporting}
314
      isAdmin={isAdmin}
315
      notificationChannelSettings={notificationChannelSettings}
316
      offlineThresholdSettings={offlineThresholdSettings}
317
      onChangeNotificationSetting={(...args) => dispatch(changeNotificationSetting(...args))}
×
318
      onCloseClick={onCloseClick}
319
      onSaveClick={saveAttributeSetting}
320
      saveGlobalSettings={(...args) => dispatch(saveGlobalSettings(...args))}
×
321
      settings={settings}
322
      selectedAttribute={selectedAttribute}
323
      tenantCapabilities={tenantCapabilities}
324
      userCapabilities={userCapabilities}
325
    />
326
  );
327
};
328
export default GlobalSettingsContainer;
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2025 Coveralls, Inc