From 3d45f275025d003f818b2104a54be6b3437de595 Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Fri, 13 Dec 2019 16:10:37 -0800
Subject: [PATCH] finish InventoryDetail

---
 .../components/DetailList/UserDateDetail.jsx  | 31 +++++++++++++
 .../src/components/DetailList/index.js        |  1 +
 .../InventoryDetail/InventoryDetail.jsx       | 45 ++++++++++++++++---
 awx/ui_next/src/types.js                      |  8 ++++
 4 files changed, 78 insertions(+), 7 deletions(-)
 create mode 100644 awx/ui_next/src/components/DetailList/UserDateDetail.jsx

diff --git a/awx/ui_next/src/components/DetailList/UserDateDetail.jsx b/awx/ui_next/src/components/DetailList/UserDateDetail.jsx
new file mode 100644
index 0000000000..b3d4b320be
--- /dev/null
+++ b/awx/ui_next/src/components/DetailList/UserDateDetail.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { node, string } from 'prop-types';
+import { Link } from 'react-router-dom';
+import { formatDateString } from '@util/dates';
+import Detail from './Detail';
+import { SummaryFieldUser } from '../../types';
+
+function UserDateDetail({ label, date, user }) {
+  return (
+    <Detail
+      label={label}
+      value={
+        <span>
+          {formatDateString(date)}
+          {user && ' by '}
+          {user && <Link to={`/users/${user.id}`}>{user.username}</Link>}
+        </span>
+      }
+    />
+  );
+}
+UserDateDetail.propTypes = {
+  label: node.isRequired,
+  date: string.isRequired,
+  user: SummaryFieldUser,
+};
+UserDateDetail.defaultProps = {
+  user: null,
+};
+
+export default UserDateDetail;
diff --git a/awx/ui_next/src/components/DetailList/index.js b/awx/ui_next/src/components/DetailList/index.js
index 665470d178..4a5b77dbc0 100644
--- a/awx/ui_next/src/components/DetailList/index.js
+++ b/awx/ui_next/src/components/DetailList/index.js
@@ -1,2 +1,3 @@
 export { default as DetailList } from './DetailList';
 export { default as Detail, DetailName, DetailValue } from './Detail';
+export { default as UserDateDetail } from './UserDateDetail';
diff --git a/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx b/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx
index 35c6830818..60ccec382f 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx
@@ -1,8 +1,10 @@
 import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { CardBody } from '@components/Card';
-import { DetailList, Detail } from '@components/DetailList';
+import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
+import { ChipGroup, Chip } from '@components/Chip';
 import { VariablesDetail } from '@components/CodeMirrorInput';
 import { InventoriesAPI } from '@api';
 import { Inventory } from '../../../types';
@@ -20,32 +22,61 @@ function InventoryDetail({ inventory, i18n }) {
     })();
   }, [inventory.id]);
 
+  const { organization } = inventory.summary_fields;
+
   return (
     <CardBody>
       <DetailList>
         <Detail label={i18n._(t`Name`)} value={inventory.name} />
         <Detail label={i18n._(t`Activity`)} value="Coming soon" />
         <Detail label={i18n._(t`Description`)} value={inventory.description} />
-        <Detail label={i18n._(t`Type`)} value={inventory.kind} />
+        <Detail label={i18n._(t`Type`)} value={i18n._(t`Inventory`)} />
         <Detail
           label={i18n._(t`Organization`)}
-          value={inventory.summary_fields.organization.name}
+          value={
+            <Link to={`/organizations/${organization.id}/details`}>
+              {organization.name}
+            </Link>
+          }
         />
         <Detail
           fullWidth
           label={i18n._(t`Instance Groups`)}
-          value={isLoading ? 'loading...' : instanceGroups.map(g => g.name)}
+          value={
+            isLoading ? (
+              'loading...'
+            ) : (
+              <ChipGroup numChips={5}>
+                {instanceGroups.map(ig => (
+                  <Chip key={ig.id} isReadOnly>
+                    {ig.name}
+                  </Chip>
+                ))}
+              </ChipGroup>
+            )
+          }
         />
       </DetailList>
       {inventory.variables && (
         <VariablesDetail
           id="job-artifacts"
+          label={i18n._(t`Variables`)}
           value={inventory.variables}
           rows={4}
-          label={i18n._(t`Variables`)}
         />
-      )}{' '}
-      <Detail label={i18n._(t`Description`)} value={inventory.description} />
+      )}
+      <DetailList>
+        <UserDateDetail
+          label={i18n._(t`Created`)}
+          date={inventory.created}
+          user={inventory.summary_fields.created_by}
+        />
+        <UserDateDetail
+          label={i18n._(t`Last Modified`)}
+          date={inventory.modified}
+          user={inventory.summary_fields.modified_by}
+        />
+      </DetailList>
     </CardBody>
   );
 }
diff --git a/awx/ui_next/src/types.js b/awx/ui_next/src/types.js
index 5fee265305..0b6542f3ac 100644
--- a/awx/ui_next/src/types.js
+++ b/awx/ui_next/src/types.js
@@ -228,6 +228,14 @@ export const User = shape({
   last_login: string,
 });
 
+// stripped-down User object found in summary_fields (e.g. modified_by)
+export const SummaryFieldUser = shape({
+  id: number.isRequired,
+  username: string.isRequired,
+  first_name: string,
+  last_name: string,
+});
+
 export const Group = shape({
   id: number.isRequired,
   type: oneOf(['group']),