add close (x) button to Add Org screen

__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter, Router } from 'react-router-dom';
 import { I18nProvider } from '@lingui/react';
 import { ConfigContext } from '../../../../src/context';
 import OrganizationAdd from '../../../../src/pages/Organizations/screens/OrganizationAdd';
@@ -18,6 +18,7 @@ describe('<OrganizationAdd />', () => {
       </MemoryRouter>
     );
   });
+
   test('calls "onFieldChange" when input values change', () => {
     const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onFieldChange');
     const wrapper = mount(
@@ -35,6 +36,7 @@ describe('<OrganizationAdd />', () => {
     wrapper.find('input#add-org-form-description').simulate('change', { target: { value: 'bar' } });
     expect(spy).toHaveBeenCalledTimes(2);
   });
+
   test('calls "onSubmit" when Save button is clicked', () => {
     const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onSubmit');
     const wrapper = mount(
@@ -51,6 +53,7 @@ describe('<OrganizationAdd />', () => {
     wrapper.find('button[aria-label="Save"]').prop('onClick')();
     expect(spy).toBeCalled();
   });
+
   test('calls "onCancel" when Cancel button is clicked', () => {
     const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onCancel');
     const wrapper = mount(
@@ -68,6 +71,25 @@ describe('<OrganizationAdd />', () => {
     expect(spy).toBeCalled();
   });
 
+  test('calls "onCancel" when close button (x) is clicked', () => {
+    const wrapper = mount(
+      <MemoryRouter initialEntries={['/organizations/add']} initialIndex={0}>
+        <I18nProvider>
+          <OrganizationAdd
+            match={{ path: '/organizations/add', url: '/organizations/add' }}
+            location={{ search: '', pathname: '/organizations/add' }}
+          />
+        </I18nProvider>
+      </MemoryRouter>
+    );
+    const history = wrapper.find(Router).prop('history');
+    expect(history.length).toBe(1);
+    expect(history.location.pathname).toEqual('/organizations/add');
+    wrapper.find('button[aria-label="Close"]').prop('onClick')();
+    expect(history.length).toBe(2);
+    expect(history.location.pathname).toEqual('/organizations');
+  });
+
   test('Successful form submission triggers redirect', (done) => {
     const onSuccess = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onSuccess');
     const mockedResp = { data: { id: 1, related: { instance_groups: '/bar' } } };

src/app.scss

@@ -206,6 +206,17 @@
   --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;
+}
+
 //
 // pf empty state overrides
 //
@@ -238,3 +249,7 @@
   --pf-c-card__body--PaddingX: 0;
   --pf-c-card__body--PaddingY: 0;
 }
+
+.at-u-textRight {
+  text-align: right;
+}

src/pages/Organizations/screens/OrganizationAdd.jsx

@@ -10,10 +10,12 @@ import {
   TextInput,
   Gallery,
   Card,
+  CardHeader,
   CardBody,
+  Button,
   Tooltip,
 } from '@patternfly/react-core';
-import { QuestionCircleIcon } from '@patternfly/react-icons';
+import { QuestionCircleIcon, TimesIcon } from '@patternfly/react-icons';
 
 import { ConfigContext } from '../../../context';
 import Lookup from '../../../components/Lookup';
@@ -110,11 +112,25 @@ class OrganizationAdd extends React.Component {
 
     return (
       <PageSection>
-        <Card>
+        <I18n>
-          <CardBody>
+          {({ i18n }) => (
-            <Form autoComplete="off">
+            <Card>
-              <I18n>
+              <CardHeader className="at-u-textRight">
-                {({ i18n }) => (
+                <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`)}
@@ -193,17 +209,17 @@ class OrganizationAdd extends React.Component {
                       )}
                     </ConfigContext.Consumer>
                   </Gallery>
-                )}
+                  <FormActionGroup
-              </I18n>
+                    onSubmit={this.onSubmit}
-              <FormActionGroup
+                    submitDisabled={!enabled}
-                onSubmit={this.onSubmit}
+                    onCancel={this.onCancel}
-                submitDisabled={!enabled}
+                  />
-                onCancel={this.onCancel}
+                  {error ? <div>error</div> : ''}
-              />
+                </Form>
-              {error ? <div>error</div> : ''}
+              </CardBody>
-            </Form>
+            </Card>
-          </CardBody>
+          )}
-        </Card>
+        </I18n>
       </PageSection>
     );
   }