webpack/scenes/AlternateContentSources/Details/EditModals/ACSEditSmartProxies.js
import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import PropTypes from 'prop-types';
import useDeepCompareEffect from 'use-deep-compare-effect';
import { translate as __ } from 'foremanReact/common/I18n';
import { STATUS } from 'foremanReact/constants';
import {
ActionGroup,
Button,
DualListSelector,
Form,
FormGroup,
Modal,
ModalVariant,
Switch,
Flex,
FlexItem,
} from '@patternfly/react-core';
import { editACS, getACSDetails } from '../../ACSActions';
import { selectSmartProxy, selectSmartProxyStatus } from '../../../SmartProxy/SmartProxyContentSelectors';
import { getSmartProxies } from '../../../SmartProxy/SmartProxyContentActions';
import Loading from '../../../../components/Loading';
import { HelpToolTip } from '../../../ContentViews/Create/ContentViewFormComponents';
const ACSEditSmartProxies = ({ onClose, acsId, acsDetails }) => {
const { smart_proxies: smartProxies, use_http_proxies: useHttpProxies } = acsDetails;
const dispatch = useDispatch();
const [acsUseHttpProxies, setAcsUseHttpProxies] = useState(useHttpProxies);
const [saving, setSaving] = useState(false);
const [
acsSmartProxies, setAcsSmartProxies,
] = useState(smartProxies.map(proxy => proxy.name));
const availableSmartProxies = useSelector(selectSmartProxy);
const status = useSelector(selectSmartProxyStatus);
const { results } = availableSmartProxies;
const [availableOptions, setAvailableOptions] =
useState(results?.map(proxy => proxy.name).filter(p => !acsSmartProxies.includes(p)));
const onListChange = (newAvailableOptions, newChosenOptions) => {
setAvailableOptions(newAvailableOptions);
setAcsSmartProxies(newChosenOptions);
};
useDeepCompareEffect(() => {
if (results && status === STATUS.RESOLVED) {
setAvailableOptions(results?.map(proxy =>
proxy.name).filter(p => !acsSmartProxies.includes(p)));
}
}, [results, status, setAvailableOptions, acsSmartProxies]);
useEffect(
() => {
dispatch(getSmartProxies());
},
[dispatch],
);
const onSubmit = () => {
setSaving(true);
dispatch(editACS(
acsId,
{ acsId, smart_proxy_names: acsSmartProxies, use_http_proxies: acsUseHttpProxies },
() => {
dispatch(getACSDetails(acsId));
onClose();
},
() => {
setSaving(false);
},
));
};
if (status === STATUS.PENDING) {
return <Loading />;
}
return (
<Modal
title={__('Edit smart proxies')}
variant={ModalVariant.medium}
isOpen
onClose={onClose}
appendTo={document.body}
ouiaId="acs-edit-smart-proxies-modal"
>
<Form onSubmit={(e) => {
e.preventDefault();
onSubmit();
}}
>
<DualListSelector
isSearchable
availableOptions={availableOptions}
chosenOptions={acsSmartProxies}
addAll={onListChange}
removeAll={onListChange}
addSelected={onListChange}
removeSelected={onListChange}
id="selector"
/>
<FormGroup
label={
<Flex spaceItems={{ default: 'spaceItemsNone' }}>
<FlexItem>{__('Use HTTP proxies')}</FlexItem>
<FlexItem>
<HelpToolTip tooltip={__('Alternate content sources use the HTTP proxy of their assigned smart proxy for communication.')} />
</FlexItem>
</Flex>
}
fieldId="use_http_proxies"
>
<Switch
id="use-http-proxies-switch"
aria-label="use-http-proxies-switch"
ouiaId="use-http-proxies-switch"
isChecked={acsUseHttpProxies}
onChange={checked => setAcsUseHttpProxies(checked)}
/>
</FormGroup>
<ActionGroup>
<Button
ouiaId="edit-acs-smart-proxies-submit"
aria-label="edit-acs-smart-proxies"
variant="primary"
isDisabled={saving}
isLoading={saving}
type="submit"
>
{__('Edit')}
</Button>
<Button
ouiaId="edit-acs-smart-proxies-cancel"
aria-label="edit-acs-smart-proxies-cancel"
variant="link"
onClick={onClose}
>
{__('Cancel')}
</Button>
</ActionGroup>
</Form>
</Modal>
);
};
ACSEditSmartProxies.propTypes = {
acsId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
onClose: PropTypes.func.isRequired,
acsDetails: PropTypes.shape({
smart_proxies: PropTypes.arrayOf(PropTypes.shape({})),
use_http_proxies: PropTypes.bool,
}),
};
ACSEditSmartProxies.defaultProps = {
acsDetails: { smart_proxies: [], id: undefined, use_http_proxies: false },
};
export default ACSEditSmartProxies;