display warning on save confirmation when a valid JSON becomes invalid

- Ticket: SUITEDEV-27569
emartech · Apr 23, 2021 · f6b1d3a · f6b1d3a
1 parent 567bb53
commit f6b1d3a
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 1 deletion.
diff --git a/src/renderer/components/save-confirmation-dialog/save-confirmation-dialog.html b/src/renderer/components/save-confirmation-dialog/save-confirmation-dialog.html
@@ -11,13 +11,19 @@
   </difference-list>
 
   <div class="e-dialog__footer">
-    <div class="e-grid e-grid-small">
+    <div class="e-grid e-grid-small e-grid-vertical_center">
       <div class="e-cell e-cell-small">
         <div id="save-cancel-button" class="e-btn" data-action="close">Cancel</div>
       </div>
       <div class="e-cell e-cell-small">
         <div id="save-confirm-button" class="e-btn e-btn-primary" data-action="close" @click="confirm()">Save</div>
       </div>
+      <div v-if="hasInvalidatedJson" class="e-cell e-cell-small">
+        <div class="text-color-warning">
+          <e-icon class="e-padding-right-2xs" icon="warning" color="warning"></e-icon>
+          One of the valid JSON fields became invalid.
+        </div>
+      </div>
     </div>
   </div>
 </e-dialog>
diff --git a/src/renderer/components/save-confirmation-dialog/save-confirmation-dialog.js b/src/renderer/components/save-confirmation-dialog/save-confirmation-dialog.js
@@ -1,4 +1,5 @@
 import DifferenceList from '../difference-list/difference-list';
+import { isValidJson } from '../../lib/json-helper/json-helper';
 
 export default {
   name: 'save-confirmation-dialog',
@@ -11,6 +12,13 @@ export default {
   data: () => ({
     opened: false
   }),
+  computed: {
+    hasInvalidatedJson() {
+      return Object.keys(this.originalSecret).some(key =>
+        isValidJson(this.originalSecret[key]) && this.currentSecret[key] && !isValidJson(this.currentSecret[key])
+      );
+    }
+  },
   methods: {
     open() {
       this.opened = true;

diff --git a/src/renderer/components/save-confirmation-dialog/save-confirmation-dialog.spec.js b/src/renderer/components/save-confirmation-dialog/save-confirmation-dialog.spec.js
@@ -2,6 +2,41 @@ import { mount } from '@vue/test-utils';
 import SaveConfirmationDialog from './save-confirmation-dialog';
 
 describe('SaveConfirmationDialog', () => {
+  describe('#hasInvalidatedJson', () => {
+    it('should return false when JSON validity does not change', () => {
+      const { vm } = mount(SaveConfirmationDialog, {
+        propsData: {
+          originalSecret: { someJson: '{"key":"value"}', someOther: 'something' },
+          currentSecret: { someJson: '{"key":"other value"}', someOther: 'something else' }
+        }
+      });
+
+      expect(vm.hasInvalidatedJson).to.be.false;
+    });
+
+    it('should return true when valid JSON becomes invalid', () => {
+      const { vm } = mount(SaveConfirmationDialog, {
+        propsData: {
+          originalSecret: { someJson: '{"key":"value"}', someOther: 'something' },
+          currentSecret: { someJson: '{"key-without-value"}', someOther: 'something else' }
+        }
+      });
+
+      expect(vm.hasInvalidatedJson).to.be.true;
+    });
+
+    it('should return false when valid JSON is removed', () => {
+      const { vm } = mount(SaveConfirmationDialog, {
+        propsData: {
+          originalSecret: { someJson: '{"key":"value"}', someOther: 'something' },
+          currentSecret: { someOther: 'something else' }
+        }
+      });
+
+      expect(vm.hasInvalidatedJson).to.be.false;
+    });
+  });
+
   describe('#confirm', () => {
     it('should emit confirmed event', () => {
       const wrapper = mount(SaveConfirmationDialog, { propsData: { originalSecret: {}, currentSecret: {} } });