feat: injecting env properties dynamically in admin-ui built #1720

Author: duttarnab

admin-ui/app/index.html

@@ -101,7 +101,7 @@
         </div>
       </div>
     </div>
-
+    <script src="/admin/env-config.js" defer></script>
     <script>
       (function() {
         var bodyElement = document.querySelector("body");

admin-ui/app/redux/api/axios.js

@@ -1,6 +1,6 @@
 import axios from "axios"
 
-export const baseUrl = process.env.CONFIG_API_BASE_URL || "http://localhost:8080"
+export const baseUrl = window['configApiBaseUrl'] || process.env.CONFIG_API_BASE_URL || "http://localhost:8080"
 export default axios.create({
   baseURL: baseUrl,
   timeout: 60000

admin-ui/app/redux/api/base.js

@@ -2,7 +2,7 @@ export const getDefaultClient = (JansConfigApi) => {
   let defaultClient = JansConfigApi.ApiClient.instance
   defaultClient.timeout = 60000
   const jansauth = defaultClient.authentications['jans-auth']
-  defaultClient =
+  defaultClient = window['configApiBaseUrl'] ||
     process.env.CONFIG_API_BASE_URL ||
     'https://admin-ui-test.gluu.org'.replace(/\/+$/, '')
   const headers = {
@@ -22,7 +22,7 @@ export const getClient = (JansConfigApi, r_token, r_issuer) => {
   const defaultClient = JansConfigApi.ApiClient.instance
   defaultClient.timeout = 60000
   const jansauth = defaultClient.authentications['oauth2']
-  defaultClient.basePath =
+  defaultClient.basePath = window['configApiBaseUrl'] ||
     process.env.CONFIG_API_BASE_URL ||
     'https://admin-ui-test.gluu.org'.replace(/\/+$/, '')
   const headers = {
@@ -41,7 +41,7 @@ export const getClientWithToken = (JansConfigApi, token) => {
   const defaultClient = JansConfigApi.ApiClient.instance
   defaultClient.timeout = 60000
   const jansauth = defaultClient.authentications['oauth2']
-  defaultClient.basePath =
+  defaultClient.basePath = window['configApiBaseUrl'] ||
     process.env.CONFIG_API_BASE_URL ||
     'https://admin-ui-test.gluu.org'.replace(/\/+$/, '')
   const headers = {

admin-ui/app/redux/api/index.js

@@ -1,6 +1,6 @@
 import axios from "axios"
 
-export const baseUrl = process.env.CONFIG_API_BASE_URL || "http://localhost:8080"
+export const baseUrl = window['configApiBaseUrl'] || process.env.CONFIG_API_BASE_URL || "http://localhost:8080"
 export default axios.create({
   baseURL: baseUrl,
   timeout: 60000

admin-ui/env-config.js

@@ -0,0 +1,7 @@
+const CONFIG_API_BASE_URL = "https://%(hostname)s/jans-config-api"
+const API_BASE_URL = "https://%(hostname)s/jans-config-api/admin-ui"
+const BASE_PATH = "/admin/"
+
+window.configApiBaseUrl = CONFIG_API_BASE_URL
+window.apiBaseUrl = API_BASE_URL
+window.basePath = BASE_PATH

admin-ui/plugins/admin/components/Settings/SettingsPage.js

@@ -106,7 +106,7 @@ function SettingsPage() {
                 >
                   <h3>
                     <Badge color={`primary-${selectedTheme}`}>
-                      {process.env.CONFIG_API_BASE_URL}
+                      {window.configApiBaseUrl}
                     </Badge>
                   </h3>
                 </Label>

admin-ui/plugins/services/redux/api/index.js

@@ -1,6 +1,6 @@
 import axios from "axios"
 
-export const baseUrl = process.env.API_BASE_URL || "http://localhost:8080";
+export const baseUrl = window['apiBaseUrl'] || process.env.API_BASE_URL || "http://localhost:8080";
 export default axios.create({
   baseURL: baseUrl,
   timeout: 60000