External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-14 11:20:39 -03:30
Code Issues Packages Projects Releases Wiki Activity

Fix bug where delete/cancel buttons in kebab would not actually make delete/cancel requests

Browse Source
This commit is contained in:
mabashian 2020-09-09 16:38:15 -04:00
parent 225f57fefd
commit 2b60759edc
4 changed files with 78 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
View File

@ -1,4 +1,4 @@
import React, { Fragment, useState } from 'react';
import React, { Fragment, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
@ -43,6 +43,7 @@ function DataListToolbar({
}) {
const showExpandCollapse = onCompact && onExpand;
const [kebabIsOpen, setKebabIsOpen] = useState(false);
const [kebabModalIsOpen, setKebabkebabModalIsOpen] = useState(false);
const [advancedSearchShown, setAdvancedSearchShown] = useState(false);
const onShowAdvancedSearch = shown => {
@ -50,6 +51,12 @@ function DataListToolbar({
setKebabIsOpen(false);
};
useEffect(() => {
if (!kebabModalIsOpen) {
setKebabIsOpen(false);
}
}, [kebabModalIsOpen]);
return (
<Toolbar
id={`${qsConfig.namespace}-list-toolbar`}
@ -104,18 +111,27 @@ function DataListToolbar({
)}
{advancedSearchShown && (
<ToolbarItem>
<Dropdown
toggle={<KebabToggle onToggle={setKebabIsOpen} />}
isOpen={kebabIsOpen}
isPlain
dropdownItems={additionalControls.map(control => {
return (
<KebabifiedProvider value={{ isKebabified: true }}>
{control}
</KebabifiedProvider>
);
})}
/>
<KebabifiedProvider
value={{
isKebabified: true,
onKebabModalChange: isOpen => setKebabkebabModalIsOpen(isOpen),
}}
>
<Dropdown
toggle={
<KebabToggle
onToggle={isOpen => {
if (!kebabModalIsOpen) {
setKebabIsOpen(isOpen);
}
}}
/>
}
isOpen={kebabIsOpen}
isPlain
dropdownItems={additionalControls}
/>
</KebabifiedProvider>
</ToolbarItem>
)}
{!advancedSearchShown && (

1
awx/ui_next/src/components/JobList/JobList.jsx
View File

@ -276,6 +276,7 @@ function JobList({ i18n, defaultParams, showTypeColumn = false }) {
pluralizedItemName="Jobs"
/>,
<JobListCancelButton
key="cancel"
onCancel={handleJobCancel}
jobsToCancel={selected}
/>,

30
awx/ui_next/src/components/JobList/JobListCancelButton.jsx
View File

@ -62,14 +62,17 @@ function JobListCancelButton({ i18n, jobsToCancel, onCancel }) {
return (
<Kebabified>
{({ isKebabified }) => (
{({ isKebabified, onKebabModalChange }) => (
<>
{isKebabified ? (
<DropdownItem
key="cancel-job"
isDisabled={isDisabled}
component="Button"
onClick={() => setIsModalOpen(true)}
component="button"
onClick={() => {
onKebabModalChange(true);
setIsModalOpen(true);
}}
>
{cancelJobText}
</DropdownItem>
@ -92,14 +95,24 @@ function JobListCancelButton({ i18n, jobsToCancel, onCancel }) {
variant="danger"
title={cancelJobText}
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
onClose={() => {
if (isKebabified) {
onKebabModalChange(false);
}
setIsModalOpen(false);
}}
actions={[
<Button
id="cancel-job-confirm-button"
key="delete"
variant="danger"
aria-label={cancelJobText}
onClick={handleCancel}
onClick={() => {
if (isKebabified) {
onKebabModalChange(false);
}
handleCancel();
}}
>
{cancelJobText}
</Button>,
@ -108,7 +121,12 @@ function JobListCancelButton({ i18n, jobsToCancel, onCancel }) {
key="cancel"
variant="secondary"
aria-label={i18n._(t`Return`)}
onClick={() => setIsModalOpen(false)}
onClick={() => {
if (isKebabified) {
onKebabModalChange(false);
}
setIsModalOpen(false);
}}
>
{i18n._(t`Return`)}
</Button>,

30
awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
View File

@ -140,14 +140,17 @@ class ToolbarDeleteButton extends React.Component {
// See: https://github.com/patternfly/patternfly-react/issues/1894
return (
<Kebabified>
{({ isKebabified }) => (
{({ isKebabified, onKebabModalChange }) => (
<Fragment>
{isKebabified ? (
<DropdownItem
key="add"
isDisabled={isDisabled}
component="Button"
onClick={this.handleConfirmDelete}
component="button"
onClick={() => {
onKebabModalChange(true);
this.handleConfirmDelete();
}}
>
{i18n._(t`Delete`)}
</DropdownItem>
@ -170,13 +173,23 @@ class ToolbarDeleteButton extends React.Component {
variant="danger"
title={modalTitle}
isOpen={isModalOpen}
onClose={this.handleCancelDelete}
onClose={() => {
if (isKebabified) {
onKebabModalChange(false);
}
this.handleCancelDelete();
}}
actions={[
<Button
key="delete"
variant="danger"
aria-label={i18n._(t`confirm delete`)}
onClick={this.handleDelete}
onClick={() => {
if (isKebabified) {
onKebabModalChange(false);
}
this.handleDelete();
}}
>
{i18n._(t`Delete`)}
</Button>,
@ -184,7 +197,12 @@ class ToolbarDeleteButton extends React.Component {
key="cancel"
variant="secondary"
aria-label={i18n._(t`cancel delete`)}
onClick={this.handleCancelDelete}
onClick={() => {
if (isKebabified) {
onKebabModalChange(false);
}
this.handleCancelDelete();
}}
>
{i18n._(t`Cancel`)}
</Button>,