add ArrayDetail

awx/ui_next/src/components/DetailList/ArrayDetail.jsx

@@ -0,0 +1,35 @@
+import 'styled-components/macro';
+import React from 'react';
+import styled from 'styled-components';
+import { TextListItemVariants } from '@patternfly/react-core';
+import { DetailName, DetailValue } from './Detail';
+
+const Value = styled(DetailValue)`
+  margin-top: var(--pf-global--spacer--xs);
+  padding: var(--pf-global--spacer--xs);
+  border: 1px solid var(--pf-global--BorderColor--100);
+  max-height: 5.5em;
+  overflow: auto;
+`;
+
+function ArrayDetail({ label, value, dataCy }) {
+  const labelCy = dataCy ? `${dataCy}-label` : null;
+  const valueCy = dataCy ? `${dataCy}-value` : null;
+
+  const vals = Array.isArray(value) ? value : [value];
+
+  return (
+    <div css="grid-column: span 2">
+      <DetailName component={TextListItemVariants.dt} data-cy={labelCy}>
+        {label}
+      </DetailName>
+      <Value component={TextListItemVariants.dd} data-cy={valueCy}>
+        {vals.map(v => (
+          <div>{v}</div>
+        ))}
+      </Value>
+    </div>
+  );
+}
+
+export default ArrayDetail;

awx/ui_next/src/components/DetailList/DetailList.jsx

@@ -11,7 +11,7 @@ const DetailList = ({ children, stacked, ...props }) => (
 export default styled(DetailList)`
   display: grid;
   grid-gap: 20px;
-  align-items: center;
+  align-items: start;
   ${props =>
     props.stacked
       ? `

awx/ui_next/src/components/DetailList/index.js

@@ -3,6 +3,7 @@ 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 ArrayDetail } from './ArrayDetail';
 /*
   NOTE: ObjectDetail cannot be imported here, as it causes circular
   dependencies in testing environment. Import it directly from

awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateDetail/NotificationTemplateDetail.jsx

@@ -7,6 +7,7 @@ import AlertModal from '../../../components/AlertModal';
 import { CardBody, CardActionsRow } from '../../../components/Card';
 import {
   Detail,
+  ArrayDetail,
   DetailList,
   DeletedDetail,
 } from '../../../components/DetailList';
@@ -81,9 +82,9 @@ function NotificationTemplateDetail({ i18n, template }) {
               value={configuration.host}
               dataCy="nt-detail-host"
             />
-            <Detail
+            <ArrayDetail
               label={i18n._(t`Recipient List`)}
-              value={configuration.recipients} // array
+              value={configuration.recipients}
               dataCy="nt-detail-recipients"
             />
             <Detail
@@ -127,9 +128,9 @@ function NotificationTemplateDetail({ i18n, template }) {
               value={configuration.panelId}
               dataCy="nt-detail-panel-id"
             />
-            <Detail
+            <ArrayDetail
               label={i18n._(t`Tags for the Annotation`)}
-              value={configuration.annotation_tags} // array
+              value={configuration.annotation_tags}
               dataCy="nt-detail-"
             />
             <Detail
@@ -160,9 +161,9 @@ function NotificationTemplateDetail({ i18n, template }) {
               value={configuration.nickname}
               dataCy="nt-detail-irc-nickname"
             />
-            <Detail
+            <ArrayDetail
               label={i18n._(t`Destination Channels or Users`)}
-              value={configuration.targets} // array
+              value={configuration.targets}
               dataCy="nt-detail-channels"
             />
             <Detail
@@ -254,9 +255,9 @@ function NotificationTemplateDetail({ i18n, template }) {
         )}
         {template.notification_type === 'slack' && (
           <>
-            <Detail
+            <ArrayDetail
               label={i18n._(t`Destination Channels`)}
-              value={configuration.channels} // array
+              value={configuration.channels}
               dataCy="nt-detail-slack-channels"
             />
             <Detail
@@ -273,9 +274,9 @@ function NotificationTemplateDetail({ i18n, template }) {
               value={configuration.from_number}
               dataCy="nt-detail-twilio-source-phone"
             />
-            <Detail
+            <ArrayDetail
               label={i18n._(t`Destination SMS Number`)}
-              value={configuration.to_numbers} // array
+              value={configuration.to_numbers}
               dataCy="nt-detail-twilio-destination-numbers"
             />
             <Detail