update awx-pf to use withI18n i18n._ and t exclusively

src/components/PaginatedDataList/PaginatedDataList.jsx

@@ -14,8 +14,8 @@ import {
   EmptyStateBody,
 } from '@patternfly/react-core';
 import { CubesIcon } from '@patternfly/react-icons';
-import { I18n, i18nMark } from '@lingui/react';
-import { Trans, t } from '@lingui/macro';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
 import { withRouter, Link } from 'react-router-dom';
 
 import Pagination from '../Pagination';
@@ -108,13 +108,15 @@ class PaginatedDataList extends React.Component {
       showPageSizeOptions,
       paginationStyling,
       location,
+      i18n
     } = this.props;
     const { error } = this.state;
     const [orderBy, sortOrder] = this.getSortOrder();
     const queryParams = parseNamespacedQueryString(qsConfig, location.search);
+    const columns = toolbarColumns || [{ name: i18n._(t`Name`), key: 'name', isSortable: true }];
     return (
-      <I18n>
-        {({ i18n }) => (
+      <Fragment>
+        {error && (
           <Fragment>
             {error && (
               <Fragment>
@@ -128,24 +130,10 @@ class PaginatedDataList extends React.Component {
               <EmptyState>
                 <EmptyStateIcon icon={CubesIcon} />
                 <Title size="lg">
-                  <Trans>
-                    No
-                    {' '}
-                    {ucFirst(itemNamePlural || pluralize(itemName))}
-                    {' '}
-                    Found
-                  </Trans>
+                  {i18n._(t`No ${ucFirst(itemNamePlural || pluralize(itemName))} Found`)}
                 </Title>
                 <EmptyStateBody>
-                  <Trans>
-                    Please add
-                    {' '}
-                    {getArticle(itemName)}
-                    {' '}
-                    {itemName}
-                    {' '}
-                    to populate this list
-                  </Trans>
+                  {i18n._(t`Please add ${getArticle(itemName)} ${itemName} to populate this list`)}
                 </EmptyStateBody>
               </EmptyState>
             ) : (
@@ -199,9 +187,67 @@ class PaginatedDataList extends React.Component {
                 />
               </Fragment>
             )}
+          </Fragment> // TODO: replace with proper error handling
+        )}
+        {items.length === 0 ? (
+          <EmptyState>
+            <EmptyStateIcon icon={CubesIcon} />
+            <Title size="lg">
+              {i18n._(t`No ${ucFirst(itemNamePlural || pluralize(itemName))} Found`)}
+            </Title>
+            <EmptyStateBody>
+              {i18n._(t`Please add ${getArticle(itemName)} ${itemName} to populate this list`)}
+            </EmptyStateBody>
+          </EmptyState>
+        ) : (
+          <Fragment>
+            <DataListToolbar
+              sortedColumnKey={orderBy}
+              sortOrder={sortOrder}
+              columns={columns}
+              onSearch={() => { }}
+              onSort={this.handleSort}
+              showSelectAll={showSelectAll}
+              isAllSelected={isAllSelected}
+              onSelectAll={onSelectAll}
+              additionalControls={additionalControls}
+            />
+            <DataList aria-label={i18n._(t`${ucFirst(pluralize(itemName))} List`)}>
+              {items.map(item => (renderItem ? renderItem(item) : (
+                <DataListItem
+                  aria-labelledby={`items-list-item-${item.id}`}
+                  key={item.id}
+                >
+                  <DataListItemRow>
+                    <DataListItemCells dataListCells={[
+                      <DataListCell key="team-name">
+                        <TextContent style={detailWrapperStyle}>
+                          <Link to={{ pathname: item.url }}>
+                            <Text
+                              id={`items-list-item-${item.id}`}
+                              style={detailLabelStyle}
+                            >
+                              {item.name}
+                            </Text>
+                          </Link>
+                        </TextContent>
+                      </DataListCell>
+                    ]}
+                    />
+                  </DataListItemRow>
+                </DataListItem>
+              )))}
+            </DataList>
+            <Pagination
+              count={itemCount}
+              page={queryParams.page}
+              pageCount={this.getPageCount()}
+              page_size={queryParams.page_size}
+              onSetPage={this.handleSetPage}
+            />
           </Fragment>
         )}
-      </I18n>
+      </Fragment>
     );
   }
 }
@@ -235,9 +281,7 @@ PaginatedDataList.propTypes = {
 
 PaginatedDataList.defaultProps = {
   renderItem: null,
-  toolbarColumns: [
-    { name: i18nMark('Name'), key: 'name', isSortable: true },
-  ],
+  toolbarColumns: [],
   additionalControls: [],
   itemName: 'item',
   itemNamePlural: '',
@@ -250,4 +294,4 @@ PaginatedDataList.defaultProps = {
 };
 
 export { PaginatedDataList as _PaginatedDataList };
-export default withRouter(PaginatedDataList);
+export default withI18n()(withRouter(PaginatedDataList));

src/components/PaginatedDataList/ToolbarAddButton.jsx

@@ -3,7 +3,7 @@ import { string, func } from 'prop-types';
 import { Link } from 'react-router-dom';
 import { Button as PFButton } from '@patternfly/react-core';
 import { PlusIcon } from '@patternfly/react-icons';
-import { I18n } from '@lingui/react';
+import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import styled from 'styled-components';
 
@@ -20,39 +20,32 @@ const Button = styled(PFButton)`
   }
 `;
 
-function ToolbarAddButton ({ linkTo, onClick }) {
+function ToolbarAddButton ({ linkTo, onClick, i18n }) {
   if (!linkTo && !onClick) {
     throw new Error('ToolbarAddButton requires either `linkTo` or `onClick` prop');
   }
   if (linkTo) {
     // TODO: This should only be a <Link> (no <Button>) but CSS is off
     return (
-      <I18n>
-        {({ i18n }) => (
-          <Link to={linkTo}>
-            <Button
-              variant="primary"
-              aria-label={i18n._(t`Add`)}
-            >
-              <PlusIcon />
-            </Button>
-          </Link>
-        )}
-      </I18n>
-    );
-  }
-  return (
-    <I18n>
-      {({ i18n }) => (
+      <Link to={linkTo}>
         <Button
           variant="primary"
           aria-label={i18n._(t`Add`)}
-          onClick={onClick}
         >
           <PlusIcon />
         </Button>
-      )}
-    </I18n>
+      </Link>
+    );
+  }
+
+  return (
+    <Button
+      variant="primary"
+      aria-label={i18n._(t`Add`)}
+      onClick={onClick}
+    >
+      <PlusIcon />
+    </Button>
   );
 }
 ToolbarAddButton.propTypes = {
@@ -64,4 +57,4 @@ ToolbarAddButton.defaultProps = {
   onClick: null
 };
 
-export default ToolbarAddButton;
+export default withI18n()(ToolbarAddButton);

src/components/PaginatedDataList/ToolbarDeleteButton.jsx

@@ -2,9 +2,9 @@ import React, { Fragment } from 'react';
 import { func, bool, number, string, arrayOf, shape } from 'prop-types';
 import { Button as PFButton, Tooltip } from '@patternfly/react-core';
 import { TrashAltIcon } from '@patternfly/react-icons';
-import { I18n, i18nMark } from '@lingui/react';
-import { Trans, t } from '@lingui/macro';
 import styled from 'styled-components';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
 import AlertModal from '../AlertModal';
 import { pluralize } from '../../util/strings';
 
@@ -89,103 +89,95 @@ class ToolbarDeleteButton extends React.Component {
   }
 
   renderTooltip () {
-    const { itemsToDelete, itemName } = this.props;
+    const { itemsToDelete, itemName, i18n } = this.props;
+
+    const itemsUnableToDelete = itemsToDelete
+      .filter(cannotDelete)
+      .map(item => (
+        <div key={item.id}>
+          {item.name}
+        </div>
+      ));
     if (itemsToDelete.some(cannotDelete)) {
       return (
         <div>
-          <Trans>
-            You dont have permission to delete the following
-            {' '}
-            {pluralize(itemName)}
-            :
-          </Trans>
-          {itemsToDelete
-            .filter(cannotDelete)
-            .map(item => (
-              <div key={item.id}>
-                {item.name}
-              </div>
-            ))
-          }
+          {i18n._(t`You do not have permission to delete the following ${pluralize(itemName)}: ${itemsUnableToDelete}`)}
         </div>
       );
     }
     if (itemsToDelete.length) {
-      return i18nMark('Delete');
+      return i18n._(t`Delete`);
     }
-    return i18nMark('Select a row to delete');
+    return i18n._(t`Select a row to delete`);
   }
 
   render () {
-    const { itemsToDelete, itemName } = this.props;
+    const { itemsToDelete, itemName, i18n } = this.props;
     const { isModalOpen } = this.state;
 
     const isDisabled = itemsToDelete.length === 0
       || itemsToDelete.some(cannotDelete);
 
     return (
-      <I18n>
-        {({ i18n }) => (
-          <Fragment>
-            <Tooltip
-              content={this.renderTooltip()}
-              position="left"
-            >
+      <Fragment>
+        <Tooltip
+          content={this.renderTooltip()}
+          position="left"
+        >
+          <Button
+            className="awx-ToolBarBtn"
+            variant="plain"
+            aria-label={i18n._(t`Delete`)}
+            onClick={this.handleConfirmDelete}
+            isDisabled={isDisabled}
+          >
+            <TrashAltIcon className="awx-ToolBarTrashCanIcon" />
+          </Button>
+        </Tooltip>
+        { isModalOpen && (
+          <AlertModal
+            variant="danger"
+            title={itemsToDelete === 1
+              ? i18n._(t`Delete ${itemName}`)
+              : i18n._(t`Delete ${pluralize(itemName)}`)
+            }
+            isOpen={isModalOpen}
+            onClose={this.handleCancelDelete}
+            actions={[
               <Button
-                variant="plain"
-                aria-label={i18n._(t`Delete`)}
-                onClick={this.handleConfirmDelete}
-                isDisabled={isDisabled}
-              >
-                <TrashAltIcon />
-              </Button>
-            </Tooltip>
-            { isModalOpen && (
-              <AlertModal
+                key="delete"
                 variant="danger"
-                title={itemsToDelete === 1
-                  ? i18n._(t`Delete ${itemName}`)
-                  : i18n._(t`Delete ${pluralize(itemName)}`)
-                }
-                isOpen={isModalOpen}
-                onClose={this.handleCancelDelete}
-                actions={[
-                  <Button
-                    key="delete"
-                    variant="danger"
-                    aria-label={i18n._(t`confirm delete`)}
-                    onClick={this.handleDelete}
-                  >
-                    {i18n._(t`Delete`)}
-                  </Button>,
-                  <Button
-                    key="cancel"
-                    variant="secondary"
-                    aria-label={i18n._(t`cancel delete`)}
-                    onClick={this.handleCancelDelete}
-                  >
-                    {i18n._(t`Cancel`)}
-                  </Button>
-                ]}
+                aria-label={i18n._(t`confirm delete`)}
+                onClick={this.handleDelete}
               >
-                {i18n._(t`Are you sure you want to delete:`)}
+                {i18n._(t`Delete`)}
+              </Button>,
+              <Button
+                key="cancel"
+                variant="secondary"
+                aria-label={i18n._(t`cancel delete`)}
+                onClick={this.handleCancelDelete}
+              >
+                {i18n._(t`Cancel`)}
+              </Button>
+            ]}
+          >
+            {i18n._(t`Are you sure you want to delete:`)}
+            <br />
+            {itemsToDelete.map((item) => (
+              <span key={item.id}>
+                <strong>
+                  {item.name}
+                </strong>
                 <br />
-                {itemsToDelete.map((item) => (
-                  <span key={item.id}>
-                    <strong>
-                      {item.name}
-                    </strong>
-                    <br />
-                  </span>
-                ))}
-                <br />
-              </AlertModal>
-            )}
-          </Fragment>
+              </span>
+            ))}
+            <br />
+          </AlertModal>
         )}
-      </I18n>
+      </Fragment>
     );
   }
 }
 
-export default ToolbarDeleteButton;
+export default withI18n()(ToolbarDeleteButton);