add reset metadata button to settings page (close #515) (#673)

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

@@ -27,14 +27,28 @@ class ClearAccessKey extends Component {
             this.setState({ isClearing: true });
             if (globals.isAccessKeySet || globals.accessKey) {
               clearAccessKeyState();
-              console.log('Clearing access key');
+              this.props.dispatch(
+                showSuccessNotification('Cleared Access Key')
+              );
+              this.setState({ isClearing: false });
               this.props.router.push('/login');
             } else {
-              console.log('No access key set');
-              showErrorNotification('No access key set');
+              this.setState({ isClearing: false });
+              const errorMessage = (
+                <div style={{ padding: '5px' }}>
+                  <div style={{ fontSize: '13px' }}>
+                    No access key set or access key is set but isAccessKeySet is
+                    not set by the server
+                  </div>
+                  <br />
+                  <div style={{ fontSize: '13px' }}>
+                    Please look for <code>CONSOLE_ACCESS_KEY</code> key under
+                    window storage and delete it if it exists
+                  </div>
+                </div>
+              );
+              this.props.dispatch(showErrorNotification(errorMessage));
             }
-            this.props.dispatch(showSuccessNotification('Cleared Access Key'));
-            this.setState({ isClearing: false });
           }}
         >
           {this.state.isClearing ? 'Clearing...' : 'Clear access key (logout)'}

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 ResetMetadata from './ResetMetadata';
 import ClearAccessKey from './ClearAccessKey';
 
 import semverCheck from '../../../../helpers/semver';
@@ -88,32 +89,48 @@ class Metadata extends Component {
 
         {this.state.showMetadata
           ? [
-            <div key="meta_data_1" className={metaDataStyles.intro_note}>
-              <h4>Reload metadata</h4>
-              <div className={metaDataStyles.content_width}>
+              <div key="meta_data_1" className={metaDataStyles.intro_note}>
+                <h4>Reload metadata</h4>
+                <div className={metaDataStyles.content_width}>
                   Refresh Hasura metadata, typically required if you have
                   changed the underlying postgres.
-              </div>
-            </div>,
-            <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}>
+                </div>
+              </div>,
+              <div key="meta_data_2">
+                <ReloadMetadata {...this.props} />
+              </div>,
+              <div key="meta_data_3" className={metaDataStyles.intro_note}>
+                <h4>Reset Metadata</h4>
+                <div className={metaDataStyles.content_width}>
+                  Permanently clear GraphQL Engine's metadata and configure it
+                  from scratch (tracking relevant tables and relationships).
+                  This process is not reversible.
+                </div>
+              </div>,
+              <div key="meta_data_4">
+                <ResetMetadata {...this.props} />
+              </div>,
+            ]
+          : null}
+
+        {window.localStorage.CONSOLE_ACCESS_KEY
+          ? [
+              <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>,
-          ]
+                </div>
+              </div>,
+              <div key="access_key_reset_2">
+                <ClearAccessKey {...this.props} />
+              </div>,
+            ]
           : null}
       </div>
     );

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

@@ -0,0 +1,92 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Endpoints, { globalCookiePolicy } from '../../../../Endpoints';
+import { showNotification } from '../../../App/Actions';
+
+import {
+  showSuccessNotification,
+  showErrorNotification,
+} from '../Notification';
+
+class ResetMetadata extends Component {
+  constructor() {
+    super();
+    this.state = {};
+    this.state.isResetting = false;
+  }
+
+  render() {
+    const styles = require('../PageContainer/PageContainer.scss');
+    const metaDataStyles = require('./Metadata.scss');
+    return (
+      <div className={metaDataStyles.display_inline}>
+        <button
+          data-test="data-reset-metadata"
+          className={styles.default_button + ' ' + metaDataStyles.margin_right}
+          onClick={e => {
+            e.preventDefault();
+            const a = prompt(
+              'Are you absolutely sure?\nThis action cannot be undone. This will permanently reset GraphQL Engine\'s configuration and you will need to start from scratch. Please type "RESET" (in caps, without quotes) to confirm.\n '
+            );
+            if (a.trim() !== 'RESET') {
+              console.error('Did not reset metadata: User confirmation error');
+              this.props.dispatch(
+                showNotification({
+                  level: 'error',
+                  title: 'Metadata reset failed',
+                  message: 'User Confirmation Error',
+                })
+              );
+            } else {
+              this.setState({ isResetting: true });
+              const url = Endpoints.query;
+              const requestBody = {
+                type: 'clear_metadata',
+                args: {},
+              };
+              const options = {
+                method: 'POST',
+                credentials: globalCookiePolicy,
+                headers: {
+                  ...this.props.dataHeaders,
+                },
+                body: JSON.stringify(requestBody),
+              };
+              fetch(url, options).then(response => {
+                response.json().then(data => {
+                  if (response.ok) {
+                    this.setState({ isResetting: false });
+                    this.props.dispatch(
+                      showSuccessNotification('Metadata reset successfully!')
+                    );
+                  } else {
+                    const parsedErrorMsg = data;
+                    this.props.dispatch(
+                      showErrorNotification(
+                        'Metadata reset failed',
+                        'Something went wrong.',
+                        requestBody,
+                        parsedErrorMsg
+                      )
+                    );
+                    console.error('Error with response', parsedErrorMsg);
+                    this.setState({ isResetting: false });
+                  }
+                });
+              });
+            }
+          }}
+        >
+          {this.state.isResetting ? 'Resetting...' : 'Reset'}
+        </button>
+      </div>
+    );
+  }
+}
+
+ResetMetadata.propTypes = {
+  dispatch: PropTypes.func.isRequired,
+  dataHeaders: PropTypes.object.isRequired,
+};
+
+export default ResetMetadata;

console/src/components/Services/Data/TablePermissions/Permissions.js

@@ -208,21 +208,21 @@ class Permissions extends Component {
         const bulkSelect = permsState.bulkSelect;
         const currentInputSelection = bulkSelect.filter(e => e === role)
           .length ? (
-          <input
-            onChange={dispatchBulkSelect}
-            checked="checked"
-            data-role={role}
-            className={styles.bulkSelect}
-            type="checkbox"
-          />
-        ) : (
-          <input
-            onChange={dispatchBulkSelect}
-            data-role={role}
-            className={styles.bulkSelect}
-            type="checkbox"
-          />
-        );
+            <input
+              onChange={dispatchBulkSelect}
+              checked="checked"
+              data-role={role}
+              className={styles.bulkSelect}
+              type="checkbox"
+            />
+          ) : (
+            <input
+              onChange={dispatchBulkSelect}
+              data-role={role}
+              className={styles.bulkSelect}
+              type="checkbox"
+            />
+          );
         _permissionsRowHtml.push(
           <td key={-1}>
             <div>