ouiaId to AddDropDownButton ToolbarAddButton TemplateList InventoryList

add testability to DataListToolbar.jsx

add testability to AssociateModal.jsx HostGroupsList.jsx

fix lint

add ouiaId to InventoryGroupHostList.jsx

add ouiaId to ExecutionEnvironmentList.jsx

add ouiaId to InstanceGroupList.jsx

add ouiaId to InstanceGroupDetails.jsx

add ouiaId to ScheduleList.jsx and ContainerGroupDetails.jsx
This commit is contained in:
Tiago
2021-04-29 18:16:46 -03:00
parent 1d6579e110
commit d428a540a0
14 changed files with 31 additions and 2 deletions
@@ -5,7 +5,7 @@ import { Dropdown, DropdownPosition } from '@patternfly/react-core';
import { ToolbarAddButton } from '../PaginatedDataList'; import { ToolbarAddButton } from '../PaginatedDataList';
import { useKebabifiedMenu } from '../../contexts/Kebabified'; import { useKebabifiedMenu } from '../../contexts/Kebabified';
function AddDropDownButton({ dropdownItems }) { function AddDropDownButton({ dropdownItems, ouiaId }) {
const { isKebabified } = useKebabifiedMenu(); const { isKebabified } = useKebabifiedMenu();
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const element = useRef(null); const element = useRef(null);
@@ -35,6 +35,7 @@ function AddDropDownButton({ dropdownItems }) {
position={DropdownPosition.right} position={DropdownPosition.right}
toggle={ toggle={
<ToolbarAddButton <ToolbarAddButton
ouiaId={ouiaId}
aria-label={t`Add`} aria-label={t`Add`}
showToggleIndicator showToggleIndicator
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
@@ -25,6 +25,7 @@ function AssociateModal({
optionsRequest, optionsRequest,
isModalOpen = false, isModalOpen = false,
displayKey = 'name', displayKey = 'name',
ouiaId,
}) { }) {
const history = useHistory(); const history = useHistory();
const { selected, handleSelect } = useSelected([]); const { selected, handleSelect } = useSelected([]);
@@ -93,6 +94,7 @@ function AssociateModal({
return ( return (
<Fragment> <Fragment>
<Modal <Modal
ouiaId={ouiaId}
variant="large" variant="large"
title={title} title={title}
aria-label={t`Association modal`} aria-label={t`Association modal`}
@@ -123,6 +123,7 @@ function DataListToolbar({
<Dropdown <Dropdown
toggle={ toggle={
<KebabToggle <KebabToggle
data-cy="actions-kebab-toogle"
onToggle={isOpen => { onToggle={isOpen => {
if (!isKebabModalOpen) { if (!isKebabModalOpen) {
setIsKebabOpen(isOpen); setIsKebabOpen(isOpen);
@@ -14,6 +14,7 @@ function ToolbarAddButton({
isDisabled, isDisabled,
defaultLabel = t`Add`, defaultLabel = t`Add`,
showToggleIndicator, showToggleIndicator,
ouiaId,
}) { }) {
const { isKebabified } = useKebabifiedMenu(); const { isKebabified } = useKebabifiedMenu();
@@ -26,6 +27,7 @@ function ToolbarAddButton({
if (isKebabified) { if (isKebabified) {
return ( return (
<DropdownItem <DropdownItem
ouiaId={ouiaId}
key="add" key="add"
isDisabled={isDisabled} isDisabled={isDisabled}
component={linkTo ? Link : 'button'} component={linkTo ? Link : 'button'}
@@ -40,6 +42,7 @@ function ToolbarAddButton({
return ( return (
<Tooltip content={defaultLabel} position="top"> <Tooltip content={defaultLabel} position="top">
<Button <Button
ouiaId={ouiaId}
isDisabled={isDisabled} isDisabled={isDisabled}
component={Link} component={Link}
to={linkTo} to={linkTo}
@@ -53,6 +56,7 @@ function ToolbarAddButton({
} }
return ( return (
<Button <Button
ouiaId={ouiaId}
icon={showToggleIndicator ? <CaretDownIcon /> : null} icon={showToggleIndicator ? <CaretDownIcon /> : null}
iconPosition={showToggleIndicator ? 'right' : null} iconPosition={showToggleIndicator ? 'right' : null}
variant="primary" variant="primary"
@@ -166,6 +166,7 @@ function ResourceAccessList({ apiModel, resource }) {
resource?.summary_fields?.user_capabilities?.edit resource?.summary_fields?.user_capabilities?.edit
? [ ? [
<ToolbarAddButton <ToolbarAddButton
ouiaId="access-add-button"
key="add" key="add"
onClick={() => setShowAddModal(true)} onClick={() => setShowAddModal(true)}
/>, />,
@@ -215,12 +215,14 @@ function ScheduleList({
...(canAdd ...(canAdd
? [ ? [
<ToolbarAddButton <ToolbarAddButton
ouiaId="add-schedule-button"
key="add" key="add"
linkTo={`${location.pathname}/add`} linkTo={`${location.pathname}/add`}
/>, />,
] ]
: []), : []),
<ToolbarDeleteButton <ToolbarDeleteButton
ouiaId="delete-schedule-button"
key="delete" key="delete"
onDelete={handleDelete} onDelete={handleDelete}
itemsToDelete={selected} itemsToDelete={selected}
@@ -143,6 +143,7 @@ function TemplateList({ defaultParams }) {
if (canAddJT) { if (canAddJT) {
addDropDownButton.push( addDropDownButton.push(
<DropdownItem <DropdownItem
ouiaId="add-job-template-item"
key={addTemplate} key={addTemplate}
component={Link} component={Link}
to="/templates/job_template/add/" to="/templates/job_template/add/"
@@ -155,6 +156,7 @@ function TemplateList({ defaultParams }) {
if (canAddWFJT) { if (canAddWFJT) {
addDropDownButton.push( addDropDownButton.push(
<DropdownItem <DropdownItem
ouiaId="add-workflow-job-template-item"
component={Link} component={Link}
to="/templates/workflow_job_template/add/" to="/templates/workflow_job_template/add/"
key={addWFTemplate} key={addWFTemplate}
@@ -165,7 +167,11 @@ function TemplateList({ defaultParams }) {
); );
} }
const addButton = ( const addButton = (
<AddDropDownButton key="add" dropdownItems={addDropDownButton} /> <AddDropDownButton
ouiaId="add-template-button"
key="add"
dropdownItems={addDropDownButton}
/>
); );
const deleteDetailsRequests = relatedResourceDeleteRequests.template( const deleteDetailsRequests = relatedResourceDeleteRequests.template(
@@ -172,6 +172,7 @@ function ExecutionEnvironmentList() {
...(canAdd ...(canAdd
? [ ? [
<ToolbarAddButton <ToolbarAddButton
ouiaId="add-execution-environment"
key="add" key="add"
linkTo={`${match.url}/add`} linkTo={`${match.url}/add`}
/>, />,
@@ -199,6 +199,7 @@ function HostGroupsList({ host }) {
...(canAdd ...(canAdd
? [ ? [
<ToolbarAddButton <ToolbarAddButton
ouiaId="host-groups-add-button"
key="add" key="add"
onClick={() => setIsModalOpen(true)} onClick={() => setIsModalOpen(true)}
/>, />,
@@ -227,6 +228,7 @@ function HostGroupsList({ host }) {
/> />
{isModalOpen && ( {isModalOpen && (
<AssociateModal <AssociateModal
ouiaId="associate-modal"
header={t`Groups`} header={t`Groups`}
fetchRequest={fetchGroupsToAssociate} fetchRequest={fetchGroupsToAssociate}
optionsRequest={fetchGroupsOptions} optionsRequest={fetchGroupsOptions}
@@ -100,6 +100,7 @@ function ContainerGroupDetails({ instanceGroup }) {
{instanceGroup.summary_fields.user_capabilities && {instanceGroup.summary_fields.user_capabilities &&
instanceGroup.summary_fields.user_capabilities.delete && ( instanceGroup.summary_fields.user_capabilities.delete && (
<DeleteButton <DeleteButton
ouiaId="container-group-detail-delete-button"
name={name} name={name}
modalTitle={t`Delete instance group`} modalTitle={t`Delete instance group`}
onConfirm={deleteInstanceGroup} onConfirm={deleteInstanceGroup}
@@ -114,6 +114,7 @@ function InstanceGroupDetails({ instanceGroup }) {
instanceGroup.summary_fields.user_capabilities && instanceGroup.summary_fields.user_capabilities &&
instanceGroup.summary_fields.user_capabilities.delete && ( instanceGroup.summary_fields.user_capabilities.delete && (
<DeleteButton <DeleteButton
ouiaId="instance-group-detail-delete-button"
name={name} name={name}
modalTitle={t`Delete instance group`} modalTitle={t`Delete instance group`}
onConfirm={deleteInstanceGroup} onConfirm={deleteInstanceGroup}
@@ -157,9 +157,11 @@ function InstanceGroupList() {
const addButton = ( const addButton = (
<AddDropDownButton <AddDropDownButton
ouiaId="add-instance-group-button"
key="add" key="add"
dropdownItems={[ dropdownItems={[
<DropdownItem <DropdownItem
ouiaId="add-container-group-item"
to="/instance_groups/container_group/add" to="/instance_groups/container_group/add"
component={Link} component={Link}
key={addContainerGroup} key={addContainerGroup}
@@ -168,6 +170,7 @@ function InstanceGroupList() {
{addContainerGroup} {addContainerGroup}
</DropdownItem>, </DropdownItem>,
<DropdownItem <DropdownItem
ouiaId="add-instance-group-item"
to="/instance_groups/add" to="/instance_groups/add"
component={Link} component={Link}
key={addInstanceGroup} key={addInstanceGroup}
@@ -149,6 +149,7 @@ function InventoryGroupHostList() {
const addButton = ( const addButton = (
<AddDropDownButton <AddDropDownButton
ouiaId="add-hosts-button"
key="add" key="add"
dropdownItems={[ dropdownItems={[
<DropdownItem <DropdownItem
@@ -135,9 +135,11 @@ function InventoryList() {
const addSmartInventory = t`Add smart inventory`; const addSmartInventory = t`Add smart inventory`;
const addButton = ( const addButton = (
<AddDropDownButton <AddDropDownButton
ouiaId="add-inventory-button"
key="add" key="add"
dropdownItems={[ dropdownItems={[
<DropdownItem <DropdownItem
ouiaId="add-inventory-item"
to={`${match.url}/inventory/add/`} to={`${match.url}/inventory/add/`}
component={Link} component={Link}
key={addInventory} key={addInventory}
@@ -146,6 +148,7 @@ function InventoryList() {
{addInventory} {addInventory}
</DropdownItem>, </DropdownItem>,
<DropdownItem <DropdownItem
ouiaId="add-smart-inventory-item"
to={`${match.url}/smart_inventory/add/`} to={`${match.url}/smart_inventory/add/`}
component={Link} component={Link}
key={addSmartInventory} key={addSmartInventory}