Merge remote-tracking branch 'origin' into access-list-remove-role-functionality

src/components/DataListToolbar/DataListToolbar.jsx

@@ -15,6 +15,7 @@ import {
   Toolbar,
   ToolbarGroup,
   ToolbarItem,
+  Tooltip,
 } from '@patternfly/react-core';
 import {
   BarsIcon,
@@ -30,7 +31,6 @@ import {
   Link
 } from 'react-router-dom';
 
-import Tooltip from '../Tooltip';
 import VerticalSeparator from '../VerticalSeparator';
 
 const flexGrowStyling = {
@@ -291,7 +291,7 @@ class DataListToolbar extends React.Component {
               <LevelItem>
                 { showDelete && (
                   <Tooltip
-                    message={i18n._(t`Delete`)}
+                    content={i18n._(t`Delete`)}
                     position="top"
                   >
                     <Button

src/components/NotificationsList/NotificationListItem.jsx

@@ -34,6 +34,7 @@ class NotificationListItem extends React.Component {
                 to={{
                   pathname: detailUrl
                 }}
+                style={{ marginRight: '1.5em' }}
               >
                 <b>{name}</b>
               </Link>
@@ -82,4 +83,3 @@ NotificationListItem.defaultProps = {
 };
 
 export default NotificationListItem;
-

src/components/Pagination/Pagination.jsx

@@ -116,7 +116,12 @@ class Pagination extends Component {
     const isOnFirst = page === 1;
     const isOnLast = page === pageCount;
 
-    const itemCount = isOnLast ? count % page_size : page_size;
+    let itemCount;
+    if (!isOnLast || count === page_size) {
+      itemCount = page_size;
+    } else {
+      itemCount = count % page_size;
+    }
     const itemMin = ((page - 1) * page_size) + 1;
     const itemMax = itemMin + itemCount - 1;
 
@@ -154,7 +159,7 @@ class Pagination extends Component {
             )}
             <div className="awx-pagination__counts">
               <div className="awx-pagination__item-count">
-                <Trans>{`Items ${itemMin} - ${itemMax} of ${count}`}</Trans>
+                <Trans>{`Items ${itemMin} – ${itemMax} of ${count}`}</Trans>
               </div>
               {pageCount !== 1 && (
                 <div className="awx-pagination__page-count">

src/components/Tabs/Tabs.jsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-import { Button } from '@patternfly/react-core';
+import { Button, Tooltip } from '@patternfly/react-core';
 import { TimesIcon } from '@patternfly/react-icons';
-import Tooltip from '../Tooltip';
 import './tabs.scss';
 
 const Tabs = ({ children, labelText, closeButton }) => (
@@ -17,7 +16,7 @@ const Tabs = ({ children, labelText, closeButton }) => (
     {closeButton
       && (
         <Tooltip
-          message={closeButton.text}
+          content={closeButton.text}
           position="top"
         >
           <Link to={closeButton.link}>

src/components/Tooltip/Tooltip.jsx

@@ -1,96 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const toolTipContent = {
-  padding: '10px',
-  minWidth: '100px',
-};
-
-class Tooltip extends React.Component {
-  transforms = {
-    top: {
-      bottom: '100%',
-      left: '50%',
-      transform: 'translate(-50%, -25%)'
-    },
-    bottom: {
-      top: '100%',
-      left: '50%',
-      transform: 'translate(-50%, 25%)'
-    },
-    left: {
-      top: '50%',
-      right: '100%',
-      transform: 'translate(-25%, -50%)'
-    },
-    right: {
-      bottom: '100%',
-      left: '50%',
-      transform: 'translate(25%, 50%)'
-    },
-  };
-
-  constructor (props) {
-    super(props);
-
-    this.state = {
-      isDisplayed: false
-    };
-  }
-
-  render () {
-    const {
-      children,
-      message,
-      position,
-    } = this.props;
-    const {
-      isDisplayed
-    } = this.state;
-
-    if (message === '') {
-      return null;
-    }
-    return (
-      <span
-        style={{ position: 'relative' }}
-        className="mouseOutHandler"
-        onMouseLeave={() => this.setState({ isDisplayed: false })}
-        onBlur={() => this.setState({ isDisplayed: false })}
-      >
-        { isDisplayed
-          && (
-            <div
-              style={{ position: 'absolute', zIndex: '10', ...this.transforms[position] }}
-              className={`pf-c-tooltip pf-m-${position}`}
-            >
-              <div className="pf-c-tooltip__arrow" />
-              <div className="pf-c-tooltip__content" style={toolTipContent}>
-                { message }
-              </div>
-            </div>
-          )
-        }
-        <span
-          className="mouseOverHandler"
-          onMouseOver={() => this.setState({ isDisplayed: true })}
-          onFocus={() => this.setState({ isDisplayed: true })}
-        >
-          { children }
-        </span>
-      </span>
-    );
-  }
-}
-
-Tooltip.propTypes = {
-  children: PropTypes.element.isRequired,
-  message: PropTypes.string.isRequired,
-  position: PropTypes.string,
-};
-
-Tooltip.defaultProps = {
-  position: 'top',
-};
-
-export default Tooltip;

src/components/Tooltip/index.js

@@ -1,3 +0,0 @@
-import Tooltip from './Tooltip';
-
-export default Tooltip;