988636826

Committed 01 Sep 2023 04:04AM UTC coverage: 82.384% (-17.6%) from 99.964%

Build # 988636826

Build Type

Pull #3969

gitlab-ci

Committed by

web-flow

Commit Message

chore: Bump autoprefixer from 10.4.14 to 10.4.15

Bumps [autoprefixer](https://github.com/postcss/autoprefixer) from 10.4.14 to 10.4.15.
- [Release notes](https://github.com/postcss/autoprefixer/releases)
- [Changelog](https://github.com/postcss/autoprefixer/blob/main/CHANGELOG.md)
- [Commits](https://github.com/postcss/autoprefixer/compare/10.4.14...10.4.15)

---
updated-dependencies:
- dependency-name: autoprefixer
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

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

Pull Request Pull Request #3969: chore: Bump autoprefixer from 10.4.14 to 10.4.15

Run Details

4346 of 6321 branches covered (0.0%)

8259 of 10025 relevant lines covered (82.38%)

192.73 hits per line

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

82.76

/src/js/components/settings/artifactgeneration.js

// Copyright 2022 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, { useEffect, useMemo, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';

// material ui
import { InfoOutlined as InfoOutlinedIcon } from '@mui/icons-material';
import { Checkbox, FormControlLabel, TextField, Typography, formControlLabelClasses, textFieldClasses } from '@mui/material';
import { makeStyles } from 'tss-react/mui';

import DeltaIcon from '../../../assets/img/deltaicon.svg';
import { getDeploymentsConfig, saveDeltaDeploymentsConfig } from '../../actions/deploymentActions';
import { BENEFITS, TIMEOUTS } from '../../constants/appConstants';
import { useDebounce } from '../../utils/debouncehook';
import EnterpriseNotification from '../common/enterpriseNotification';
import InfoText from '../common/infotext';

const useStyles = makeStyles()(theme => ({
  deviceLimitBar: { backgroundColor: theme.palette.grey[500], margin: '15px 0' },
  wrapper: {
    backgroundColor: theme.palette.background.lightgrey,
    display: 'flex',
    flexDirection: 'column',
    marginTop: theme.spacing(6),
    padding: theme.spacing(2),
    paddingTop: 0,
    '&>h5': { marginTop: 0, marginBottom: 0 },
    '.flexbox>span': { alignSelf: 'flex-end' },
    [`.${textFieldClasses.root}`]: { maxWidth: 200, minWidth: 100 },
    [`.${formControlLabelClasses.root}`]: { marginTop: theme.spacing() }
  }
}));

const numberFields = {
  compressionLevel: { key: 'compressionLevel', title: 'Compression level' },
  sourceWindow: { key: 'sourceWindow', title: 'Source window size' },
  inputWindow: { key: 'inputWindow', title: 'Input window size' },
  duplicatesWindow: { key: 'duplicatesWindow', title: 'Compression duplicates window' },
  instructionBuffer: { key: 'instructionBuffer', title: 'Instruction buffer size' }
};

const NumberInputLimited = ({ limit, onChange, value: propsValue, ...remainder }) => {
  const [value, setValue] = useState(propsValue);
  const debouncedValue = useDebounce(value, TIMEOUTS.oneSecond);
  const { default: defaultValue, max, min } = limit;

  useEffect(() => {
    const minimum = Math.max(min, debouncedValue);
    const allowedValue = Math.min(max ?? minimum, minimum);
    if (allowedValue !== debouncedValue) {
      setValue(allowedValue);
      return;
    }
    onChange(allowedValue);
  }, [debouncedValue, max, min, onChange]);

  return (
    <TextField
      inputProps={{ step: 1, type: 'numeric', pattern: '[0-9]*', autoComplete: 'off' }}
      InputLabelProps={{ shrink: true }}
      error={min || max ? min > value || value > max : false}
      value={value}
      onChange={({ target: { value } }) => setValue(Number(value) || 0)}
      helperText={defaultValue !== undefined ? `Defaults to: ${defaultValue}` : null}
      {...remainder}
    />
  );
};

export const ArtifactGenerationSettings = () => {
  const { binaryDelta: deltaConfig = {}, binaryDeltaLimits: deltaLimits = {}, hasDelta: deltaEnabled } = useSelector(state => state.deployments.config) ?? {};
  const dispatch = useDispatch();
  const [timeoutValue, setTimeoutValue] = useState(deltaConfig.timeout);
  const [disableChecksum, setDisableChecksum] = useState(deltaConfig.disableChecksum);
  const [disableDecompression, setDisableDecompression] = useState(deltaConfig.disableChecksum);
  const [compressionLevel, setCompressionLevel] = useState(deltaConfig.compressionLevel);
  const [sourceWindow, setSourceWindow] = useState(deltaConfig.sourceWindow);
  const [inputWindow, setInputWindow] = useState(deltaConfig.inputWindow);
  const [duplicatesWindow, setDuplicatesWindow] = useState(deltaConfig.duplicatesWindow);
  const [instructionBuffer, setInstructionBuffer] = useState(deltaConfig.instructionBuffer);
  const timer = useRef(null);
  const isInitialized = useRef(false);

  const { classes } = useStyles();

  useEffect(() => {
    if (deltaConfig.timeout === -1) {
      return;
    }
    const { timeout, duplicatesWindow, compressionLevel, disableChecksum, disableDecompression, inputWindow, instructionBuffer, sourceWindow } = deltaConfig;
    setDisableChecksum(disableChecksum);
    setDisableDecompression(disableDecompression);
    setCompressionLevel(compressionLevel);
    setTimeoutValue(timeout);
    setSourceWindow(sourceWindow);
    setInputWindow(inputWindow);
    setDuplicatesWindow(duplicatesWindow);
    setInstructionBuffer(instructionBuffer);
    setTimeout(() => (isInitialized.current = true), TIMEOUTS.debounceShort);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [JSON.stringify(deltaConfig), JSON.stringify(deltaLimits)]);

  useEffect(() => {
    dispatch(getDeploymentsConfig());
  }, [dispatch]);

  useEffect(() => {
    if (!isInitialized.current) {
      return;
    }
    clearTimeout(timer.current);
    timer.current = setTimeout(
      () =>
        dispatch(
          saveDeltaDeploymentsConfig({
            timeout: timeoutValue,
            duplicatesWindow,
            compressionLevel,
            disableChecksum,
            disableDecompression,
            inputWindow,
            instructionBuffer,
            sourceWindow
          })
        ),
      TIMEOUTS.twoSeconds
    );
    return () => {
      clearTimeout(timer.current);
    };
  }, [compressionLevel, disableChecksum, disableDecompression, dispatch, duplicatesWindow, inputWindow, instructionBuffer, sourceWindow, timeoutValue]);

  const numberInputs = useMemo(() => {
    return [
      { ...numberFields.compressionLevel, setter: setCompressionLevel, value: compressionLevel, ...deltaLimits.compressionLevel },
      { ...numberFields.sourceWindow, setter: setSourceWindow, value: sourceWindow, ...deltaLimits.sourceWindow },
      { ...numberFields.inputWindow, setter: setInputWindow, value: inputWindow, ...deltaLimits.inputWindow },
      { ...numberFields.duplicatesWindow, setter: setDuplicatesWindow, value: duplicatesWindow, ...deltaLimits.duplicatesWindow },
      { ...numberFields.instructionBuffer, setter: setInstructionBuffer, value: instructionBuffer, ...deltaLimits.instructionBuffer }
    ];
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [
    compressionLevel,
    setCompressionLevel,
    setSourceWindow,
    sourceWindow,
    inputWindow,
    setInputWindow,
    setDuplicatesWindow,
    duplicatesWindow,
    setInstructionBuffer,
    instructionBuffer,
    // eslint-disable-next-line react-hooks/exhaustive-deps
    JSON.stringify(deltaLimits)
  ]);

  return (
    <div className={`flexbox column ${classes.wrapper}`}>
      <div className="flexbox center-aligned">
        <DeltaIcon />
        <h5 className="margin-left-small">Delta artifacts generation configuration</h5>
        <EnterpriseNotification className="margin-left-small" id={BENEFITS.deltaGeneration.id} />
      </div>
      {deltaEnabled && isInitialized ? (
        <div className="margin-small margin-top-none">
          <div className="flexbox">
            <NumberInputLimited
              limit={{ default: deltaLimits.timeout.default, min: deltaLimits.timeout.min, max: deltaLimits.timeout.max }}
              label="Timeout"
              onChange={setTimeoutValue}
              value={timeoutValue}
            />
            <span className="margin-left-small muted slightly-smaller">seconds</span>
          </div>
          <Typography className="margin-top-small" display="block" variant="caption">
            xDelta3 arguments
          </Typography>
          <div className="flexbox column margin-left">
            <FormControlLabel
              control={<Checkbox color="primary" checked={disableChecksum} onChange={({ target: { checked } }) => setDisableChecksum(checked)} size="small" />}
              label="Disable checksum"
            />
            <FormControlLabel
              control={
                <Checkbox
                  color="primary"
                  checked={disableDecompression}
                  onChange={({ target: { checked } }) => setDisableDecompression(checked)}
                  size="small"
                />
              }
              label="Disable external decompression"
            />
            {numberInputs.map(({ default: defaultValue, key, setter, title, value, min = 0, max }) => (
              <NumberInputLimited key={key} limit={{ default: defaultValue, max, min }} label={title} value={value} onChange={setter} />
            ))}
          </div>
        </div>
      ) : (
        <InfoText>
          <InfoOutlinedIcon style={{ fontSize: '14px', margin: '0 4px 4px 0', verticalAlign: 'middle' }} />
          Automatic delta artifacts generation is not enabled in your account. If you want to start using this feature,{' '}
          <a href="mailto:contact@mender.io" target="_blank" rel="noopener noreferrer">
            contact our team
          </a>
          .
        </InfoText>
      )}
    </div>
  );
};

export default ArtifactGenerationSettings;

1	// Copyright 2022 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, useMemo, useRef, useState } from 'react';
15	import { useDispatch, useSelector } from 'react-redux';
16
17	// material ui
18	import { InfoOutlined as InfoOutlinedIcon } from '@mui/icons-material';
19	import { Checkbox, FormControlLabel, TextField, Typography, formControlLabelClasses, textFieldClasses } from '@mui/material';
20	import { makeStyles } from 'tss-react/mui';
21
22	import DeltaIcon from '../../../assets/img/deltaicon.svg';
23	import { getDeploymentsConfig, saveDeltaDeploymentsConfig } from '../../actions/deploymentActions';
24	import { BENEFITS, TIMEOUTS } from '../../constants/appConstants';
25	import { useDebounce } from '../../utils/debouncehook';
26	import EnterpriseNotification from '../common/enterpriseNotification';
27	import InfoText from '../common/infotext';
28
29	const useStyles = makeStyles()(theme => ({	6✔
30	deviceLimitBar: { backgroundColor: theme.palette.grey[500], margin: '15px 0' },
31	wrapper: {
32	backgroundColor: theme.palette.background.lightgrey,
33	display: 'flex',
34	flexDirection: 'column',
35	marginTop: theme.spacing(6),
36	padding: theme.spacing(2),
37	paddingTop: 0,
38	'&>h5': { marginTop: 0, marginBottom: 0 },
39	'.flexbox>span': { alignSelf: 'flex-end' },
40	[`.${textFieldClasses.root}`]: { maxWidth: 200, minWidth: 100 },
41	[`.${formControlLabelClasses.root}`]: { marginTop: theme.spacing() }
42	}
43	}));
44
45	const numberFields = {	6✔
46	compressionLevel: { key: 'compressionLevel', title: 'Compression level' },
47	sourceWindow: { key: 'sourceWindow', title: 'Source window size' },
48	inputWindow: { key: 'inputWindow', title: 'Input window size' },
49	duplicatesWindow: { key: 'duplicatesWindow', title: 'Compression duplicates window' },
50	instructionBuffer: { key: 'instructionBuffer', title: 'Instruction buffer size' }
51	};
52
53	const NumberInputLimited = ({ limit, onChange, value: propsValue, ...remainder }) => {	6✔
54	const [value, setValue] = useState(propsValue);	12✔
55	const debouncedValue = useDebounce(value, TIMEOUTS.oneSecond);	12✔
56	const { default: defaultValue, max, min } = limit;	12✔
57
58	useEffect(() => {	12✔
59	const minimum = Math.max(min, debouncedValue);	6✔
60	const allowedValue = Math.min(max ?? minimum, minimum);	6✔
61	if (allowedValue !== debouncedValue) {	6!
62	setValue(allowedValue);	6✔
63	return;	6✔
64	}
65	onChange(allowedValue);	×
66	}, [debouncedValue, max, min, onChange]);
67
68	return (	12✔
69	<TextField
70	inputProps={{ step: 1, type: 'numeric', pattern: '[0-9]*', autoComplete: 'off' }}
71	InputLabelProps={{ shrink: true }}
72	error={min \|\| max ? min > value \|\| value > max : false}	41✔
73	value={value}
74	onChange={({ target: { value } }) => setValue(Number(value) \|\| 0)}	×
75	helperText={defaultValue !== undefined ? `Defaults to: ${defaultValue}` : null}	12✔
76	{...remainder}
77	/>
78	);
79	};
80
81	export const ArtifactGenerationSettings = () => {	6✔
82	const { binaryDelta: deltaConfig = {}, binaryDeltaLimits: deltaLimits = {}, hasDelta: deltaEnabled } = useSelector(state => state.deployments.config) ?? {};	3!
83	const dispatch = useDispatch();	2✔
84	const [timeoutValue, setTimeoutValue] = useState(deltaConfig.timeout);	2✔
85	const [disableChecksum, setDisableChecksum] = useState(deltaConfig.disableChecksum);	2✔
86	const [disableDecompression, setDisableDecompression] = useState(deltaConfig.disableChecksum);	2✔
87	const [compressionLevel, setCompressionLevel] = useState(deltaConfig.compressionLevel);	2✔
88	const [sourceWindow, setSourceWindow] = useState(deltaConfig.sourceWindow);	2✔
89	const [inputWindow, setInputWindow] = useState(deltaConfig.inputWindow);	2✔
90	const [duplicatesWindow, setDuplicatesWindow] = useState(deltaConfig.duplicatesWindow);	2✔
91	const [instructionBuffer, setInstructionBuffer] = useState(deltaConfig.instructionBuffer);	2✔
92	const timer = useRef(null);	2✔
93	const isInitialized = useRef(false);	2✔
94
95	const { classes } = useStyles();	2✔
96
97	useEffect(() => {	2✔
98	if (deltaConfig.timeout === -1) {	1!
99	return;	×
100	}
101	const { timeout, duplicatesWindow, compressionLevel, disableChecksum, disableDecompression, inputWindow, instructionBuffer, sourceWindow } = deltaConfig;	1✔
102	setDisableChecksum(disableChecksum);	1✔
103	setDisableDecompression(disableDecompression);	1✔
104	setCompressionLevel(compressionLevel);	1✔
105	setTimeoutValue(timeout);	1✔
106	setSourceWindow(sourceWindow);	1✔
107	setInputWindow(inputWindow);	1✔
108	setDuplicatesWindow(duplicatesWindow);	1✔
109	setInstructionBuffer(instructionBuffer);	1✔
110	setTimeout(() => (isInitialized.current = true), TIMEOUTS.debounceShort);	1✔
111	// eslint-disable-next-line react-hooks/exhaustive-deps
112	}, [JSON.stringify(deltaConfig), JSON.stringify(deltaLimits)]);
113
114	useEffect(() => {	2✔
115	dispatch(getDeploymentsConfig());	1✔
116	}, [dispatch]);
117
118	useEffect(() => {	2✔
119	if (!isInitialized.current) {	1!
120	return;	1✔
121	}
122	clearTimeout(timer.current);	×
123	timer.current = setTimeout(	×
124	() =>
125	dispatch(	×
126	saveDeltaDeploymentsConfig({
127	timeout: timeoutValue,
128	duplicatesWindow,
129	compressionLevel,
130	disableChecksum,
131	disableDecompression,
132	inputWindow,
133	instructionBuffer,
134	sourceWindow
135	})
136	),
137	TIMEOUTS.twoSeconds
138	);
139	return () => {	×
140	clearTimeout(timer.current);	×
141	};
142	}, [compressionLevel, disableChecksum, disableDecompression, dispatch, duplicatesWindow, inputWindow, instructionBuffer, sourceWindow, timeoutValue]);
143
144	const numberInputs = useMemo(() => {	2✔
145	return [	1✔
146	{ ...numberFields.compressionLevel, setter: setCompressionLevel, value: compressionLevel, ...deltaLimits.compressionLevel },
147	{ ...numberFields.sourceWindow, setter: setSourceWindow, value: sourceWindow, ...deltaLimits.sourceWindow },
148	{ ...numberFields.inputWindow, setter: setInputWindow, value: inputWindow, ...deltaLimits.inputWindow },
149	{ ...numberFields.duplicatesWindow, setter: setDuplicatesWindow, value: duplicatesWindow, ...deltaLimits.duplicatesWindow },
150	{ ...numberFields.instructionBuffer, setter: setInstructionBuffer, value: instructionBuffer, ...deltaLimits.instructionBuffer }
151	];
152	// eslint-disable-next-line react-hooks/exhaustive-deps
153	}, [
154	compressionLevel,
155	setCompressionLevel,
156	setSourceWindow,
157	sourceWindow,
158	inputWindow,
159	setInputWindow,
160	setDuplicatesWindow,
161	duplicatesWindow,
162	setInstructionBuffer,
163	instructionBuffer,
164	// eslint-disable-next-line react-hooks/exhaustive-deps
165	JSON.stringify(deltaLimits)
166	]);
167
168	return (	2✔
169	<div className={`flexbox column ${classes.wrapper}`}>
170	<div className="flexbox center-aligned">
171	<DeltaIcon />
172	<h5 className="margin-left-small">Delta artifacts generation configuration</h5>
173	<EnterpriseNotification className="margin-left-small" id={BENEFITS.deltaGeneration.id} />
174	</div>
175	{deltaEnabled && isInitialized ? (	6!
176	<div className="margin-small margin-top-none">
177	<div className="flexbox">
178	<NumberInputLimited
179	limit={{ default: deltaLimits.timeout.default, min: deltaLimits.timeout.min, max: deltaLimits.timeout.max }}
180	label="Timeout"
181	onChange={setTimeoutValue}
182	value={timeoutValue}
183	/>
184	<span className="margin-left-small muted slightly-smaller">seconds</span>
185	</div>
186	<Typography className="margin-top-small" display="block" variant="caption">
187	xDelta3 arguments
188	</Typography>
189	<div className="flexbox column margin-left">
190	<FormControlLabel
191	control={<Checkbox color="primary" checked={disableChecksum} onChange={({ target: { checked } }) => setDisableChecksum(checked)} size="small" />}	×
192	label="Disable checksum"
193	/>
194	<FormControlLabel
195	control={
196	<Checkbox
197	color="primary"
198	checked={disableDecompression}
199	onChange={({ target: { checked } }) => setDisableDecompression(checked)}	×
200	size="small"
201	/>
202	}
203	label="Disable external decompression"
204	/>
205	{numberInputs.map(({ default: defaultValue, key, setter, title, value, min = 0, max }) => (	2✔
206	<NumberInputLimited key={key} limit={{ default: defaultValue, max, min }} label={title} value={value} onChange={setter} />	10✔
207	))}
208	</div>
209	</div>
210	) : (
211	<InfoText>
212	<InfoOutlinedIcon style={{ fontSize: '14px', margin: '0 4px 4px 0', verticalAlign: 'middle' }} />
213	Automatic delta artifacts generation is not enabled in your account. If you want to start using this feature,{' '}
214	<a href="mailto:contact@mender.io" target="_blank" rel="noopener noreferrer">
215	contact our team
216	</a>
217	.
218	</InfoText>
219	)}
220	</div>
221	);
222	};
223
224	export default ArtifactGenerationSettings;

mendersoftware / gui / 988636826

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