Merge pull request #5681 from marshmalien/remove-form-close-buttons

Remove form card header close button

Reviewed-by: Marliana Lara <marliana.lara@gmail.com>
             https://github.com/marshmalien

awx/ui_next/src/screens/Inventory/InventoryAdd/InventoryAdd.jsx

@@ -1,20 +1,18 @@
 import React, { useState, useEffect } from 'react';
-import { withI18n } from '@lingui/react';
+import { useHistory } from 'react-router-dom';
-import { withRouter } from 'react-router-dom';
+import { PageSection, Card } from '@patternfly/react-core';
-import { t } from '@lingui/macro';
-import { PageSection, Card, CardHeader, Tooltip } from '@patternfly/react-core';
 import { CardBody } from '@components/Card';
 import ContentError from '@components/ContentError';
 import ContentLoading from '@components/ContentLoading';
 
-import CardCloseButton from '@components/CardCloseButton';
 import { InventoriesAPI, CredentialTypesAPI } from '@api';
 import InventoryForm from '../shared/InventoryForm';
 
-function InventoryAdd({ history, i18n }) {
+function InventoryAdd() {
   const [error, setError] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [credentialTypeId, setCredentialTypeId] = useState(null);
+  const history = useHistory();
 
   useEffect(() => {
     const loadData = async () => {
@@ -86,18 +84,6 @@ function InventoryAdd({ history, i18n }) {
   return (
     <PageSection>
       <Card>
-        <CardHeader
-          style={{
-            paddingRight: '10px',
-            paddingTop: '10px',
-            paddingBottom: '0',
-            textAlign: 'right',
-          }}
-        >
-          <Tooltip content={i18n._(t`Close`)} position="top">
-            <CardCloseButton onClick={handleCancel} />
-          </Tooltip>
-        </CardHeader>
         <CardBody>
           <InventoryForm
             onCancel={handleCancel}
@@ -111,4 +97,4 @@ function InventoryAdd({ history, i18n }) {
 }
 
 export { InventoryAdd as _InventoryAdd };
-export default withI18n()(withRouter(InventoryAdd));
+export default InventoryAdd;

awx/ui_next/src/screens/Inventory/InventoryAdd/InventoryAdd.test.jsx

@@ -24,6 +24,7 @@ InventoriesAPI.create.mockResolvedValue({ data: { id: 13 } });
 describe('<InventoryAdd />', () => {
   let wrapper;
   let history;
+
   beforeEach(async () => {
     history = createMemoryHistory({ initialEntries: ['/inventories'] });
     await act(async () => {
@@ -40,6 +41,7 @@ describe('<InventoryAdd />', () => {
   test('Initially renders successfully', () => {
     expect(wrapper.length).toBe(1);
   });
+
   test('handleSubmit should call the api', async () => {
     const instanceGroups = [{ name: 'Bizz', id: 1 }, { name: 'Buzz', id: 2 }];
     await waitForElement(wrapper, 'isLoading', el => el.length === 0);
@@ -63,9 +65,10 @@ describe('<InventoryAdd />', () => {
       )
     );
   });
+
   test('handleCancel should return the user back to the inventories list', async () => {
     await waitForElement(wrapper, 'isLoading', el => el.length === 0);
-    wrapper.find('CardCloseButton').simulate('click');
+    wrapper.find('Button[aria-label="Cancel"]').simulate('click');
     expect(history.location.pathname).toEqual('/inventories');
   });
 });

awx/ui_next/src/screens/Inventory/InventoryEdit/InventoryEdit.jsx

@@ -1,23 +1,20 @@
 import React, { useState, useEffect } from 'react';
-import { withI18n } from '@lingui/react';
+import { useHistory } from 'react-router-dom';
-import { withRouter } from 'react-router-dom';
-import { t } from '@lingui/macro';
-import { CardHeader, Tooltip } from '@patternfly/react-core';
 import { object } from 'prop-types';
 
 import { CardBody } from '@components/Card';
-import CardCloseButton from '@components/CardCloseButton';
 import { InventoriesAPI, CredentialTypesAPI } from '@api';
 import ContentLoading from '@components/ContentLoading';
 import ContentError from '@components/ContentError';
 import InventoryForm from '../shared/InventoryForm';
 import { getAddedAndRemoved } from '../../../util/lists';
 
-function InventoryEdit({ history, i18n, inventory }) {
+function InventoryEdit({ inventory }) {
   const [error, setError] = useState(null);
   const [associatedInstanceGroups, setInstanceGroups] = useState(null);
   const [contentLoading, setContentLoading] = useState(true);
   const [credentialTypeId, setCredentialTypeId] = useState(null);
+  const history = useHistory();
 
   useEffect(() => {
     const loadData = async () => {
@@ -47,7 +44,12 @@ function InventoryEdit({ history, i18n, inventory }) {
   }, [inventory.id, contentLoading, inventory, credentialTypeId]);
 
   const handleCancel = () => {
-    history.push('/inventories');
+    const url =
+      inventory.kind === 'smart'
+        ? `/inventories/smart_inventory/${inventory.id}/details`
+        : `/inventories/inventory/${inventory.id}/details`;
+
+    history.push(`${url}`);
   };
 
   const handleSubmit = async values => {
@@ -95,29 +97,15 @@ function InventoryEdit({ history, i18n, inventory }) {
     return <ContentError />;
   }
   return (
-    <>
+    <CardBody>
-      <CardHeader
+      <InventoryForm
-        style={{
+        onCancel={handleCancel}
-          paddingRight: '10px',
+        onSubmit={handleSubmit}
-          paddingTop: '10px',
+        inventory={inventory}
-          paddingBottom: '0',
+        instanceGroups={associatedInstanceGroups}
-          textAlign: 'right',
+        credentialTypeId={credentialTypeId}
-        }}
+      />
-      >
+    </CardBody>
-        <Tooltip content={i18n._(t`Close`)} position="top">
-          <CardCloseButton onClick={handleCancel} />
-        </Tooltip>
-      </CardHeader>
-      <CardBody>
-        <InventoryForm
-          onCancel={handleCancel}
-          onSubmit={handleSubmit}
-          inventory={inventory}
-          instanceGroups={associatedInstanceGroups}
-          credentialTypeId={credentialTypeId}
-        />
-      </CardBody>
-    </>
   );
 }
 
@@ -126,4 +114,4 @@ InventoryEdit.proptype = {
 };
 
 export { InventoryEdit as _InventoryEdit };
-export default withI18n()(withRouter(InventoryEdit));
+export default InventoryEdit;

awx/ui_next/src/screens/Inventory/InventoryEdit/InventoryEdit.test.jsx

@@ -75,6 +75,7 @@ InventoriesAPI.readInstanceGroups.mockResolvedValue({
 describe('<InventoryEdit />', () => {
   let wrapper;
   let history;
+
   beforeEach(async () => {
     history = createMemoryHistory({ initialEntries: ['/inventories'] });
     await act(async () => {
@@ -83,6 +84,7 @@ describe('<InventoryEdit />', () => {
       });
     });
   });
+
   afterEach(() => {
     wrapper.unmount();
   });
@@ -95,10 +97,12 @@ describe('<InventoryEdit />', () => {
     expect(InventoriesAPI.readInstanceGroups).toBeCalledWith(1);
   });
 
-  test('handleCancel returns the user to the inventories list', async () => {
+  test('handleCancel returns the user to inventory detail', async () => {
     await waitForElement(wrapper, 'isLoading', el => el.length === 0);
-    wrapper.find('CardCloseButton').simulate('click');
+    wrapper.find('Button[aria-label="Cancel"]').simulate('click');
-    expect(history.location.pathname).toEqual('/inventories');
+    expect(history.location.pathname).toEqual(
+      '/inventories/inventory/1/details'
+    );
   });
 
   test('handleSubmit should post to the api', async () => {

awx/ui_next/src/screens/Organization/OrganizationAdd/OrganizationAdd.jsx

@@ -1,17 +1,14 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
-import { withI18n } from '@lingui/react';
+import { PageSection, Card } from '@patternfly/react-core';
-import { t } from '@lingui/macro';
-import { PageSection, Card, CardHeader, Tooltip } from '@patternfly/react-core';
 
 import { OrganizationsAPI } from '@api';
 import { Config } from '@contexts/Config';
 import { CardBody } from '@components/Card';
-import CardCloseButton from '@components/CardCloseButton';
 import OrganizationForm from '../shared/OrganizationForm';
 
-function OrganizationAdd({ i18n }) {
+function OrganizationAdd() {
   const history = useHistory();
   const [formError, setFormError] = useState(null);
 
@@ -36,11 +33,6 @@ function OrganizationAdd({ i18n }) {
   return (
     <PageSection>
       <Card>
-        <CardHeader className="at-u-textRight">
-          <Tooltip content={i18n._(t`Close`)} position="top">
-            <CardCloseButton onClick={handleCancel} />
-          </Tooltip>
-        </CardHeader>
         <CardBody>
           <Config>
             {({ me }) => (
@@ -63,4 +55,4 @@ OrganizationAdd.contextTypes = {
 };
 
 export { OrganizationAdd as _OrganizationAdd };
-export default withI18n()(OrganizationAdd);
+export default OrganizationAdd;

awx/ui_next/src/screens/Organization/OrganizationAdd/OrganizationAdd.test.jsx

@@ -36,18 +36,6 @@ describe('<OrganizationAdd />', () => {
     expect(history.location.pathname).toEqual('/organizations');
   });
 
-  test('should navigate to organizations list when close (x) is clicked', async () => {
-    const history = createMemoryHistory({});
-    let wrapper;
-    await act(async () => {
-      wrapper = mountWithContexts(<OrganizationAdd />, {
-        context: { router: { history } },
-      });
-      wrapper.find('button[aria-label="Close"]').invoke('onClick')();
-    });
-    expect(history.location.pathname).toEqual('/organizations');
-  });
-
   test('successful form submission should trigger redirect', async () => {
     const history = createMemoryHistory({});
     const orgData = {

awx/ui_next/src/screens/Project/ProjectAdd/ProjectAdd.jsx

@@ -1,15 +1,7 @@
 import React, { useState } from 'react';
-import { withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
-import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
 import styled from 'styled-components';
-import {
+import { Card as _Card, PageSection } from '@patternfly/react-core';
-  Card as _Card,
-  CardHeader,
-  PageSection,
-  Tooltip,
-} from '@patternfly/react-core';
-import CardCloseButton from '@components/CardCloseButton';
 import { CardBody } from '@components/Card';
 import ProjectForm from '../shared/ProjectForm';
 import { ProjectsAPI } from '@api';
@@ -19,8 +11,9 @@ const Card = styled(_Card)`
   --pf-c-card--child--PaddingRight: 0;
 `;
 
-function ProjectAdd({ history, i18n }) {
+function ProjectAdd() {
   const [formSubmitError, setFormSubmitError] = useState(null);
+  const history = useHistory();
 
   const handleSubmit = async values => {
     if (values.scm_type === 'manual') {
@@ -44,11 +37,6 @@ function ProjectAdd({ history, i18n }) {
   return (
     <PageSection>
       <Card>
-        <CardHeader className="at-u-textRight">
-          <Tooltip content={i18n._(t`Close`)} position="top">
-            <CardCloseButton onClick={handleCancel} />
-          </Tooltip>
-        </CardHeader>
         <CardBody>
           <ProjectForm
             handleCancel={handleCancel}
@@ -65,4 +53,4 @@ function ProjectAdd({ history, i18n }) {
   );
 }
 
-export default withI18n()(withRouter(ProjectAdd));
+export default ProjectAdd;

awx/ui_next/src/screens/Project/ProjectAdd/ProjectAdd.test.jsx

@@ -141,19 +141,6 @@ describe('<ProjectAdd />', () => {
     expect(wrapper.find('ProjectAdd .formSubmitError').length).toBe(1);
   });
 
-  test('CardHeader close button should navigate to projects list', async () => {
-    const history = createMemoryHistory();
-    await act(async () => {
-      wrapper = mountWithContexts(<ProjectAdd />, {
-        context: { router: { history } },
-      }).find('ProjectAdd CardHeader');
-    });
-    await act(async () => {
-      wrapper.find('CardCloseButton').simulate('click');
-    });
-    expect(history.location.pathname).toEqual('/projects');
-  });
-
   test('CardBody cancel button should navigate to projects list', async () => {
     const history = createMemoryHistory();
     await act(async () => {

awx/ui_next/src/screens/Project/ProjectEdit/ProjectEdit.jsx

@@ -1,11 +1,8 @@
 import React, { useState } from 'react';
-import { withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
-import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
 import styled from 'styled-components';
-import { Card as _Card, CardHeader, Tooltip } from '@patternfly/react-core';
+import { Card as _Card } from '@patternfly/react-core';
 import { CardBody } from '@components/Card';
-import CardCloseButton from '@components/CardCloseButton';
 import ProjectForm from '../shared/ProjectForm';
 import { ProjectsAPI } from '@api';
 
@@ -16,8 +13,9 @@ const Card = styled(_Card)`
   --pf-c-card--child--PaddingRight: 0;
 `;
 
-function ProjectEdit({ project, history, i18n }) {
+function ProjectEdit({ project }) {
   const [formSubmitError, setFormSubmitError] = useState(null);
+  const history = useHistory();
 
   const handleSubmit = async values => {
     if (values.scm_type === 'manual') {
@@ -39,11 +37,6 @@ function ProjectEdit({ project, history, i18n }) {
 
   return (
     <Card>
-      <CardHeader className="at-u-textRight">
-        <Tooltip content={i18n._(t`Close`)} position="top">
-          <CardCloseButton onClick={handleCancel} />
-        </Tooltip>
-      </CardHeader>
       <CardBody>
         <ProjectForm
           project={project}
@@ -60,4 +53,4 @@ function ProjectEdit({ project, history, i18n }) {
   );
 }
 
-export default withI18n()(withRouter(ProjectEdit));
+export default ProjectEdit;

awx/ui_next/src/screens/Project/ProjectEdit/ProjectEdit.test.jsx

@@ -138,17 +138,6 @@ describe('<ProjectEdit />', () => {
     expect(wrapper.find('ProjectEdit .formSubmitError').length).toBe(1);
   });
 
-  test('CardHeader close button should navigate to project details', async () => {
-    const history = createMemoryHistory();
-    await act(async () => {
-      wrapper = mountWithContexts(<ProjectEdit project={projectData} />, {
-        context: { router: { history } },
-      });
-      wrapper.find('CardCloseButton').simulate('click');
-    });
-    expect(history.location.pathname).toEqual('/projects/123/details');
-  });
-
   test('CardBody cancel button should navigate to project details', async () => {
     const history = createMemoryHistory();
     await act(async () => {

awx/ui_next/src/screens/Team/TeamAdd/TeamAdd.jsx

@@ -1,14 +1,10 @@
 import React from 'react';
 import { withRouter } from 'react-router-dom';
-import { withI18n } from '@lingui/react';
+import { PageSection, Card } from '@patternfly/react-core';
-import { t } from '@lingui/macro';
-import { PageSection, Card, CardHeader, Tooltip } from '@patternfly/react-core';
 
 import { TeamsAPI } from '@api';
 import { Config } from '@contexts/Config';
 import { CardBody } from '@components/Card';
-import CardCloseButton from '@components/CardCloseButton';
-
 import TeamForm from '../shared/TeamForm';
 
 class TeamAdd extends React.Component {
@@ -36,16 +32,10 @@ class TeamAdd extends React.Component {
 
   render() {
     const { error } = this.state;
-    const { i18n } = this.props;
 
     return (
       <PageSection>
         <Card>
-          <CardHeader className="at-u-textRight">
-            <Tooltip content={i18n._(t`Close`)} position="top">
-              <CardCloseButton onClick={this.handleCancel} />
-            </Tooltip>
-          </CardHeader>
           <CardBody>
             <Config>
               {({ me }) => (
@@ -65,4 +55,4 @@ class TeamAdd extends React.Component {
 }
 
 export { TeamAdd as _TeamAdd };
-export default withI18n()(withRouter(TeamAdd));
+export default withRouter(TeamAdd);

awx/ui_next/src/screens/Team/TeamAdd/TeamAdd.test.jsx

@@ -32,17 +32,6 @@ describe('<TeamAdd />', () => {
     expect(history.location.pathname).toEqual('/teams');
   });
 
-  test('should navigate to teams list when close (x) is clicked', async () => {
-    const history = createMemoryHistory({});
-    const wrapper = mountWithContexts(<TeamAdd />, {
-      context: { router: { history } },
-    });
-    await act(async () => {
-      wrapper.find('button[aria-label="Close"]').invoke('onClick')();
-    });
-    expect(history.location.pathname).toEqual('/teams');
-  });
-
   test('successful form submission should trigger redirect', async () => {
     const history = createMemoryHistory({});
     const teamData = {

awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx

@@ -1,15 +1,13 @@
 import React, { useState } from 'react';
-import { withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
-import { withI18n } from '@lingui/react';
+import { Card, PageSection } from '@patternfly/react-core';
-import { t } from '@lingui/macro';
-import { Card, CardHeader, PageSection, Tooltip } from '@patternfly/react-core';
 import { CardBody } from '@components/Card';
-import CardCloseButton from '@components/CardCloseButton';
 import JobTemplateForm from '../shared/JobTemplateForm';
 import { JobTemplatesAPI } from '@api';
 
-function JobTemplateAdd({ history, i18n }) {
+function JobTemplateAdd() {
   const [formSubmitError, setFormSubmitError] = useState(null);
+  const history = useHistory();
 
   async function handleSubmit(values) {
     const {
@@ -71,11 +69,6 @@ function JobTemplateAdd({ history, i18n }) {
   return (
     <PageSection>
       <Card>
-        <CardHeader className="at-u-textRight">
-          <Tooltip content={i18n._(t`Close`)} position="top">
-            <CardCloseButton onClick={handleCancel} />
-          </Tooltip>
-        </CardHeader>
         <CardBody>
           <JobTemplateForm
             handleCancel={handleCancel}
@@ -88,4 +81,4 @@ function JobTemplateAdd({ history, i18n }) {
   );
 }
 
-export default withI18n()(withRouter(JobTemplateAdd));
+export default JobTemplateAdd;

awx/ui_next/src/screens/User/UserAdd/UserAdd.jsx

@@ -1,16 +1,8 @@
 import React, { useState } from 'react';
-import { withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
-import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
 import styled from 'styled-components';
-import {
+import { Card as _Card, PageSection } from '@patternfly/react-core';
-  Card as _Card,
-  CardHeader,
-  PageSection,
-  Tooltip,
-} from '@patternfly/react-core';
 import { CardBody } from '@components/Card';
-import CardCloseButton from '@components/CardCloseButton';
 import UserForm from '../shared/UserForm';
 import { UsersAPI } from '@api';
 
@@ -19,8 +11,9 @@ const Card = styled(_Card)`
   --pf-c-card--child--PaddingRight: 0;
 `;
 
-function UserAdd({ history, i18n }) {
+function UserAdd() {
   const [formSubmitError, setFormSubmitError] = useState(null);
+  const history = useHistory();
 
   const handleSubmit = async values => {
     setFormSubmitError(null);
@@ -41,11 +34,6 @@ function UserAdd({ history, i18n }) {
   return (
     <PageSection>
       <Card>
-        <CardHeader className="at-u-textRight">
-          <Tooltip content={i18n._(t`Close`)} position="top">
-            <CardCloseButton onClick={handleCancel} />
-          </Tooltip>
-        </CardHeader>
         <CardBody>
           <UserForm handleCancel={handleCancel} handleSubmit={handleSubmit} />
         </CardBody>
@@ -59,4 +47,4 @@ function UserAdd({ history, i18n }) {
   );
 }
 
-export default withI18n()(withRouter(UserAdd));
+export default UserAdd;

awx/ui_next/src/screens/User/UserAdd/UserAdd.test.jsx

@@ -42,19 +42,6 @@ describe('<UserAdd />', () => {
     expect(history.location.pathname).toEqual('/users');
   });
 
-  test('should navigate to users list when close (x) is clicked', async () => {
-    const history = createMemoryHistory({});
-    await act(async () => {
-      wrapper = mountWithContexts(<UserAdd />, {
-        context: { router: { history } },
-      });
-    });
-    await act(async () => {
-      wrapper.find('button[aria-label="Close"]').prop('onClick')();
-    });
-    expect(history.location.pathname).toEqual('/users');
-  });
-
   test('successful form submission should trigger redirect', async () => {
     const history = createMemoryHistory({});
     const userData = {