Display details about network errors in alert modal and content error components (#288)

Display details about network errors in alert modal and content error components

src/App.jsx

@@ -17,6 +17,7 @@ import AlertModal from '@components/AlertModal';
 import NavExpandableGroup from '@components/NavExpandableGroup';
 import BrandLogo from '@components/BrandLogo';
 import PageHeaderToolbar from '@components/PageHeaderToolbar';
+import ErrorDetail from '@components/ErrorDetail';
 import { ConfigProvider } from '@contexts/Config';
 
 const PageHeader = styled(PFPageHeader)`
@@ -48,7 +49,7 @@ class App extends Component {
       version: null,
       isAboutModalOpen: false,
       isNavOpen,
-      hasConfigError: false,
+      configError: null
     };
 
     this.handleLogout = this.handleLogout.bind(this);
@@ -81,7 +82,9 @@ class App extends Component {
   }
 
   handleConfigErrorClose () {
-    this.setState({ hasConfigError: false });
+    this.setState({
+      configError: null
+    });
   }
 
   async loadConfig () {
@@ -92,7 +95,7 @@ class App extends Component {
 
       this.setState({ ansible_version, custom_virtualenvs, version, me });
     } catch (err) {
-      this.setState({ hasConfigError: true });
+      this.setState({ configError: err });
     }
   }
 
@@ -104,7 +107,7 @@ class App extends Component {
       isNavOpen,
       me,
       version,
-      hasConfigError,
+      configError
     } = this.state;
     const {
       i18n,
@@ -170,12 +173,13 @@ class App extends Component {
           onClose={this.handleAboutClose}
         />
         <AlertModal
-          isOpen={hasConfigError}
+          isOpen={configError}
           variant="danger"
           title={i18n._(t`Error!`)}
           onClose={this.handleConfigErrorClose}
         >
           {i18n._(t`Failed to retrieve configuration.`)}
+          <ErrorDetail error={configError} />
         </AlertModal>
       </Fragment>
     );

src/components/AlertModal/AlertModal.jsx

@@ -20,9 +20,13 @@ const getIcon = (variant) => {
   return icon;
 };
 
-export default ({ variant, children, ...props }) => (
+export default ({ variant, children, ...props }) => {
-  <Modal className={`awx-c-modal${variant && ` at-c-alertModal at-c-alertModal--${variant}`}`} {...props}>
+  const { isOpen = null } = props;
-    {children}
+  props.isOpen = Boolean(isOpen);
-    {getIcon(variant)}
+  return (
-  </Modal>
+    <Modal className={`awx-c-modal${variant && ` at-c-alertModal at-c-alertModal--${variant}`}`} {...props}>
-);
+      {children}
+      {getIcon(variant)}
+    </Modal>
+  );
+};

src/components/ContentError/ContentError.jsx

@@ -1,26 +1,40 @@
 import React from 'react';
 import { t } from '@lingui/macro';
+import styled from 'styled-components';
 import { withI18n } from '@lingui/react';
 import {
   Title,
-  EmptyState,
+  EmptyState as PFEmptyState,
   EmptyStateIcon,
   EmptyStateBody
 } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 
-// TODO: Pass actual error as prop and display expandable details for network errors.
+import ErrorDetail from '@components/ErrorDetail';
-const ContentError = ({ i18n }) => (
+
-  <EmptyState>
+const EmptyState = styled(PFEmptyState)`
-    <EmptyStateIcon icon={ExclamationTriangleIcon} />
+  width: var(--pf-c-empty-state--m-lg--MaxWidth);
-    <Title size="lg">
+`;
-      {i18n._(t`Something went wrong...`)}
+
-    </Title>
+class ContentError extends React.Component {
-    <EmptyStateBody>
+  render () {
-      {i18n._(t`There was an error loading this content. Please reload the page.`)}
+    const { error, i18n } = this.props;
-    </EmptyStateBody>
+    return (
-  </EmptyState>
+      <EmptyState>
-);
+        <EmptyStateIcon icon={ExclamationTriangleIcon} />
+        <Title size="lg">
+          {i18n._(t`Something went wrong...`)}
+        </Title>
+        <EmptyStateBody>
+          {i18n._(t`There was an error loading this content. Please reload the page.`)}
+        </EmptyStateBody>
+        {error && (
+          <ErrorDetail error={error} />
+        )}
+      </EmptyState>
+    );
+  }
+}
 
 export { ContentError as _ContentError };
 export default withI18n()(ContentError);

src/components/ContentError/ContentError.test.jsx

@@ -5,7 +5,15 @@ import ContentError from './ContentError';
 
 describe('ContentError', () => {
   test('renders the expected content', () => {
-    const wrapper = mountWithContexts(<ContentError />);
+    const wrapper = mountWithContexts(<ContentError error={new Error({
+      response: {
+        config: {
+          method: 'post'
+        },
+        data: 'An error occurred',
+      }
+    })}
+    />);
     expect(wrapper).toHaveLength(1);
   });
 });

src/components/ErrorDetail/ErrorDetail.jsx

@@ -0,0 +1,95 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+
+import {
+  Card as PFCard,
+  CardBody as PFCardBody,
+  Expandable as PFExpandable
+} from '@patternfly/react-core';
+
+const Card = styled(PFCard)`
+  background-color: var(--pf-global--BackgroundColor--200);
+  overflow-wrap: break-word;
+`;
+
+const CardBody = styled(PFCardBody)`
+  max-height: 200px;
+  overflow: scroll;
+`;
+
+const Expandable = styled(PFExpandable)`
+  text-align: left;
+`;
+
+class ErrorDetail extends Component {
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      isExpanded: false
+    };
+
+    this.handleToggle = this.handleToggle.bind(this);
+    this.renderNetworkError = this.renderNetworkError.bind(this);
+    this.renderStack = this.renderStack.bind(this);
+  }
+
+  handleToggle () {
+    const { isExpanded } = this.state;
+    this.setState({ isExpanded: !isExpanded });
+  }
+
+  renderNetworkError () {
+    const { error } = this.props;
+    const { response } = error;
+
+    const message = typeof response.data === 'string'
+      ? response.data
+      : response.data.detail;
+
+    return (
+      <Fragment>
+        <CardBody>
+          {response.config.method.toUpperCase()}
+          {' '}
+          {response.config.url}
+          {' '}
+          <strong>
+            {response.status}
+          </strong>
+        </CardBody>
+        <CardBody>{message}</CardBody>
+      </Fragment>
+    );
+  }
+
+  renderStack () {
+    const { error } = this.props;
+    return (<CardBody>{error.stack}</CardBody>);
+  }
+
+  render () {
+    const { isExpanded } = this.state;
+    const { error, i18n } = this.props;
+
+    return (
+      <Expandable toggleText={i18n._(t`Details`)} onToggle={this.handleToggle} isExpanded={isExpanded}>
+        <Card>
+          {Object.prototype.hasOwnProperty.call(error, 'response')
+            ? this.renderNetworkError()
+            : this.renderStack()
+          }
+        </Card>
+      </Expandable>
+    );
+  }
+}
+
+ErrorDetail.propTypes = {
+  error: PropTypes.instanceOf(Error).isRequired
+};
+
+export default withI18n()(ErrorDetail);

src/components/ErrorDetail/ErrorDetail.test.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+
+import ErrorDetail from './ErrorDetail';
+
+describe('ErrorDetail', () => {
+  test('renders the expected content', () => {
+    const wrapper = mountWithContexts(<ErrorDetail error={new Error({
+      response: {
+        config: {
+          method: 'post'
+        },
+        data: 'An error occurred'
+      }
+    })}
+    />);
+    expect(wrapper).toHaveLength(1);
+  });
+});

src/components/ErrorDetail/index.js

@@ -0,0 +1 @@
+export { default } from './ErrorDetail';

src/components/LaunchButton/LaunchButton.jsx

@@ -8,6 +8,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 
 import AlertModal from '@components/AlertModal';
+import ErrorDetail from '@components/ErrorDetail';
 import { JobTemplatesAPI } from '@api';
 
 const StyledLaunchButton = styled(Button)`
@@ -28,7 +29,7 @@ class LaunchButton extends React.Component {
     super(props);
 
     this.state = {
-      launchError: false,
+      launchError: null,
       promptError: false
     };
 
@@ -38,7 +39,7 @@ class LaunchButton extends React.Component {
   }
 
   handleLaunchErrorClose () {
-    this.setState({ launchError: false });
+    this.setState({ launchError: null });
   }
 
   handlePromptErrorClose () {
@@ -55,8 +56,8 @@ class LaunchButton extends React.Component {
       } else {
         this.setState({ promptError: true });
       }
-    } catch (error) {
+    } catch (err) {
-      this.setState({ launchError: true });
+      this.setState({ launchError: err });
     }
   }
 
@@ -89,6 +90,7 @@ class LaunchButton extends React.Component {
           onClose={this.handleLaunchErrorClose}
         >
           {i18n._(t`Failed to launch job.`)}
+          <ErrorDetail error={launchError} />
         </AlertModal>
         <AlertModal
           isOpen={promptError}

src/components/LaunchButton/LaunchButton.test.jsx

@@ -43,7 +43,16 @@ describe('LaunchButton', () => {
     done();
   });
   test('displays error modal after unsuccessful launch', async (done) => {
-    JobTemplatesAPI.launch.mockRejectedValue({});
+    JobTemplatesAPI.launch.mockRejectedValue(new Error({
+      response: {
+        config: {
+          method: 'post',
+          url: '/api/v2/job_templates/1/launch'
+        },
+        data: 'An error occurred',
+        status: 403
+      }
+    }));
     const wrapper = mountWithContexts(<LaunchButton templateId={1} />);
     const launchButton = wrapper.find('LaunchButton__StyledLaunchButton');
     launchButton.simulate('click');

src/components/PaginatedDataList/PaginatedDataList.jsx

@@ -72,7 +72,7 @@ class PaginatedDataList extends React.Component {
   render () {
     const [orderBy, sortOrder] = this.getSortOrder();
     const {
-      hasContentError,
+      contentError,
       hasContentLoading,
       emptyStateControls,
       items,
@@ -100,8 +100,8 @@ class PaginatedDataList extends React.Component {
     let Content;
     if (hasContentLoading && items.length <= 0) {
       Content = (<ContentLoading />);
-    } else if (hasContentError) {
+    } else if (contentError) {
-      Content = (<ContentError />);
+      Content = (<ContentError error={contentError} />);
     } else if (items.length <= 0) {
       Content = (<ContentEmpty title={emptyContentTitle} message={emptyContentMessage} />);
     } else {
@@ -174,12 +174,12 @@ PaginatedDataList.propTypes = {
   showPageSizeOptions: PropTypes.bool,
   renderToolbar: PropTypes.func,
   hasContentLoading: PropTypes.bool,
-  hasContentError: PropTypes.bool,
+  contentError: PropTypes.shape(),
 };
 
 PaginatedDataList.defaultProps = {
   hasContentLoading: false,
-  hasContentError: false,
+  contentError: null,
   toolbarColumns: [],
   itemName: 'item',
   itemNamePlural: '',

src/screens/Job/Job.jsx

@@ -19,7 +19,7 @@ class Job extends Component {
 
     this.state = {
       job: null,
-      hasContentError: false,
+      contentError: null,
       hasContentLoading: true,
       isInitialized: false
     };
@@ -46,13 +46,13 @@ class Job extends Component {
     } = this.props;
     const id = parseInt(match.params.id, 10);
 
-    this.setState({ hasContentError: false, hasContentLoading: true });
+    this.setState({ contentError: null, hasContentLoading: true });
     try {
       const { data } = await JobsAPI.readDetail(id);
       setBreadcrumb(data);
       this.setState({ job: data });
-    } catch (error) {
+    } catch (err) {
-      this.setState({ hasContentError: true });
+      this.setState({ contentError: err });
     } finally {
       this.setState({ hasContentLoading: false });
     }
@@ -67,7 +67,7 @@ class Job extends Component {
 
     const {
       job,
-      hasContentError,
+      contentError,
       hasContentLoading,
       isInitialized
     } = this.state;
@@ -103,11 +103,11 @@ class Job extends Component {
       cardHeader = null;
     }
 
-    if (!hasContentLoading && hasContentError) {
+    if (!hasContentLoading && contentError) {
       return (
         <PageSection>
           <Card className="awx-c-card">
-            <ContentError />
+            <ContentError error={contentError} />
           </Card>
         </PageSection>
       );

src/screens/Job/JobList/JobList.jsx

@@ -11,6 +11,7 @@ import {
 import { UnifiedJobsAPI } from '@api';
 import AlertModal from '@components/AlertModal';
 import DatalistToolbar from '@components/DataListToolbar';
+import ErrorDetail from '@components/ErrorDetail';
 import PaginatedDataList, {
   ToolbarDeleteButton
 } from '@components/PaginatedDataList';
@@ -31,8 +32,8 @@ class JobList extends Component {
 
     this.state = {
       hasContentLoading: true,
-      hasContentError: false,
+      contentError: null,
-      hasDeletionError: false,
+      deletionError: null,
       selected: [],
       jobs: [],
       itemCount: 0,
@@ -56,7 +57,7 @@ class JobList extends Component {
   }
 
   handleDeleteErrorClose () {
-    this.setState({ hasDeletionError: false });
+    this.setState({ deletionError: null });
   }
 
   handleSelectAll (isSelected) {
@@ -76,11 +77,11 @@ class JobList extends Component {
 
   async handleDelete () {
     const { selected } = this.state;
-    this.setState({ hasContentLoading: true, hasDeletionError: false });
+    this.setState({ hasContentLoading: true });
     try {
       await Promise.all(selected.map(({ id }) => UnifiedJobsAPI.destroy(id)));
     } catch (err) {
-      this.setState({ hasDeletionError: true });
+      this.setState({ deletionError: err });
     } finally {
       await this.loadJobs();
     }
@@ -90,7 +91,7 @@ class JobList extends Component {
     const { location } = this.props;
     const params = parseNamespacedQueryString(QS_CONFIG, location.search);
 
-    this.setState({ hasContentError: false, hasContentLoading: true });
+    this.setState({ contentError: null, hasContentLoading: true });
     try {
       const { data: { count, results } } = await UnifiedJobsAPI.read(params);
       this.setState({
@@ -99,7 +100,7 @@ class JobList extends Component {
         selected: [],
       });
     } catch (err) {
-      this.setState({ hasContentError: true });
+      this.setState({ contentError: err });
     } finally {
       this.setState({ hasContentLoading: false });
     }
@@ -107,9 +108,9 @@ class JobList extends Component {
 
   render () {
     const {
-      hasContentError,
+      contentError,
       hasContentLoading,
-      hasDeletionError,
+      deletionError,
       jobs,
       itemCount,
       selected,
@@ -125,7 +126,7 @@ class JobList extends Component {
       <PageSection variant={medium}>
         <Card>
           <PaginatedDataList
-            hasContentError={hasContentError}
+            contentError={contentError}
             hasContentLoading={hasContentLoading}
             items={jobs}
             itemCount={itemCount}
@@ -166,12 +167,13 @@ class JobList extends Component {
           />
         </Card>
         <AlertModal
-          isOpen={hasDeletionError}
+          isOpen={deletionError}
           variant="danger"
           title={i18n._(t`Error!`)}
           onClose={this.handleDeleteErrorClose}
         >
           {i18n._(t`Failed to delete one or more jobs.`)}
+          <ErrorDetail error={deletionError} />
         </AlertModal>
       </PageSection>
     );

src/screens/Organization/Organization.jsx

@@ -21,7 +21,7 @@ class Organization extends Component {
     this.state = {
       organization: null,
       hasContentLoading: true,
-      hasContentError: false,
+      contentError: null,
       isInitialized: false,
       isNotifAdmin: false,
       isAuditorOfThisOrg: false,
@@ -50,7 +50,7 @@ class Organization extends Component {
     } = this.props;
     const id = parseInt(match.params.id, 10);
 
-    this.setState({ hasContentError: false, hasContentLoading: true });
+    this.setState({ contentError: null, hasContentLoading: true });
     try {
       const [{ data }, notifAdminRes, auditorRes, adminRes] = await Promise.all([
         OrganizationsAPI.readDetail(id),
@@ -66,7 +66,7 @@ class Organization extends Component {
         isAdminOfThisOrg: adminRes.data.results.length > 0
       });
     } catch (err) {
-      this.setState(({ hasContentError: true }));
+      this.setState(({ contentError: err }));
     } finally {
       this.setState({ hasContentLoading: false });
     }
@@ -79,13 +79,13 @@ class Organization extends Component {
     } = this.props;
     const id = parseInt(match.params.id, 10);
 
-    this.setState({ hasContentError: false, hasContentLoading: true });
+    this.setState({ contentError: null, hasContentLoading: true });
     try {
       const { data } = await OrganizationsAPI.readDetail(id);
       setBreadcrumb(data);
       this.setState({ organization: data });
     } catch (err) {
-      this.setState(({ hasContentError: true }));
+      this.setState(({ contentError: err }));
     } finally {
       this.setState({ hasContentLoading: false });
     }
@@ -102,7 +102,7 @@ class Organization extends Component {
 
     const {
       organization,
-      hasContentError,
+      contentError,
       hasContentLoading,
       isInitialized,
       isNotifAdmin,
@@ -162,11 +162,11 @@ class Organization extends Component {
       cardHeader = null;
     }
 
-    if (!hasContentLoading && hasContentError) {
+    if (!hasContentLoading && contentError) {
       return (
         <PageSection>
           <Card className="awx-c-card">
-            <ContentError />
+            <ContentError error={contentError} />
           </Card>
         </PageSection>
       );

src/screens/Organization/OrganizationAccess/OrganizationAccess.jsx

@@ -7,6 +7,7 @@ import { OrganizationsAPI, TeamsAPI, UsersAPI } from '@api';
 import AddResourceRole from '@components/AddRole/AddResourceRole';
 import AlertModal from '@components/AlertModal';
 import DataListToolbar from '@components/DataListToolbar';
+import ErrorDetail from '@components/ErrorDetail';
 import PaginatedDataList, { ToolbarAddButton } from '@components/PaginatedDataList';
 import {
   getQSConfig,
@@ -33,9 +34,9 @@ class OrganizationAccess extends React.Component {
     super(props);
     this.state = {
       accessRecords: [],
-      hasContentError: false,
+      contentError: null,
       hasContentLoading: true,
-      hasDeletionError: false,
+      deletionError: null,
       deletionRecord: null,
       deletionRole: null,
       isAddModalOpen: false,
@@ -70,7 +71,7 @@ class OrganizationAccess extends React.Component {
     const { organization, location } = this.props;
     const params = parseNamespacedQueryString(QS_CONFIG, location.search);
 
-    this.setState({ hasContentError: false, hasContentLoading: true });
+    this.setState({ contentError: null, hasContentLoading: true });
     try {
       const {
         data: {
@@ -79,8 +80,8 @@ class OrganizationAccess extends React.Component {
         }
       } = await OrganizationsAPI.readAccessList(organization.id, params);
       this.setState({ itemCount, accessRecords });
-    } catch (error) {
+    } catch (err) {
-      this.setState({ hasContentError: true });
+      this.setState({ contentError: err });
     } finally {
       this.setState({ hasContentLoading: false });
     }
@@ -96,7 +97,7 @@ class OrganizationAccess extends React.Component {
 
   handleDeleteErrorClose () {
     this.setState({
-      hasDeletionError: false,
+      deletionError: null,
       deletionRecord: null,
       deletionRole: null
     });
@@ -123,10 +124,10 @@ class OrganizationAccess extends React.Component {
         deletionRole: null,
         deletionRecord: null
       });
-    } catch (error) {
+    } catch (err) {
       this.setState({
         hasContentLoading: false,
-        hasDeletionError: true
+        deletionError: err
       });
     }
   }
@@ -148,21 +149,21 @@ class OrganizationAccess extends React.Component {
     const { organization, i18n } = this.props;
     const {
       accessRecords,
-      hasContentError,
+      contentError,
       hasContentLoading,
       deletionRole,
       deletionRecord,
-      hasDeletionError,
+      deletionError,
       itemCount,
-      isAddModalOpen,
+      isAddModalOpen
     } = this.state;
     const canEdit = organization.summary_fields.user_capabilities.edit;
-    const isDeleteModalOpen = !hasContentLoading && !hasDeletionError && deletionRole;
+    const isDeleteModalOpen = !hasContentLoading && !deletionError && deletionRole;
 
     return (
       <Fragment>
         <PaginatedDataList
-          hasContentError={hasContentError}
+          error={contentError}
           hasContentLoading={hasContentLoading}
           items={accessRecords}
           itemCount={itemCount}
@@ -205,12 +206,13 @@ class OrganizationAccess extends React.Component {
           />
         )}
         <AlertModal
-          isOpen={hasDeletionError}
+          isOpen={deletionError}
           variant="danger"
           title={i18n._(t`Error!`)}
           onClose={this.handleDeleteErrorClose}
         >
           {i18n._(t`Failed to delete role`)}
+          <ErrorDetail error={deletionError} />
         </AlertModal>
       </Fragment>
     );

src/screens/Organization/OrganizationAccess/OrganizationAccess.test.jsx

@@ -84,7 +84,7 @@ describe('<OrganizationAccess />', () => {
     await waitForElement(wrapper, 'OrganizationAccessItem', el => el.length === 2);
     expect(wrapper.find('PaginatedDataList').prop('items')).toEqual(data.results);
     expect(wrapper.find('OrganizationAccess').state('hasContentLoading')).toBe(false);
-    expect(wrapper.find('OrganizationAccess').state('hasContentError')).toBe(false);
+    expect(wrapper.find('OrganizationAccess').state('contentError')).toBe(null);
     done();
   });
 

src/screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccess.test.jsx.snap

@@ -34,7 +34,7 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
   }
 >
   <WithI18n
-    hasContentError={false}
+    error={null}
     hasContentLoading={true}
     itemCount={0}
     itemName="role"
@@ -80,7 +80,7 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
       withHash={true}
     >
       <withRouter(PaginatedDataList)
-        hasContentError={false}
+        error={null}
         hasContentLoading={true}
         i18n={"/i18n/"}
         itemCount={0}
@@ -124,7 +124,8 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
       >
         <Route>
           <PaginatedDataList
-            hasContentError={false}
+            contentError={null}
+            error={null}
             hasContentLoading={true}
             history={"/history/"}
             i18n={"/i18n/"}
@@ -220,7 +221,7 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
     </I18n>
   </WithI18n>
   <_default
-    isOpen={false}
+    isOpen={null}
     onClose={[Function]}
     title="Error!"
     variant="danger"

src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx

@@ -20,7 +20,7 @@ class OrganizationDetail extends Component {
     super(props);
 
     this.state = {
-      hasContentError: false,
+      contentError: null,
       hasContentLoading: true,
       instanceGroups: [],
     };
@@ -39,7 +39,7 @@ class OrganizationDetail extends Component {
       const { data: { results = [] } } = await OrganizationsAPI.readInstanceGroups(id);
       this.setState({ instanceGroups: [...results] });
     } catch (err) {
-      this.setState({ hasContentError: true });
+      this.setState({ contentError: err });
     } finally {
       this.setState({ hasContentLoading: false });
     }
@@ -48,7 +48,7 @@ class OrganizationDetail extends Component {
   render () {
     const {
       hasContentLoading,
-      hasContentError,
+      contentError,
       instanceGroups,
     } = this.state;
 
@@ -70,8 +70,8 @@ class OrganizationDetail extends Component {
       return (<ContentLoading />);
     }
 
-    if (hasContentError) {
+    if (contentError) {
-      return (<ContentError />);
+      return (<ContentError error={contentError} />);
     }
 
     return (

src/screens/Organization/OrganizationList/OrganizationList.jsx

@@ -11,6 +11,7 @@ import {
 import { OrganizationsAPI } from '@api';
 import AlertModal from '@components/AlertModal';
 import DataListToolbar from '@components/DataListToolbar';
+import ErrorDetail from '@components/ErrorDetail';
 import PaginatedDataList, {
   ToolbarAddButton,
   ToolbarDeleteButton,
@@ -31,8 +32,8 @@ class OrganizationsList extends Component {
 
     this.state = {
       hasContentLoading: true,
-      hasContentError: false,
+      contentError: null,
-      hasDeletionError: false,
+      deletionError: null,
       organizations: [],
       selected: [],
       itemCount: 0,
@@ -75,17 +76,17 @@ class OrganizationsList extends Component {
   }
 
   handleDeleteErrorClose () {
-    this.setState({ hasDeletionError: false });
+    this.setState({ deletionError: null });
   }
 
   async handleOrgDelete () {
     const { selected } = this.state;
 
-    this.setState({ hasContentLoading: true, hasDeletionError: false });
+    this.setState({ hasContentLoading: true });
     try {
       await Promise.all(selected.map((org) => OrganizationsAPI.destroy(org.id)));
     } catch (err) {
-      this.setState({ hasDeletionError: true });
+      this.setState({ deletionError: err });
     } finally {
       await this.loadOrganizations();
     }
@@ -108,7 +109,7 @@ class OrganizationsList extends Component {
       optionsPromise,
     ]);
 
-    this.setState({ hasContentError: false, hasContentLoading: true });
+    this.setState({ contentError: null, hasContentLoading: true });
     try {
       const [{ data: { count, results } }, { data: { actions } }] = await promises;
       this.setState({
@@ -118,7 +119,7 @@ class OrganizationsList extends Component {
         selected: [],
       });
     } catch (err) {
-      this.setState(({ hasContentError: true }));
+      this.setState(({ contentError: err }));
     } finally {
       this.setState({ hasContentLoading: false });
     }
@@ -131,9 +132,9 @@ class OrganizationsList extends Component {
     const {
       actions,
       itemCount,
-      hasContentError,
+      contentError,
       hasContentLoading,
-      hasDeletionError,
+      deletionError,
       selected,
       organizations,
     } = this.state;
@@ -147,7 +148,7 @@ class OrganizationsList extends Component {
         <PageSection variant={medium}>
           <Card>
             <PaginatedDataList
-              hasContentError={hasContentError}
+              contentError={contentError}
               hasContentLoading={hasContentLoading}
               items={organizations}
               itemCount={itemCount}
@@ -194,12 +195,13 @@ class OrganizationsList extends Component {
           </Card>
         </PageSection>
         <AlertModal
-          isOpen={hasDeletionError}
+          isOpen={deletionError}
           variant="danger"
           title={i18n._(t`Error!`)}
           onClose={this.handleDeleteErrorClose}
         >
           {i18n._(t`Failed to delete one or more organizations.`)}
+          <ErrorDetail error={deletionError} />
         </AlertModal>
       </Fragment>
     );

src/screens/Organization/OrganizationList/OrganizationList.test.jsx

@@ -60,6 +60,20 @@ const mockAPIOrgsList = {
 describe('<OrganizationsList />', () => {
   let wrapper;
 
+  beforeEach(() => {
+    OrganizationsAPI.read = () => Promise.resolve({
+      data: {
+        count: 0,
+        results: []
+      }
+    });
+    OrganizationsAPI.readOptions = () => Promise.resolve({
+      data: {
+        actions: []
+      }
+    });
+  });
+
   test('initially renders succesfully', () => {
     mountWithContexts(<OrganizationsList />);
   });
@@ -122,8 +136,17 @@ describe('<OrganizationsList />', () => {
     expect(fetchOrgs).toBeCalled();
   });
 
-  test('error is shown when org not successfully deleted from api', async () => {
+  test('error is shown when org not successfully deleted from api', async (done) => {
-    OrganizationsAPI.destroy = () => Promise.reject();
+    OrganizationsAPI.destroy.mockRejectedValue(new Error({
+      response: {
+        config: {
+          method: 'delete',
+          url: '/api/v2/organizations/1'
+        },
+        data: 'An error occurred'
+      }
+    }));
+
     wrapper = mountWithContexts(<OrganizationsList />);
     wrapper.find('OrganizationsList').setState({
       organizations: mockAPIOrgsList.data.results,
@@ -133,5 +156,6 @@ describe('<OrganizationsList />', () => {
     });
     wrapper.find('ToolbarDeleteButton').prop('onDelete')();
     await waitForElement(wrapper, 'Modal', (el) => el.props().isOpen === true && el.props().title === 'Error!');
+    done();
   });
 });

src/screens/Organization/OrganizationNotifications/OrganizationNotifications.jsx

@@ -6,6 +6,7 @@ import { t } from '@lingui/macro';
 
 import { OrganizationsAPI } from '@api';
 import AlertModal from '@components/AlertModal';
+import ErrorDetail from '@components/ErrorDetail';
 import NotificationListItem from '@components/NotificationsList/NotificationListItem';
 import PaginatedDataList from '@components/PaginatedDataList';
 import { getQSConfig, parseNamespacedQueryString } from '@util/qs';
@@ -26,9 +27,9 @@ class OrganizationNotifications extends Component {
   constructor (props) {
     super(props);
     this.state = {
-      hasContentError: false,
+      contentError: null,
       hasContentLoading: true,
-      toggleError: false,
+      toggleError: null,
       toggleLoading: false,
       itemCount: 0,
       notifications: [],
@@ -55,7 +56,7 @@ class OrganizationNotifications extends Component {
     const { id, location } = this.props;
     const params = parseNamespacedQueryString(QS_CONFIG, location.search);
 
-    this.setState({ hasContentError: false, hasContentLoading: true });
+    this.setState({ contentError: null, hasContentLoading: true });
     try {
       const {
         data: {
@@ -85,8 +86,8 @@ class OrganizationNotifications extends Component {
         successTemplateIds: successTemplates.results.map(s => s.id),
         errorTemplateIds: errorTemplates.results.map(e => e.id),
       });
-    } catch {
+    } catch (err) {
-      this.setState({ hasContentError: true });
+      this.setState({ contentError: err });
     } finally {
       this.setState({ hasContentLoading: false });
     }
@@ -125,20 +126,20 @@ class OrganizationNotifications extends Component {
       );
       this.setState(stateUpdateFunction);
     } catch (err) {
-      this.setState({ toggleError: true });
+      this.setState({ toggleError: err });
     } finally {
       this.setState({ toggleLoading: false });
     }
   }
 
   handleNotificationErrorClose () {
-    this.setState({ toggleError: false });
+    this.setState({ toggleError: null });
   }
 
   render () {
     const { canToggleNotifications, i18n } = this.props;
     const {
-      hasContentError,
+      contentError,
       hasContentLoading,
       toggleError,
       toggleLoading,
@@ -151,7 +152,7 @@ class OrganizationNotifications extends Component {
     return (
       <Fragment>
         <PaginatedDataList
-          hasContentError={hasContentError}
+          contentError={contentError}
           hasContentLoading={hasContentLoading}
           items={notifications}
           itemCount={itemCount}
@@ -171,12 +172,13 @@ class OrganizationNotifications extends Component {
           )}
         />
         <AlertModal
+          isOpen={toggleError}
           variant="danger"
           title={i18n._(t`Error!`)}
-          isOpen={toggleError && !toggleLoading}
           onClose={this.handleNotificationErrorClose}
         >
           {i18n._(t`Failed to toggle notification.`)}
+          <ErrorDetail error={toggleError} />
         </AlertModal>
       </Fragment>
     );

src/screens/Organization/OrganizationNotifications/__snapshots__/OrganizationNotifications.test.jsx.snap

@@ -39,7 +39,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
             }
           >
             <WithI18n
-              hasContentError={false}
+              contentError={null}
               hasContentLoading={false}
               itemCount={2}
               itemName="notification"
@@ -101,7 +101,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                 withHash={true}
               >
                 <withRouter(PaginatedDataList)
-                  hasContentError={false}
+                  contentError={null}
                   hasContentLoading={false}
                   i18n={"/i18n/"}
                   itemCount={2}
@@ -161,7 +161,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                 >
                   <Route>
                     <PaginatedDataList
-                      hasContentError={false}
+                      contentError={null}
                       hasContentLoading={false}
                       history={"/history/"}
                       i18n={"/i18n/"}
@@ -3295,7 +3295,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
               </I18n>
             </WithI18n>
             <_default
-              isOpen={false}
+              isOpen={null}
               onClose={[Function]}
               title="Error!"
               variant="danger"

src/screens/Organization/OrganizationTeams/OrganizationTeams.jsx

@@ -19,7 +19,7 @@ class OrganizationTeams extends React.Component {
     this.loadOrganizationTeamsList = this.loadOrganizationTeamsList.bind(this);
 
     this.state = {
-      hasContentError: false,
+      contentError: null,
       hasContentLoading: true,
       itemCount: 0,
       teams: [],
@@ -41,7 +41,7 @@ class OrganizationTeams extends React.Component {
     const { id, location } = this.props;
     const params = parseNamespacedQueryString(QS_CONFIG, location.search);
 
-    this.setState({ hasContentLoading: true, hasContentError: false });
+    this.setState({ hasContentLoading: true, contentError: null });
     try {
       const {
         data: { count = 0, results = [] },
@@ -50,18 +50,18 @@ class OrganizationTeams extends React.Component {
         itemCount: count,
         teams: results,
       });
-    } catch {
+    } catch (err) {
-      this.setState({ hasContentError: true });
+      this.setState({ contentError: err });
     } finally {
       this.setState({ hasContentLoading: false });
     }
   }
 
   render () {
-    const { hasContentError, hasContentLoading, teams, itemCount } = this.state;
+    const { contentError, hasContentLoading, teams, itemCount } = this.state;
     return (
       <PaginatedDataList
-        hasContentError={hasContentError}
+        contentError={contentError}
         hasContentLoading={hasContentLoading}
         items={teams}
         itemCount={itemCount}

src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx

@@ -24,7 +24,7 @@ class JobTemplateDetail extends Component {
   constructor (props) {
     super(props);
     this.state = {
-      contentError: false,
+      contentError: null,
       hasContentLoading: true,
       instanceGroups: []
     };
@@ -40,8 +40,8 @@ class JobTemplateDetail extends Component {
     try {
       const { data } = await JobTemplatesAPI.readInstanceGroups(match.params.id);
       this.setState({ instanceGroups: [...data.results] });
-    } catch {
+    } catch (err) {
-      this.setState({ contentError: true });
+      this.setState({ contentError: err });
     } finally {
       this.setState({ hasContentLoading: false });
     }
@@ -131,7 +131,7 @@ class JobTemplateDetail extends Component {
     );
 
     if (contentError) {
-      return (<ContentError />);
+      return (<ContentError error={contentError} />);
     }
 
     if (hasContentLoading) {

src/screens/Template/Template.jsx

@@ -24,7 +24,7 @@ class Template extends Component {
     super(props);
 
     this.state = {
-      hasContentError: false,
+      contentError: null,
       hasContentLoading: true,
       template: null,
     };
@@ -46,15 +46,13 @@ class Template extends Component {
     const { setBreadcrumb, match } = this.props;
     const { id } = match.params;
 
-    this.setState({ hasContentError: false, hasContentLoading: true });
+    this.setState({ contentError: null, hasContentLoading: true });
     try {
       const { data } = await JobTemplatesAPI.readDetail(id);
       setBreadcrumb(data);
-      this.setState({
+      this.setState({ template: data });
-        template: data,
+    } catch (err) {
-      });
+      this.setState({ contentError: err });
-    } catch {
-      this.setState({ hasContentError: true });
     } finally {
       this.setState({ hasContentLoading: false });
     }
@@ -68,7 +66,7 @@ class Template extends Component {
       match,
     } = this.props;
     const {
-      hasContentError,
+      contentError,
       hasContentLoading,
       template
     } = this.state;
@@ -98,11 +96,11 @@ class Template extends Component {
       cardHeader = null;
     }
 
-    if (!hasContentLoading && hasContentError) {
+    if (!hasContentLoading && contentError) {
       return (
         <PageSection>
           <Card className="awx-c-card">
-            <ContentError />
+            <ContentError error={contentError} />
           </Card>
         </PageSection>
       );

src/screens/Template/TemplateList/TemplateList.jsx

@@ -15,6 +15,7 @@ import {
 } from '@api';
 import AlertModal from '@components/AlertModal';
 import DatalistToolbar from '@components/DataListToolbar';
+import ErrorDetail from '@components/ErrorDetail';
 import PaginatedDataList, {
   ToolbarDeleteButton
 } from '@components/PaginatedDataList';
@@ -37,8 +38,8 @@ class TemplatesList extends Component {
 
     this.state = {
       hasContentLoading: true,
-      hasContentError: false,
+      contentError: null,
-      hasDeletionError: false,
+      deletionError: null,
       selected: [],
       templates: [],
       itemCount: 0,
@@ -62,7 +63,7 @@ class TemplatesList extends Component {
   }
 
   handleDeleteErrorClose () {
-    this.setState({ hasDeletionError: false });
+    this.setState({ deletionError: null });
   }
 
   handleSelectAll (isSelected) {
@@ -83,7 +84,7 @@ class TemplatesList extends Component {
   async handleTemplateDelete () {
     const { selected } = this.state;
 
-    this.setState({ hasContentLoading: true, hasDeletionError: false });
+    this.setState({ hasContentLoading: true });
     try {
       await Promise.all(selected.map(({ type, id }) => {
         let deletePromise;
@@ -95,7 +96,7 @@ class TemplatesList extends Component {
         return deletePromise;
       }));
     } catch (err) {
-      this.setState({ hasDeletionError: true });
+      this.setState({ deletionError: err });
     } finally {
       await this.loadTemplates();
     }
@@ -105,7 +106,7 @@ class TemplatesList extends Component {
     const { location } = this.props;
     const params = parseNamespacedQueryString(QS_CONFIG, location.search);
 
-    this.setState({ hasContentError: false, hasContentLoading: true });
+    this.setState({ contentError: null, hasContentLoading: true });
     try {
       const { data: { count, results } } = await UnifiedJobTemplatesAPI.read(params);
       this.setState({
@@ -114,7 +115,7 @@ class TemplatesList extends Component {
         selected: [],
       });
     } catch (err) {
-      this.setState({ hasContentError: true });
+      this.setState({ contentError: err });
     } finally {
       this.setState({ hasContentLoading: false });
     }
@@ -122,9 +123,9 @@ class TemplatesList extends Component {
 
   render () {
     const {
-      hasContentError,
+      contentError,
       hasContentLoading,
-      hasDeletionError,
+      deletionError,
       templates,
       itemCount,
       selected,
@@ -139,7 +140,7 @@ class TemplatesList extends Component {
       <PageSection variant={medium}>
         <Card>
           <PaginatedDataList
-            hasContentError={hasContentError}
+            error={contentError}
             hasContentLoading={hasContentLoading}
             items={templates}
             itemCount={itemCount}
@@ -180,12 +181,13 @@ class TemplatesList extends Component {
           />
         </Card>
         <AlertModal
-          isOpen={hasDeletionError}
+          isOpen={deletionError}
           variant="danger"
           title={i18n._(t`Error!`)}
           onClose={this.handleDeleteErrorClose}
         >
           {i18n._(t`Failed to delete one or more template.`)}
+          <ErrorDetail error={deletionError} />
         </AlertModal>
       </PageSection>
     );

src/screens/Template/TemplateList/TemplatesList.test.jsx

@@ -151,7 +151,15 @@ describe('<TemplatesList />', () => {
   });
 
   test('error is shown when template not successfully deleted from api', async () => {
-    JobTemplatesAPI.destroy = () => Promise.reject();
+    JobTemplatesAPI.destroy.mockRejectedValue(new Error({
+      response: {
+        config: {
+          method: 'delete',
+          url: '/api/v2/job_templates/1'
+        },
+        data: 'An error occurred'
+      }
+    }));
     const wrapper = mountWithContexts(<TemplatesList />);
     wrapper.find('TemplatesList').setState({
       templates: mockTemplates,