From 65d4c347c9152ee11efa3a5457017b914f3c1506 Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Mon, 10 Aug 2020 16:48:29 -0700
Subject: [PATCH] add ObjectDetails for HTTP Headers display

---
 .../components/DetailList/ObjectDetail.jsx    | 51 +++++++++++++++++++
 .../src/components/DetailList/index.js        |  1 +
 .../NotificationTemplateDetail.jsx            |  6 ++-
 3 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 awx/ui_next/src/components/DetailList/ObjectDetail.jsx

diff --git a/awx/ui_next/src/components/DetailList/ObjectDetail.jsx b/awx/ui_next/src/components/DetailList/ObjectDetail.jsx
new file mode 100644
index 0000000000..bf008866a8
--- /dev/null
+++ b/awx/ui_next/src/components/DetailList/ObjectDetail.jsx
@@ -0,0 +1,51 @@
+import 'styled-components/macro';
+import React from 'react';
+import { shape, node, number } from 'prop-types';
+import { TextListItemVariants } from '@patternfly/react-core';
+import { DetailName, DetailValue } from './Detail';
+import CodeMirrorInput from '../CodeMirrorInput';
+
+function ObjectDetail({ value, label, rows, fullHeight }) {
+  return (
+    <>
+      <DetailName
+        component={TextListItemVariants.dt}
+        fullWidth
+        css="grid-column: 1 / -1"
+      >
+        <div className="pf-c-form__label">
+          <span
+            className="pf-c-form__label-text"
+            css="font-weight: var(--pf-global--FontWeight--bold)"
+          >
+            {label}
+          </span>
+        </div>
+      </DetailName>
+      <DetailValue
+        component={TextListItemVariants.dd}
+        fullWidth
+        css="grid-column: 1 / -1; margin-top: -20px"
+      >
+        <CodeMirrorInput
+          mode="json"
+          value={JSON.stringify(value)}
+          readOnly
+          rows={rows}
+          fullHeight={fullHeight}
+          css="margin-top: 10px"
+        />
+      </DetailValue>
+    </>
+  );
+}
+ObjectDetail.propTypes = {
+  value: shape.isRequired,
+  label: node.isRequired,
+  rows: number,
+};
+ObjectDetail.defaultProps = {
+  rows: null,
+};
+
+export default ObjectDetail;
diff --git a/awx/ui_next/src/components/DetailList/index.js b/awx/ui_next/src/components/DetailList/index.js
index 6a12824bad..f16ed0e292 100644
--- a/awx/ui_next/src/components/DetailList/index.js
+++ b/awx/ui_next/src/components/DetailList/index.js
@@ -3,3 +3,4 @@ export { default as Detail, DetailName, DetailValue } from './Detail';
 export { default as DeletedDetail } from './DeletedDetail';
 export { default as UserDateDetail } from './UserDateDetail';
 export { default as DetailBadge } from './DetailBadge';
+export { default as ObjectDetail } from './ObjectDetail';
diff --git a/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateDetail/NotificationTemplateDetail.jsx b/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateDetail/NotificationTemplateDetail.jsx
index d7f37f9fab..24c199836f 100644
--- a/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateDetail/NotificationTemplateDetail.jsx
+++ b/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateDetail/NotificationTemplateDetail.jsx
@@ -9,6 +9,7 @@ import {
   Detail,
   DetailList,
   DeletedDetail,
+  ObjectDetail,
 } from '../../../components/DetailList';
 import DeleteButton from '../../../components/DeleteButton';
 import ErrorDetail from '../../../components/ErrorDetail';
@@ -310,11 +311,12 @@ function NotificationTemplateDetail({ i18n, template }) {
               value={configuration.http_method}
               dataCy="nt-detail-webhook-http-method"
             />
-            {/* <Detail
+            <ObjectDetail
               label={i18n._(t`HTTP Headers`)}
               value={configuration.headers}
+              rows="6"
               dataCy="nt-detail-webhook-headers"
-            /> */}
+            />
           </>
         )}
       </DetailList>