hashicorp · arnav28 · May 6, 2021 · Apr 29, 2021 · May 4, 2021 · May 4, 2021
diff --git a/changelog/11500.txt b/changelog/11500.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Updated ivy code mirror component for consistency
+```
diff --git a/ui/app/components/json-editor.js b/ui/app/components/json-editor.js
@@ -14,6 +14,10 @@ const JSON_EDITOR_DEFAULTS = {
 };
 
 export default Component.extend({
+  showToolbar: true,
+  title: null,
+  subTitle: null,
+  helpText: null,
   value: null,
   options: null,
   valueUpdated: null,

diff --git a/ui/app/templates/components/console/log-json.hbs b/ui/app/templates/components/console/log-json.hbs
@@ -1,5 +1,5 @@
 <div class="console-ui-output has-copy-button">
-  <JsonEditor @value={{stringify content}} @options={{hash
+  <JsonEditor @showToolbar={{false}} @value={{stringify content}} @options={{hash
         readOnly=true
         lineNumbers=false
         autoHeight=true

diff --git a/ui/app/templates/components/control-group-success.hbs b/ui/app/templates/components/control-group-success.hbs
@@ -12,6 +12,7 @@
       <div class="has-copy-button">
         <JsonEditor
           data-test-json-viewer
+          @showToolbar={{false}}
           @value={{ stringify unwrapData }}
           @options={{hash
           readOnly=true

diff --git a/ui/app/templates/components/json-editor.hbs b/ui/app/templates/components/json-editor.hbs
@@ -1,7 +1,30 @@
+{{#if showToolbar }}
+    <Toolbar>
+        <label class="is-label" data-test-component="json-editor-title">
+            {{title}} 
+            {{#if subTitle }}
+                <span class="is-size-9 is-lowercase has-text-grey">({{ subTitle }})</span>
+            {{/if}}
+        </label>
+        <ToolbarActions>
+            {{yield}}
+            <div class="toolbar-separator"></div>
+            <CopyButton class="button is-transparent" @clipboardText={{value}}
+                @buttonType="button" @success={{action (set-flash-message 'Data copied!')}}>
+                <Icon @glyph="copy-action" aria-label="Copy" />
+            </CopyButton>
+        </ToolbarActions>
+    </Toolbar>
+{{/if}}
 {{ivy-codemirror
     data-test-component="json-editor" 
     value=value 
     options=options
     valueUpdated=(action "updateValue") 
     onFocusOut=(action "onFocus")    
-}}
+}}
+{{#if helpText }}
+    <div class="box is-shadowless is-fullwidth has-short-padding">
+        <p class="sub-text">{{ helpText }}</p>
+    </div>
+{{/if}}
diff --git a/ui/app/templates/components/secret-edit-display.hbs b/ui/app/templates/components/secret-edit-display.hbs
@@ -36,23 +36,12 @@
 
   {{#if @showAdvancedMode}}
     <div class="form-section">
-      <Toolbar>
-        <label class="is-label">
-          {{ if isV2 "Version Data" "Secret Data" }}
-        </label>
-        <ToolbarActions>
-          <div class="toolbar-separator"></div>
-          <CopyButton class="button is-transparent" @clipboardText={{@codemirrorString}}
-              @buttonType="button" @success={{action (set-flash-message 'Secret data copied!')}}>
-              <Icon @glyph="copy-action" aria-label="Copy" />
-            </CopyButton>
-        </ToolbarActions>
-      </Toolbar>
-      <JsonEditor
+     <JsonEditor
+        @title={{if isV2 "Version Data" "Secret Data"}}
         @value={{@codemirrorString}}
         @valueUpdated={{action @editActions.codemirrorUpdated}}
-        @onFocusOut={{action @editActions.formatJSON}}
-      />
+        @onFocusOut={{action @editActions.formatJSON}}>
+     </JsonEditor> 
     </div>
   {{else}}
     <div class="form-section">

diff --git a/ui/app/templates/components/transit-key-action/decrypt.hbs b/ui/app/templates/components/transit-key-action/decrypt.hbs
@@ -4,24 +4,12 @@
       <p>You can decrypt ciphertext using <code>{{key.name}}</code> as the encryption key.</p>
     </div>
     <div class="field">
-      <Toolbar>
-        <label for="ciphertext" class="is-label">Ciphertext</label>
-        <ToolbarActions>
-          <div class="toolbar-separator"></div>
-          <CopyButton class="button is-transparent" @clipboardText={{ciphertext}}
-              @buttonType="button" @success={{action (set-flash-message 'Data copied!')}}>
-              <Icon @glyph="copy-action" aria-label="Copy" />
-            </CopyButton>
-        </ToolbarActions>
-      </Toolbar>
       <div id="ciphertext-control" class="control">
         <JsonEditor
+            @title="Ciphertext"
             @valueUpdated={{action (mut ciphertext)}} 
             @options={{hash
-              lineNumbers=true
-              tabSize=2
               mode='ruby'
-              theme='hashi'
             }}  
             @data-test-transit-input="ciphertext" />
       </div>

diff --git a/ui/app/templates/components/transit-key-action/encrypt.hbs b/ui/app/templates/components/transit-key-action/encrypt.hbs
@@ -6,26 +6,12 @@
       </div>
       <KeyVersionSelect @key={{key}} @onVersionChange={{action (mut key_version)}} @key_version={{key_version}} />
       <div class="field">
-        <Toolbar>
-          <label for="plaintext" class="is-label">
-            Plaintext
-          </label>
-          <ToolbarActions>
-            <div class="toolbar-separator"></div>
-            <CopyButton class="button is-transparent" @clipboardText={{plaintext}}
-              @buttonType="button" @success={{action (set-flash-message 'Data copied!')}}>
-              <Icon @glyph="copy-action" aria-label="Copy" />
-            </CopyButton>
-        </ToolbarActions>
-        </Toolbar>
         <div id="plaintext-control" class="control is-relative">
           <JsonEditor
+              @title="Plaintext"
               @value={{plaintext}} @valueUpdated={{action (mut plaintext)}} 
               @options={{hash
-                lineNumbers=true
-                tabSize=2
                 mode='ruby'
-                theme='hashi'
               }} 
               @data-test-transit-input="plaintext" />
         </div>

diff --git a/ui/app/templates/components/transit-key-action/hmac.hbs b/ui/app/templates/components/transit-key-action/hmac.hbs
@@ -6,24 +6,12 @@
     </div>
     <KeyVersionSelect @key={{key}} @onVersionChange={{action (mut key_version)}} @key_version={{key_version}} />
     <div class="field">
-      <Toolbar>
-        <label for="input" class="is-label">Input</label>
-        <ToolbarActions>
-          <div class="toolbar-separator"></div>
-          <CopyButton class="button is-transparent" @clipboardText={{input}}
-            @buttonType="button" @success={{action (set-flash-message 'Data copied!')}}>
-              <Icon @glyph="copy-action" aria-label="Copy" />
-          </CopyButton>
-        </ToolbarActions>
-      </Toolbar>
       <div id="input-control" class="control is-relative">
         <JsonEditor
+            @title="Input"
             @valueUpdated={{action (mut input)}} 
             @options={{hash
-              lineNumbers=true
-              tabSize=2
               mode='ruby'
-              theme='hashi'
             }} 
             @data-test-transit-input="input" />
       </div>

diff --git a/ui/app/templates/components/transit-key-action/rewrap.hbs b/ui/app/templates/components/transit-key-action/rewrap.hbs
@@ -6,24 +6,12 @@
       </div>
     <KeyVersionSelect @key={{key}} @onVersionChange={{action (mut key_version)}} @key_version={{key_version}} />
     <div class="field">
-      <Toolbar>
-        <label for="ciphertext" class="is-label">Ciphertext</label>
-        <ToolbarActions>
-          <div class="toolbar-separator"></div>
-          <CopyButton class="button is-transparent" @clipboardText={{ciphertext}}
-            @buttonType="button" @success={{action (set-flash-message 'Data copied!')}}>
-              <Icon @glyph="copy-action" aria-label="Copy" />
-          </CopyButton>
-        </ToolbarActions>
-      </Toolbar>
       <div class="control is-expanded">
         <JsonEditor
+              @title="Ciphertext"
               @valueUpdated={{action (mut ciphertext)}} 
               @options={{hash
-                lineNumbers=true
-                tabSize=2
                 mode='ruby'
-                theme='hashi'
               }} 
             />
       </div>

diff --git a/ui/app/templates/components/transit-key-action/sign.hbs b/ui/app/templates/components/transit-key-action/sign.hbs
@@ -6,20 +6,13 @@
     </div>
     <KeyVersionSelect @key={{key}} @onVersionChange={{action (mut key_version)}} @key_version={{key_version}} />
     <div class="field">
-      <Toolbar>
-        <label for="input" class="is-label">
-          Input
-        </label>
-      </Toolbar>
       <div class="control is-relative">
         <JsonEditor
+          @title="Input"
           @value={{input}} 
           @valueUpdated={{action (mut input)}} 
           @options={{hash
-              lineNumbers=true
-              tabSize=2
               mode='ruby'
-              theme='hashi'
             }} 
           @data-test-transit-input="input" />
       </div>

diff --git a/ui/app/templates/components/transit-key-action/verify.hbs b/ui/app/templates/components/transit-key-action/verify.hbs
@@ -4,26 +4,12 @@
         <p>Check whether the provided signature is valid for the given data.</p>
       </div>
       <div class="field">
-        <Toolbar>
-          <label class="is-label">
-            Input
-          </label>
-          <ToolbarActions>
-            <div class="toolbar-separator"></div>
-            <CopyButton class="button is-transparent" @clipboardText={{input}}
-              @buttonType="button" @success={{action (set-flash-message 'Data copied!')}}>
-                <Icon @glyph="copy-action" aria-label="Copy" />
-            </CopyButton>
-          </ToolbarActions>
-        </Toolbar>
         <div class="control is-relative">
           <JsonEditor
+              @title="Input"
               @value={{input}} @valueUpdated={{action (mut input)}} 
               @options={{hash
-                lineNumbers=true
-                tabSize=2
                 mode='ruby'
-                theme='hashi'
               }} 
               @data-test-transit-input="input" />
         </div>
@@ -127,50 +113,26 @@
           <div class="column is-two-thirds is-flex-column">
             {{#if (or (and verification (eq verification 'HMAC')) hmac)}}
               <div class="field is-flex-column is-flex-1">
-                <Toolbar>
-                  <label class="is-label">HMAC</label>
-                  <ToolbarActions>
-                    <div class="toolbar-separator"></div>
-                    <CopyButton class="button is-transparent" @clipboardText={{hmac}}
-                      @buttonType="button" @success={{action (set-flash-message 'Data copied!')}}>
-                        <Icon @glyph="copy-action" aria-label="Copy" />
-                    </CopyButton>
-                  </ToolbarActions>
-                </Toolbar>
                 <div class="control is-flex-column is-flex-1">
                   <JsonEditor
+                      @title="HMAC"
                       @value={{hmac}} 
                       @valueUpdated={{action (mut hmac)}} 
                       @options={{hash
-                        lineNumbers=true
-                        tabSize=2
                         mode='ruby'
-                        theme='hashi'
                       }} 
                   />
                 </div>
               </div>
             {{else}}
               <div class="field is-flex-column is-flex-1">
-                <Toolbar>
-                  <label class="is-label">Signature</label>
-                  <ToolbarActions>
-                    <div class="toolbar-separator"></div>
-                    <CopyButton class="button is-transparent" @clipboardText={{signature}}
-                      @buttonType="button" @success={{action (set-flash-message 'Data copied!')}}>
-                        <Icon @glyph="copy-action" aria-label="Copy" />
-                    </CopyButton>
-                  </ToolbarActions>
-                </Toolbar>
                 <div class="control is-flex-column is-flex-1">
                   <JsonEditor
+                  @title="Signature"
                   @value={{signature}} 
                   @valueUpdated={{action (mut signature)}} 
                   @options={{hash
-                      lineNumbers=true
-                      tabSize=2
                       mode='ruby'
-                      theme='hashi'
                     }} />
                 </div>
               </div>
@@ -179,25 +141,13 @@
         </div>
       {{else}}
         <div class="field">
-          <Toolbar>
-            <label class="is-label">HMAC</label>
-            <ToolbarActions>
-              <div class="toolbar-separator"></div>
-              <CopyButton class="button is-transparent" @clipboardText={{hmac}}
-                @buttonType="button" @success={{action (set-flash-message 'Data copied!')}}>
-                  <Icon @glyph="copy-action" aria-label="Copy" />
-              </CopyButton>
-            </ToolbarActions>
-          </Toolbar>
           <div class="control">
             <JsonEditor
+                @title="HMAC"
                 @value={{hmac}} 
                 @valueUpdated={{action (mut hmac)}} 
                 @options={{hash
-                  lineNumbers=true
-                  tabSize=2
                   mode='ruby'
-                  theme='hashi'
                 }} 
             />
           </div>

diff --git a/ui/app/templates/partials/secret-form-show.hbs b/ui/app/templates/partials/secret-form-show.hbs
@@ -30,19 +30,8 @@
 {{else}}
   {{#if showAdvancedMode}}
   <div class="has-top-margin-s">
-    <Toolbar>
-      <label class="is-label">
-        {{ if isV2 "Version Data" "Secret Data" }}
-      </label>
-      <ToolbarActions>
-        <div class="toolbar-separator"></div>
-        <CopyButton class="button is-transparent" @clipboardText={{modelForData.dataAsJSONString}}
-            @buttonType="button" @success={{action (set-flash-message 'Data copied!')}}>
-            <Icon @glyph="copy-action" aria-label="Copy" />
-        </CopyButton>
-      </ToolbarActions>
-    </Toolbar>
-    <JsonEditor 
+    <JsonEditor
+      @title={{if isV2 "Version Data" "Secret Data"}} 
       @value={{modelForData.dataAsJSONString}} 
       @options={{hash
       readOnly=true

diff --git a/ui/app/templates/partials/tools/unwrap.hbs b/ui/app/templates/partials/tools/unwrap.hbs
@@ -20,18 +20,8 @@
     </nav>
     {{#if (eq unwrapActiveTab "data")}}
       <div class="field">
-        <Toolbar>
-          <label class="is-label">Unwrapped Data</label>
-          <ToolbarActions>
-            <div class="toolbar-separator"></div>
-            <CopyButton class="button is-transparent" @clipboardText={{stringify unwrap_data}}
-              @buttonType="button" @success={{action (set-flash-message 'Data copied!')}}>
-                <Icon @glyph="copy-action" aria-label="Copy" />
-            </CopyButton>
-          </ToolbarActions>
-        </Toolbar>
         <div class="control">
-          <JsonEditor @value={{stringify unwrap_data}} @options={{hash
+          <JsonEditor @title="Unwrapped Data" @value={{stringify unwrap_data}} @options={{hash
               readOnly=true
             }} />
         </div>

diff --git a/ui/app/templates/partials/tools/wrap.hbs b/ui/app/templates/partials/tools/wrap.hbs
@@ -32,18 +32,11 @@
     <NamespaceReminder @mode="perform" @noun={{selectedAction}} />
     <MessageError @errors={{errors}} />
     <div class="field">
-      <Toolbar>
-          <label for="data" class="is-label">Data to wrap <span class="is-size-9 is-lowercase has-text-grey">(json-formatted)</span></label>
-          <ToolbarActions>
-            <div class="toolbar-separator"></div>
-            <CopyButton class="button is-transparent" @clipboardText={{data}}
-              @buttonType="button" @success={{action (set-flash-message 'Data copied!')}}>
-                <Icon @glyph="copy-action" aria-label="Copy" />
-            </CopyButton>
-          </ToolbarActions>
-      </Toolbar>
       <div class="control">
-        <JsonEditor @value={{data}} @valueUpdated={{action "codemirrorUpdated"}} />
+        <JsonEditor @title="Data to wrap" 
+          @subTitle="json-formatted"
+          @value={{data}} 
+          @valueUpdated={{action "codemirrorUpdated"}} />
       </div>
     </div>
     <TtlPicker2