Add ssh agent option

.github/workflows/build.yml

@@ -37,6 +37,12 @@ jobs:
 
     - run: npm run format:check
 
+    - run: npm run test
+
+    - name: Prepare integration test dependencies
+      if: runner.os == 'Linux'
+      run: ./scripts/start-test-integration-deps.sh
+
     - name: Build app for e2e test
       if: runner.os == 'Linux'
       run: npm run compile

.gitignore

@@ -11,6 +11,8 @@ npm-debug.log
 # test files
 *.sqlite3
 *.db
-test/fixtures/sqlite/sqlectron.json
 
+# auto generated files during tests
+test/fixtures/sqlite/sqlectron.json
 test/fixtures/browser/tmp.sqlectron.json
+test/fixtures/ssh-mysql/sqlectron.json

docker-compose.yml

@@ -1,12 +1,18 @@
-dist:
-  image: maxcnunes/electron-distribution:eb3node4-onbuild
-  # Build all and pack only for Windows
-  # because is not possible packing for OSX from Linux.
-  # Use unsafe-perm to force npm respect the tmp path (http://git.io/vB2oR)
-  command: npm run --unsafe-perm dist:winlinux
-  environment:
-    # Keep the tmp folder inside the project.
-    # This way we dont lose some cache files between distribution tasks
-    TMPDIR: /usr/src/app/.tmp
-  volumes:
-    - .:/usr/src/app
+version: '3'
+
+services:
+  # ---------------------
+  # Distribution services
+  # ---------------------
+  dist:
+    image: maxcnunes/electron-distribution:eb3node4-onbuild
+    # Build all and pack only for Windows
+    # because is not possible packing for OSX from Linux.
+    # Use unsafe-perm to force npm respect the tmp path (http://git.io/vB2oR)
+    command: npm run --unsafe-perm dist:winlinux
+    environment:
+      # Keep the tmp folder inside the project.
+      # This way we dont lose some cache files between distribution tasks
+      TMPDIR: /usr/src/app/.tmp
+    volumes:
+      - .:/usr/src/app

docs/development/README.md

@@ -40,6 +40,12 @@ npm run lint
 
 #### E2E Testing
 
