Checks for modified and create in Inv Group Deets

Also includes refactoring for css over style prop and removed some
unnecessary loading checks

awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroup/InventoryGroup.jsx

@@ -121,15 +121,13 @@ function InventoryGroups({ i18n, match, setBreadcrumb, inventory, history }) {
           path="*"
           render={() => {
             return (
-              !hasContentLoading && (
+              <ContentError>
-                <ContentError>
+                {inventory && (
-                  {inventory && (
+                  <Link to={`/inventories/inventory/${inventory.id}/details`}>
-                    <Link to={`/inventories/inventory/${inventory.id}/details`}>
+                    {i18n._(t`View Inventory Details`)}
-                      {i18n._(t`View Inventory Details`)}
+                  </Link>
-                    </Link>
+                )}
-                  )}
+              </ContentError>
-                </ContentError>
-              )
             );
           }}
         />

awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupDetail/InventoryGroupDetail.jsx

@@ -31,6 +31,8 @@ const ActionButtonWrapper = styled.div`
 function InventoryGroupDetail({ i18n, history, match, inventoryGroup }) {
   const {
     summary_fields: { created_by, modified_by },
+    created,
+    modified,
   } = inventoryGroup;
   const [error, setError] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
@@ -45,8 +47,36 @@ function InventoryGroupDetail({ i18n, history, match, inventoryGroup }) {
     }
   };
 
+  let createdBy = '';
+  if (created) {
+    if (created_by && created_by.username) {
+      createdBy = (
+        <span>
+          {i18n._(t`${formatDateString(inventoryGroup.created)} by`)}{' '}
+          <Link to={`/users/${created_by.id}`}>{created_by.username}</Link>
+        </span>
+      );
+    } else {
+      createdBy = i18n._(t`${formatDateString(inventoryGroup.created)} by`);
+    }
+  }
+
+  let modifiedBy = '';
+  if (modified) {
+    if (modified_by && modified_by.username) {
+      modifiedBy = (
+        <span>
+          {i18n._(t`${formatDateString(inventoryGroup.modified)} by`)}{' '}
+          <Link to={`/users/${modified_by.id}`}>{modified_by.username}</Link>
+        </span>
+      );
+    } else {
+      modifiedBy = i18n._(t`${formatDateString(inventoryGroup.modified)} by`);
+    }
+  }
+
   return (
-    <CardBody style={{ paddingTop: '20px' }}>
+    <CardBody css="padding-top: 20px">
       <DetailList gutter="sm">
         <Detail label={i18n._(t`Name`)} value={inventoryGroup.name} />
         <Detail
@@ -62,31 +92,9 @@ function InventoryGroupDetail({ i18n, history, match, inventoryGroup }) {
         label={i18n._(t`Variables`)}
       />
       <DetailList>
-        {created_by && created_by.username && (
+        {createdBy && <Detail label={i18n._(t`Created`)} value={createdBy} />}
-          <Detail
+        {modifiedBy && (
-            label={i18n._(t`Created`)}
+          <Detail label={i18n._(t`Modified`)} value={modifiedBy} />
-            value={
-              <span>
-                {i18n._(t`${formatDateString(inventoryGroup.created)} by`)}{' '}
-                <Link to={`/users/${created_by.id}`}>
-                  {created_by.username}
-                </Link>
-              </span>
-            }
-          />
-        )}
-        {modified_by && modified_by.username && (
-          <Detail
-            label={i18n._(t`Modified`)}
-            value={
-              <span>
-                {i18n._(t`${formatDateString(inventoryGroup.modified)} by`)}{' '}
-                <Link to={`/users/${modified_by.id}`}>
-                  {modified_by.username}
-                </Link>
-              </span>
-            }
-          />
         )}
       </DetailList>
       <ActionButtonWrapper>

awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx

@@ -16,7 +16,7 @@ import styled from 'styled-components';
 import InventoryGroupItem from './InventoryGroupItem';
 import InventoryGroupsDeleteModal from '../shared/InventoryGroupsDeleteModal';
 
-const QS_CONFIG = getQSConfig('host', {
+const QS_CONFIG = getQSConfig('group', {
   page: 1,
   page_size: 20,
   order_by: 'name',