use VariablesDetail for displaying variables field in details views

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

@@ -1 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
 export { default as TabbedCardHeader } from './TabbedCardHeader';

awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { string, number } from 'prop-types';
-import { Split, SplitItem } from '@patternfly/react-core';
+import { Split, SplitItem, TextListItemVariants } from '@patternfly/react-core';
+import { DetailName, DetailValue } from '@components/DetailList';
 import CodeMirrorInput from './CodeMirrorInput';
 import YamlJsonToggle from './YamlJsonToggle';
 import { yamlToJson, jsonToYaml, isJson } from '../../util/yaml';
@@ -10,11 +11,16 @@ const JSON_MODE = 'javascript';
 
 function VariablesDetail({ value, label, rows }) {
   const [mode, setMode] = useState(isJson(value) ? JSON_MODE : YAML_MODE);
-  const [val, setVal] = useState(value);
+  const [currentValue, setCurrentValue] = useState(value);
   const [error, setError] = useState(null);
 
   return (
-    <div css="margin: 20px 0">
+    <>
+      <DetailName
+        component={TextListItemVariants.dt}
+        fullWidth
+        css="grid-column: 1 / -1"
+      >
         <Split gutter="sm">
           <SplitItem>
             <div className="pf-c-form__label">
@@ -32,8 +38,10 @@ function VariablesDetail({ value, label, rows }) {
               onChange={newMode => {
                 try {
                   const newVal =
-                  newMode === YAML_MODE ? jsonToYaml(val) : yamlToJson(val);
+                    newMode === YAML_MODE
-                setVal(newVal);
+                      ? jsonToYaml(currentValue)
+                      : yamlToJson(currentValue);
+                  setCurrentValue(newVal);
                   setMode(newMode);
                 } catch (err) {
                   setError(err);
@@ -42,9 +50,15 @@ function VariablesDetail({ value, label, rows }) {
             />
           </SplitItem>
         </Split>
+      </DetailName>
+      <DetailValue
+        component={TextListItemVariants.dd}
+        fullWidth
+        css="grid-column: 1 / -1; margin-top: -20px"
+      >
         <CodeMirrorInput
           mode={mode}
-        value={val}
+          value={currentValue}
           readOnly
           rows={rows}
           css="margin-top: 10px"
@@ -57,7 +71,8 @@ function VariablesDetail({ value, label, rows }) {
             Error: {error.message}
           </div>
         )}
-    </div>
+      </DetailValue>
+    </>
   );
 }
 VariablesDetail.propTypes = {

awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx

@@ -7,7 +7,6 @@ import YamlJsonToggle from './YamlJsonToggle';
 import { yamlToJson, jsonToYaml } from '../../util/yaml';
 
 const YAML_MODE = 'yaml';
-const JSON_MODE = 'javascript';
 
 function VariablesField({ id, name, label, readOnly }) {
   // TODO: detect initial mode

awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx

@@ -4,10 +4,9 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import styled from 'styled-components';
 import { Host } from '@types';
-import { formatDateString } from '@util/dates';
 import { Button, CardBody } from '@patternfly/react-core';
-import { DetailList, Detail } from '@components/DetailList';
+import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
-import CodeMirrorInput from '@components/CodeMirrorInput';
+import { VariablesDetail } from '@components/CodeMirrorInput';
 
 const ActionButtonWrapper = styled.div`
   display: flex;
@@ -21,30 +20,6 @@ const ActionButtonWrapper = styled.div`
 function HostDetail({ host, i18n }) {
   const { created, description, id, modified, name, summary_fields } = host;
 
-  let createdBy = '';
-  if (created) {
-    if (summary_fields.created_by && summary_fields.created_by.username) {
-      createdBy = i18n._(
-        t`${formatDateString(created)} by ${summary_fields.created_by.username}`
-      );
-    } else {
-      createdBy = formatDateString(created);
-    }
-  }
-
-  let modifiedBy = '';
-  if (modified) {
-    if (summary_fields.modified_by && summary_fields.modified_by.username) {
-      modifiedBy = i18n._(
-        t`${formatDateString(modified)} by ${
-          summary_fields.modified_by.username
-        }`
-      );
-    } else {
-      modifiedBy = formatDateString(modified);
-    }
-  }
-
   return (
     <CardBody>
       <DetailList gutter="sm">
@@ -66,23 +41,20 @@ function HostDetail({ host, i18n }) {
             }
           />
         )}
-        {/* TODO: Link to user in users */}
+        <UserDateDetail
-        <Detail label={i18n._(t`Created`)} value={createdBy} />
+          label={i18n._(t`Created`)}
-        {/* TODO: Link to user in users */}
+          date={created}
-        <Detail label={i18n._(t`Last Modified`)} value={modifiedBy} />
+          user={summary_fields.created_by}
-        <Detail
-          fullWidth
-          label={i18n._(t`Variables`)}
-          value={
-            <CodeMirrorInput
-              mode="yaml"
-              readOnly
-              value={host.variables}
-              onChange={() => {}}
-              rows={6}
-              hasErrors={false}
         />
-          }
+        <UserDateDetail
+          label={i18n._(t`Last Modified`)}
+          date={modified}
+          user={summary_fields.modified_by}
+        />
+        <VariablesDetail
+          label={i18n._(t`Variables`)}
+          value={host.variables}
+          rows={6}
         />
       </DetailList>
       <ActionButtonWrapper>

awx/ui_next/src/screens/Host/HostDetail/HostDetail.test.jsx

@@ -30,7 +30,7 @@ describe('<HostDetail />', () => {
     mountWithContexts(<HostDetail host={mockHost} />);
   });
 
-  test('should render Details', async done => {
+  test('should render Details', async () => {
     const wrapper = mountWithContexts(<HostDetail host={mockHost} />);
     const testParams = [
       { label: 'Name', value: 'Foo' },
@@ -46,23 +46,22 @@ describe('<HostDetail />', () => {
       expect(detail.find('dt').text()).toBe(label);
       expect(detail.find('dd').text()).toBe(value);
     }
-    done();
   });
 
-  test('should show edit button for users with edit permission', async done => {
+  test('should show edit button for users with edit permission', async () => {
     const wrapper = mountWithContexts(<HostDetail host={mockHost} />);
-    const editButton = await waitForElement(wrapper, 'HostDetail Button');
+    // VariablesDetail has two buttons
+    const editButton = wrapper.find('Button').at(2);
     expect(editButton.text()).toEqual('Edit');
     expect(editButton.prop('to')).toBe('/hosts/1/edit');
-    done();
   });
 
-  test('should hide edit button for users without edit permission', async done => {
+  test('should hide edit button for users without edit permission', async () => {
     const readOnlyHost = { ...mockHost };
     readOnlyHost.summary_fields.user_capabilities.edit = false;
     const wrapper = mountWithContexts(<HostDetail host={readOnlyHost} />);
     await waitForElement(wrapper, 'HostDetail');
-    expect(wrapper.find('HostDetail Button').length).toBe(0);
+    // VariablesDetail has two buttons
-    done();
+    expect(wrapper.find('Button').length).toBe(2);
   });
 });

awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx

@@ -56,16 +56,13 @@ function InventoryDetail({ inventory, i18n }) {
             )
           }
         />
-      </DetailList>
         {inventory.variables && (
           <VariablesDetail
-          id="job-artifacts"
             label={i18n._(t`Variables`)}
             value={inventory.variables}
             rows={4}
           />
         )}
-      <DetailList>
         <UserDateDetail
           label={i18n._(t`Created`)}
           date={inventory.created}