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

awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx

@@ -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
+            <KebabifiedProvider
-              toggle={<KebabToggle onToggle={setKebabIsOpen} />}
+              value={{
-              isOpen={kebabIsOpen}
+                isKebabified: true,
-              isPlain
+                onKebabModalChange: isOpen => setKebabkebabModalIsOpen(isOpen),
-              dropdownItems={additionalControls.map(control => {
+              }}
-                return (
+            >
-                  <KebabifiedProvider value={{ isKebabified: true }}>
+              <Dropdown
-                    {control}
+                toggle={
-                  </KebabifiedProvider>
+                  <KebabToggle
-                );
+                    onToggle={isOpen => {
-              })}
+                      if (!kebabModalIsOpen) {
-            />
+                        setKebabIsOpen(isOpen);
+                      }
+                    }}
+                  />
+                }
+                isOpen={kebabIsOpen}
+                isPlain
+                dropdownItems={additionalControls}
+              />
+            </KebabifiedProvider>
           </ToolbarItem>
         )}
         {!advancedSearchShown && (

awx/ui_next/src/components/JobList/JobList.jsx

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

awx/ui_next/src/components/JobList/JobListCancelButton.jsx

@@ -62,14 +62,17 @@ function JobListCancelButton({ i18n, jobsToCancel, onCancel }) {
 
   return (
     <Kebabified>
-      {({ isKebabified }) => (
+      {({ isKebabified, onKebabModalChange }) => (
         <>
           {isKebabified ? (
             <DropdownItem
               key="cancel-job"
               isDisabled={isDisabled}
-              component="Button"
+              component="button"
-              onClick={() => setIsModalOpen(true)}
+              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>,

awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx

@@ -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"
+                component="button"
-                onClick={this.handleConfirmDelete}
+                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>,