Changed post to create in api.js. Removed capitalize text component in favor of css solution. Updates to empty list contents. Fixes padding on notifications list

__tests__/components/CapitalizeText.test.jsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import CapitalizeText from '../../src/components/CapitalizeText';
-
-describe('<CapitalizeText />', () => {
-  let capitalizeTextWrapper;
-
-  test('initially renders without crashing', () => {
-    capitalizeTextWrapper = mount(
-      <CapitalizeText text="foo" />
-    );
-    expect(capitalizeTextWrapper.length).toBe(1);
-    expect(capitalizeTextWrapper.text()).toEqual('Foo');
-    capitalizeTextWrapper.unmount();
-  });
-});

src/api.js

@@ -88,18 +88,18 @@ class APIClient {
     return this.http.get(endpoint, { params });
   }
 
-  postOrganizationNotificationSuccess (id, data) {
+  createOrganizationNotificationSuccess (id, data) {
     const endpoint = `${API_ORGANIZATIONS}${id}/notification_templates_success/`;
 
     return this.http.post(endpoint, data);
   }
 
-  postOrganizationNotificationError (id, data) {
+  createOrganizationNotificationError (id, data) {
     const endpoint = `${API_ORGANIZATIONS}${id}/notification_templates_error/`;
 
     return this.http.post(endpoint, data);
   }
-  
+
   getInstanceGroups () {
     return this.http.get(API_INSTANCE_GROUPS);
   }

src/app.scss

@@ -158,6 +158,16 @@
   border-top: 1px solid #d7d7d7;
   border-bottom: 1px solid #d7d7d7;
 }
+.at-c-listCardBody {
+  --pf-c-card__footer--PaddingX: 0;
+  --pf-c-card__footer--PaddingY: 0;
+  --pf-c-card__body--PaddingX: 0;
+  --pf-c-card__body--PaddingY: 0;
+}
+.pf-c-data-list__item {
+  --pf-c-data-list__item--PaddingLeft: 20px;
+  --pf-c-data-list__item--PaddingRight: 20px;
+}
 //
 // pf modal overrides
 //

src/components/CapitalizeText.jsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-class CapitalizeText extends React.Component {
-  upperCaseFirstLetter = (string) => (typeof string === 'string' ? string.charAt(0).toUpperCase() + string.slice(1) : '');
-
-  render () {
-    const { text } = this.props;
-    return (
-      this.upperCaseFirstLetter(text)
-    );
-  }
-}
-
-export default CapitalizeText;

src/components/NotificationsList/NotificationListItem.jsx

@@ -8,7 +8,6 @@ import {
   Badge,
   Switch
 } from '@patternfly/react-core';
-import CapitalizeText from '../CapitalizeText';
 
 class NotificationListItem extends React.Component {
   constructor (props) {
@@ -38,6 +37,10 @@ class NotificationListItem extends React.Component {
       errorTurnedOn
     } = this.props;
 
+    const capText = {
+      textTransform: 'capitalize'
+    };
+
     return (
       <I18n>
         {({ i18n }) => (
@@ -54,12 +57,11 @@ class NotificationListItem extends React.Component {
                 </Link>
               </div>
               <Badge
+                style={capText}
                 className="pf-u-display-inline-flex"
                 isRead
               >
-                {' '}
+                {notificationType}
-                <CapitalizeText text={notificationType} />
-                {' '}
               </Badge>
             </div>
             <div className="pf-c-data-list__cell" />

src/components/NotificationsList/Notifications.list.jsx

@@ -2,7 +2,7 @@ import React, {
   Component,
   Fragment
 } from 'react';
-import { Title, EmptyState, EmptyStateIcon } from '@patternfly/react-core';
+import { Title, EmptyState, EmptyStateIcon, EmptyStateBody } from '@patternfly/react-core';
 import { CubesIcon } from '@patternfly/react-icons';
 import { I18n, i18nMark } from '@lingui/react';
 import { Trans, t } from '@lingui/macro';
@@ -289,8 +289,11 @@ class Notifications extends Component {
           <EmptyState>
             <EmptyStateIcon icon={CubesIcon} />
             <Title size="lg">
-              <Trans>NO NOTIFICATIONS HAVE BEEN CREATED</Trans>
+              <Trans>No Notifictions Found</Trans>
             </Title>
+            <EmptyStateBody>
+              <Trans>Please add a notification template to populate this list</Trans>
+            </EmptyStateBody>
           </EmptyState>
         )}
         <Fragment>

src/pages/Organizations/screens/Organization/OrganizationDetail.jsx

@@ -107,7 +107,7 @@ const OrganizationDetail = ({
           )}
         </I18n>
       </CardHeader>
-      <CardBody>
+      <CardBody className="at-c-listCardBody">
         <Switch>
           <Route path={`${match.path}/delete-resources`} component={() => deleteResourceView()} />
           <Route path={`${match.path}/add-resource`} component={() => addResourceView()} />