fix: #972 axios version upgrade (#1125)

client-code-gen/README.md

@@ -42,21 +42,28 @@ To generate, build and compile the typescript sources to javascript use:
 ```
 With Docker (example: for `admin-management-api`):
 >> npm run dockergen-admin-management-api-bash
-or for Windows(CMD/Powershell), use script >>(npm run dockergen-admin-management-api-win)
+
+or for Windows(CMD/Powershell), use script
+>>(npm run dockergen-admin-management-api-win)
 
 With CLI:
 >> npm install
 >> npm run gen-admin-management-api
+```
 
 The generated client is located at "./gen/[xyz]-api" directory specified by the "-o" option at the script.
 
-- Make sure (and adjust) "axios" package version to be consistent with "frontend" axios version. This is important. During generation, this version could be changed by generation script.
+After api client code is generated:
+```
+>> update `axios` version in generated package to be consistent with "frontend" axios version.
+- This is important. During generation, this version could be changed by generation script. See note below.
 ```
 
 Note:
-
 ```
-Depending on the Axios version used at frontend, please be aware different axios versions used between in generatred code and frontend dependency will cause integration headache, even if it is a patch version change. So if in the future there is a need to upgrade frontend to higher version Vue, then it would probably mean it needs to bump up the OpenAPI generator (either from cli or docker) version for client code compatibility reason. Use `npm ls axios` to check dependency tree after installation if not sure.
+Depending on the Axios version used at frontend, please be aware different axios versions used between in generatred code and frontend dependency will cause integration headache, even if it is a patch version change.
+Currently for openapi-generator with `typescript-axios`, there is no option available to spcify which `axios` version to use. If there is a need to upgrade frontend axios to higher version, then the generated code will also need to use the same version of axios. Use `npm ls axios` to check dependency tree after installation if not sure.
+
 ```
 
 ```

client-code-gen/gen/admin-management-api/package.json

@@ -24,7 +24,7 @@
     "prepare": "npm run build"
   },
   "dependencies": {
-    "axios": "0.26.1"
+    "axios": "1.6.5"
   },
   "devDependencies": {
     "typescript": "^4.0"

client-code-gen/gen/app-access-control-api/package.json

@@ -24,7 +24,7 @@
     "prepare": "npm run build"
   },
   "dependencies": {
-    "axios": "0.26.1"
+    "axios": "1.6.5"
   },
   "devDependencies": {
     "typescript": "^4.0"

frontend/package.json

@@ -18,7 +18,7 @@
         "@bcgov-nr/nr-theme": "^1.8.2",
         "@carbon/icons-vue": "^10.72.1",
         "aws-amplify": "^5.3.6",
-        "axios": "0.26.1",
+        "axios": "1.6.5",
         "bootstrap": "^5.2.3",
         "fam-admin-mgmt-api": "file:../client-code-gen/gen/admin-management-api",
         "fam-app-acsctl-api": "file:../client-code-gen/gen/app-access-control-api",

frontend/src/services/http/HttpCommon.ts

@@ -1,7 +1,7 @@
 import HttpReqInterceptors from '@/services/http/HttpRequestInterceptors';
 import HttpResInterceptors from '@/services/http/HttpResponseInterceptors';
 import { setLoadingState } from '@/store/LoadingState';
-import axios, { type AxiosRequestConfig, type AxiosResponse } from 'axios';
+import axios, { type AxiosResponse, type InternalAxiosRequestConfig } from 'axios';
 
 const DEFAULT_CONTENT_TYPE = 'application/json';
 const DEFAULT_REQUEST_TIMEOUT = 20000;
@@ -38,7 +38,7 @@ httpInstance.defaults.headers.get['Content-type'] = DEFAULT_CONTENT_TYPE;
   When http request happens => assign LoadingState state with true.
   When http response received or error happens =>  assign LoadingState state with false
 */
-const loadingStart = (config: AxiosRequestConfig) => {
+const loadingStart = (config: InternalAxiosRequestConfig) => {
     setLoadingState(true);
     return config;
 };

frontend/src/services/http/HttpRequestInterceptors.ts

@@ -1,16 +1,14 @@
 import authService from '@/services/AuthService';
-import type { AxiosRequestConfig } from 'axios';
+import type { AxiosRequestConfig, InternalAxiosRequestConfig } from 'axios';
 
 // Typically when adding "request" interceptors, they are presumed to be asynchronous by default.
 // See "https://www.npmjs.com/package/axios#interceptors" if there is a need for synchronous interceptors behaviour.
 
-function addAuthHeaderItcpt(config: AxiosRequestConfig) {
+function addAuthHeaderItcpt(config: InternalAxiosRequestConfig) {
     const authToken = authService.state.value.famLoginUser?.authToken;
     if (authToken) {
         const authHeader = `Bearer ${authToken.getAccessToken().getJwtToken()}`;
-        config.headers
-            ? (config.headers['Authorization'] = authHeader)
-            : (config.headers = { Authorization: authHeader });
+        config.headers.setAuthorization(authHeader)
     }
     return config;
 }

frontend/src/tests/ForestClientInput.spec.ts

@@ -16,7 +16,7 @@ import {
     TEST_SUCCESS_FOREST_CLIENT_NUMBER_3
 } from './common/ForestClientData';
 import { isLoading, setLoadingState } from '@/store/LoadingState';
-import type { AxiosResponse } from 'axios';
+import type { AxiosRequestHeaders, AxiosResponse } from 'axios';
 
 const forestClientsApiSearchMock = (forestClientNumber: string): AxiosResponse => {
     return {
@@ -37,7 +37,9 @@ const forestClientsApiSearchMock = (forestClientNumber: string): AxiosResponse =
         status: 200,
         statusText: 'Ok',
         headers: {},
-        config: {},
+        config: {
+            headers: {} as AxiosRequestHeaders
+        },
     };
 }