+Start integration test dependencies:
+
+```
+./scripts/start-test-integration-deps.sh
+```
+
 Running in production mode:
 
 ```

package.json

@@ -95,7 +95,7 @@
     "lodash.defaultsdeep": "^4.6.0",
     "lodash.omit": "^4.5.0",
     "mkdirp": "^1.0.4",
-    "sqlectron-db-core": "^0.7.1",
+    "sqlectron-db-core": "^0.8.1",
     "uuid": "^8.3.2",
     "valida2": "^2.6.1"
   },

scripts/start-test-integration-deps.sh

@@ -0,0 +1,20 @@
+#!/bin/bash
+set -e
+
+cd ..
+
+if [ ! -d "sqlectron-db-core" ]; then
+  # Only clone flat in the CI. In development the developer probably wants to
+  # use the sqlectron-db-core for other changes as well and may need the full history.
+  if [ "$CI" == "true" ]; then
+    git clone --depth 1 https://github.com/sqlectron/sqlectron-db-core.git
+  else
+    git clone https://github.com/sqlectron/sqlectron-db-core.git
+  fi
+fi
+
+cd sqlectron-db-core
+docker-compose up -d openssh-server mysql
+
+# Given a few seconds for the all deps be ready
+sleep 10

src/browser/core/validators/server.ts

@@ -93,6 +93,7 @@ const SSH_SCHEMA = {
   password: [{ sanitizer: passwordSanitizer }, { validator: passwordValidator, min: 1 }],
   privateKey: [{ sanitizer: Valida.Sanitizer.trim }, { validator: Valida.Validator.len, min: 1 }],
   privateKeyWithPassphrase: [{ validator: boolValidator }],
+  useAgent: [{ validator: boolValidator }],
 };
 
 const SERVER_SCHEMA = {

src/common/types/server.ts

@@ -25,6 +25,7 @@ export interface Server {
     host: string;
     port: number;
     privateKeyWithPassphrase?: boolean;
+    useAgent?: boolean;
   };
   ssl?:
     | {

src/renderer/components/server-modal-form.jsx

@@ -171,6 +171,7 @@ export default class ServerModalForm extends Component {
         user: ssh.user,
         password: ssh.password && ssh.password.length ? ssh.password : null,
         privateKey: ssh.privateKey && ssh.privateKey.length ? ssh.privateKey : null,
+        useAgent: !!ssh.useAgent,
         privateKeyWithPassphrase: !!ssh.privateKeyWithPassphrase,
       };
     }
@@ -449,7 +450,7 @@ export default class ServerModalForm extends Component {
             <div className="field">
               <label>SSH Address</label>
               <div className="fields">
-                <div className={`seven wide field ${this.highlightError('ssh.host')}`}>
+                <div className={`six wide field ${this.highlightError('ssh.host')}`}>
                   <input
                     type="text"
                     name="ssh.host"
@@ -470,6 +471,24 @@ export default class ServerModalForm extends Component {
                     onChange={this.handleChange}
                   />
                 </div>
+                <div className="four wide field" style={{ paddingTop: '0.5em' }}>
+                  <Checkbox
+                    name="ssh.useAgent"
+                    label="Use ssh agent"
+                    disabled={!isSSHChecked}
+                    checked={ssh && ssh.useAgent}
+                    onChecked={() => {
+                      const stateSSH = this.state.ssh ? { ...this.state.ssh } : {};
+                      stateSSH.useAgent = true;
+                      this.setState({ ssh: stateSSH });
+                    }}
+                    onUnchecked={() => {
+                      const stateSSH = this.state.ssh ? { ...this.state.ssh } : {};
+                      stateSSH.useAgent = false;
+                      this.setState({ ssh: stateSSH });
+                    }}
+                  />
+                </div>
               </div>
             </div>
             <div className="fields">
@@ -490,7 +509,7 @@ export default class ServerModalForm extends Component {
                   type="password"
                   name="ssh.password"
                   placeholder="Password"
-                  disabled={!isSSHChecked || ssh.privateKey}
+                  disabled={!isSSHChecked || ssh.privateKey || ssh.useAgent}
                   value={ssh.password || ''}
                   onChange={this.handleChange}
                 />
@@ -502,7 +521,7 @@ export default class ServerModalForm extends Component {
                     type="text"
                     name="ssh.privateKey"
                     placeholder="~/.ssh/id_rsa"
-                    disabled={!isSSHChecked || ssh.password}
+                    disabled={!isSSHChecked || ssh.password || ssh.useAgent}
                     value={ssh.privateKey || ''}
                     onChange={this.handleChange}
                   />
@@ -513,7 +532,7 @@ export default class ServerModalForm extends Component {
                       id="file.ssh.privateKey"
                       name="file.ssh.privateKey"
                       onChange={this.handleChange}
-                      disabled={!isSSHChecked || ssh.password}
+                      disabled={!isSSHChecked || ssh.password || ssh.useAgent}
                       style={{ display: 'none' }}
                     />
                   </label>

test/e2e/helper.ts

@@ -2,6 +2,7 @@ import path from 'path';
 import { expect } from 'chai';
 import electronPath = require('electron');
 import { electron, ElectronApplication, Page } from 'playwright-electron';
+import { ElementHandle } from 'playwright-core';
 
 const startApp = async ({
   sqlectronHome,
@@ -63,10 +64,29 @@ const expectToEqualText = async (page: Page, selector: string, text: string): Pr
   expect(await page.$eval(selector, (node: HTMLElement) => node.innerText)).to.be.equal(text);
 };
 
+const getElementByText = async (
+  page: Page,
+  selector: string,
+  text: string,
+): Promise<ElementHandle<HTMLElement>> => {
+  const elements = await page.$$(selector);
+  expect(elements).to.have.lengthOf.at.least(1);
+
+  for (const element of elements) {
+    const eltext = await element.innerText();
+    if (eltext === text) {
+      return element as ElementHandle<HTMLElement>;
+    }
+  }
+
+  throw new Error(`Not found element with text "${text}" for selector "${selector}"`);
+};
+
 export default {
   startApp,
   endApp,
   wait,
   getAppPage,
   expectToEqualText,
+  getElementByText,
 };

test/e2e/test.sqlite.ts

@@ -48,7 +48,7 @@ describe('Sqlite', function () {
     db = setupDB();
 
     const res = await helper.startApp({
-      sqlectronHome: path.join(__dirname, '../fixtures/sqlite'),
+      sqlectronHome: BASE_PATH,
     });
 
     app = res.app;
@@ -86,7 +86,7 @@ describe('Sqlite', function () {
     // Set default query and automatically executes it
     await helper.expectToEqualText(
       mainWindow,
-      '.ace_content',
+      '.react-tabs__tab-panel--selected .ace_content',
       'SELECT * FROM "document" LIMIT 101',
     );