add clear access key button (close #486) (#675)

.gitignore

@@ -1,3 +1,4 @@
 npm-debug.log
 *.temp
 *.DS_Store
+.tern-project

console/src/components/Services/Data/Metadata/ClearAccessKey.js

@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { clearAccessKeyState } from '../../../AppState';
+import globals from '../../../../Globals';
+
+import {
+  showSuccessNotification,
+  showErrorNotification,
+} from '../Notification';
+
+class ClearAccessKey extends Component {
+  constructor() {
+    super();
+    this.state = {};
+    this.state.isClearing = false;
+  }
+  render() {
+    const styles = require('../PageContainer/PageContainer.scss');
+    const metaDataStyles = require('./Metadata.scss');
+    return (
+      <div className={metaDataStyles.display_inline}>
+        <button
+          data-test="data-clear-access-key"
+          className={styles.default_button + ' ' + metaDataStyles.margin_right}
+          onClick={e => {
+            e.preventDefault();
+            this.setState({ isClearing: true });
+            if (globals.isAccessKeySet || globals.accessKey) {
+              clearAccessKeyState();
+              console.log('Clearing access key');
+              this.props.router.push('/login');
+            } else {
+              console.log('No access key set');
+              showErrorNotification('No access key set');
+            }
+            this.props.dispatch(showSuccessNotification('Cleared Access Key'));
+            this.setState({ isClearing: false });
+          }}
+        >
+          {this.state.isClearing ? 'Clearing...' : 'Clear access key (logout)'}
+        </button>
+      </div>
+    );
+  }
+}
+
+ClearAccessKey.propTypes = {
+  dispatch: PropTypes.func.isRequired,
+  dataHeaders: PropTypes.object.isRequired,
+};
+
+export default ClearAccessKey;

console/src/components/Services/Data/Metadata/Metadata.js

@@ -5,6 +5,7 @@ import Helmet from 'react-helmet';
 import ExportMetadata from './ExportMetadata';
 import ImportMetadata from './ImportMetadata';
 import ReloadMetadata from './ReloadMetadata';
+import ClearAccessKey from './ClearAccessKey';
 
 const semver = require('semver');
 
@@ -92,6 +93,21 @@ class Metadata extends Component {
               <div key="meta_data_2">
                 <ReloadMetadata {...this.props} />
               </div>,
+              <div
+                key="access_key_reset_1"
+                className={metaDataStyles.intro_note}
+              >
+                <h4>Clear access key (logout)</h4>
+                <div className={metaDataStyles.content_width}>
+                  The console caches the access key (HASURA_GRAPHQL_ACCESS_KEY)
+                  in the browser. You can clear this cache to force a prompt for
+                  the access key when the console is accessed next using this
+                  browser.
+                </div>
+              </div>,
+              <div key="access_key_reset_2">
+                <ClearAccessKey {...this.props} />
+              </div>,
             ]
           : null}
       </div>