COMPASS-803: Backport COMPASS-586 COMPASS-788 icon changes (#792)

* COMPASS-586: Improve Linux appearance (logo in popups/about box, ...) (#762)

* COMPASS-586: Improve Linux appearance (logo in popups/about box, ...)

* assert.equals => assert.equal

* [Selectively cherry-picked from COMPASS 701 Charts]

* Extract PackageManager setup into its own file

So I can possibly reuse it in tests where I’d like to test our listenToExternalStore wiring.

* Expand the --renderer test so it can handle integration tests

Tried several times to get this into the --unit tests, but our internal-packages tend to depend on “window” and “document” so that is not possible. Both those are genuinely available in the renderer process so it’s definitely a better home for these tests for now. We can decide later when we have more if they can or should be decoupled further.

* COMPASS-788: mongodb:// in clipboard message has regressed on macOS / Red Hat (#787)

* Fix white screen and icon on macOS

If you have a string prefixed with `mongodb://`, e.g. every Atlas URL, present in your clipboard.

* Fix icon on Share Schema as JSON message box

Tested on a Red Hat VirtualBox VM, as per:
https://github.com/10gen/compass-internal-docs/pull/4

* Add regression test for the share-schema-as-json feature

Not unit testing the Ampersand View clipboard version as I have no idea how to do so.

* Update hadron-app => ampersand-app

As we don’t expect to back port b4a5a26

* Add ‘undefined’ to share-schema-as-json test

Not sure why this is ‘undefined’ on this branch but not master, but there’s a lot of hadron-app and other changes floating around so it probably doesn’t matter.

Author: pzrq

package.json

@@ -200,6 +200,7 @@
     "mongodb-runner": "^3.4.0",
     "react-addons-test-utils": "^15.2.1",
     "sinon": "^1.17.6",
+    "sinon-chai": "^2.8.0",
     "spectron": "^3.2.6",
     "xvfb-maybe": "^0.1.3"
   },

src/app/connect/index.js

@@ -16,6 +16,7 @@ var dialog = remote.dialog;
 var Clipboard = remote.clipboard;
 var BrowserWindow = remote.BrowserWindow;
 var metrics = require('mongodb-js-metrics')();
+var COMPASS_ICON_PATH = require('../../icon').path;
 
 var debug = require('debug')('mongodb-compass:connect:index');
 
@@ -331,6 +332,7 @@ var ConnectView = View.extend({
       // ask user if Compass should use it to fill out form
       dialog.showMessageBox(BrowserWindow.getFocusedWindow(), {
         type: 'info',
+        icon: COMPASS_ICON_PATH,
         message: 'MongoDB connection string detected',
         detail: 'Compass detected a MongoDB connection string in your '
           + 'clipboard. Do you want to use the connection string to '

src/app/index.js

@@ -21,8 +21,6 @@ var ModuleCache = require('hadron-module-cache');
 ModuleCache.register(resourcePath);
 ModuleCache.add(resourcePath);
 
-var AppRegistry = require('hadron-app-registry');
-var PackageManager = require('hadron-package-manager').PackageManager;
 
 var pkg = require('../../package.json');
 var CompileCache = require('hadron-compile-cache');
@@ -94,9 +92,7 @@ new StyleManager(
 //   order to ensure that the compile cache has already been loaded and
 //   hooked into require.extensions. Otherwise, packages will not have
 //   use of the compile cache.
-app.appRegistry = new AppRegistry();
-app.packageManager = new PackageManager(path.join(__dirname, '..', 'internal-packages'));
-app.packageManager.activate();
+require('./setup-package-manager');
 
 function getConnection(model, done) {
   function _fetch(fn) {

src/app/setup-package-manager.js

@@ -0,0 +1,8 @@
+const app = require('ampersand-app');
+const path = require('path');
+const AppRegistry = require('hadron-app-registry');
+const { PackageManager } = require('hadron-package-manager');
+
+app.appRegistry = new AppRegistry();
+app.packageManager = new PackageManager(path.join(__dirname, '..', 'internal-packages'));
+app.packageManager.activate();

src/icon.js

@@ -0,0 +1,19 @@
+var path = require('path');
+var COMPASS_ICON = path.join(__dirname, 'app', 'images', 'compass-dialog-icon.png');
+var nativeImage = require('electron').nativeImage;
+
+/**
+ * Convenience for getting the app icon to customize native UI components
+ * via electron.
+ *
+ * @example
+ * ```javascript
+ * var icon = require('./icon');
+ * var dialog = require('electron').dialog;
+ * dialog.showMessageBox({icon: icon, message: 'I have a nice Compass icon.'});
+ * ```
+ *
+ * @see https://jira.mongodb.org/browse/COMPASS-586
+ */
+module.exports = nativeImage.createFromPath(COMPASS_ICON);
+module.exports.path = COMPASS_ICON;

src/internal-packages/schema/lib/store/index.js

@@ -7,6 +7,8 @@ const schemaStream = require('mongodb-schema').stream;
 const toNS = require('mongodb-ns');
 const ReadPreference = require('mongodb').ReadPreference;
 
+const COMPASS_ICON_PATH = require('../../../../icon').path;
+
 /**
  * The default read preference.
  */
@@ -72,6 +74,7 @@ const SchemaStore = Reflux.createStore({
 
     dialog.showMessageBox(BrowserWindow.getFocusedWindow(), {
       type: 'info',
+      icon: COMPASS_ICON_PATH,
       message: 'Share Schema',
       detail: detail,
       buttons: ['OK']

src/main/window-manager.js

@@ -14,6 +14,7 @@ var debug = require('debug')('mongodb-compass:electron:window-manager');
 var dialog = electron.dialog;
 var path = require('path');
 var ipc = require('hadron-ipc');
+var COMPASS_ICON = require('../icon');
 
 /**
  * When running in electron, we're in `/src/main`.
@@ -118,13 +119,21 @@ var createWindow = module.exports.create = function(opts) {
     width: DEFAULT_WIDTH,
     height: DEFAULT_HEIGHT,
     minwidth: MIN_WIDTH,
-    url: DEFAULT_URL
+    url: DEFAULT_URL,
+    /**
+     * On Windows and macOS, this will be set automatically to the optimal
+     * app icon.  Only on Linux do we need to set this explictly.
+     *
+     * @see https://jira.mongodb.org/browse/COMPASS-586
+     */
+    icon: process.platform === 'linux' ? COMPASS_ICON : undefined
   });
 
   debug('creating new window: ' + opts.url);
   var _window = new BrowserWindow({
     width: opts.width,
     height: opts.height,
+    icon: opts.icon,
     'min-width': opts.minwidth,
     'web-preferences': {
       'subpixel-font-scaling': true,
@@ -164,9 +173,9 @@ function showConnectWindow() {
 function showAboutDialog() {
   dialog.showMessageBox({
     type: 'info',
-    title: 'About MongoDB Compass',
-    icon: path.join(RESOURCES, 'images', 'compass-dialog-icon.png'),
-    message: 'MongoDB Compass',
+    title: 'About ' + app.getName(),
+    icon: COMPASS_ICON,
+    message: app.getName(),
     detail: 'Version ' + app.getVersion(),
     buttons: ['OK']
   });

test/renderer/_setup.js

@@ -0,0 +1,10 @@
+require('babel-register')();
+
+require('../../src/app/reflux-listen-to-external-store');
+
+// Would be nice not to need this jQuery being present
+window.jQuery = require('jquery');
+
+// Require our internal-packages so we can integration-test things fast,
+// i.e. without requiring a full functional test
+require('../../src/app/setup-package-manager');

test/renderer/share-schema-as-json.test.js

@@ -0,0 +1,53 @@
+/* eslint no-unused-expressions: 0 */
+const app = require('ampersand-app');
+const sinon = require('sinon');
+const { remote } = require('electron');
+const chai = require('chai');
+const sinonChai = require('sinon-chai');
+const expect = chai.expect;
+const COMPASS_ICON_PATH = require('../../src/icon').path;
+
+// For `expect(mySpy).to.have.been.calledWith("foo");` syntax
+chai.use(sinonChai);
+
+describe('SchemaStore', function() {
+  let writeText;
+  let showMessageBox;
+
+  beforeEach(function() {
+    this.SchemaStore = app.appRegistry.getStore('Schema.Store');
+    this.clipboardSpy = sinon.spy();
+    this.messageBoxSpy = sinon.spy();
+    writeText = remote.clipboard.writeText;
+    showMessageBox = remote.dialog.showMessageBox;
+    remote.clipboard.writeText = this.clipboardSpy;
+    remote.dialog.showMessageBox = this.messageBoxSpy;
+  });
+
+  afterEach(function() {
+    remote.clipboard.writeText = writeText;
+    remote.dialog.showMessageBox = showMessageBox;
+  });
+
+  context('shares a "null" schema as JSON', function() {
+    beforeEach(function() {
+      // Note that normally this menu option is only exposed after the user has
+      // connected to an instance, navigated to a collection and sampled schema
+      this.SchemaStore.handleSchemaShare();
+    });
+    it('copies to the clipboard', function() {
+      expect(this.clipboardSpy).to.have.been.calledWith('null');
+    });
+    it('displays an informative message box', function() {
+      expect(this.messageBoxSpy).to.have.been.calledWith(null, {
+        buttons: ['OK'],
+        detail: 'The schema definition of ' +
+        'undefined' +
+        ' has been copied to your clipboard in JSON format.',
+        icon: COMPASS_ICON_PATH,
+        message: 'Share Schema',
+        type: 'info'
+      });
+    });
+  });
+});

test/unit/icon.test.js

@@ -0,0 +1,8 @@
+var assert = require('assert');
+var icon = require('../../src/icon');
+
+describe('icon', function() {
+  it('should be a non-empty nativeImage', function() {
+    assert.equal(icon.isEmpty(), false);
+  });
+});