add ObjectDetails for HTTP Headers display

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;

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';

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>