Add console warning for wrong database config (#1059)

* Add console warning for wrong database config

* Add DevBadge

config.json

@@ -1,6 +1,7 @@
 {
   "app_id": "history-analyst-dad",
   "app_key": "be606bcfa3db4377bf488900281aa1cc",
+  "development": true,
   "wpcc_client_id": "0",
   "wpcc_redirect_url": "https://simplenote.com"
 }

lib/app.jsx

@@ -13,6 +13,7 @@ import NoteInfo from './note-info';
 import NavigationBar from './navigation-bar';
 import AppLayout from './app-layout';
 import Auth from './auth';
+import DevBadge from './components/dev-badge';
 import DialogRenderer from './dialog-renderer';
 import { activityHooks, nudgeUnsynced } from './utils/sync';
 import analytics from './analytics';
@@ -115,6 +116,7 @@ export const App = connect(mapStateToProps, mapDispatchToProps)(
       settings: PropTypes.object.isRequired,
 
       client: PropTypes.object.isRequired,
+      isDevConfig: PropTypes.bool.isRequired,
       isSmallScreen: PropTypes.bool.isRequired,
       noteBucket: PropTypes.object.isRequired,
       preferencesBucket: PropTypes.object.isRequired,
@@ -378,6 +380,7 @@ export const App = connect(mapStateToProps, mapDispatchToProps)(
         appState: state,
         authIsPending,
         isAuthorized,
+        isDevConfig,
         noteBucket,
         settings,
         tagBucket,
@@ -401,6 +404,7 @@ export const App = connect(mapStateToProps, mapDispatchToProps)(
 
       return (
         <div className={appClasses}>
+          {isDevConfig && <DevBadge />}
           {isAuthorized ? (
             <div className={mainClasses}>
               {state.showNavigation && (

lib/boot.js

@@ -25,6 +25,7 @@ import '../scss/style.scss';
 import { content as welcomeMessage } from './welcome-message';
 
 import appState from './flux/app-state';
+import isDevConfig from './utils/is-dev-config';
 const { newNote } = appState.actionCreators;
 
 const config = getConfig();
@@ -111,6 +112,7 @@ let props = {
   noteBucket: client.bucket('note'),
   preferencesBucket: client.bucket('preferences'),
   tagBucket: client.bucket('tag'),
+  isDevConfig: isDevConfig(config),
   onAuthenticate: (username, password) => {
     if (!(username && password)) {
       return;

lib/components/dev-badge/index.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const DevBadge = () => {
+  return <div className="dev-badge">DEV</div>;
+};
+
+export default DevBadge;

lib/components/dev-badge/style.scss

@@ -0,0 +1,12 @@
+.dev-badge {
+  position: absolute;
+  opacity: .8;
+  z-index: 1;
+  right: 12px;
+  bottom: 12px;
+  padding: 2px 4px;
+  background: $gray-lightest;
+  color: $gray-darkest;
+  font-size: .75rem;
+  line-height: 1;
+}

lib/utils/is-dev-config/index.js

@@ -0,0 +1,12 @@
+const isDevConfig = config => {
+  const isDev = Boolean(config.development);
+  const whichDB = isDev ? 'Development' : 'Production';
+  const shouldWarn =
+    process.env.NODE_ENV === 'production' && config.development;
+  const consoleMode = shouldWarn ? 'warn' : 'info';
+  console[consoleMode](`Simperium config: ${whichDB}`); // eslint-disable-line no-console
+
+  return isDev;
+};
+
+export default isDevConfig;

lib/utils/is-dev-config/test.js

@@ -0,0 +1,30 @@
+import isDevConfig from './';
+
+describe('isDevConfig', () => {
+  const unmockedConsole = global.console;
+
+  beforeEach(() => {
+    global.console = {
+      info: jest.fn(),
+      warn: jest.fn(),
+    };
+  });
+
+  afterEach(() => {
+    global.process.env.NODE_ENV = 'test';
+    global.console = unmockedConsole;
+  });
+
+  it('should return a boolean of whether config is dev or not', () => {
+    expect(isDevConfig({ development: true })).toBe(true);
+    expect(isDevConfig({})).toBe(false);
+  });
+
+  it('should console.warn when NODE_ENV is production and Simperium is not', () => {
+    global.process.env.NODE_ENV = 'production';
+    global.console.warn = jest.fn();
+    const config = { development: true };
+    isDevConfig(config);
+    expect(global.console.warn).toHaveBeenCalled();
+  });
+});

scss/_components.scss

@@ -1,5 +1,6 @@
 @import 'app-layout/style';
 @import 'auth/style';
+@import 'components/dev-badge/style';
 @import 'components/panel-title/style';
 @import 'components/progress-bar/style';
 @import 'components/spinner/style';