Add Slash API Key to the Extra Settings

Author: Paul Korzhyk

client/package-lock.json

@@ -187,7 +187,7 @@
     "core-js": "^3.6.5",
     "crypto-js": "^4.0.0",
     "d3": "^5.16.0",
-    "dgraph-js-http": "^20.7.0-rc1",
+    "dgraph-js-http": "^20.7.1-rc1",
     "graphql": "0.13.0",
     "immer": "^6.0.3",
     "jquery": "^3.5.0",

client/package.json

@@ -21,14 +21,14 @@ import {
     QUERY_TIMEOUT_DEFAULT,
     Unknown,
 } from "../lib/constants";
-import { sanitizeUrl, setCurrentServerUrl } from "../lib/helpers";
 
 export const LOGIN_ERROR = "connection/LOGIN_ERROR";
 export const LOGIN_PENDING = "connection/LOGIN_PENDING";
 export const LOGIN_SUCCESS = "connection/LOGIN_SUCCESS";
 export const LOGIN_TIMEOUT = "connection/LOGIN_TIMEOUT";
 export const DO_LOGOUT = "connection/DO_LOGOUT";
 export const SET_QUERY_TIMEOUT = "connection/SET_QUERY_TIMEOUT";
+export const SET_SLASH_API_KEY = "connection/SET_SLASH_API_KEY";
 export const UPDATE_URL = "connection/UPDATE_URL";
 export const UPDATE_ACL_STATE = "connection/UPDATE_ACL_STATE";
 export const UPDATE_NETWORK_HEALTH = "connection/UPDATE_NETWORK_HEALTH";
@@ -53,12 +53,20 @@ export function setQueryTimeout(url, queryTimeout) {
     };
 }
 
+export function setSlashApiKey(url, slashApiKey) {
+    return {
+        type: SET_SLASH_API_KEY,
+        url,
+        slashApiKey,
+    };
+}
+
 export const updateUrl = url => async (dispatch, getState) => {
     dispatch(loginTimeout(getState().connection.serverHistory[0].url));
 
     dispatch({
         type: UPDATE_URL,
-        url: sanitizeUrl(url),
+        url: helpers.sanitizeUrl(url),
     });
 
     dispatch(checkHealth());
@@ -82,7 +90,7 @@ export const checkNetworkHealth = async (dispatch, getState) => {
 export const checkAclState = async (dispatch, getState) => {
     const url = getState().connection.serverHistory[0].url;
     try {
-        setCurrentServerUrl(url);
+        helpers.setCurrentServerUrl(url);
         const client = await helpers.getDgraphClient();
         const res = await client
             .newTxn()
@@ -105,7 +113,7 @@ export const checkHealth = ({
     const url = getState().connection.serverHistory[0].url;
     unknownOnStart && dispatch(serverHealth(url, Unknown));
     try {
-        setCurrentServerUrl(url);
+        helpers.setCurrentServerUrl(url);
         const stub = await helpers.getDgraphClientStub();
         const health = await stub.getHealth();
         dispatch(serverHealth(url, OK));

client/src/actions/connection.js

@@ -122,6 +122,22 @@ export default function ServerConnectionModal() {
                             }}
                         />
                     </Form.Group>
+                    <Form.Group controlId="slashApiKeyInput">
+                        <Form.Label>Slash API Key:</Form.Label>
+                        <Form.Control
+                            type="text"
+                            placeholder="Slash API Key"
+                            value={activeServer.slashApiKey}
+                            onChange={e =>
+                                dispatch(
+                                    actions.setSlashApiKey(
+                                        activeServer.url,
+                                        e.target.value,
+                                    ),
+                                )
+                            }
+                        />
+                    </Form.Group>
                 </Tab>
             </Tabs>
         );

client/src/components/ServerConnectionModal.js

@@ -30,6 +30,7 @@ import makeRootReducer from "../reducers";
 
 import {
     setCurrentServerQueryTimeout,
+    setCurrentServerSlashApiKey,
     setCurrentServerUrl,
 } from "../lib/helpers";
 
@@ -58,6 +59,9 @@ store.subscribe(() => {
     setCurrentServerQueryTimeout(
         store.getState().connection.serverHistory[0].queryTimeout || 20,
     );
+    setCurrentServerSlashApiKey(
+        store.getState().connection.serverHistory[0].slashApiKey,
+    );
 });
 
 export default class AppProvider extends React.Component {
@@ -101,7 +105,7 @@ export default class AppProvider extends React.Component {
             );
         }
 
-        if (state && state.frames) {
+        if (state?.frames) {
             // HACK: setResultsTab will validate the tab name.
             store.dispatch(setResultsTab(state.frames.tab));
         }

client/src/containers/AppProvider.js

@@ -76,11 +76,16 @@ export function humanizeBytes(space) {
 }
 
 let dgraphServerUrl = getDefaultUrl();
+const clientStubOptions = { headers: {} };
 
 const createDgraphClient = memoizeOne(async url => {
-    const stub = new dgraph.DgraphClientStub(url, {
-        jsonParser: JSONbigint.parse.bind(JSONbigint),
-    });
+    const stub = new dgraph.DgraphClientStub(
+        url,
+        {
+            jsonParser: JSONbigint.parse.bind(JSONbigint),
+        },
+        clientStubOptions,
+    );
     try {
         await stub.detectApiVersion();
     } catch (err) {
@@ -102,6 +107,10 @@ export async function setCurrentServerQueryTimeout(timeout) {
     (await createDgraphClient(dgraphServerUrl)).client.setQueryTimeout(timeout);
 }
 
+export function setCurrentServerSlashApiKey(slashApiKey) {
+    clientStubOptions.headers["X-Auth-Token"] = slashApiKey;
+}
+
 export const getDgraphClient = async () =>
     (await createDgraphClient(dgraphServerUrl)).client;
 

client/src/lib/helpers.js

@@ -22,6 +22,7 @@ import {
     LOGIN_SUCCESS,
     LOGIN_TIMEOUT,
     SET_QUERY_TIMEOUT,
+    SET_SLASH_API_KEY,
     UPDATE_URL,
     UPDATE_ACL_STATE,
     UPDATE_NETWORK_HEALTH,
@@ -36,6 +37,7 @@ import {
 import {
     getDefaultUrl,
     setCurrentServerQueryTimeout,
+    setCurrentServerSlashApiKey,
     setCurrentServerUrl,
     sanitizeUrl,
 } from "../lib/helpers";
@@ -65,6 +67,7 @@ const makeServerRecord = url => ({
     networkHealth: Unknown,
     aclState: Unknown,
     queryTimeout: QUERY_TIMEOUT_DEFAULT,
+    slashApiKey: null,
 
     licenseWarningDismissedTs: -1,
 
@@ -143,6 +146,13 @@ export default (state = defaultState, action) =>
                     setCurrentServerQueryTimeout(activeServer.queryTimeout);
                 }
                 break;
+            case SET_SLASH_API_KEY:
+                assert(action.url, "This action requires url " + action.type);
+                activeServer.slashApiKey = action.slashApiKey;
+                if (action.url === currentServer.url) {
+                    setCurrentServerSlashApiKey(activeServer.slashApiKey);
+                }
+                break;
 
             case DO_LOGOUT:
                 logoutServer(currentServer);