UI: allow reset on database json fields (#11708)

changelog/11708.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: JSON fields on database can be cleared on edit
+```

ui/app/models/database/connection.js

@@ -198,10 +198,10 @@ export default Model.extend({
   port: attr('string', {}),
   write_concern: attr('string', {
     subText: 'Optional. Must be in JSON. See our documentation for help.',
+    allowReset: true,
     editType: 'json',
     theme: 'hashi short',
     defaultShown: 'Default',
-    // defaultValue: '# For example: { "wmode": "majority", "wtimeout": 5000 }',
   }),
   username_template: attr('string', {
     editType: 'optionalText',

ui/app/models/database/role.js

@@ -69,11 +69,13 @@ export default Model.extend({
   }),
   creation_statement: attr('string', {
     editType: 'json',
+    allowReset: true,
     theme: 'hashi short',
     defaultShown: 'Default',
   }),
   revocation_statement: attr('string', {
     editType: 'json',
+    allowReset: true,
     theme: 'hashi short',
     defaultShown: 'Default',
   }),

ui/lib/core/addon/templates/components/form-field.hbs

@@ -213,9 +213,6 @@
         @spellcheck="false" />
     {{else if (eq attr.options.editType "json")}}
       {{!-- JSON Editor --}}
-      {{#if attr.options.subText}}
-        <p class="sub-text">{{attr.options.subText}} {{#if attr.options.docLink}}<a href="{{attr.options.docLink}}" target="_blank" rel="noopener noreferrer">See our documentation</a> for help.{{/if}}</p>
-      {{/if}}
       <JsonEditor
         data-test-input={{attr.name}}
         @title={{labelString}}
@@ -229,7 +226,26 @@
           theme=(or attr.options.theme 'hashi')
         }}
         @helpText={{attr.options.helpText}}
-      />
+      >
+        {{#if attr.options.allowReset}}
+          <button
+            type="button"
+            class="toolbar-link"
+            disabled={{not (get model valuePath)}}
+            onClick={{action
+              (action "setAndBroadcast" valuePath)
+              null
+            }}
+            data-test-json-clear-button
+          >
+            Clear
+            <Icon @glyph="refresh-default" aria-hidden="true" />
+          </button>
+        {{/if}}
+      </JsonEditor>
+      {{#if attr.options.subText}}
+        <p class="sub-text">{{attr.options.subText}} {{#if attr.options.docLink}}<a href="{{attr.options.docLink}}" target="_blank" rel="noopener noreferrer">See our documentation</a> for help.{{/if}}</p>
+      {{/if}}
     {{else}}
       {{!-- Regular Text Input --}}
       <input data-test-input={{attr.name}} id={{attr.name}} autocomplete="off" spellcheck="false"

ui/tests/integration/components/form-field-test.js

@@ -85,6 +85,13 @@ module('Integration | Component | form field', function(hooks) {
     assert.ok(component.hasJSONEditor, 'renders the json editor');
   });
 
+  test('it renders: string as json with clear button', async function(assert) {
+    await setup.call(this, createAttr('foo', 'string', { editType: 'json', allowReset: true }));
+    assert.equal(component.fields.objectAt(0).labelText, 'Foo', 'renders a label');
+    assert.ok(component.hasJSONEditor, 'renders the json editor');
+    assert.ok(component.hasJSONClearButton, 'renders button that will clear the JSON value');
+  });
+
   test('it renders: editType textarea', async function(assert) {
     let [model, spy] = await setup.call(
       this,

ui/tests/pages/components/form-field.js

@@ -16,6 +16,7 @@ export default {
   hasTextFile: isPresent('[data-test-component=text-file]'),
   hasTTLPicker: isPresent('[data-test-toggle-input="Foo"]'),
   hasJSONEditor: isPresent('[data-test-component=json-editor]'),
+  hasJSONClearButton: isPresent('[data-test-json-clear-button]'),
   hasSelect: isPresent('select'),
   hasInput: isPresent('input'),
   hasCheckbox: isPresent('input[type=checkbox]'),