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

95.83

/src/js/components/common/forms/filters.js

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

import { makeStyles } from 'tss-react/mui';

import { TIMEOUTS } from '../../../constants/appConstants';
import { useDebounce } from '../../../utils/debouncehook';

const useStyles = makeStyles()(theme => ({
  filters: {
    backgroundColor: theme.palette.background.lightgrey,
    columnGap: theme.spacing(2),
    display: 'flex',
    flexWrap: 'wrap',
    padding: `10px ${theme.spacing(3)} ${theme.spacing(3)}`,
    rowGap: theme.spacing(2),
    '.filter-item': {
      display: 'grid'
    },
    '.filter-item > div': {
      alignSelf: 'end'
    }
  },
  filterReset: { right: theme.spacing(3) }
}));

export const Filters = ({ className = '', defaultValues, filters = [], initialValues, onChange, fieldResetTrigger = '', dirtyField, clearDirty }) => {
  const { classes } = useStyles();
  const [values, setValues] = useState(initialValues);

  const methods = useForm({ mode: 'onChange', defaultValues });
  const { formState, reset, resetField, watch, setValue, getValues } = methods;
  const { isDirty } = formState;

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

  useEffect(() => {
    if (dirtyField && !formState.isDirty) {
      setValue(dirtyField, getValues(dirtyField), { shouldDirty: true });
      clearDirty('');
    }
  }, [clearDirty, dirtyField, formState, getValues, setValue]);

  useEffect(() => {
    if (!fieldResetTrigger) {
      return;
    }
    resetField(fieldResetTrigger);
  }, [fieldResetTrigger, resetField]);

  watch(setValues);
  const debouncedValues = useDebounce(values, TIMEOUTS.oneSecond);

  useEffect(() => {
    onChange(debouncedValues);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [JSON.stringify(debouncedValues), onChange]);

  return (
    <FormProvider {...methods}>
      <form className={`margin-bottom relative margin-top ${classes.filters} ${className}`} noValidate>
        {filters.map(({ key, title, Component, componentProps }) => (
          <div className="filter-item" key={key}>
            <h5 className="margin-top-small margin-bottom-none muted">{title}</h5>
            <Component name={key} {...componentProps} />
          </div>
        ))}
        {isDirty && (
          <span className={`link absolute ${classes.filterReset}`} onClick={() => reset()}>
            Clear filter
          </span>
        )}
      </form>
    </FormProvider>
  );
};

export default Filters;

1	// Copyright 2023 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, useState } from 'react';
15	import { FormProvider, useForm } from 'react-hook-form';
16
17	import { makeStyles } from 'tss-react/mui';
18
19	import { TIMEOUTS } from '../../../constants/appConstants';
20	import { useDebounce } from '../../../utils/debouncehook';
21
22	const useStyles = makeStyles()(theme => ({	10✔
23	filters: {
24	backgroundColor: theme.palette.background.lightgrey,
25	columnGap: theme.spacing(2),
26	display: 'flex',
27	flexWrap: 'wrap',
28	padding: `10px ${theme.spacing(3)} ${theme.spacing(3)}`,
29	rowGap: theme.spacing(2),
30	'.filter-item': {
31	display: 'grid'
32	},
33	'.filter-item > div': {
34	alignSelf: 'end'
35	}
36	},
37	filterReset: { right: theme.spacing(3) }
38	}));
39
40	export const Filters = ({ className = '', defaultValues, filters = [], initialValues, onChange, fieldResetTrigger = '', dirtyField, clearDirty }) => {	8!
41	const { classes } = useStyles();	137✔
42	const [values, setValues] = useState(initialValues);	137✔
43
44	const methods = useForm({ mode: 'onChange', defaultValues });	137✔
45	const { formState, reset, resetField, watch, setValue, getValues } = methods;	137✔
46	const { isDirty } = formState;	137✔
47
48	useEffect(() => {	137✔
49	Object.entries(initialValues).map(([key, value]) => setValue(key, value));	63✔
50	// eslint-disable-next-line react-hooks/exhaustive-deps
51	}, [JSON.stringify(initialValues), setValue]);
52
53	useEffect(() => {	137✔
54	if (dirtyField && !formState.isDirty) {	137✔
55	setValue(dirtyField, getValues(dirtyField), { shouldDirty: true });	1✔
56	clearDirty('');	1✔
57	}
58	}, [clearDirty, dirtyField, formState, getValues, setValue]);
59
60	useEffect(() => {	137✔
61	if (!fieldResetTrigger) {	10!
62	return;	10✔
63	}
64	resetField(fieldResetTrigger);	×
65	}, [fieldResetTrigger, resetField]);
66
67	watch(setValues);	137✔
68	const debouncedValues = useDebounce(values, TIMEOUTS.oneSecond);	137✔
69
70	useEffect(() => {	137✔
71	onChange(debouncedValues);	14✔
72	// eslint-disable-next-line react-hooks/exhaustive-deps
73	}, [JSON.stringify(debouncedValues), onChange]);
74
75	return (	137✔
76	<FormProvider {...methods}>
77	<form className={`margin-bottom relative margin-top ${classes.filters} ${className}`} noValidate>
78	{filters.map(({ key, title, Component, componentProps }) => (
79	<div className="filter-item" key={key}>	432✔
80	<h5 className="margin-top-small margin-bottom-none muted">{title}</h5>
81	<Component name={key} {...componentProps} />
82	</div>
83	))}
84	{isDirty && (	146✔
85	<span className={`link absolute ${classes.filterReset}`} onClick={() => reset()}>	2✔
86	Clear filter
87	</span>
88	)}
89	</form>
90	</FormProvider>
91	);
92	};
93
94	export default Filters;

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