add a "trim" button to the value editor toolbar

-
Ticket: AUT-2038

src/renderer/components/secret-editor/value-editor/trim-button/trim-button.html

@@ -0,0 +1,8 @@
+<e-tooltip content="Trim" class="trim">
+  <div
+    class="e-btn e-btn-small e-btn-onlyicon e-btn-borderless"
+    @click="trim()"
+  >
+    <e-icon icon="e-cut" size="small"></e-icon>
+  </div>
+</e-tooltip>

src/renderer/components/secret-editor/value-editor/trim-button/trim-button.js

@@ -0,0 +1,12 @@
+export default {
+  name: 'trim-button',
+  template: require('./trim-button.html'),
+  props: {
+    text: { type: String, default: '' }
+  },
+  methods: {
+    trim() {
+      this.$emit('trim', this.text.trim());
+    }
+  }
+};

src/renderer/components/secret-editor/value-editor/trim-button/trim-button.spec.js

@@ -0,0 +1,19 @@
+import { mount } from '@vue/test-utils';
+import JsonFormatButton from './trim-button';
+
+describe('TrimButton', () => {
+  describe('#trim', () => {
+    it('should trim the given text', () => {
+      const wrapper = mount(JsonFormatButton, {
+        propsData: {
+          text: ' Gummi Bears '
+        }
+      });
+
+      wrapper.find('.e-btn').trigger('click');
+
+      const emitted = wrapper.emitted().trim[0][0];
+      expect(emitted).to.eql('Gummi Bears');
+    });
+  });
+});

src/renderer/components/secret-editor/value-editor/value-editor.html

@@ -9,6 +9,10 @@
   />
 
   <div class="editor-toolbar">
+    <trim-button
+      :text="value"
+      @trim="emitChange($event)"
+    />
     <json-format-button
       v-if="editorLanguage === 'json'"
       :text="value"

src/renderer/components/secret-editor/value-editor/value-editor.js

@@ -3,12 +3,13 @@ import { looksLikeJson } from '../../../lib/json-helper/json-helper';
 import EditorBase from '../editor-base';
 import JsonFormatButton from './json-format-button/json-format-button';
 import ChangeHistoryButton from './change-history-button/change-history-button';
+import TrimButton from './trim-button/trim-button';
 
 export default {
   name: 'value-editor',
   template: require('./value-editor.html'),
   mixins: [EditorBase],
-  components: { AceEditor, JsonFormatButton, ChangeHistoryButton },
+  components: { AceEditor, JsonFormatButton, ChangeHistoryButton, TrimButton },
   props: {
     fieldKey: String
   },

src/renderer/components/secret-editor/value-editor/value-editor.spec.js

@@ -53,6 +53,12 @@ describe('ValueEditor', () => {
 
       expect(wrapper.emitted()).to.eql({ change: [['something else']] });
     });
+
+    it('should emit change event when a field is trimmed', () => {
+      const wrapper = mountWithStore(ValueEditor, { propsData: { value: ' Dr Bubo ' } });
+      wrapper.find('.editor-toolbar .trim .e-btn').trigger('click');
+      expect(wrapper.emitted()).to.eql({ change: [['Dr Bubo']] });
+    });
   });
 });