Use EuiCodeBlock for JSON settings, and overflow if long value (elast…

…ic#20744)
yankouskia · Jul 16, 2018 · 8138aa7 · 8138aa7
1 parent 7b969b3
commit 8138aa7
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 37 deletions.
diff --git a/...ana/public/management/sections/settings/components/field/__snapshots__/field.test.js.snap b/...ana/public/management/sections/settings/components/field/__snapshots__/field.test.js.snap
@@ -195,10 +195,12 @@ exports[`Field for array setting should render user value if there is user value
               grow={true}
               size="xs"
             >
-              Default: 
-              <EuiCode>
-                default_value
-              </EuiCode>
+              <UNDEFINED>
+                Default: 
+                <EuiCode>
+                  default_value
+                </EuiCode>
+              </UNDEFINED>
             </EuiText>
           </UNDEFINED>
         </UNDEFINED>
@@ -459,10 +461,12 @@ exports[`Field for boolean setting should render user value if there is user val
               grow={true}
               size="xs"
             >
-              Default: 
-              <EuiCode>
-                true
-              </EuiCode>
+              <UNDEFINED>
+                Default: 
+                <EuiCode>
+                  true
+                </EuiCode>
+              </UNDEFINED>
             </EuiText>
           </UNDEFINED>
         </UNDEFINED>
@@ -723,10 +727,12 @@ exports[`Field for image setting should render user value if there is user value
               grow={true}
               size="xs"
             >
-              Default: 
-              <EuiCode>
-                null
-              </EuiCode>
+              <UNDEFINED>
+                Default: 
+                <EuiCode>
+                  null
+                </EuiCode>
+              </UNDEFINED>
             </EuiText>
           </UNDEFINED>
         </UNDEFINED>
@@ -936,10 +942,16 @@ exports[`Field for json setting should render default value if there is no user
               grow={true}
               size="xs"
             >
-              Default: 
-              <EuiCode>
-                {}
-              </EuiCode>
+              <UNDEFINED>
+                Default:
+                <EuiCodeBlock
+                  language="json"
+                  overflowHeight={null}
+                  paddingSize="s"
+                >
+                  {}
+                </EuiCodeBlock>
+              </UNDEFINED>
             </EuiText>
           </UNDEFINED>
         </UNDEFINED>
@@ -1058,10 +1070,16 @@ exports[`Field for json setting should render user value if there is user value
               grow={true}
               size="xs"
             >
-              Default: 
-              <EuiCode>
-                {}
-              </EuiCode>
+              <UNDEFINED>
+                Default:
+                <EuiCodeBlock
+                  language="json"
+                  overflowHeight={null}
+                  paddingSize="s"
+                >
+                  {}
+                </EuiCodeBlock>
+              </UNDEFINED>
             </EuiText>
           </UNDEFINED>
         </UNDEFINED>
@@ -1371,10 +1389,12 @@ exports[`Field for markdown setting should render user value if there is user va
               grow={true}
               size="xs"
             >
-              Default: 
-              <EuiCode>
-                null
-              </EuiCode>
+              <UNDEFINED>
+                Default: 
+                <EuiCode>
+                  null
+                </EuiCode>
+              </UNDEFINED>
             </EuiText>
           </UNDEFINED>
         </UNDEFINED>
@@ -1654,10 +1674,12 @@ exports[`Field for number setting should render user value if there is user valu
               grow={true}
               size="xs"
             >
-              Default: 
-              <EuiCode>
-                5
-              </EuiCode>
+              <UNDEFINED>
+                Default: 
+                <EuiCode>
+                  5
+                </EuiCode>
+              </UNDEFINED>
             </EuiText>
           </UNDEFINED>
         </UNDEFINED>
@@ -1956,10 +1978,12 @@ exports[`Field for select setting should render user value if there is user valu
               grow={true}
               size="xs"
             >
-              Default: 
-              <EuiCode>
-                orange
-              </EuiCode>
+              <UNDEFINED>
+                Default: 
+                <EuiCode>
+                  orange
+                </EuiCode>
+              </UNDEFINED>
             </EuiText>
           </UNDEFINED>
         </UNDEFINED>
@@ -2241,10 +2265,12 @@ exports[`Field for string setting should render user value if there is user valu
               grow={true}
               size="xs"
             >
-              Default: 
-              <EuiCode>
-                null
-              </EuiCode>
+              <UNDEFINED>
+                Default: 
+                <EuiCode>
+                  null
+                </EuiCode>
+              </UNDEFINED>
             </EuiText>
           </UNDEFINED>
         </UNDEFINED>

diff --git a/src/core_plugins/kibana/public/management/sections/settings/components/field/field.js b/src/core_plugins/kibana/public/management/sections/settings/components/field/field.js
@@ -28,6 +28,7 @@ import {
   EuiButton,
   EuiButtonEmpty,
   EuiCode,
+  EuiCodeBlock,
   EuiCodeEditor,
   EuiDescribedFormGroup,
   EuiFieldNumber,
@@ -475,7 +476,22 @@ export class Field extends PureComponent {
       <Fragment>
         <EuiSpacer size="s" />
         <EuiText size="xs">
-          Default: <EuiCode>{this.getDisplayedDefaultValue(type, defVal)}</EuiCode>
+          { type === 'json' ? (
+            <Fragment>
+              Default:
+              <EuiCodeBlock
+                language="json"
+                paddingSize="s"
+                overflowHeight={defVal.length >= 500 ? 300 : null}
+              >
+                {this.getDisplayedDefaultValue(type, defVal)}
+              </EuiCodeBlock>
+            </Fragment>
+          ) : (
+            <Fragment>
+              Default: <EuiCode>{this.getDisplayedDefaultValue(type, defVal)}</EuiCode>
+            </Fragment>
+          ) }
         </EuiText>
       </Fragment>
     );