feat: add context Header (#367)

Author: Cahllagerfeld

.env

@@ -1,3 +1,3 @@
-REACT_APP_BASE_API_URL="http://localhost:8080/api/v1"
+REACT_APP_BASE_API_URL=https://appserver.zenml.io/api/v1
 REACT_APP_HUB_API_URL="https://hubapi.zenml.io"
 REACT_APP_VERSION=$npm_package_version

global.d.ts

@@ -35,6 +35,7 @@ interface TAction {
 interface TServerInfo {
   id: string;
   version: string;
+  debug: boolean;
   deploymentType: string;
   databaseType: string;
   secretsStoreType: string;

package.json

@@ -113,11 +113,11 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.5",
     "eslint-plugin-redux-saga": "^1.1.3",
+    "husky": "^8.0.0",
     "postcss": "^8.4.16",
     "prettier": "^2.0.5",
     "react-hooks-testing-library": "^0.6.0",
-    "react-test-renderer": "^16.13.1",
-    "husky": "^8.0.0"
+    "react-test-renderer": "^16.13.1"
   },
   "engines": {
     "npm": ">=6.14.17",

src/App.tsx

@@ -4,6 +4,7 @@ import { Provider } from 'react-redux';
 import { RouteConfig } from './routes';
 
 import configureStore from './redux/setup/storeSetup';
+import './utils/axios';
 import Toaster from './ui/layouts/common/Toaster';
 
 import 'bootstrap/dist/css/bootstrap-grid.min.css';

src/redux/reducers/serverInfoReducer.ts

@@ -6,6 +6,7 @@ export interface State {
   deploymentType: string;
   databaseType: string;
   secretsStoreType: string;
+  debug: boolean;
 }
 
 interface Payload {
@@ -14,6 +15,7 @@ interface Payload {
   deployment_type: string;
   database_type: string;
   secrets_store_type: string;
+  debug: boolean;
 }
 
 export type Action = {
@@ -27,6 +29,7 @@ export const initialState: State = {
   id: '',
   secretsStoreType: '',
   version: '',
+  debug: false,
 };
 
 const newState = (info: Payload): State => ({
@@ -35,6 +38,7 @@ const newState = (info: Payload): State => ({
   id: info.id,
   secretsStoreType: info.secrets_store_type,
   version: info.version,
+  debug: info.debug,
 });
 
 export default function serverInfoReducer(

src/redux/setup/storeSetup.ts

@@ -25,8 +25,8 @@ export const enhancers = getComposeWithEnhancers()(
   applyMiddleware(sagaMiddleware, logger),
 );
 
+export const store = createStore(persistedReducer, enhancers);
 export default function configureStore(): any {
-  const store = createStore(persistedReducer, enhancers);
   sagaMiddleware.run(rootSaga);
 
   window.addEventListener(

src/utils/axios.ts

@@ -0,0 +1,19 @@
+import axios from 'axios';
+import { getServerInfoFromRedux } from './store';
+
+const axiosInterceptor = axios.interceptors.request.use(function (config) {
+  if (config.url?.includes(process.env.REACT_APP_BASE_API_URL as string)) {
+    config.headers['Source-Context'] = 'dashboard';
+  }
+
+  if (config.url?.includes(process.env.REACT_APP_HUB_API_URL as string)) {
+    const serverInfo = getServerInfoFromRedux();
+    const debugFlag = serverInfo.debug;
+    config.headers['Source-Context'] = 'dashboard';
+    config.headers['Debug-Context'] = debugFlag || false;
+  }
+
+  return config;
+});
+
+export default axiosInterceptor;

src/utils/store.ts

@@ -0,0 +1,5 @@
+import { store } from '../redux/setup/storeSetup';
+
+export function getServerInfoFromRedux(): TServerInfo {
+  return (store.getState() || {}).persisted?.serverInfo || {};
+}