From 5c4d4d454b7d2189faba6913b81f9dafdd5a5e00 Mon Sep 17 00:00:00 2001
From: hashishaw <cshaw@hashicorp.com>
Date: Mon, 24 May 2021 13:34:51 -0500
Subject: [PATCH 1/7] Add optional restore default button on json form field,
 and use in database connections/roles

---
 ui/app/models/database/connection.js          |  2 +-
 ui/app/models/database/role.js                |  2 ++
 .../addon/templates/components/form-field.hbs | 23 +++++++++++++++----
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/ui/app/models/database/connection.js b/ui/app/models/database/connection.js
index aeda7b28d7b4..e82dc5904d38 100644
--- a/ui/app/models/database/connection.js
+++ b/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',
diff --git a/ui/app/models/database/role.js b/ui/app/models/database/role.js
index 06416ba98575..18f2b9572bf4 100644
--- a/ui/app/models/database/role.js
+++ b/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',
   }),
diff --git a/ui/lib/core/addon/templates/components/form-field.hbs b/ui/lib/core/addon/templates/components/form-field.hbs
index ac2118aa4b8d..5e2e8eeb1f43 100644
--- a/ui/lib/core/addon/templates/components/form-field.hbs
+++ b/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,25 @@
           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
+            }}
+          >
+            Restore default
+            <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"

From 4d9a35bbb58980cf0840fa50d0d7e4ac24e2445b Mon Sep 17 00:00:00 2001
From: hashishaw <cshaw@hashicorp.com>
Date: Wed, 26 May 2021 13:10:38 -0500
Subject: [PATCH 2/7] Update language on JSON button to clear

---
 ui/lib/core/addon/templates/components/form-field.hbs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/lib/core/addon/templates/components/form-field.hbs b/ui/lib/core/addon/templates/components/form-field.hbs
index 5e2e8eeb1f43..3dfb3e242a1c 100644
--- a/ui/lib/core/addon/templates/components/form-field.hbs
+++ b/ui/lib/core/addon/templates/components/form-field.hbs
@@ -237,7 +237,7 @@
               null
             }}
           >
-            Restore default
+            Clear
             <Icon @glyph="refresh-default" aria-hidden="true" />
           </button>
         {{/if}}

From 986401c9595344a631b4bd90d208be17dcd21e0c Mon Sep 17 00:00:00 2001
From: hashishaw <cshaw@hashicorp.com>
Date: Wed, 26 May 2021 13:21:28 -0500
Subject: [PATCH 3/7] Add test for clear button on json editor toolbar

---
 ui/lib/core/addon/templates/components/form-field.hbs | 1 +
 ui/tests/integration/components/form-field-test.js    | 7 +++++++
 ui/tests/pages/components/form-field.js               | 1 +
 3 files changed, 9 insertions(+)

diff --git a/ui/lib/core/addon/templates/components/form-field.hbs b/ui/lib/core/addon/templates/components/form-field.hbs
index 3dfb3e242a1c..9910aaf0de49 100644
--- a/ui/lib/core/addon/templates/components/form-field.hbs
+++ b/ui/lib/core/addon/templates/components/form-field.hbs
@@ -236,6 +236,7 @@
               (action "setAndBroadcast" valuePath)
               null
             }}
+            data-test-json-clear-button
           >
             Clear
             <Icon @glyph="refresh-default" aria-hidden="true" />
