1113439055

Committed 19 Dec 2023 09:01PM UTC coverage: 82.752% (-17.2%) from 99.964%

Build # 1113439055

Build Type

Pull #4258

gitlab-ci

Committed by

mender-test-bot

Commit Message

chore: Types update

Signed-off-by: Mender Test Bot <mender@northern.tech>

Pull Request Pull Request #4258: chore: Types update

Run Details

4326 of 6319 branches covered (0.0%)

8348 of 10088 relevant lines covered (82.75%)

189.39 hits per line

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

84.31

/src/js/components/common/forms/form.js

// Copyright 2016 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 } from 'react';
import { FormProvider, useForm } from 'react-hook-form';

import { Button } from '@mui/material';

import validator from 'validator';

const getErrorMsg = (validateMethod, args) => {
  switch (validateMethod) {
    case 'isLength':
      if (args[0] === 1) {
        return 'This field is required';
      } else if (args[0] > 1) {
        return `Must be at least ${args[0]} characters long`;
      }
      break;
    case 'isAlpha':
      return 'This field must contain only letters';
    case 'isAlphanumeric':
      return 'This field must contain only letters or numbers';
    case 'isNumeric':
      return 'Please enter a valid code';
    case 'isEmail':
      return 'Please enter a valid email address';
    case 'isNot':
      if (args[0] === args[1]) {
        return `This field should have a value other than ${args[0]}`;
      }
      break;
    default:
      return 'There is an error with this field';
  }
};

const tryApplyValidations = (value, validations, initialValidationResult) =>
  validations.split(',').reduce((accu, validation) => {
    if (!accu.isValid || !validation) {
      return accu;
    }
    var args = validation.split(':');
    var validateMethod = args.shift();
    // We use JSON.parse to convert the string values passed to the
    // correct type. Ex. 'isLength:1' will make '1' actually a number
    args = args.map(arg => JSON.parse(JSON.stringify(arg)));

    var tmpArgs = args;
    // We then merge two arrays, ending up with the value
    // to pass first, then options, if any. ['valueFromInput', 5]
    args = [value].concat(args);
    try {
      // So the next line of code is actually:
      // validator.isLength('valueFromInput', 5)
      if (!validator[validateMethod].apply(validator, args)) {
        return { errortext: getErrorMsg(validateMethod, tmpArgs), isValid: false };
      }
    } catch {
      const errortext = getErrorMsg(validateMethod, args) || '';
      return { errortext, isValid: !errortext };
    }
    return accu;
  }, initialValidationResult);

const runPasswordValidations = ({ required, value, validations, isValid, errortext }) => {
  if (required && !value) {
    return { isValid: false, errortext: 'Password is required' };
  } else if (required || value) {
    isValid = tryApplyValidations(value, validations, { isValid, errortext }).isValid;
    return { isValid, errortext: !isValid ? 'Password too weak' : errortext };
  }
  return { isValid, errortext };
};

export const runValidations = ({ required, value, id, validations }) => {
  let isValid = true;
  let errortext = '';
  if (id && id.includes('password')) {
    return runPasswordValidations({ required, value, validations, isValid, errortext });
  } else {
    if (value || required) {
      return tryApplyValidations(validations.includes('trim') ? value.trim() : value, validations, { isValid, errortext });
    }
  }
  return { isValid, errortext };
};

