feat(admin-ui): revamp Home -> WebHooks page as per Figma (#2629) (#2663)

* feat(admin-ui): revamp Audit Logs and reusable Table component as per Figma (#2646)

* feat(admin-ui): revamp Audit Logs and reusable Table component as per Figma (#2646)

* feat(admin-ui): revamp Audit Logs and reusable Table component as per Figma (#2646)

* feat(admin-ui): revamp Audit Logs and reusable Table component as per Figma (#2646)

* new design changes

* border bottom implemented

* Code rabbit implementations

* Code rabbit implementations

* Code rabbit implementations

* initial webhook

* feat(admin-ui): revamp Home -> WebHooks page as per Figma (#2629)

* minor changes

* theme tooltip centralized

* coderabbit suggestions

* coderabbit suggestions

* coderabbit suggestions

* coderabbit suggestions

* coderabbit suggestions

* coderabbit suggestions

* coderabbit suggestions

* form titles issues fix

* form titles issues fix

Author: faisalsiddique4400

admin-ui/__mocks__/@janssenproject/cedarling_wasm.ts

@@ -0,0 +1,12 @@
+const mockCedarling = {
+  authorize: jest.fn().mockResolvedValue({ decision: 'Allow' }),
+}
+
+const init = jest.fn().mockResolvedValue(mockCedarling)
+const initWasm = jest.fn().mockResolvedValue(undefined)
+
+class Cedarling {}
+class AuthorizeResult {}
+
+export { init, Cedarling, AuthorizeResult }
+export default initWasm

admin-ui/__tests__/setup-tests.js admin-ui/__tests__/setup-tests.tsadmin-ui/__tests__/setup-tests.js renamed to admin-ui/__tests__/setup-tests.ts

@@ -1,4 +1,5 @@
-global.XMLHttpRequest = require('xhr2')
 import * as dotenv from 'dotenv'
+import XHR2 from 'xhr2'
 
+global.XMLHttpRequest = XHR2
 dotenv.config({ path: '.env.test' })

admin-ui/__tests__/setup.js

@@ -0,0 +1,57 @@
+import ResizeObserverPolyfill from 'resize-observer-polyfill'
+import 'whatwg-fetch'
+import '@testing-library/jest-dom'
+import i18n from '../app/i18n'
+
+const originalError = console.error.bind(console)
+
+beforeAll(async () => {
+  if (!i18n.isInitialized) {
+    try {
+      await i18n.init()
+    } catch (error) {
+      console.error('i18n.init() failed:', (error as Error).message, (error as Error).stack)
+      throw error
+    }
+  }
+})
+
+afterAll(() => {
+  jest.restoreAllMocks()
+})
+
+jest.spyOn(global.console, 'log').mockImplementation(jest.fn())
+jest.spyOn(global.console, 'warn').mockImplementation(jest.fn())
+
+jest.spyOn(global.console, 'error').mockImplementation((...args: unknown[]) => {
+  const msg = args.map((a) => String(a ?? '')).join(' ')
+  const shouldSuppress =
+    msg.includes('Problems getting API access token') ||
+    msg.includes('Problems posting user action audit log') ||
+    msg.includes('suspended resource finished loading') ||
+    (msg.includes('Failed prop type') && msg.includes('timeout') && msg.includes('Fade'))
+
+  if (shouldSuppress) return
+  originalError(...args)
+})
+
+jest.setTimeout(30000)
+
+jest.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(jest.fn())
+if (typeof globalThis.URL !== 'undefined') {
+  if ('createObjectURL' in globalThis.URL) {
+    jest.spyOn(globalThis.URL, 'createObjectURL').mockImplementation(jest.fn())
+  } else {
+    Object.defineProperty(globalThis.URL, 'createObjectURL', {
+      value: jest.fn(),
+      configurable: true,
+      writable: true,
+    })
+  }
+}
+
+global.ResizeObserver = ResizeObserverPolyfill
+
+it('Jans-admin UI test setup', () => {
+  expect(true).toBeTruthy()
+})

admin-ui/__tests__/setup.ts

@@ -0,0 +1,4 @@
+declare module 'xhr2' {
+  const XHR2: typeof globalThis.XMLHttpRequest
+  export default XHR2
+}

admin-ui/__tests__/types/xhr2.d.ts

@@ -5,6 +5,7 @@ import type {
   AuthorizationResponse,
   TokenAuthorizationRequest,
 } from '@/cedarling'
+import { devLogger } from '@/utils/devLogger'
 
 let cedarling: Cedarling | null = null
 let cedarlingInitialized: boolean = false
@@ -25,7 +26,7 @@ const initialize = async (bootStrapConfig: BootStrapConfig): Promise<void> => {
       cedarling = await init(bootStrapConfig)
       cedarlingInitialized = true
     } catch (err) {
-      console.error('Error during Cedarling init:', err)
+      devLogger.error('Error during Cedarling init:', err)
       initializationPromise = null // Reset on error to allow retry
       throw err
     }
@@ -48,7 +49,7 @@ const token_authorize = async (
       decision: result.decision,
     } as AuthorizationResponse
   } catch (error) {
-    console.error('Error during authorization:', error)
+    devLogger.error('Error during authorization:', error)
     throw error
   }
 }

admin-ui/app/cedarling/client/CedarlingClient.ts

@@ -128,10 +128,6 @@ export interface AuthReducerState {
 export interface RootState {
   authReducer: AuthReducerState
   cedarPermissions: CedarPermissionsState
-  apiPermissionReducer: {
-    items: ApiPermission[]
-    loading: boolean
-  }
 }
 
 // Policy Generation Types

admin-ui/app/cedarling/types/index.ts

@@ -3,14 +3,15 @@ import { Provider } from 'react-redux'
 import { configStore } from 'Redux/store'
 import { PersistGate } from 'redux-persist/integration/react'
 import AuthenticatedRouteSelector from './AuthenticatedRouteSelector'
+import GluuLoader from '@/routes/Apps/Gluu/GluuLoader'
 const basePath = process.env.BASE_PATH || '/admin'
 
 const { store, persistor } = configStore()
 
 const AppMain = () => {
   return (
     <Provider store={store}>
-      <PersistGate loading={null} persistor={persistor}>
+      <PersistGate loading={<GluuLoader blocking />} persistor={persistor}>
         <Router basename={basePath}>
           <AuthenticatedRouteSelector />
         </Router>

admin-ui/app/components/App/AppMain.tsx

@@ -7,6 +7,7 @@ import {
 } from '../../redux/features/cedarPermissionsSlice'
 import { cedarlingClient, CedarlingLogType } from '@/cedarling'
 import bootstrap from '@/cedarling/config/cedarling-bootstrap-TBAC.json'
+import { devLogger } from '@/utils/devLogger'
 // Extended state interface for this component
 interface ExtendedRootState {
   authReducer: {
@@ -15,9 +16,6 @@ interface ExtendedRootState {
       cedarlingLogType?: CedarlingLogType
     }
   }
-  mappingReducer: {
-    items: unknown[]
-  }
   cedarPermissions: {
     initialized: boolean
     isInitializing: boolean
@@ -113,18 +111,19 @@ const PermissionsPolicyInitializer = () => {
       .then(() => {
         retryCount.current = { tryCount: 0, callMethod: false }
         dispatch(setCedarlingInitialized(true))
-        console.log('✅ Cedarling initialized!')
+        devLogger.log('✅ Cedarling initialized!')
       })
       .catch(() => {
         retryCount.current.tryCount += 1
-        console.warn(`❌ Cedarling got failed. Retrying in 1000ms`)
+        devLogger.warn(`❌ Cedarling initialization failed. Retrying in 1000ms`)
 
         if (retryCount.current.tryCount < maxRetries) {
           setTimeout(() => {
             dispatch(setCedarlingInitialized(false)) // Triggers re-run of useEffect
           }, 1000)
         } else {
           console.error('❌ Max retry attempts reached. Cedarling init failed permanently.')
+          devLogger.error('❌ Max retry attempts reached. Cedarling init failed permanently.')
           dispatch(setCedarFailedStatusAfterMaxTries())
         }
       })

admin-ui/app/components/App/PermissionsPolicyInitializer.tsx

@@ -46,7 +46,7 @@
     }
 
     &--shadow {
-        box-shadow: 0 1px 2px 0 rgba(31, 45, 61, 0.07);
+        box-shadow: 0 1px 2px 0 rgba(var(--custom-black-rgb), 0.07);
     }
 
     &--none {