feat(admin-ui): Add Orval Support for Progressive Migration from OpenAPI Generator (#2300)

* feat(admin-ui): Add Orval Support for Progressive Migration from OpenAPI Generator #2299

* feat(admin-ui): fix wrong enums and update orval config #2299

* feat(admin-ui): apply reviews suggestion, also use reactquery instead of axios #2299

* feat(admin-ui): update configuration based on the real testing feedbacks #2299

Author: syntrydy

admin-ui/api-client.ts

@@ -0,0 +1,56 @@
+import Axios, { AxiosRequestConfig, AxiosHeaders } from 'axios'
+import store from './app/redux/store'
+
+const baseUrl =
+  (typeof window !== 'undefined' && (window as any).configApiBaseUrl) ||
+  process.env.CONFIG_API_BASE_URL ||
+  ''
+
+export const AXIOS_INSTANCE = Axios.create({ baseURL: baseUrl, timeout: 60000 })
+
+AXIOS_INSTANCE.interceptors.request.use((config) => {
+  // Get token and issuer from Redux store instead of localStorage
+  const state = store.getState()
+  const authState = (state as any)?.authReducer
+  const token = authState?.token?.access_token || null
+  const issuer = authState?.issuer || null
+  const userInum = authState?.userInum || ''
+
+  if ((config.headers as any) && typeof (config.headers as any).set === 'function') {
+    const headers = config.headers as unknown as AxiosHeaders
+    if (token) headers.set('Authorization', `Bearer ${token}`)
+    if (issuer) headers.set('issuer', issuer)
+    headers.set('jans-client', 'admin-ui')
+    if (userInum) headers.set('User-inum', userInum)
+  } else {
+    config.headers = {
+      ...(config.headers as any),
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      ...(issuer ? { issuer } : {}),
+      'jans-client': 'admin-ui',
+      ...(userInum ? { 'User-inum': userInum } : {}),
+    } as any
+  }
+  return config
+})
+
+// React Query compatible instance
+export const customInstance = <T>(
+  config: AxiosRequestConfig,
+  options?: { signal?: AbortSignal },
+): Promise<T> => {
+  const source = Axios.CancelToken.source()
+
+  const promise = AXIOS_INSTANCE({
+    ...config,
+    cancelToken: source.token,
+    signal: options?.signal,
+  }).then(({ data }) => data)
+
+  // For React Query compatibility, we attach the cancel method to the promise
+  ;(promise as any).cancel = () => {
+    source.cancel('Operation canceled by the user.')
+  }
+
+  return promise
+}

admin-ui/app/index.tsx

@@ -3,16 +3,33 @@ import App from './components/App'
 import { I18nextProvider } from 'react-i18next'
 import i18n from './i18n'
 import { ThemeProvider } from 'Context/theme/themeContext'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import './styles/index.css'
 import 'bootstrap/dist/css/bootstrap.css'
 
+// Create a client
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 3,
+      retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
+      staleTime: 5 * 60 * 1000, // 5 minutes
+      refetchOnWindowFocus: false,
+    },
+  },
+})
+
 const container = document.querySelector('#root') as HTMLElement
 const root = createRoot(container)
 
 root.render(
-  <I18nextProvider i18n={i18n}>
-    <ThemeProvider>
-      <App />
-    </ThemeProvider>
-  </I18nextProvider>,
+  <QueryClientProvider client={queryClient}>
+    <I18nextProvider i18n={i18n}>
+      <ThemeProvider>
+        <App />
+      </ThemeProvider>
+    </I18nextProvider>
+    <ReactQueryDevtools initialIsOpen={false} />
+  </QueryClientProvider>,
 )

admin-ui/fix-orval-enums.js

