Merge pull request #8 from antonkorotkov/develop

Develop

app/updater.js

@@ -14,6 +14,7 @@ const init = window => {
   })
 
   autoUpdater.setFeedURL({
+    host: null,
     provider: 'github',
     token: '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',
     owner: 'antonkorotkov',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Elastron",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Full featured elasticsearch client",
   "main": "main.js",
   "scripts": {
@@ -13,7 +13,8 @@
     "dist-win": "electron-builder -w",
     "dist": "electron-builder -mw",
     "release-mac": "electron-builder -m --publish=onTagOrDraft",
-    "release-win": "electron-builder -w --publish=onTagOrDraft"
+    "release-win": "electron-builder -w --publish=onTagOrDraft",
+    "upgrade-all": "yarn upgrade-interactive --latest"
   },
   "repository": "https://github.com/antonkorotkov/elastron",
   "keywords": [
@@ -59,41 +60,42 @@
     }
   },
   "dependencies": {
-    "@electron/remote": "^2.0.1",
+    "@electron/remote": "^2.0.8",
     "@storeon/router": "^2.0.1",
     "@storeon/svelte": "^1.0.0",
-    "axios": "^0.21.1",
+    "axios": "^0.27.2",
     "btoa": "^1.2.1",
-    "compare-versions": "^3.6.0",
-    "elasticdump": "^6.68.1",
-    "electron-log": "^4.3.4",
-    "electron-updater": "^4.3.8",
-    "jsoneditor": "^9.5.6",
+    "compare-versions": "^4.1.3",
+    "elasticdump": "^6.84.0",
+    "electron-log": "^4.4.7",
+    "electron-updater": "^5.0.1",
+    "https": "^1.0.0",
+    "jsoneditor": "^9.7.4",
     "local-storage": "^2.0.0",
     "lodash": "^4.17.21",
     "node-localstorage": "^2.1.6",
     "percent-to-hex": "^1.0.1",
-    "sirv-cli": "^1.0.11",
-    "storeon": "^3.1.4",
-    "svelte-select": "^4.4.1",
-    "universal-analytics": "^0.4.23"
+    "sirv-cli": "^2.0.2",
+    "storeon": "^3.1.5",
+    "svelte-select": "^4.4.7",
+    "universal-analytics": "^0.5.3"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.5",
-    "electron": "^15.0.0",
-    "electron-builder": "^22.10.5",
-    "electron-notarize": "^1.0.0",
-    "node-sass": "^6.0.1",
-    "rollup": "^2.57.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "electron": "^18.2.3",
+    "electron-builder": "^23.0.3",
+    "electron-notarize": "^1.2.1",
+    "node-sass": "^7.0.1",
+    "rollup": "^2.73.0",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-terser": "^7.0.2",
-    "svelte": "^3.38.2",
-    "svelte-preprocess": "^4.9.5"
+    "svelte": "^3.48.0",
+    "svelte-preprocess": "^4.10.6"
   },
   "prettier": {
     "trailingComma": "es5",

src/components/modal/ConnectionDialog/ConnectionDialog.svelte

@@ -4,6 +4,7 @@
 
   import API from '../../../api/elasticsearch'
   import { isThemeToggleChecked } from '../../../utils/helpers'
+  import Headers from './Headers.svelte'
 
   const { dispatch, connection, history, app } = useStoreon(
     'connection',
@@ -83,12 +84,38 @@
     }
   }
 
+  const onHeaderAdd = () => {
+    dispatch('connection/update', {
+      headers: [...$connection.headers, { name: '', value: '' }],
+    })
+  }
+
+  const onHeaderDelete = index => {
+    let headers = [...$connection.headers]
+    headers.splice(index, 1)
+
+    dispatch('connection/update', {
+      headers,
+    })
+  }
+
+  const onHeaderChange = (data, value) => {
+    const { index, field } = data
+    let headers = [...$connection.headers]
+
+    headers[index][field] = value
+
+    dispatch('connection/update', {
+      headers,
+    })
+  }
+
   $: inverted = isThemeToggleChecked($app.theme)
 </script>
 
 <div class="ui header">Connection Settings</div>
 
-<div class="content">
+<div class="scrolling content">
   {#if $history.connection.length}
     <div class="ui form" class:inverted>
       <div class="fields">
@@ -129,7 +156,7 @@
     </div>
   {/if}
   <form
-    class="ui form"
+    class="ui form segment"
     class:inverted
     on:submit|preventDefault={save}
     id="connection-form"
@@ -188,7 +215,7 @@
               useAuth: e.target.checked,
             })}
         />
