Refactor kebab modal tracking logic in delete/cancel buttons

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

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
@@ -51,12 +51,6 @@ function DataListToolbar({
     setKebabIsOpen(false);
   };
 
-  useEffect(() => {
-    if (!kebabModalIsOpen) {
-      setKebabIsOpen(false);
-    }
-  }, [kebabModalIsOpen]);
-
   return (
     <Toolbar
       id={`${qsConfig.namespace}-list-toolbar`}
@@ -98,7 +92,7 @@ function DataListToolbar({
         </ToolbarToggleGroup>
         {showExpandCollapse && (
           <ToolbarGroup>
-            <Fragment>
+            <>
               <ToolbarItem>
                 <ExpandCollapse
                   isCompact={isCompact}
@@ -106,7 +100,7 @@ function DataListToolbar({
                   onExpand={onExpand}
                 />
               </ToolbarItem>
-            </Fragment>
+            </>
           </ToolbarGroup>
         )}
         {advancedSearchShown && (
@@ -114,7 +108,12 @@ function DataListToolbar({
             <KebabifiedProvider
               value={{
                 isKebabified: true,
-                onKebabModalChange: isOpen => setKebabModalIsOpen(isOpen),
+                onKebabModalChange: isOpen => {
+                  if (kebabIsOpen && kebabModalIsOpen && !isOpen) {
+                    setKebabIsOpen(false);
+                  }
+                  setKebabModalIsOpen(isOpen);
+                },
               }}
             >
               <Dropdown
@@ -127,7 +126,7 @@ function DataListToolbar({
                     }}
                   />
                 }
-                isOpen={kebabIsOpen}
+                isOpen={kebabIsOpen || kebabModalIsOpen}
                 isPlain
                 dropdownItems={additionalControls}
               />

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

@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { arrayOf, func } from 'prop-types';
 import { Button, DropdownItem, Tooltip } from '@patternfly/react-core';
-import { Kebabified } from '../../contexts/Kebabified';
+import { KebabifiedContext } from '../../contexts/Kebabified';
 import AlertModal from '../AlertModal';
 import { Job } from '../../types';
 
@@ -12,13 +12,21 @@ function cannotCancel(job) {
 }
 
 function JobListCancelButton({ i18n, jobsToCancel, onCancel }) {
+  const { isKebabified, onKebabModalChange } = useContext(KebabifiedContext);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const numJobsToCancel = jobsToCancel.length;
   const zeroOrOneJobSelected = numJobsToCancel < 2;
 
-  const handleCancel = () => {
+  const handleCancelJob = () => {
     onCancel();
-    setIsModalOpen(false);
+    toggleModal();
+  };
+
+  const toggleModal = () => {
+    if (isKebabified) {
+      onKebabModalChange(!isModalOpen);
+    }
+    setIsModalOpen(!isModalOpen);
   };
 
   const renderTooltip = () => {
@@ -61,18 +69,13 @@ function JobListCancelButton({ i18n, jobsToCancel, onCancel }) {
   );
 
   return (
-    <Kebabified>
-      {({ isKebabified, onKebabModalChange }) => (
     <>
       {isKebabified ? (
         <DropdownItem
           key="cancel-job"
           isDisabled={isDisabled}
           component="button"
-              onClick={() => {
+          onClick={toggleModal}
-                onKebabModalChange(true);
-                setIsModalOpen(true);
-              }}
         >
           {cancelJobText}
         </DropdownItem>
@@ -82,7 +85,7 @@ function JobListCancelButton({ i18n, jobsToCancel, onCancel }) {
             <Button
               variant="secondary"
               aria-label={cancelJobText}
-                  onClick={() => setIsModalOpen(true)}
+              onClick={toggleModal}
               isDisabled={isDisabled}
             >
               {cancelJobText}
@@ -95,24 +98,14 @@ function JobListCancelButton({ i18n, jobsToCancel, onCancel }) {
           variant="danger"
           title={cancelJobText}
           isOpen={isModalOpen}
-              onClose={() => {
+          onClose={toggleModal}
-                if (isKebabified) {
-                  onKebabModalChange(false);
-                }
-                setIsModalOpen(false);
-              }}
           actions={[
             <Button
               id="cancel-job-confirm-button"
               key="delete"
               variant="danger"
               aria-label={cancelJobText}
-                  onClick={() => {
+              onClick={handleCancelJob}
-                    if (isKebabified) {
-                      onKebabModalChange(false);
-                    }
-                    handleCancel();
-                  }}
             >
               {cancelJobText}
             </Button>,
@@ -121,12 +114,7 @@ function JobListCancelButton({ i18n, jobsToCancel, onCancel }) {
               key="cancel"
               variant="secondary"
               aria-label={i18n._(t`Return`)}
-                  onClick={() => {
+              onClick={toggleModal}
-                    if (isKebabified) {
-                      onKebabModalChange(false);
-                    }
-                    setIsModalOpen(false);
-                  }}
             >
               {i18n._(t`Return`)}
             </Button>,
@@ -149,8 +137,6 @@ function JobListCancelButton({ i18n, jobsToCancel, onCancel }) {
         </AlertModal>
       )}
     </>
-      )}
-    </Kebabified>
   );
 }
 

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

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { useContext, useState } from 'react';
 import {
   func,
   bool,
@@ -12,7 +12,7 @@ import { Button, DropdownItem, Tooltip } from '@patternfly/react-core';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import AlertModal from '../AlertModal';
-import { Kebabified } from '../../contexts/Kebabified';
+import { KebabifiedContext } from '../../contexts/Kebabified';
 
 const requireNameOrUsername = props => {
   const { name, username } = props;
@@ -59,53 +59,29 @@ function cannotDelete(item) {
   return !item.summary_fields.user_capabilities.delete;
 }
 
-class ToolbarDeleteButton extends React.Component {
+function ToolbarDeleteButton({
-  static propTypes = {
-    onDelete: func.isRequired,
-    itemsToDelete: arrayOf(ItemToDelete).isRequired,
-    pluralizedItemName: string,
-    errorMessage: string,
-  };
-
-  static defaultProps = {
-    pluralizedItemName: 'Items',
-    errorMessage: '',
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      isModalOpen: false,
-    };
-
-    this.handleConfirmDelete = this.handleConfirmDelete.bind(this);
-    this.handleCancelDelete = this.handleCancelDelete.bind(this);
-    this.handleDelete = this.handleDelete.bind(this);
-  }
-
-  handleConfirmDelete() {
-    this.setState({ isModalOpen: true });
-  }
-
-  handleCancelDelete() {
-    this.setState({ isModalOpen: false });
-  }
-
-  handleDelete() {
-    const { onDelete } = this.props;
-    onDelete();
-    this.setState({ isModalOpen: false });
-  }
-
-  renderTooltip() {
-    const {
   itemsToDelete,
   pluralizedItemName,
   errorMessage,
+  onDelete,
   i18n,
-    } = this.props;
+}) {
+  const { isKebabified, onKebabModalChange } = useContext(KebabifiedContext);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
+  const handleDelete = () => {
+    onDelete();
+    toggleModal();
+  };
+
+  const toggleModal = () => {
+    if (isKebabified) {
+      onKebabModalChange(!isModalOpen);
+    }
+    setIsModalOpen(!isModalOpen);
+  };
+
+  const renderTooltip = () => {
     const itemsUnableToDelete = itemsToDelete
       .filter(cannotDelete)
       .map(item => item.name)
@@ -125,11 +101,8 @@ class ToolbarDeleteButton extends React.Component {
       return i18n._(t`Delete`);
     }
     return i18n._(t`Select a row to delete`);
-  }
+  };
 
-  render() {
-    const { itemsToDelete, pluralizedItemName, i18n } = this.props;
-    const { isModalOpen } = this.state;
   const modalTitle = i18n._(t`Delete ${pluralizedItemName}?`);
 
   const isDisabled =
@@ -139,28 +112,23 @@ class ToolbarDeleteButton extends React.Component {
   // we can delete the extra <div> around the <DeleteButton> below.
   // See: https://github.com/patternfly/patternfly-react/issues/1894
   return (
-      <Kebabified>
+    <>
-        {({ isKebabified, onKebabModalChange }) => (
-          <Fragment>
       {isKebabified ? (
         <DropdownItem
           key="add"
           isDisabled={isDisabled}
           component="button"
-                onClick={() => {
+          onClick={toggleModal}
-                  onKebabModalChange(true);
-                  this.handleConfirmDelete();
-                }}
         >
           {i18n._(t`Delete`)}
         </DropdownItem>
       ) : (
-              <Tooltip content={this.renderTooltip()} position="top">
+        <Tooltip content={renderTooltip()} position="top">
           <div>
             <Button
               variant="secondary"
               aria-label={i18n._(t`Delete`)}
-                    onClick={this.handleConfirmDelete}
+              onClick={toggleModal}
               isDisabled={isDisabled}
             >
               {i18n._(t`Delete`)}
@@ -173,23 +141,13 @@ class ToolbarDeleteButton extends React.Component {
           variant="danger"
           title={modalTitle}
           isOpen={isModalOpen}
-                onClose={() => {
+          onClose={toggleModal}
-                  if (isKebabified) {
-                    onKebabModalChange(false);
-                  }
-                  this.handleCancelDelete();
-                }}
           actions={[
             <Button
               key="delete"
               variant="danger"
               aria-label={i18n._(t`confirm delete`)}
-                    onClick={() => {
+              onClick={handleDelete}
-                      if (isKebabified) {
-                        onKebabModalChange(false);
-                      }
-                      this.handleDelete();
-                    }}
             >
               {i18n._(t`Delete`)}
             </Button>,
@@ -197,12 +155,7 @@ class ToolbarDeleteButton extends React.Component {
               key="cancel"
               variant="secondary"
               aria-label={i18n._(t`cancel delete`)}
-                    onClick={() => {
+              onClick={toggleModal}
-                      if (isKebabified) {
-                        onKebabModalChange(false);
-                      }
-                      this.handleCancelDelete();
-                    }}
             >
               {i18n._(t`Cancel`)}
             </Button>,
@@ -217,11 +170,20 @@ class ToolbarDeleteButton extends React.Component {
           ))}
         </AlertModal>
       )}
-          </Fragment>
+    </>
-        )}
-      </Kebabified>
   );
 }
-}
+
+ToolbarDeleteButton.propTypes = {
+  onDelete: func.isRequired,
+  itemsToDelete: arrayOf(ItemToDelete).isRequired,
+  pluralizedItemName: string,
+  errorMessage: string,
+};
+
+ToolbarDeleteButton.defaultProps = {
+  pluralizedItemName: 'Items',
+  errorMessage: '',
+};
 
 export default withI18n()(ToolbarDeleteButton);