Merge pull request #131 from keithjgrant/add-org-ux-improvements

UX improvements for Add Organization screen

src/app.scss

@@ -206,6 +206,21 @@
   --pf-c-card__body--PaddingTop: 24px;
 }
 
+//
+// pf tooltip overrides
+//
+
+.pf-c-tooltip__content {
+  --pf-c-tooltip__content--PaddingTop: 0.71rem;
+  --pf-c-tooltip__content--PaddingRight: 0.71rem;
+  --pf-c-tooltip__content--PaddingBottom: 0.71rem;
+  --pf-c-tooltip__content--PaddingLeft: 0.71rem;
+}
+// higher specificity needed to override PF styles added dynamically to page
+.pf-c-tooltip .pf-c-tooltip__content {
+  text-align: left;
+}
+
 //
 // pf empty state overrides
 //
@@ -238,3 +253,7 @@
   --pf-c-card__body--PaddingX: 0;
   --pf-c-card__body--PaddingY: 0;
 }
+
+.at-u-textRight {
+  text-align: right;
+}

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/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;

src/pages/Organizations/screens/OrganizationAdd.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { I18n, i18nMark } from '@lingui/react';
@@ -10,8 +10,12 @@ import {
   TextInput,
   Gallery,
   Card,
+  CardHeader,
   CardBody,
+  Button,
+  Tooltip,
 } from '@patternfly/react-core';
+import { QuestionCircleIcon, TimesIcon } from '@patternfly/react-icons';
 
 import { ConfigContext } from '../../../context';
 import Lookup from '../../../components/Lookup';
@@ -108,11 +112,25 @@ class OrganizationAdd extends React.Component {
 
     return (
       <PageSection>
-        <Card>
-          <CardBody>
-            <Form autoComplete="off">
-              <I18n>
-                {({ i18n }) => (
+        <I18n>
+          {({ i18n }) => (
+            <Card>
+              <CardHeader className="at-u-textRight">
+                <Tooltip
+                  content={i18n._(t`Close`)}
+                  position="top"
+                >
+                  <Button
+                    variant="plain"
+                    aria-label={i18n._(t`Close`)}
+                    onClick={this.onCancel}
+                  >
+                    <TimesIcon />
+                  </Button>
+                </Tooltip>
+              </CardHeader>
+              <CardBody>
+                <Form autoComplete="off">
                   <Gallery gutter="md">
                     <FormGroup
                       label={i18n._(t`Name`)}
@@ -135,7 +153,21 @@ class OrganizationAdd extends React.Component {
                         onChange={this.onFieldChange}
                       />
                     </FormGroup>
-                    <FormGroup label={i18n._(t`Instance Groups`)} fieldId="add-org-form-instance-groups">
+                    <FormGroup
+                      label={(
+                        <Fragment>
+                          {i18n._(t`Instance Groups`)}
+                          {' '}
+                          <Tooltip
+                            position="right"
+                            content={i18n._(t`Select the Instance Groups for this Organization to run on.`)}
+                          >
+                            <QuestionCircleIcon />
+                          </Tooltip>
+                        </Fragment>
+                      )}
+                      fieldId="add-org-form-instance-groups"
+                    >
                       <Lookup
                         lookupHeader={i18n._(t`Instance Groups`)}
                         name="instanceGroups"
@@ -149,7 +181,21 @@ class OrganizationAdd extends React.Component {
                     <ConfigContext.Consumer>
                       {({ custom_virtualenvs }) => (
                         custom_virtualenvs && custom_virtualenvs.length > 1 && (
-                          <FormGroup label={i18n._(t`Ansible Environment`)} fieldId="add-org-custom-virtualenv">
+                          <FormGroup
+                            label={(
+                              <Fragment>
+                                {i18n._(t`Ansible Environment`)}
+                                {' '}
+                                <Tooltip
+                                  position="right"
+                                  content={i18n._(t`Select the custom Python virtual environment for this organization to run on.`)}
+                                >
+                                  <QuestionCircleIcon />
+                                </Tooltip>
+                              </Fragment>
+                            )}
+                            fieldId="add-org-custom-virtualenv"
+                          >
                             <AnsibleSelect
                               label={i18n._(t`Ansible Environment`)}
                               name="custom_virtualenv"
@@ -163,17 +209,17 @@ class OrganizationAdd extends React.Component {
                       )}
                     </ConfigContext.Consumer>
                   </Gallery>
-                )}
-              </I18n>
-              <FormActionGroup
-                onSubmit={this.onSubmit}
-                submitDisabled={!enabled}
-                onCancel={this.onCancel}
-              />
-              {error ? <div>error</div> : ''}
-            </Form>
-          </CardBody>
-        </Card>
+                  <FormActionGroup
+                    onSubmit={this.onSubmit}
+                    submitDisabled={!enabled}
+                    onCancel={this.onCancel}
+                  />
+                  {error ? <div>error</div> : ''}
+                </Form>
+              </CardBody>
+            </Card>
+          )}
+        </I18n>
       </PageSection>
     );
   }