export const Form = ({
  autocomplete,
  buttonColor,
  children,
  className = '',
  defaultValues = {},
  handleCancel,
  id,
  initialValues = {},
  onSubmit,
  showButtons,
  submitLabel
}) => {
  const methods = useForm({ mode: 'onChange', defaultValues });
  const {
    handleSubmit,
    formState: { isValid },
    setValue
  } = methods;

  useEffect(() => {
    Object.entries(initialValues).map(([key, value]) => setValue(key, value));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [JSON.stringify(initialValues), setValue]);

  return (
    <FormProvider {...methods}>
      <form autoComplete={autocomplete} className={className} id={id} noValidate onSubmit={handleSubmit(onSubmit)}>
        {children}
        {!!showButtons && (
          <div className="flexbox" style={{ justifyContent: 'flex-end', height: 'min-content', marginTop: 32 }}>
            {!!handleCancel && (
              <Button key="cancel" onClick={handleCancel} style={{ marginRight: 10, display: 'inline-block' }}>
                Cancel
              </Button>
            )}
            <Button variant="contained" type="submit" disabled={!isValid} color={buttonColor}>
              {submitLabel}
            </Button>
          </div>
        )}
      </form>
    </FormProvider>
  );
};

export default Form;

1	// Copyright 2016 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 } from 'react';
15	import { FormProvider, useForm } from 'react-hook-form';
16
17	import { Button } from '@mui/material';
18
19	import validator from 'validator';
20
21	const getErrorMsg = (validateMethod, args) => {	17✔
22	switch (validateMethod) {	247!
23	case 'isLength':
24	if (args[0] === 1) {	53!
25	return 'This field is required';	×
26	} else if (args[0] > 1) {	53!
27	return `Must be at least ${args[0]} characters long`;	53✔
28	}
29	break;	×
30	case 'isAlpha':
31	return 'This field must contain only letters';	×
32	case 'isAlphanumeric':
33	return 'This field must contain only letters or numbers';	×
34	case 'isNumeric':
35	return 'Please enter a valid code';	×
36	case 'isEmail':
37	return 'Please enter a valid email address';	162✔
38	case 'isNot':
39	if (args[0] === args[1]) {	32!
40	return `This field should have a value other than ${args[0]}`;	×
41	}
42	break;	32✔
43	default:
44	return 'There is an error with this field';	×
45	}
46	};
47
48	const tryApplyValidations = (value, validations, initialValidationResult) =>	17✔
49	validations.split(',').reduce((accu, validation) => {	634✔
50	if (!accu.isValid \|\| !validation) {	1,315✔
51	return accu;	334✔
52	}
53	var args = validation.split(':');	981✔
54	var validateMethod = args.shift();	981✔
55	// We use JSON.parse to convert the string values passed to the
56	// correct type. Ex. 'isLength:1' will make '1' actually a number
57	args = args.map(arg => JSON.parse(JSON.stringify(arg)));	981✔
58
59	var tmpArgs = args;	981✔
60	// We then merge two arrays, ending up with the value
61	// to pass first, then options, if any. ['valueFromInput', 5]
62	args = [value].concat(args);	981✔
63	try {	981✔
64	// So the next line of code is actually:
65	// validator.isLength('valueFromInput', 5)
66	if (!validator[validateMethod].apply(validator, args)) {	981✔
67	return { errortext: getErrorMsg(validateMethod, tmpArgs), isValid: false };	215✔
68	}
69	} catch {
70	const errortext = getErrorMsg(validateMethod, args) \|\| '';	32✔
71	return { errortext, isValid: !errortext };	32✔
72	}
73	return accu;	734✔
74	}, initialValidationResult);
75
76	const runPasswordValidations = ({ required, value, validations, isValid, errortext }) => {	17✔
77	if (required && !value) {	308!
78	return { isValid: false, errortext: 'Password is required' };	×
79	} else if (required \|\| value) {	308✔
80	isValid = tryApplyValidations(value, validations, { isValid, errortext }).isValid;	298✔
81	return { isValid, errortext: !isValid ? 'Password too weak' : errortext };	298✔
82	}
83	return { isValid, errortext };	10✔
84	};
85
86	export const runValidations = ({ required, value, id, validations }) => {	17✔
87	let isValid = true;	716✔
88	let errortext = '';	716✔
89	if (id && id.includes('password')) {	716✔
90	return runPasswordValidations({ required, value, validations, isValid, errortext });	308✔
91	} else {
92	if (value \|\| required) {	408✔
93	return tryApplyValidations(validations.includes('trim') ? value.trim() : value, validations, { isValid, errortext });	336✔
94	}
95	}
96	return { isValid, errortext };	72✔
97	};
98
99	export const Form = ({	17✔
100	autocomplete,
101	buttonColor,
102	children,
103	className = '',	354✔
104	defaultValues = {},	707✔
105	handleCancel,
106	id,
107	initialValues = {},	729✔
108	onSubmit,
109	showButtons,
110	submitLabel
111	}) => {
112	const methods = useForm({ mode: 'onChange', defaultValues });	824✔
113	const {
114	handleSubmit,
115	formState: { isValid },
116	setValue
117	} = methods;	824✔
118
119	useEffect(() => {	824✔
120	Object.entries(initialValues).map(([key, value]) => setValue(key, value));	27✔
121	// eslint-disable-next-line react-hooks/exhaustive-deps
122	}, [JSON.stringify(initialValues), setValue]);
123
124	return (	824✔
125	<FormProvider {...methods}>
126	<form autoComplete={autocomplete} className={className} id={id} noValidate onSubmit={handleSubmit(onSubmit)}>
127	{children}
128	{!!showButtons && (	1,566✔
129	<div className="flexbox" style={{ justifyContent: 'flex-end', height: 'min-content', marginTop: 32 }}>
130	{!!handleCancel && (	806✔
131	<Button key="cancel" onClick={handleCancel} style={{ marginRight: 10, display: 'inline-block' }}>
132	Cancel
133	</Button>
134	)}
135	<Button variant="contained" type="submit" disabled={!isValid} color={buttonColor}>
136	{submitLabel}
137	</Button>
138	</div>
139	)}
140	</form>
141	</FormProvider>
142	);
143	};
144
145	export default Form;

mendersoftware / gui / 1113439055

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