diff --git a/packages/web/src/components/FlowSubstep/FilterConditions/index.jsx b/packages/web/src/components/FlowSubstep/FilterConditions/index.jsx index 88e19b96..9104e750 100644 --- a/packages/web/src/components/FlowSubstep/FilterConditions/index.jsx +++ b/packages/web/src/components/FlowSubstep/FilterConditions/index.jsx @@ -1,3 +1,4 @@ +import PropTypes from 'prop-types'; import * as React from 'react'; import { v4 as uuidv4 } from 'uuid'; import { useFormContext, useWatch } from 'react-hook-form'; @@ -11,15 +12,18 @@ import AddIcon from '@mui/icons-material/Add'; import useFormatMessage from 'hooks/useFormatMessage'; import InputCreator from 'components/InputCreator'; import { EditorContext } from 'contexts/Editor'; + const createGroupItem = () => ({ key: '', operator: operators[0].value, value: '', id: uuidv4(), }); + const createGroup = () => ({ and: [createGroupItem()], }); + const operators = [ { label: 'Equal', @@ -54,6 +58,7 @@ const operators = [ value: 'not_contains', }, ]; + const createStringArgument = (argumentOptions) => { return { ...argumentOptions, @@ -62,6 +67,7 @@ const createStringArgument = (argumentOptions) => { variables: true, }; }; + const createDropdownArgument = (argumentOptions) => { return { ...argumentOptions, @@ -69,28 +75,35 @@ const createDropdownArgument = (argumentOptions) => { type: 'dropdown', }; }; + function FilterConditions(props) { const { stepId } = props; const formatMessage = useFormatMessage(); const { control, setValue, getValues } = useFormContext(); const groups = useWatch({ control, name: 'parameters.or' }); const editorContext = React.useContext(EditorContext); + React.useEffect(function addInitialGroupWhenEmpty() { const groups = getValues('parameters.or'); + if (!groups) { setValue('parameters.or', [createGroup()]); } }, []); + const appendGroup = React.useCallback(() => { const values = getValues('parameters.or'); setValue('parameters.or', values.concat(createGroup())); }, []); + const appendGroupItem = React.useCallback((index) => { const group = getValues(`parameters.or.${index}.and`); setValue(`parameters.or.${index}.and`, group.concat(createGroupItem())); }, []); + const removeGroupItem = React.useCallback((groupIndex, groupItemIndex) => { const group = getValues(`parameters.or.${groupIndex}.and`); + if (group.length === 1) { const groups = getValues('parameters.or'); setValue( @@ -104,6 +117,7 @@ function FilterConditions(props) { ); } }, []); + return ( @@ -219,4 +233,9 @@ function FilterConditions(props) { ); } + +FilterConditions.propTypes = { + stepId: PropTypes.string.isRequired, +}; + export default FilterConditions; diff --git a/packages/web/src/components/FlowSubstep/index.jsx b/packages/web/src/components/FlowSubstep/index.jsx index 50e6225b..55bb5cd6 100644 --- a/packages/web/src/components/FlowSubstep/index.jsx +++ b/packages/web/src/components/FlowSubstep/index.jsx @@ -1,3 +1,4 @@ +import PropTypes from 'prop-types'; import * as React from 'react'; import { useFormContext } from 'react-hook-form'; import Collapse from '@mui/material/Collapse'; @@ -8,6 +9,8 @@ import { EditorContext } from 'contexts/Editor'; import FlowSubstepTitle from 'components/FlowSubstepTitle'; import InputCreator from 'components/InputCreator'; import FilterConditions from './FilterConditions'; +import { StepPropType, SubstepPropType } from 'propTypes/propTypes'; + function FlowSubstep(props) { const { substep, @@ -22,6 +25,7 @@ function FlowSubstep(props) { const formContext = useFormContext(); const validationStatus = formContext.formState.isValid; const onToggle = expanded ? onCollapse : onExpand; + return ( ); } + +FlowSubstep.propTypes = { + substep: SubstepPropType.isRequired, + expanded: PropTypes.bool, + onExpand: PropTypes.func.isRequired, + onCollapse: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, + step: StepPropType.isRequired, +}; + export default FlowSubstep; diff --git a/packages/web/src/components/FlowSubstepTitle/index.jsx b/packages/web/src/components/FlowSubstepTitle/index.jsx index 08459085..406c17bf 100644 --- a/packages/web/src/components/FlowSubstepTitle/index.jsx +++ b/packages/web/src/components/FlowSubstepTitle/index.jsx @@ -1,15 +1,20 @@ +import PropTypes from 'prop-types'; import * as React from 'react'; import ExpandLessIcon from '@mui/icons-material/ExpandLess'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ErrorIcon from '@mui/icons-material/Error'; import CheckCircleIcon from '@mui/icons-material/CheckCircle'; import { ListItemButton, Typography } from './style'; + const validIcon = ; + const errorIcon = ; + function FlowSubstepTitle(props) { const { expanded = false, onClick = () => null, valid = null, title } = props; const hasValidation = valid !== null; const validationStatusIcon = valid ? validIcon : errorIcon; + return ( @@ -21,4 +26,12 @@ function FlowSubstepTitle(props) { ); } + +FlowSubstepTitle.propTypes = { + expanded: PropTypes.bool, + onClick: PropTypes.func.isRequired, + valid: PropTypes.bool, + title: PropTypes.string.isRequired, +}; + export default FlowSubstepTitle; diff --git a/packages/web/src/components/ForgotPasswordForm/index.ee.jsx b/packages/web/src/components/ForgotPasswordForm/index.ee.jsx index 6f6a4d78..92a7205d 100644 --- a/packages/web/src/components/ForgotPasswordForm/index.ee.jsx +++ b/packages/web/src/components/ForgotPasswordForm/index.ee.jsx @@ -7,9 +7,11 @@ import { FORGOT_PASSWORD } from 'graphql/mutations/forgot-password.ee'; import Form from 'components/Form'; import TextField from 'components/TextField'; import useFormatMessage from 'hooks/useFormatMessage'; + export default function ForgotPasswordForm() { const formatMessage = useFormatMessage(); const [forgotPassword, { data, loading }] = useMutation(FORGOT_PASSWORD); + const handleSubmit = async (values) => { await forgotPassword({ variables: { @@ -17,6 +19,7 @@ export default function ForgotPasswordForm() { }, }); }; + return (