import React, { useState, useEffect } from 'react'; import useDeepCompareEffect from 'use-deep-compare-effect'; import { Redirect } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import { STATUS } from 'foremanReact/constants'; import PropTypes from 'prop-types'; import { translate as __ } from 'foremanReact/common/I18n'; import { Modal, ModalVariant, Form, FormGroup, TextInput, ActionGroup, Button, Radio, TextArea, Split, SplitItem, Select, SelectOption, } from '@patternfly/react-core'; import { addCVFilterRule, createContentViewFilter, getRepositoryTypes } from '../../ContentViewDetailActions'; import { selectCreateContentViewFilter, selectCreateContentViewFilterStatus, selectCreateContentViewFilterError, selectCreateFilterRule, selectCreateFilterRuleError, selectCreateFilterRuleStatus, selectRepoTypes, selectRepoTypesStatus } from '../../../Details/ContentViewDetailSelectors'; import { FILTER_TYPES } from '../../../ContentViewsConstants'; import ContentType from '../ContentType'; const CVFilterAddModal = ({ cvId, onClose }) => { const [inclusion, setInclusion] = useState(true); const [name, setName] = useState(''); const [description, setDescription] = useState(''); const [type, setType] = useState('rpm'); const [saving, setSaving] = useState(false); const [typeSelectOpen, setTypeSelectOpen] = useState(false); const dispatch = useDispatch(); const response = useSelector(state => selectCreateContentViewFilter(state)); const status = useSelector(state => selectCreateContentViewFilterStatus(state)); const error = useSelector(state => selectCreateContentViewFilterError(state)); const ruleResponse = useSelector(state => selectCreateFilterRule(state)); const ruleStatus = useSelector(state => selectCreateFilterRuleStatus(state)); const ruleError = useSelector(state => selectCreateFilterRuleError(state)); const repoTypesResponse = useSelector(state => selectRepoTypes(state)); const repoTypesStatus = useSelector(state => selectRepoTypesStatus(state)); const [redirect, setRedirect] = useState(false); const [repoTypes, setRepoTypes] = useState([]); useEffect(() => { dispatch(getRepositoryTypes()); }, [dispatch]); const onSubmit = () => { setSaving(true); dispatch(createContentViewFilter( cvId, { name, description, inclusion, type, }, )); }; const onSelect = (event, selection) => { setType(selection); setTypeSelectOpen(false); }; useDeepCompareEffect(() => { const { id } = response || {}; if (id && status === STATUS.RESOLVED && saving) { // We need to create an empty rule for Errata by Date type once the Filter is created. if (type === 'erratum_date') { dispatch(addCVFilterRule(id, { types: ['security', 'enhancement', 'bugfix'] })); } else { setSaving(false); setRedirect(true); } } else if (status === STATUS.ERROR) { setSaving(false); } }, [response, status, error, saving, dispatch, type]); useDeepCompareEffect(() => { const { id: filterId } = response || {}; const { id: filterRuleId } = ruleResponse || {}; if (filterId && filterRuleId && status === STATUS.RESOLVED && ruleStatus === STATUS.RESOLVED && saving) { setSaving(false); setRedirect(true); } }, [response, status, ruleResponse, ruleStatus, ruleError, saving]); useDeepCompareEffect(() => { if (repoTypesStatus === STATUS.RESOLVED && repoTypesResponse) { const allRepoTypes = []; repoTypesResponse.forEach((repoType) => { const { name: repoTypeName } = repoType; allRepoTypes.push(repoTypeName); }); setRepoTypes(allRepoTypes); } }, [repoTypesResponse, repoTypesStatus]); const filterTypeOptions = () => { const filterTypeSelectOpions = FILTER_TYPES.map(item => ); if (repoTypes.includes('deb')) { filterTypeSelectOpions.push(); } return filterTypeSelectOpions; }; if (redirect) { const { id } = response; return (); } return (
{ e.preventDefault(); onSubmit(); }} > setName(value)} /> setInclusion(checked)} label={__('Include filter')} id="include_filter" value="includeFilter" style={{ margin: '1px' }} /> setInclusion(!checked)} label={__('Exclude filter')} id="exclude_filter" value="excludeFilter" style={{ margin: '1px' }} />