From c45b1ffca6c64f14ace4e2d3906233ca85d52a60 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Fri, 17 Jan 2020 12:17:17 -0500
Subject: [PATCH] Ensures Variables Details renders even when no value.

When there is no value VariablesDetails will show ---.
---
 .../src/components/CodeMirrorInput/VariablesDetail.jsx      | 6 +-----
 .../src/components/CodeMirrorInput/VariablesDetail.test.jsx | 5 +++++
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx
index d89ea07b58..c4887363c2 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx
@@ -14,10 +14,6 @@ function VariablesDetail({ value, label, rows }) {
   const [currentValue, setCurrentValue] = useState(value);
   const [error, setError] = useState(null);
 
-  if (!value) {
-    return null;
-  }
-
   return (
     <>
       <DetailName
@@ -62,7 +58,7 @@ function VariablesDetail({ value, label, rows }) {
       >
         <CodeMirrorInput
           mode={mode}
-          value={currentValue}
+          value={currentValue || '---'} // When github issue https://github.com/ansible/awx/issues/5502 gets resolved this line of code should be revisited and refactored if possible.
           readOnly
           rows={rows}
           css="margin-top: 10px"
diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx
index 71d082290c..ea13a366c9 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx
@@ -40,4 +40,9 @@ describe('<VariablesDetail>', () => {
     expect(input2.prop('mode')).toEqual('yaml');
     expect(input2.prop('value')).toEqual('foo: bar\n');
   });
+  test('should render label and value= --- when there are no values', () => {
+    const wrapper = shallow(<VariablesDetail value="" label="Variables" />);
+    expect(wrapper.find('Styled(CodeMirrorInput)').length).toBe(1);
+    expect(wrapper.find('div.pf-c-form__label').text()).toBe('Variables');
+  });
 });