hasura · karthikvt26 · Mar 14, 2019 · Mar 14, 2019 · Mar 14, 2019 · Mar 14, 2019
@@ -65,6 +65,7 @@
     "inflection": "^1.12.0",
     "invariant": "^2.2.0",
     "isomorphic-fetch": "^2.2.1",
+    "jsonwebtoken": "^8.5.0",
     "less": "^3.7.1",
     "lru-memoize": "^1.0.0",
     "map-props": "^1.0.0",
@@ -132,7 +133,7 @@
     "clean-webpack-plugin": "^0.1.17",
     "concurrently": "^3.5.0",
     "css-loader": "^0.28.11",
-    "cypress": "^3.2.0",
+    "cypress": "^3.1.5",
     "dotenv": "^5.0.1",
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "16.1.0",

@@ -1,4 +1,7 @@
 import defaultState from './state';
+import requestAction from '../../utils/requestAction.js';
+
+import Endpoints from '../../Endpoints';
 // import fetch from 'isomorphic-fetch';
 
 import { SubscriptionClient } from 'subscriptions-transport-ws';
@@ -25,6 +28,7 @@ const REQUEST_PARAMS_CHANGED = 'ApiExplorer/REQUEST_PARAMS_CHANGED';
 const REQUEST_HEADER_CHANGED = 'ApiExplorer/REQUEST_HEADER_CHANGED';
 const REQUEST_HEADER_ADDED = 'ApiExplorer/REQUEST_HEADER_ADDED';
 const REQUEST_HEADER_REMOVED = 'ApiExplorer/REQUEST_HEADER_REMOVED';
+const SET_INITIAL_HEADER_DATA = 'ApiExplorer/SET_INITIAL_HEADER_DATA';
 
 const MAKING_API_REQUEST = 'ApiExplorer/MAKING_API_REQUEST';
 const RESET_MAKING_REQUEST = 'ApiExplorer/RESET_MAKING_REQUEST';
@@ -45,6 +49,22 @@ const clearHistory = () => {
   };
 };
 
+const verifyJWTToken = token => dispatch => {
+  const url = Endpoints.graphQLUrl;
+  const body = {
+    query: '{ __type(name: "dummy") {name}}',
+    variables: null,
+  };
+  const options = {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify(body),
+  };
+  return dispatch(requestAction(url, options));
+};
+
 const updateFileObject = fileObj => {
   return { type: UPDATE_FILE_OBJECT, data: fileObj };
 };
@@ -186,15 +206,42 @@ const analyzeFetcher = (url, headers, analyzeApiChange) => {
 };
 /* End of it */
 
-const changeRequestHeader = (index, key, newValue, isDisabled) => ({
-  type: REQUEST_HEADER_CHANGED,
-  data: {
-    index: index,
-    keyName: key,
-    newValue: newValue,
-    isDisabled: isDisabled,
-  },
-});
+const setInitialHeaderState = headerObj => {
+  return {
+    type: SET_INITIAL_HEADER_DATA,
+    data: headerObj,
+  };
+};
+
+const changeRequestHeader = (index, key, newValue, isDisabled) => {
+  return (dispatch, getState) => {
+    dispatch({
+      type: REQUEST_HEADER_CHANGED,
+      data: {
+        index: index,
+        keyName: key,
+        newValue: newValue,
+        isDisabled: isDisabled,
+      },
+    });
+    // TODO:
+    // May go out of sync
+    //  dispatch -> Event -> State gets updated -> getState() below gets called. Too many events and very less time.
+    const { headers } = getState().apiexplorer.displayedApi.request;
+    return Promise.resolve(headers);
+  };
+};
+
+const removeRequestHeader = index => {
+  return (dispatch, getState) => {
+    dispatch({
+      type: REQUEST_HEADER_REMOVED,
+      data: index,
+    });
+    const { headers } = getState().apiexplorer.displayedApi.request;
+    return Promise.resolve(headers);
+  };
+};
 
 const addRequestHeader = (key, value) => ({
   type: REQUEST_HEADER_ADDED,
@@ -204,13 +251,6 @@ const addRequestHeader = (key, value) => ({
   },
 });
 
-const removeRequestHeader = index => {
-  return {
-    type: REQUEST_HEADER_REMOVED,
-    data: index,
-  };
-};
-
 const generateApiCodeClicked = () => {
   return {
     type: CODE_GENERATOR_OPEN,
@@ -464,6 +504,18 @@ const apiExplorerReducer = (state = defaultState, action) => {
           },
         },
       };
+
+    case SET_INITIAL_HEADER_DATA:
+      return {
+        ...state,
+        displayedApi: {
+          ...state.displayedApi,
+          request: {
+            ...state.displayedApi.request,
+            headers: [...action.data],
+          },
+        },
+      };
     case REQUEST_HEADER_ADDED:
       return {
         ...state,
@@ -592,4 +644,6 @@ export {
   unfocusTypingHeader,
   getRemoteQueries,
   analyzeFetcher,
+  setInitialHeaderState,
+  verifyJWTToken,
 };
@@ -74,6 +74,7 @@ class ApiExplorer extends Component {
       headerFocus,
       location,
       serverVersion,
+      serverConfig,
     } = this.props;
 
     const styles = require('./ApiExplorer.scss');
@@ -94,6 +95,7 @@ class ApiExplorer extends Component {
             headerFocus={headerFocus}
             queryParams={location.query}
             serverVersion={serverVersion}
+            serverConfig={serverConfig}
           />
         </div>
       </div>

@@ -4,6 +4,41 @@
   display: inline-block;
 }
 
+.analyzerBearerModal {
+  width: 768px;
+}
+.analyzerLabel {
+  text-transform: uppercase;
+	margin: 0;
+	font-size: 12px;
+	color: #000;
+	zoom: 1;
+	border-bottom: 1px solid rgba(155,155,155,0.5);
+	line-height: 2.5;
+	padding-bottom: 2px;
+  .token_validity {
+    font-size: 14px;
+    .invalid_jwt_icon {
+      // cursor: pointer;
+      color: #dc3545;
+    }
+    .valid_jwt_token {
+      // cursor: pointer;
+      color: #28a745;
+    }
+  }
+  span {
+    color: #979797;
+    margin-left: 5px;
+    display: inline-block;
+  }
+}
+.jwt_verification_fail_message {
+  background-color: #e53935;
+  padding: 10px 10px;
+  color: #ffffff;
+  border-radius: 5px;
+}
 .width_80 {
   width: 80%;
 }
@@ -272,13 +307,21 @@
     display: inline-block;
   }
 
-  .showAdminSecret {
+  .showAdminSecret, .showInspector {
     cursor: pointer;
     padding-right: 8px;
     font-size: 16px;
     float: left;
     display: inline-block;
   }
+
+  .showInspectorLoading {
+    cursor: pointer;
+    font-size: 16px;
+    float: left;
+    display: inline-block;
+  }
+
   .apiRequestWrapper {
     margin-top: 20px;
     .headerWrapper {

@@ -9,6 +9,8 @@ const generatedApiExplorer = connect => {
       dataApiExplorerData: { ...state.dataApiExplorer },
       dataHeaders: state.tables.dataHeaders,
       tables: state.tables.allSchemas,
+      serverConfig:
+        ('serverConfig' in state.main && state.main.serverConfig.data) || {},
     };
   };
   return connect(mapStateToProps)(ApiExplorer);