Merge pull request #10279 from mabashian/8852-checkbox-list-item

Fixes bug where users were unable to click on text next to checkboxes/radios in modals

SUMMARY
link #8852
This should impact lists in modals where the user can select one or more of the rows.  They should now be able to click on the text/row in order to select.  Examples:

ISSUE TYPE

Bugfix Pull Request

COMPONENT NAME

UI

Reviewed-by: Kersom <None>
Reviewed-by: Tiago Góes <tiago.goes2009@gmail.com>

awx/ui_next/src/components/AddRole/SelectResourceStep.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { withRouter, useLocation } from 'react-router-dom';
 import { t } from '@lingui/macro';
 import useRequest from '../../util/useRequest';
-
 import { SearchColumns, SortColumns } from '../../types';
 import DataListToolbar from '../DataListToolbar';
 import CheckboxListItem from '../CheckboxListItem';

awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx

@@ -4,7 +4,6 @@ import { t } from '@lingui/macro';
 import { Td, Tr } from '@patternfly/react-table';
 
 const CheckboxListItem = ({
-  isDisabled = false,
   isRadio = false,
   isSelected = false,
   itemId,
@@ -16,15 +15,26 @@ const CheckboxListItem = ({
   columns,
   item,
 }) => {
+  const handleRowClick = () => {
+    if (isSelected && !isRadio) {
+      onDeselect(itemId);
+    } else {
+      onSelect(itemId);
+    }
+  };
+
   return (
-    <Tr ouiaId={`list-item-${itemId}`} id={`list-item-${itemId}`}>
+    <Tr
+      ouiaId={`list-item-${itemId}`}
+      id={`list-item-${itemId}`}
+      onClick={handleRowClick}
+    >
       <Td
         id={`check-action-item-${itemId}`}
         select={{
           rowIndex,
           isSelected,
           onSelect: isSelected ? onDeselect : onSelect,
-          disable: isDisabled,
           variant: isRadio ? 'radio' : 'checkbox',
         }}
         name={name}

awx/ui_next/src/components/OptionsList/OptionsList.jsx

@@ -9,7 +9,6 @@ import {
   oneOfType,
 } from 'prop-types';
 import styled from 'styled-components';
-
 import { t } from '@lingui/macro';
 import SelectedList from '../SelectedList';
 import CheckboxListItem from '../CheckboxListItem';
@@ -41,7 +40,6 @@ function OptionsList({
   deselectItem,
   renderItemChip,
   isLoading,
-
   displayKey,
 }) {
   return (