Upgrades pf deps to latest. Adds ability to click on row items in ord…

…er to select them rather than having to click on checkboxes/radio buttons.
stclark-incomm · Jan 2, 2020 · ef3f98a · ef3f98a
1 parent 0bbf5e4
commit ef3f98a
Show file tree

Hide file tree

Showing 35 changed files with 162 additions and 115 deletions.
diff --git a/awx/ui_next/package-lock.json b/awx/ui_next/package-lock.json
diff --git a/awx/ui_next/package.json b/awx/ui_next/package.json
@@ -58,10 +58,10 @@
   },
   "dependencies": {
     "@lingui/react": "^2.7.2",
-    "@patternfly/patternfly": "^2.40.2",
-    "@patternfly/react-core": "^3.120.2",
-    "@patternfly/react-icons": "^3.14.15",
-    "@patternfly/react-tokens": "^2.6.31",
+    "@patternfly/patternfly": "^2.46.1",
+    "@patternfly/react-core": "^3.129.3",
+    "@patternfly/react-icons": "^3.14.28",
+    "@patternfly/react-tokens": "^2.7.14",
     "ansi-to-html": "^0.6.11",
     "axios": "^0.18.1",
     "codemirror": "^5.47.0",

diff --git a/awx/ui_next/src/components/AddRole/SelectResourceStep.jsx b/awx/ui_next/src/components/AddRole/SelectResourceStep.jsx
@@ -100,6 +100,7 @@ class SelectResourceStep extends React.Component {
               itemCount={count}
               qsConfig={this.qsConfig}
               toolbarColumns={columns}
+              onRowClick={onRowClick}
               renderItem={item => (
                 <CheckboxListItem
                   isSelected={selectedResourceRows.some(i => i.id === item.id)}

diff --git a/awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx b/awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx
@@ -21,7 +21,11 @@ const CheckboxListItem = ({
 }) => {
   const CheckboxRadio = isRadio ? DataListRadio : DataListCheck;
   return (
-    <DataListItem key={itemId} aria-labelledby={`check-action-item-${itemId}`}>
+    <DataListItem
+      key={itemId}
+      aria-labelledby={`check-action-item-${itemId}`}
+      id={`${itemId}`}
+    >
       <DataListItemRow>
         <CheckboxRadio
           id={`selected-${itemId}`}

diff --git a/awx/ui_next/src/components/Lookup/shared/OptionsList.jsx b/awx/ui_next/src/components/Lookup/shared/OptionsList.jsx
@@ -51,6 +51,7 @@ function OptionsList({
         qsConfig={qsConfig}
         toolbarColumns={columns}
         hasContentLoading={isLoading}
+        onRowClick={selectItem}
         renderItem={item => (
           <CheckboxListItem
             key={item.id}

diff --git a/awx/ui_next/src/components/MultiSelect/MultiSelect.test.jsx b/awx/ui_next/src/components/MultiSelect/MultiSelect.test.jsx
@@ -35,7 +35,7 @@ describe('<MultiSelect />', () => {
       />
     );
     const component = wrapper.find('MultiSelect');
-    const input = component.find('TextInput');
+    const input = component.find('TextInputBase');
     input.invoke('onChange')('Flabadoo');
     input.simulate('keydown', { key: 'Enter' });
 
@@ -58,7 +58,7 @@ describe('<MultiSelect />', () => {
       />
     );
 
-    const input = wrapper.find('TextInput');
+    const input = wrapper.find('TextInputBase');
     input.simulate('focus');
     wrapper.update();
     const event = {

diff --git a/awx/ui_next/src/components/NotificationList/NotificationListItem.jsx b/awx/ui_next/src/components/NotificationList/NotificationListItem.jsx
@@ -41,6 +41,7 @@ function NotificationListItem(props) {
     <DataListItem
       aria-labelledby={`items-list-item-${notification.id}`}
       key={notification.id}
+      id={`${notification.id}`}
     >
       <DataListItemRow>
         <DataListItemCells

diff --git a/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap b/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap
@@ -24,11 +24,13 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
 >
   <DataListItem
     aria-labelledby="items-list-item-9000"
+    id="9000"
     key="9000"
   >
     <li
       aria-labelledby="items-list-item-9000"
       className="pf-c-data-list__item"
+      id="9000"
     >
       <DataListItemRow
         key=".0"

diff --git a/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx b/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx
@@ -27,8 +27,15 @@ class PaginatedDataList extends React.Component {
     super(props);
     this.handleSetPage = this.handleSetPage.bind(this);
     this.handleSetPageSize = this.handleSetPageSize.bind(this);
+    this.handleListItemSelect = this.handleListItemSelect.bind(this);
   }
 
+  handleListItemSelect = (id = 0) => {
+    const { items, onRowClick } = this.props;
+    const match = items.find(item => item.id === Number(id));
+    onRowClick(match);
+  };
+
   handleSetPage(event, pageNumber) {
     const { history, qsConfig } = this.props;
     const { search } = history.location;
@@ -95,7 +102,12 @@ class PaginatedDataList extends React.Component {
       );
     } else {
       Content = (
-        <DataList aria-label={dataListLabel}>{items.map(renderItem)}</DataList>
+        <DataList
+          aria-label={dataListLabel}
+          onSelectDataListItem={id => this.handleListItemSelect(id)}
+        >
+          {items.map(renderItem)}
+        </DataList>
       );
     }
 
@@ -157,6 +169,7 @@ PaginatedDataList.propTypes = {
   renderToolbar: PropTypes.func,
   hasContentLoading: PropTypes.bool,
   contentError: PropTypes.shape(),
+  onRowClick: PropTypes.func,
 };
 
 PaginatedDataList.defaultProps = {
@@ -167,6 +180,7 @@ PaginatedDataList.defaultProps = {
   showPageSizeOptions: true,
   renderItem: item => <PaginatedDataListItem key={item.id} item={item} />,
   renderToolbar: props => <DataListToolbar {...props} />,
+  onRowClick: () => null,
 };
 
 export { PaginatedDataList as _PaginatedDataList };

diff --git a/awx/ui_next/src/components/PaginatedDataList/PaginatedDataListItem.jsx b/awx/ui_next/src/components/PaginatedDataList/PaginatedDataListItem.jsx
@@ -19,7 +19,11 @@ const DetailWrapper = styled(TextContent)`
 
 export default function PaginatedDataListItem({ item }) {
   return (
-    <DataListItem aria-labelledby={`items-list-item-${item.id}`} key={item.id}>
+    <DataListItem
+      aria-labelledby={`items-list-item-${item.id}`}
+      key={item.id}
+      id={`${item.id}`}
+    >
       <DataListItemRow>
         <DataListItemCells
           dataListCells={[

diff --git a/awx/ui_next/src/components/PaginatedDataList/__snapshots__/ToolbarDeleteButton.test.jsx.snap b/awx/ui_next/src/components/PaginatedDataList/__snapshots__/ToolbarDeleteButton.test.jsx.snap
@@ -39,7 +39,6 @@ exports[`<ToolbarDeleteButton /> should render button 1`] = `
     zIndex={9999}
   >
     <PopoverBase
-      animateFill={false}
       appendTo={[Function]}
       aria="describedby"
       arrow={true}
@@ -80,7 +79,6 @@ exports[`<ToolbarDeleteButton /> should render button 1`] = `
       lazy={true}
       maxWidth="18.75rem"
       onCreate={[Function]}
-      performance={true}
       placement="top"
       popperOptions={
         Object {

diff --git a/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.jsx b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.jsx
@@ -72,7 +72,11 @@ class ResourceAccessListItem extends React.Component {
     const [teamRoles, userRoles] = this.getRoleLists();
 
     return (
-      <DataListItem aria-labelledby="access-list-item" key={accessRecord.id}>
+      <DataListItem
+        aria-labelledby="access-list-item"
+        key={accessRecord.id}
+        id={`${accessRecord.id}`}
+      >
         <DataListItemRow>
           <DataListItemCells
             dataListCells={[

diff --git a/...next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap b/...next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap
@@ -34,11 +34,13 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
 >
   <DataListItem
     aria-labelledby="access-list-item"
+    id="2"
     key="2"
   >
     <li
       aria-labelledby="access-list-item"
       className="pf-c-data-list__item"
+      id="2"
     >
       <DataListItemRow
         key=".0"

diff --git a/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx b/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx
@@ -122,6 +122,7 @@ function CredentialList({ i18n }) {
           items={credentials}
           itemCount={credentialCount}
           qsConfig={QS_CONFIG}
+          onRowClick={handleSelect}
           renderItem={item => (
             <CredentialListItem
               key={item.id}

diff --git a/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx b/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
@@ -36,7 +36,11 @@ function CredentialListItem({
   const canEdit = credential.summary_fields.user_capabilities.edit;
 
   return (
-    <DataListItem key={credential.id} aria-labelledby={labelId}>
+    <DataListItem
+      key={credential.id}
+      aria-labelledby={labelId}
+      id={`${credential.id}`}
+    >
       <DataListItemRow>
         <DataListCheck
           id={`select-credential-${credential.id}`}

diff --git a/awx/ui_next/src/screens/Host/HostList/HostList.jsx b/awx/ui_next/src/screens/Host/HostList/HostList.jsx
@@ -189,6 +189,7 @@ class HostsList extends Component {
               itemCount={itemCount}
               pluralizedItemName={i18n._(t`Hosts`)}
               qsConfig={QS_CONFIG}
+              onRowClick={this.handleSelect}
               toolbarColumns={[
                 {
                   name: i18n._(t`Name`),

diff --git a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
@@ -40,7 +40,7 @@ class HostListItem extends React.Component {
     } = this.props;
     const labelId = `check-action-${host.id}`;
     return (
-      <DataListItem key={host.id} aria-labelledby={labelId}>
+      <DataListItem key={host.id} aria-labelledby={labelId} id={`${host.id}`}>
         <DataListItemRow>
           <DataListCheck
             id={`select-host-${host.id}`}

diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx
@@ -31,7 +31,7 @@ function InventoryGroupItem({
   const editUrl = `/inventories/inventory/${inventoryId}/groups/${group.id}/edit`;
 
   return (
-    <DataListItem key={group.id} aria-labelledby={labelId}>
+    <DataListItem key={group.id} aria-labelledby={labelId} id={`${group.id}`}>
       <DataListItemRow>
         <DataListCheck
           aria-labelledby={labelId}

diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx
@@ -176,6 +176,7 @@ function InventoryGroupsList({ i18n, location, match }) {
         items={groups}
         itemCount={groupCount}
         qsConfig={QS_CONFIG}
+        onRowClick={handleSelect}
         renderItem={item => (
           <InventoryGroupItem
             key={item.id}

diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx
@@ -35,7 +35,7 @@ function InventoryHostItem(props) {
   const labelId = `check-action-${host.id}`;
 
   return (
-    <DataListItem key={host.id} aria-labelledby={labelId}>
+    <DataListItem key={host.id} aria-labelledby={labelId} id={`${host.id}`}>
       <DataListItemRow>
         <DataListCheck
           id={`select-host-${host.id}`}

diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHosts.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHosts.jsx
@@ -131,6 +131,7 @@ function InventoryHosts({ i18n, location, match }) {
         itemCount={hostCount}
         pluralizedItemName={i18n._(t`Hosts`)}
         qsConfig={QS_CONFIG}
+        onRowClick={handleSelect}
         toolbarColumns={[
           {
             name: i18n._(t`Name`),

diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx
@@ -173,6 +173,7 @@ class InventoriesList extends Component {
             itemCount={itemCount}
             pluralizedItemName={i18n._(t`Inventories`)}
             qsConfig={QS_CONFIG}
+            onRowClick={this.handleSelect}
             toolbarColumns={[
               {
                 name: i18n._(t`Name`),

diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
@@ -30,7 +30,11 @@ class InventoryListItem extends React.Component {
     const { inventory, isSelected, onSelect, detailUrl, i18n } = this.props;
     const labelId = `check-action-${inventory.id}`;
     return (
-      <DataListItem key={inventory.id} aria-labelledby={labelId}>
+      <DataListItem
+        key={inventory.id}
+        aria-labelledby={labelId}
+        id={`${inventory.id}`}
+      >
         <DataListItemRow>
           <DataListCheck
             id={`select-inventory-${inventory.id}`}

diff --git a/awx/ui_next/src/screens/Job/JobList/JobList.jsx b/awx/ui_next/src/screens/Job/JobList/JobList.jsx
@@ -162,6 +162,7 @@ class JobList extends Component {
             itemCount={itemCount}
             pluralizedItemName="Jobs"
             qsConfig={QS_CONFIG}
+            onRowClick={this.handleSelect}
             toolbarColumns={[
               {
                 name: i18n._(t`Name`),

diff --git a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
@@ -32,6 +32,7 @@ class JobListItem extends Component {
       <DataListItem
         aria-labelledby={`check-action-${job.id}`}
         css="--pf-c-data-list__expandable-content--BoxShadow: none;"
+        id={`${job.id}`}
       >
         <DataListItemRow>
           <DataListCheck

diff --git a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
@@ -118,6 +118,7 @@ function OrganizationsList({ i18n }) {
             itemCount={itemCount}
             pluralizedItemName="Organizations"
             qsConfig={QS_CONFIG}
+            onRowClick={handleSelect}
             toolbarColumns={[
               {
                 name: i18n._(t`Name`),

diff --git a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx
@@ -49,7 +49,11 @@ function OrganizationListItem({
 }) {
   const labelId = `check-action-${organization.id}`;
   return (
-    <DataListItem key={organization.id} aria-labelledby={labelId}>
+    <DataListItem
+      key={organization.id}
+      aria-labelledby={labelId}
+      id={`${organization.id}`}
+    >
       <DataListItemRow>
         <DataListCheck
           id={`select-organization-${organization.id}`}

diff --git a/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx b/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx
@@ -155,6 +155,7 @@ class ProjectsList extends Component {
               itemCount={itemCount}
               pluralizedItemName={i18n._(t`Projects`)}
               qsConfig={QS_CONFIG}
+              onRowClick={this.handleSelect}
               toolbarColumns={[
                 {
                   name: i18n._(t`Name`),

diff --git a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
@@ -60,7 +60,11 @@ class ProjectListItem extends React.Component {
     const { project, isSelected, onSelect, detailUrl, i18n } = this.props;
     const labelId = `check-action-${project.id}`;
     return (
-      <DataListItem key={project.id} aria-labelledby={labelId}>
+      <DataListItem
+        key={project.id}
+        aria-labelledby={labelId}
+        id={`${project.id}`}
+      >
         <DataListItemRow>
           <DataListCheck
             id={`select-project-${project.id}`}

diff --git a/awx/ui_next/src/screens/Team/TeamList/TeamList.jsx b/awx/ui_next/src/screens/Team/TeamList/TeamList.jsx
@@ -153,6 +153,7 @@ class TeamsList extends Component {
               itemCount={itemCount}
               pluralizedItemName={i18n._(t`Teams`)}
               qsConfig={QS_CONFIG}
+              onRowClick={this.handleSelect}
               toolbarColumns={[
                 {
                   name: i18n._(t`Name`),

diff --git a/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx b/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx
@@ -30,7 +30,7 @@ class TeamListItem extends React.Component {
     const { team, isSelected, onSelect, detailUrl, i18n } = this.props;
     const labelId = `check-action-${team.id}`;
     return (
-      <DataListItem key={team.id} aria-labelledby={labelId}>
+      <DataListItem key={team.id} aria-labelledby={labelId} id={`${team.id}`}>
         <DataListItemRow>
           <DataListCheck
             id={`select-team-${team.id}`}

diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
@@ -211,8 +211,9 @@ class TemplatesList extends Component {
             hasContentLoading={hasContentLoading}
             items={templates}
             itemCount={itemCount}
-            pluralizedItemName="Templates"
+            pluralizedItemName={i18n._(t`Templates`)}
             qsConfig={QS_CONFIG}
+            onRowClick={this.handleSelect}
             toolbarColumns={[
               {
                 name: i18n._(t`Name`),

diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
@@ -70,6 +70,7 @@ class TemplateListItem extends Component {
       <DataListItem
         aria-labelledby={`check-action-${template.id}`}
         css="--pf-c-data-list__expandable-content--BoxShadow: none;"
+        id={`${template.id}`}
       >
         <DataListItemRow>
           <DataListCheck

diff --git a/awx/ui_next/src/screens/User/UserList/UserList.jsx b/awx/ui_next/src/screens/User/UserList/UserList.jsx
@@ -153,6 +153,7 @@ class UsersList extends Component {
               itemCount={itemCount}
               pluralizedItemName="Users"
               qsConfig={QS_CONFIG}
+              onRowClick={this.handleSelect}
               toolbarColumns={[
                 {
                   name: i18n._(t`Username`),

diff --git a/awx/ui_next/src/screens/User/UserList/UserListItem.jsx b/awx/ui_next/src/screens/User/UserList/UserListItem.jsx
@@ -30,7 +30,7 @@ class UserListItem extends React.Component {
     const { user, isSelected, onSelect, detailUrl, i18n } = this.props;
     const labelId = `check-action-${user.id}`;
     return (
-      <DataListItem key={user.id} aria-labelledby={labelId}>
+      <DataListItem key={user.id} aria-labelledby={labelId} id={`${user.id}`}>
         <DataListItemRow>
           <DataListCheck
             id={`select-user-${user.id}`}