From 9bcf9874923a275c61bade67cb67a15ae5de4920 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 4 Dec 2018 02:57:20 +0900 Subject: [PATCH] Add console warning for wrong database config (#1059) * Add console warning for wrong database config * Add DevBadge --- config.json | 1 + lib/app.jsx | 4 ++++ lib/boot.js | 2 ++ lib/components/dev-badge/index.jsx | 7 +++++++ lib/components/dev-badge/style.scss | 12 ++++++++++++ lib/utils/is-dev-config/index.js | 12 ++++++++++++ lib/utils/is-dev-config/test.js | 30 +++++++++++++++++++++++++++++ scss/_components.scss | 1 + 8 files changed, 69 insertions(+) create mode 100644 lib/components/dev-badge/index.jsx create mode 100644 lib/components/dev-badge/style.scss create mode 100644 lib/utils/is-dev-config/index.js create mode 100644 lib/utils/is-dev-config/test.js diff --git a/config.json b/config.json index 25c75fd6e..298ae2b8c 100644 --- a/config.json +++ b/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" } diff --git a/lib/app.jsx b/lib/app.jsx index 636d27727..5fc614423 100644 --- a/lib/app.jsx +++ b/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 (
+ {isDevConfig && } {isAuthorized ? (
{state.showNavigation && ( diff --git a/lib/boot.js b/lib/boot.js index 1f70def7a..7e8fa3b15 100644 --- a/lib/boot.js +++ b/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; diff --git a/lib/components/dev-badge/index.jsx b/lib/components/dev-badge/index.jsx new file mode 100644 index 000000000..98da4e8f8 --- /dev/null +++ b/lib/components/dev-badge/index.jsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const DevBadge = () => { + return
DEV
; +}; + +export default DevBadge; diff --git a/lib/components/dev-badge/style.scss b/lib/components/dev-badge/style.scss new file mode 100644 index 000000000..319032013 --- /dev/null +++ b/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; +} diff --git a/lib/utils/is-dev-config/index.js b/lib/utils/is-dev-config/index.js new file mode 100644 index 000000000..cbfddcca1 --- /dev/null +++ b/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; diff --git a/lib/utils/is-dev-config/test.js b/lib/utils/is-dev-config/test.js new file mode 100644 index 000000000..02765b7ce --- /dev/null +++ b/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(); + }); +}); diff --git a/scss/_components.scss b/scss/_components.scss index d65d1b096..1cb161f77 100644 --- a/scss/_components.scss +++ b/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';