@@ -0,0 +1,27 @@
+#!/usr/bin/env node
+const fs = require('fs')
+const path = require('path')
+const filePath = path.join(__dirname, 'jans_config_api_orval', 'src', 'JansConfigApi.ts')
+
+if (!fs.existsSync(filePath)) {
+  console.log('JansConfigApi.ts not found, skipping enum fixes')
+  process.exit(0)
+}
+
+let content = fs.readFileSync(filePath, 'utf8')
+
+// Fix malformed enum keys with unescaped single quotes
+// Pattern: 'KeyOps{value=\'text'} -> 'KeyOps{value=\'text\'}
+const finalContent = content.replace(
+  /('KeyOps\{value=\\')([^'\\]+)(')/g,
+  (match, prefix, value, suffix) => {
+    return `${prefix}${value}\\${suffix}`
+  },
+)
+
+if (finalContent !== content) {
+  fs.writeFileSync(filePath, finalContent)
+  console.log('✅ Fixed malformed enum keys in JansConfigApi.ts')
+} else {
+  console.log('✅ No enum fixes needed in JansConfigApi.ts')
+}

admin-ui/orval.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from 'orval'
+
+export default defineConfig({
+  jans: {
+    input: {
+      target: './configApiSpecs.yaml',
+    },
+    output: {
+      mode: 'single',
+      target: './jans_config_api_orval/src/JansConfigApi.ts',
+      client: 'react-query',
+      httpClient: 'axios',
+      mock: false,
+      prettier: true,
+      override: {
+        mutator: {
+          path: './api-client.ts',
+          name: 'customInstance',
+        },
+        query: {
+          useQuery: true,
+          useMutation: true,
+          useInfinite: true,
+          version: 5,
+        },
+      },
+    },
+  },
+})

admin-ui/package.json

@@ -35,8 +35,8 @@
     "lint": "eslint app/ plugins/ --ext .js,.jsx,.ts,.tsx --fix",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json}\"",
     "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json}\"",
-    "api": "rm -rf jans_config_api && openapi-merge-cli && openapi-generator-cli generate -i ./configApiSpecs.yaml --global-property skipFormModel=false -g javascript -o jans_config_api && cd jans_config_api && npm i mocha@10.2.0 && npm install && npm run build",
-    "api-win": "del /f jans_config_api && openapi-merge-cli && openapi-generator-cli generate -i ./configApiSpecs.yaml --global-property skipFormModel=false -g javascript -o jans_config_api && cd jans_config_api && npm i mocha@10.2.0 && npm install && npm run build",
+    "api": "rimraf jans_config_api && openapi-merge-cli && openapi-generator-cli generate -i ./configApiSpecs.yaml --global-property skipFormModel=false -g javascript -o jans_config_api && cd jans_config_api && npm i mocha@10.2.0 && npm install && npm run build",
+    "api:orval": "rimraf jans_config_api_orval && openapi-merge-cli && orval --config ./orval.config.ts && node fix-orval-enums.js",
     "plugin:showAll": "node ./build/plugin-cli.js --showAllPlugins",
     "plugin:add": "node ./build/plugin-cli.js --addPlugin",
     "plugin:remove": "node ./build/plugin-cli.js --removePlugin",
@@ -104,6 +104,7 @@
     "lint-staged": "^16.0.0",
     "mini-css-extract-plugin": "^2.7.5",
     "mkdirp": "^2.1.6",
+    "orval": "^7.11.2",
     "postcss-loader": "^7.2.4",
     "prettier": "^3.5.3",
     "purgecss-webpack-plugin": "^5.0.0",
@@ -140,6 +141,8 @@
     "@mui/x-date-pickers": "^7.0.0",
     "@openid/appauth": "^1.3.1",
     "@reduxjs/toolkit": "^2.2.1",
+    "@tanstack/react-query": "^5.90.2",
+    "@tanstack/react-query-devtools": "^5.90.2",
     "ace-builds": "^1.16.0",
     "animejs": "^3.2.1",
     "axios": "^1.8.1",

admin-ui/tsconfig.json

@@ -26,7 +26,8 @@
       "Redux/*": ["app/redux/*"],
       "Images/*": ["app/images/*"],
       "Contexts/*": ["app/contexts/*"],
-      "SVG/*": ["app/components/SVG/*"]
+      "SVG/*": ["app/components/SVG/*"],
+      "JansConfigApi": ["jans_config_api_orval/src/JansConfigApi.ts"]
     },
     "plugins": [
       {