diff --git a/ui/tests/integration/components/form-field-test.js b/ui/tests/integration/components/form-field-test.js
index 1a720a6f5817..a0df50a40f6c 100644
--- a/ui/tests/integration/components/form-field-test.js
+++ b/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: object with clear button', async function(assert) {
+    await setup.call(this, createAttr('foo', 'object', { 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,
diff --git a/ui/tests/pages/components/form-field.js b/ui/tests/pages/components/form-field.js
index d26894a7641b..90e0d91fc20b 100644
--- a/ui/tests/pages/components/form-field.js
+++ b/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]'),

From dd91b4f3f85bc0f79bf61ca8266ae543ef413e8a Mon Sep 17 00:00:00 2001
From: hashishaw <cshaw@hashicorp.com>
Date: Wed, 26 May 2021 13:38:57 -0500
Subject: [PATCH 4/7] Add changelog

---
 changelog/11708.txt | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 changelog/11708.txt

diff --git a/changelog/11708.txt b/changelog/11708.txt
new file mode 100644
index 000000000000..8930910113e1
--- /dev/null
+++ b/changelog/11708.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: JSON fields on database can be cleared on edit
+```

From 8c3b1599c5e4ea7640425c912d7fd72c1a4bd949 Mon Sep 17 00:00:00 2001
From: hashishaw <cshaw@hashicorp.com>
Date: Wed, 26 May 2021 13:39:38 -0500
Subject: [PATCH 5/7] Fix

---
 changelog/11708.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/changelog/11708.txt b/changelog/11708.txt
index 8930910113e1..21211915698b 100644
--- a/changelog/11708.txt
+++ b/changelog/11708.txt
@@ -1,3 +1,3 @@
-```release-note:bug
+```release-note:improvement
 ui: JSON fields on database can be cleared on edit
 ```

From 13de231f64d0be9ce4f2e7e67d04c389f436184b Mon Sep 17 00:00:00 2001
From: hashishaw <cshaw@hashicorp.com>
Date: Thu, 27 May 2021 10:29:19 -0500
Subject: [PATCH 6/7] Update tests

---
 ui/lib/core/addon/templates/components/form-field.hbs | 1 +
 ui/tests/integration/components/form-field-test.js    | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/ui/lib/core/addon/templates/components/form-field.hbs b/ui/lib/core/addon/templates/components/form-field.hbs
index 9910aaf0de49..0d9591eb5b47 100644
--- a/ui/lib/core/addon/templates/components/form-field.hbs
+++ b/ui/lib/core/addon/templates/components/form-field.hbs
@@ -227,6 +227,7 @@
         }}
         @helpText={{attr.options.helpText}}
       >
+      <button>{{if attr.options.allowReset "yes" "no"}}</button>
         {{#if attr.options.allowReset}}
           <button
             type="button"
diff --git a/ui/tests/integration/components/form-field-test.js b/ui/tests/integration/components/form-field-test.js
index a0df50a40f6c..132d718b37cc 100644
--- a/ui/tests/integration/components/form-field-test.js
+++ b/ui/tests/integration/components/form-field-test.js
@@ -13,6 +13,7 @@ module('Integration | Component | form field', function(hooks) {
   setupRenderingTest(hooks);
 
   const createAttr = (name, type, options) => {
+    console.log({ options });
     return {
       name,
       type,
@@ -85,8 +86,8 @@ module('Integration | Component | form field', function(hooks) {
     assert.ok(component.hasJSONEditor, 'renders the json editor');
   });
 
-  test('it renders: object with clear button', async function(assert) {
-    await setup.call(this, createAttr('foo', 'object', { allowReset: true }));
+  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');

From 1e2b0e6c84957a04c8494a3721e71e99647a3401 Mon Sep 17 00:00:00 2001
From: hashishaw <cshaw@hashicorp.com>
Date: Thu, 27 May 2021 15:23:37 -0500
Subject: [PATCH 7/7] clean up

---
 ui/lib/core/addon/templates/components/form-field.hbs | 1 -
 ui/tests/integration/components/form-field-test.js    | 1 -
 2 files changed, 2 deletions(-)

diff --git a/ui/lib/core/addon/templates/components/form-field.hbs b/ui/lib/core/addon/templates/components/form-field.hbs
index 0d9591eb5b47..9910aaf0de49 100644
--- a/ui/lib/core/addon/templates/components/form-field.hbs
+++ b/ui/lib/core/addon/templates/components/form-field.hbs
@@ -227,7 +227,6 @@
         }}
         @helpText={{attr.options.helpText}}
       >
-      <button>{{if attr.options.allowReset "yes" "no"}}</button>
         {{#if attr.options.allowReset}}
           <button
             type="button"
diff --git a/ui/tests/integration/components/form-field-test.js b/ui/tests/integration/components/form-field-test.js
index 132d718b37cc..7a1b598ddb12 100644
--- a/ui/tests/integration/components/form-field-test.js
+++ b/ui/tests/integration/components/form-field-test.js
@@ -13,7 +13,6 @@ module('Integration | Component | form field', function(hooks) {
   setupRenderingTest(hooks);
 
   const createAttr = (name, type, options) => {
-    console.log({ options });
     return {
       name,
       type,