save and load settings

-
Ticket: AUT-2324

Co-authored-by: Tamas Toth <[email protected]>

package.json

@@ -119,6 +119,7 @@
     "electron-builder": "24.6.4",
     "electron-debug": "3.2.0",
     "electron-devtools-installer": "3.2.0",
+    "electron-json-storage": "4.6.0",
     "electron-log": "4.4.8",
     "electron-updater": "6.1.4",
     "eslint": "8.51.0",

src/main/index.js

@@ -83,7 +83,9 @@ const addSettingsCommandToDefaultMenus = () => {
     label: 'Settings',
     accelerator: 'CommandOrControl+,',
     click: () => {
-      BrowserWindow.getAllWindows().forEach(window => window.webContents.send('show-settings'));
+      BrowserWindow.getAllWindows().forEach(window => {
+        window.webContents.send('show-settings', app.getPath('userData'));
+      });
     }
   };
 

src/renderer/components/settings-dialog/settings-dialog.html

@@ -4,12 +4,18 @@
     v-on="{ 'dialog.close': () => { dialogOpened = false } }"
     headline="Settings"
   >
-    winter is coming
+    <div class="e-field">
+      <label class="e-field__label">
+        Gcloud Path
+        <e-tooltip content="Enter the output of the following command: <strong>whereis gcloud</strong>" type="helper" has-action></e-tooltip>
+      </label>
+      <input id="gcloud-path" class="e-input" type="text" v-model="gcloudPath" placeholder="Enter gcloud path here..." />
+    </div>
 
     <div class="e-dialog__footer">
       <div class="e-grid e-grid-small">
         <div class="e-cell e-cell-small">
-          <div class="e-btn e-btn-primary" @click="save()">Save</div>
+          <div id="saveButton" class="e-btn e-btn-primary" @click="save()">Save</div>
         </div>
       </div>
     </div>

src/renderer/components/settings-dialog/settings-dialog.js

@@ -1,19 +1,34 @@
 import { ipcRenderer } from 'electron';
+import { setDataPath, getSync, setSync } from 'electron-json-storage';
+
+export const SETTING_FILE_NAME = 'secret-editor-settings';
 
 export default {
   name: 'settings-dialog',
   template: require('./settings-dialog.html'),
   data: () => ({
-    dialogOpened: false
+    dialogOpened: false,
+    gcloudPath: ''
   }),
   methods: {
     save() {
-      console.log('save');
+      setSync(SETTING_FILE_NAME, { gcloudPath: this.gcloudPath });
+      ipcRenderer.send('restart');
     }
   },
   mounted() {
-    ipcRenderer.on('show-settings', async () => {
+    ipcRenderer.on('show-settings', (event, path) => {
+      setDataPath(path);
+      this.gcloudPath = loadSettings().gcloudPath || '';
       this.dialogOpened = true;
     });
   }
 };
+
+const loadSettings = () => {
+  try {
+    return getSync(SETTING_FILE_NAME);
+  } catch (error) {
+    return {};
+  }
+};

src/renderer/components/settings-dialog/settings-dialog.spec.js

@@ -0,0 +1,93 @@
+import { mount } from '@vue/test-utils';
+import { rmSync, writeFileSync } from 'fs';
+import SettingsDialog, { SETTING_FILE_NAME } from './settings-dialog';
+import { ipcRenderer } from 'electron';
+import { getDataPath, getSync, setDataPath, setSync } from 'electron-json-storage';
+
+describe('SettingsDialog', () => {
+  const settingsFilePath = '/tmp/secret-editor-test/';
+
+  context('when show-settings event arrives', () => {
+    it('should display dialog', async () => {
+      const wrapper = mount(SettingsDialog);
+      expect(wrapper.vm.dialogOpened).to.be.false;
+
+      await emitShowSettings(wrapper);
+
+      expect(wrapper.vm.dialogOpened).to.be.true;
+    });
+
+    it('should call setDataPath on electron-storage-json', async () => {
+      const wrapper = mount(SettingsDialog);
+      setDataPath('/oldTestPath');
+
+      await emitShowSettings(wrapper);
+
+      expect(getDataPath()).to.eql(settingsFilePath);
+    });
+
+    it('should initialise settings when settings file does not exist', async () => {
+      rmSync(settingsFilePath, { force: true, recursive: true });
+      const wrapper = mount(SettingsDialog);
+
+      await emitShowSettings(wrapper);
+
+      expect(wrapper.find('#gcloud-path').element.value).to.eql('');
+    });
+
+    it('should initialise glcoud path when settings file exists but path is not set', async () => {
+      setSync(SETTING_FILE_NAME, {}, { dataPath: settingsFilePath });
+      const wrapper = mount(SettingsDialog);
+
+      await emitShowSettings(wrapper);
+
+      expect(wrapper.find('#gcloud-path').element.value).to.eql('');
+    });
+
+    it('should initialise glcoud path when settings file contains invalid json', async () => {
+      writeFileSync(`${settingsFilePath}/${SETTING_FILE_NAME}.json`, 'INVALID');
+      const wrapper = mount(SettingsDialog);
+
+      await emitShowSettings(wrapper);
+
+      expect(wrapper.find('#gcloud-path').element.value).to.eql('');
+    });
+
+    it('should initialise glcoud path when settings file exists and path is set', async () => {
+      setSync(SETTING_FILE_NAME, { gcloudPath: '/some-interesting-path' }, { dataPath: settingsFilePath });
+      const wrapper = mount(SettingsDialog);
+
+      await emitShowSettings(wrapper);
+
+      expect(wrapper.find('#gcloud-path').element.value).to.eql('/some-interesting-path');
+    });
+  });
+
+  describe('#save', () => {
+    it('should update settings file', async () => {
+      setSync(SETTING_FILE_NAME, { gcloudPath: '/some-interesting-path' }, { dataPath: settingsFilePath });
+      const wrapper = mount(SettingsDialog);
+      await emitShowSettings(wrapper);
+
+      await wrapper.find('#gcloud-path').setValue('/an-even-more-interesting-path');
+      await wrapper.find('#saveButton').trigger('click');
+
+      expect(getSync(SETTING_FILE_NAME)).to.eql({ gcloudPath: '/an-even-more-interesting-path' });
+    });
+
+    it('should send restart message to main process when save button clicked', async () => {
+      sinon.stub(ipcRenderer, 'send');
+      const wrapper = mount(SettingsDialog);
+      await emitShowSettings(wrapper);
+
+      await wrapper.find('#saveButton').trigger('click');
+
+      expect(ipcRenderer.send).to.have.been.calledWith('restart');
+    });
+  });
+
+  const emitShowSettings = async (wrapper) => {
+    ipcRenderer.emit('show-settings', {}, settingsFilePath);
+    await wrapper.vm.$nextTick();
+  };
+});