Dev instance changelog button.

ui/component/header/index.js

@@ -1,4 +1,3 @@
-import * as MODALS from 'constants/modal_types';
 import * as SETTINGS from 'constants/settings';
 import { connect } from 'react-redux';
 import { selectTotalBalance, selectBalance } from 'redux/selectors/wallet';
@@ -33,7 +32,7 @@ const select = (state) => ({
 const perform = (dispatch) => ({
   setClientSetting: (key, value, push) => dispatch(doSetClientSetting(key, value, push)),
   signOut: () => dispatch(doSignOut()),
-  openSignOutModal: () => dispatch(doOpenModal(MODALS.SIGN_OUT)),
+  doOpenModal: (modal, props) => dispatch(doOpenModal(modal, props)),
   clearEmailEntry: () => dispatch(doClearEmailEntry()),
   clearPasswordEntry: () => dispatch(doClearPasswordEntry()),
 });

ui/component/header/view.jsx

@@ -1,6 +1,7 @@
 // @flow
 import { ENABLE_NO_SOURCE_CLAIMS, CHANNEL_STAKED_LEVEL_LIVESTREAM, ENABLE_UI_NOTIFICATIONS } from 'config';
 import * as ICONS from 'constants/icons';
+import * as MODALS from 'constants/modal_types';
 import * as SETTINGS from 'constants/settings';
 import * as PAGES from 'constants/pages';
 import React from 'react';
@@ -55,7 +56,7 @@ type Props = {
   syncError: ?string,
   emailToVerify?: string,
   signOut: () => void,
-  openSignOutModal: () => void,
+  doOpenModal: (string, ?{}) => void,
   clearEmailEntry: () => void,
   clearPasswordEntry: () => void,
   hasNavigated: boolean,
@@ -82,7 +83,7 @@ const Header = (props: Props) => {
     authHeader,
     signOut,
     syncError,
-    openSignOutModal,
+    doOpenModal,
     clearEmailEntry,
     clearPasswordEntry,
     emailToVerify,
@@ -270,6 +271,27 @@ const Header = (props: Props) => {
               >
                 <Logo />
               </Button>
+
+              {/* @if process.env.DEV_CHANGELOG */}
+              {history.location.pathname === '/' && (
+                <Button
+                  title={'Changelog'}
+                  className="badge--alert"
+                  label={'Changelog'}
+                  icon={ICONS.FEEDBACK}
+                  onClick={() => {
+                    doOpenModal(MODALS.CONFIRM, {
+                      title: __('Changelog'),
+                      subtitle: __('Warning: this is a test instance.'),
+                      body: <p style={{ whiteSpace: 'pre-wrap' }}>{process.env.DEV_CHANGELOG}</p>,
+                      onConfirm: (closeModal) => closeModal(),
+                      hideCancel: true,
+                    });
+                  }}
+                />
+              )}
+              {/* @endif */}
+
               {!authHeader && (
                 <div className="header__center">
                   {/* @if TARGET='app' */}
@@ -347,7 +369,7 @@ const Header = (props: Props) => {
                       </MenuLink>
 
                       {authenticated ? (
-                        <MenuItem onSelect={IS_WEB ? signOut : openSignOutModal}>
+                        <MenuItem onSelect={IS_WEB ? signOut : () => doOpenModal(MODALS.SIGN_OUT)}>
                           <div className="menu__link">
                             <Icon aria-hidden icon={ICONS.SIGN_OUT} />
                             {__('Sign Out')}