webpack/components/AnsibleHostDetail/components/RolesTab/EditRolesModal/index.js
import React from 'react';
import { translate as __ } from 'foremanReact/common/I18n';
import PropTypes from 'prop-types';
import { Modal, Button } from '@patternfly/react-core';
import { useQuery } from '@apollo/client';
import EditRolesForm from './EditRolesForm';
import availableAnsibleRoles from '../../../../../graphql/queries/hostAvailableAnsibleRoles.gql';
import { encodeId } from '../../../../../globalIdHelper';
import './EditRolesModal.scss';
const EditRolesModal = ({
assignedRoles,
isOpen,
closeModal,
hostId,
canEditHost,
}) => {
const baseModalProps = {
ouiaId: 'edit-ansible-roles-modal',
width: '50%',
isOpen,
className: 'foreman-modal',
showClose: false,
title: __('Edit Ansible Roles'),
disableFocusTrap: true,
description: __(
'Add, remove or reorder host assigned Ansible roles. This host has also group assigned roles that are not displayed here and will always be executed prior to host assigned roles.'
),
};
const actions = [
<Button
ouiaId="close-button"
variant="link"
onClick={event => closeModal()}
key="close"
>
{__('Close')}
</Button>,
];
const emptyWrapper = child => (
<Modal
ouiaId="empty-edit-modal-ansible-roles"
{...baseModalProps}
actions={actions}
>
{child}
</Modal>
);
const loadingWrapper = child => (
<Modal ouiaId="loading-edit-modal-ansible-roles" {...baseModalProps}>
{child}
</Modal>
);
const variables = {
id: encodeId('Host', hostId),
};
const useFetchFn = () =>
useQuery(availableAnsibleRoles, { variables, fetchPolicy: 'network-only' });
const renameData = data => ({
availableRoles: data.host.availableAnsibleRoles.nodes,
assignedRoles,
});
return (
<EditRolesForm
emptyWrapper={emptyWrapper}
loadingWrapper={loadingWrapper}
actions={actions}
baseModalProps={baseModalProps}
fetchFn={useFetchFn}
renameData={renameData}
renamedDataPath="availableRoles.assignedRoles"
assignedRoles={assignedRoles}
closeModal={closeModal}
hostId={hostId}
allowed={canEditHost}
requiredPermissions={['edit_hosts']}
/>
);
};
EditRolesModal.propTypes = {
assignedRoles: PropTypes.array.isRequired,
isOpen: PropTypes.bool.isRequired,
closeModal: PropTypes.func.isRequired,
hostId: PropTypes.number.isRequired,
canEditHost: PropTypes.bool.isRequired,
};
export default EditRolesModal;