-        <label for="auth">Authentication</label>
+        <label for="auth">Basic Auth</label>
       </div>
     </div>
     {#if $connection.useAuth}
@@ -221,6 +248,28 @@
         </div>
       </div>
     {/if}
+    <div class="field">
+      <div class="ui checkbox">
+        <input
+          id="headers"
+          type="checkbox"
+          checked={$connection.addHeaders}
+          on:change={e =>
+            dispatch('connection/update', {
+              addHeaders: e.target.checked,
+            })}
+        />
+        <label for="headers">Add Headers</label>
+      </div>
+    </div>
+    {#if $connection.addHeaders}
+      <Headers
+        headers={$connection.headers}
+        onAdd={onHeaderAdd}
+        onChange={onHeaderChange}
+        onDelete={onHeaderDelete}
+      />
+    {/if}
   </form>
 </div>
 
@@ -248,4 +297,10 @@
   #previous {
     margin-right: 1rem;
   }
+
+  .ui.form.segment {
+    padding: 0;
+    border: 0;
+    box-shadow: none;
+  }
 </style>

src/components/modal/ConnectionDialog/HeaderItem.svelte

@@ -0,0 +1,34 @@
+<script>
+  import IconButton from '../../../components/buttons/IconButton.svelte'
+
+  export let name
+  export let value
+  export let onDelete = () => {}
+  export let onChangeName = () => {}
+  export let onChangeValue = () => {}
+</script>
+
+<div class="fields">
+  <div class="seven wide field">
+    <input
+      type="text"
+      placeholder="Name"
+      value={name}
+      on:change={onChangeName}
+    />
+  </div>
+  <div class="eight wide field">
+    <input type="text" placeholder="Value" {value} on:change={onChangeValue} />
+  </div>
+  <div class="one wide field controls">
+    <IconButton className="minus circle" onClick={onDelete} />
+  </div>
+</div>
+
+<style>
+  .controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

src/components/modal/ConnectionDialog/Headers.svelte

@@ -0,0 +1,20 @@
+<script>
+  import IconButton from '../../../components/buttons/IconButton.svelte'
+  import HeaderItem from './HeaderItem.svelte'
+
+  export let onAdd, onDelete, onChange, headers
+</script>
+
+<div class="headers">
+  {#each headers as header, index}
+    <HeaderItem
+      name={header.name}
+      value={header.value}
+      onDelete={() => onDelete(index)}
+      onChangeName={e => onChange({ index, field: 'name' }, e.target.value)}
+      onChangeValue={e => onChange({ index, field: 'value' }, e.target.value)}
+    />
+  {/each}
+
+  <IconButton className="plus circle" onClick={onAdd} />
+</div>

src/store/connection.js

@@ -18,6 +18,8 @@ export const connection = store => {
         useAuth: false,
         user: '',
         password: '',
+        addHeaders: false,
+        headers: [{ name: '', value: '' }],
       },
     }
   })
@@ -31,6 +33,8 @@ export const connection = store => {
         useAuth: false,
         user: '',
         password: '',
+        addHeaders: false,
+        headers: [],
       },
     }
   })

src/utils/helpers.js

@@ -81,12 +81,21 @@ export const randomId = () => {
  * @param {*} connection
  */
 export const buildConnectionHeaders = connection => {
-  const { useAuth, user, password } = connection
+  const { useAuth, user, password, addHeaders, headers } = connection
+
+  let headersObject = {}
+
   if (useAuth) {
-    return {
-      Authorization: `Basic ${btoa(`${user}:${password}`)}`,
+    headersObject.Authorization = `Basic ${btoa(`${user}:${password}`)}`
+  }
+
+  if (addHeaders && headers.length) {
+    for (const header of headers) {
+      headersObject[header.name] = header.value
     }
   }
+
+  return headersObject
 }
 
 /**