U: preparation for HDS adoption to replace <Modal> (#23353)

* add autoRefresh to codemirror

* fix codemirror arg

* move scroll to body to accommodate hds mdoals

ui/app/styles/core/element-styling.scss

@@ -84,8 +84,6 @@ html {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   min-width: 300px;
-  overflow-x: hidden;
-  overflow-y: scroll;
   text-rendering: optimizeLegibility;
   text-size-adjust: 100%;
 }
@@ -124,6 +122,8 @@ pre code {
 body {
   font-size: $size-6;
   line-height: 1.5;
+  overflow-x: hidden;
+  overflow-y: scroll;
 }
 
 a {

ui/lib/core/addon/components/json-editor.hbs

@@ -29,6 +29,7 @@
           {{/if}}
           <div class="toolbar-separator"></div>
           <Hds::Copy::Button
+            @container={{@container}}
             @text="Copy"
             @isIconOnly={{true}}
             @textToCopy={{@value}}
@@ -52,6 +53,7 @@
       onSetup=this.onSetup
       onUpdate=this.onUpdate
       onFocus=this.onFocus
+      autoRefresh=(if @container true false)
     }}
     class={{if @readOnly "readonly-codemirror"}}
     data-test-component="code-mirror-modifier"

ui/lib/core/addon/components/json-editor.js

@@ -27,6 +27,10 @@ import { action } from '@ember/object';
  * @param {String} [value] - Value within the display. Generally, a json string.
  * @param {String} [viewportMargin] - Size of viewport. Often set to "Infinity" to load/show all text regardless of length.
  * @param {string} [example] - Example to show when value is null -- when example is provided a restore action will render in the toolbar to clear the current value and show the example after input
+ * * REQUIRED if rendering within a modal *
+ * @container gives context for the <Hd::Copy::Button> and sets autoRefresh=true so JsonEditor renders content (without this property @value only renders if editor is focused)
+ * @param {string} [container] - Selector string or element object of containing element, set the focused element as the container value. This is for the Hds::Copy::Button and to set autoRefresh=true so content renders https://hds-website-hashicorp.vercel.app/components/copy/button?tab=code
+ *
  */
 
 export default class JsonEditorComponent extends Component {

ui/lib/core/addon/modifiers/code-mirror.js

@@ -10,6 +10,7 @@ import Modifier from 'ember-modifier';
 
 import 'codemirror/addon/edit/matchbrackets';
 import 'codemirror/addon/selection/active-line';
+import 'codemirror/addon/display/autorefresh';
 import 'codemirror/addon/lint/lint.js';
 import 'codemirror/addon/lint/json-lint.js';
 // right now we only use the ruby and javascript, if you use another mode you'll need to import it.
@@ -62,6 +63,7 @@ export default class CodeMirrorModifier extends Modifier {
       theme: namedArgs.theme || 'hashi',
       value: namedArgs.content || '',
       viewportMargin: namedArgs.viewportMargin || '',
+      autoRefresh: namedArgs.autoRefresh,
     });
 
     editor.on('change', bind(this, this._onChange, namedArgs));