feat(admin-ui): revamp SCIM module as per Figma

admin-ui/app/cedarling/hooks/useCedarling.ts

@@ -1,9 +1,8 @@
-import { useSelector, useDispatch } from 'react-redux'
 import { useCallback } from 'react'
+import { useAppDispatch, useAppSelector } from '@/redux/hooks'
 import { setCedarlingPermission } from '@/redux/features/cedarPermissionsSlice'
 import { cedarlingClient, buildCedarPermissionKey, CEDARLING_CONSTANTS } from '@/cedarling'
 import type {
-  RootState,
   UseCedarlingReturn,
   AuthorizationResult,
   ResourceScopeEntry,
@@ -16,21 +15,21 @@ import { updateToast } from '@/redux/features/toastSlice'
 export function useCedarling(): UseCedarlingReturn {
   const { ACTION_TYPE, RESOURCE_TYPE } = CEDARLING_CONSTANTS
 
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
 
   const {
     userinfo_jwt: userinfo_token,
     idToken: id_token,
     jwtToken: access_token,
-  } = useSelector((state: RootState) => state.authReducer)
+  } = useAppSelector((state) => state.authReducer)
 
   const {
     permissions: permissionsByResourceId,
     loading: isLoading,
     error,
     initialized: cedarlingInitialized,
     isInitializing,
-  } = useSelector((state: RootState) => state.cedarPermissions)
+  } = useAppSelector((state) => state.cedarPermissions)
   const executeUrls = new Set([SSA_ADMIN, SSA_DEVELOPER, SCIM_BULK, REVOKE_SESSION, OPENID])
 
   const getActionLabelFromUrl = useCallback((url: string): CedarAction => {

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

@@ -1,5 +1,5 @@
-import { useDispatch, useSelector } from 'react-redux'
 import { useEffect, useState, useRef } from 'react'
+import { useAppDispatch, useAppSelector } from '@/redux/hooks'
 import {
   setCedarFailedStatusAfterMaxTries,
   setCedarlingInitialized,
@@ -8,23 +8,9 @@ import {
 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: {
-    hasSession?: boolean
-    config?: {
-      cedarlingLogType?: CedarlingLogType
-    }
-  }
-  cedarPermissions: {
-    initialized: boolean
-    isInitializing: boolean
-    policyStoreJson: string
-  }
-}
 
 const PermissionsPolicyInitializer = () => {
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
 
   const retryCount = useRef({
     tryCount: 0,
@@ -33,13 +19,12 @@ const PermissionsPolicyInitializer = () => {
 
   const [maxRetries] = useState(10)
 
-  const hasSession = useSelector((state: ExtendedRootState) => state.authReducer.hasSession)
-  const { initialized, isInitializing, policyStoreJson } = useSelector(
-    (state: ExtendedRootState) => state.cedarPermissions,
+  const hasSession = useAppSelector((state) => state.authReducer.hasSession)
+  const { initialized, isInitializing, policyStoreJson } = useAppSelector(
+    (state) => state.cedarPermissions,
   )
   const cedarlingLogType =
-    useSelector((state: ExtendedRootState) => state.authReducer?.config?.cedarlingLogType) ||
-    CedarlingLogType.OFF
+    useAppSelector((state) => state.authReducer?.config?.cedarlingLogType) || CedarlingLogType.OFF
 
   useEffect(() => {
     // Helper function to check if policyStoreJson is valid

admin-ui/app/constants/ui.ts

@@ -96,8 +96,8 @@ export const MAPPING_SPACING = {
   PAGE_PADDING_TOP: 53,
   ALERT_TO_CARD: 24,
   CARD_PADDING: 33,
-  CARD_HEADER_HEIGHT: 73,
-  CARD_BORDER_RADIUS: 16,
+  CARD_HEADER_HEIGHT: 52,
+  CARD_BORDER_RADIUS: 6,
   CARD_MARGIN_BOTTOM: 16,
   PERMISSION_ROW_GAP: 20,
   PERMISSION_ITEM_GAP: 30,

admin-ui/app/locales/en/translation.json

@@ -906,6 +906,29 @@
     "smtp_username_required": "SMTP user name is required.",
     "smtp_password_required": "SMTP user password is required.",
     "no_configuration_loaded": "No configuration loaded",
+    "no_changes_detected": "No changes detected",
+    "scim_application_url_invalid": "Application URL must be a valid URL with http:// or https:// protocol",
+    "scim_protection_mode_invalid": "Protection Mode must be OAUTH or BYPASS",
+    "scim_max_count_type": "Max Count must be a number",
+    "scim_max_count_positive": "Max Count must be positive",
+    "scim_max_count_integer": "Max Count must be an integer",
+    "scim_max_count_max": "Max Count cannot exceed 2,147,483,647",
+    "scim_bulk_max_operations_type": "Bulk Max Operations must be a number",
+    "scim_bulk_max_operations_positive": "Bulk Max Operations must be positive",
+    "scim_bulk_max_operations_integer": "Bulk Max Operations must be an integer",
+    "scim_bulk_max_operations_max": "Bulk Max Operations cannot exceed 100,000",
+    "scim_bulk_max_payload_type": "Bulk Max Payload Size must be a number",
+    "scim_bulk_max_payload_positive": "Bulk Max Payload Size must be positive",
+    "scim_bulk_max_payload_integer": "Bulk Max Payload Size must be an integer",
+    "scim_bulk_max_payload_max": "Bulk Max Payload Size cannot exceed 100 MB (104,857,600 bytes)",
+    "scim_metric_interval_type": "Metric Reporter Interval must be a number",
+    "scim_metric_interval_positive": "Metric Reporter Interval must be positive",
+    "scim_metric_interval_integer": "Metric Reporter Interval must be an integer",
+    "scim_metric_interval_max": "Metric Reporter Interval cannot exceed 86,400 seconds (24 hours)",
+    "scim_metric_keep_days_type": "Metric Reporter Keep Data Days must be a number",
+    "scim_metric_keep_days_positive": "Metric Reporter Keep Data Days must be positive",
+    "scim_metric_keep_days_integer": "Metric Reporter Keep Data Days must be an integer",
+    "scim_metric_keep_days_max": "Metric Reporter Keep Data Days cannot exceed 3,650 days (10 years)",
     "insufficient_permissions_to_modify": "You do not have permission to modify this configuration",
     "action_commit_question": "Audit log: Want to apply changes made on this page?",
     "list_of_changes": "List of changes",

admin-ui/app/locales/es/translation.json

@@ -905,6 +905,29 @@
     "smtp_username_required": "El nombre de usuario SMTP es obligatorio.",
     "smtp_password_required": "La contraseña de usuario SMTP es obligatoria.",
     "no_configuration_loaded": "No se cargó ninguna configuración",
+    "no_changes_detected": "No se detectaron cambios",
+    "scim_application_url_invalid": "La URL de la aplicación debe ser una URL válida con protocolo http:// o https://",
+    "scim_protection_mode_invalid": "El modo de protección debe ser OAUTH o BYPASS",
+    "scim_max_count_type": "El conteo máximo debe ser un número",
+    "scim_max_count_positive": "El conteo máximo debe ser positivo",
+    "scim_max_count_integer": "El conteo máximo debe ser un número entero",
+    "scim_max_count_max": "El conteo máximo no puede exceder 2.147.483.647",
+    "scim_bulk_max_operations_type": "Las operaciones masivas máximas deben ser un número",
+    "scim_bulk_max_operations_positive": "Las operaciones masivas máximas deben ser positivas",
+    "scim_bulk_max_operations_integer": "Las operaciones masivas máximas deben ser un número entero",
+    "scim_bulk_max_operations_max": "Las operaciones masivas máximas no pueden exceder 100.000",
+    "scim_bulk_max_payload_type": "El tamaño máximo de carga masiva debe ser un número",
+    "scim_bulk_max_payload_positive": "El tamaño máximo de carga masiva debe ser positivo",
+    "scim_bulk_max_payload_integer": "El tamaño máximo de carga masiva debe ser un número entero",
+    "scim_bulk_max_payload_max": "El tamaño máximo de carga masiva no puede exceder 100 MB (104.857.600 bytes)",
+    "scim_metric_interval_type": "El intervalo del reportador de métricas debe ser un número",
+    "scim_metric_interval_positive": "El intervalo del reportador de métricas debe ser positivo",
+    "scim_metric_interval_integer": "El intervalo del reportador de métricas debe ser un número entero",
+    "scim_metric_interval_max": "El intervalo del reportador de métricas no puede exceder 86.400 segundos (24 horas)",
+    "scim_metric_keep_days_type": "Los días de retención de métricas deben ser un número",
+    "scim_metric_keep_days_positive": "Los días de retención de métricas deben ser positivos",
+    "scim_metric_keep_days_integer": "Los días de retención de métricas deben ser un número entero",
+    "scim_metric_keep_days_max": "Los días de retención de métricas no pueden exceder 3.650 días (10 años)",
     "insufficient_permissions_to_modify": "No tiene permiso para modificar esta configuración",
     "insufficient_token_read_permission": "El acceso a los datos del token no está concedido.",
     "action_commit_question": "Registro de auditoría: ¿Desea aplicar los cambios realizados en esta página?",

admin-ui/app/routes/Apps/Gluu/GluuAppSidebar.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useContext, useMemo, useCallback, useRef } from 'react'
 import { SidebarMenu, SidebarMenuItem } from 'Components'
-import { useSelector } from 'react-redux'
+import { useAppSelector } from '@/redux/hooks'
 import { ErrorBoundary } from 'react-error-boundary'
 import GluuErrorFallBack from './GluuErrorFallBack'
 import { processMenus } from 'Plugins/PluginMenuResolver'
@@ -69,8 +69,8 @@ const selectLogoutAuditSucceeded = (state: RootState): boolean | null =>
   state.logoutAuditReducer.logoutAuditSucceeded
 
 function GluuAppSidebar(): JSX.Element {
-  const health = useSelector(selectHealth)
-  const logoutAuditSucceeded = useSelector(selectLogoutAuditSucceeded)
+  const health = useAppSelector(selectHealth)
+  const logoutAuditSucceeded = useAppSelector(selectLogoutAuditSucceeded)
   const [pluginMenus, setPluginMenus] = useState<PluginMenu[]>([])
   const didAnimateMenusRef = useRef<boolean>(false)
   const isReady = pluginMenus.length > 0

admin-ui/app/routes/Apps/Gluu/GluuRemovableSelectRow.tsx

@@ -21,7 +21,6 @@ interface GluuRemovableSelectRowProps {
   formik: FormikProps<FormikValues>
   values?: CountryOption[]
   lsize?: number
-  rsize?: number
   handler: () => void
   doc_category?: string
   isDirect?: boolean
@@ -30,21 +29,20 @@ interface GluuRemovableSelectRowProps {
   setModifiedFields: React.Dispatch<React.SetStateAction<Record<string, ModifiedFieldValue>>>
 }
 
-function GluuRemovableSelectRow({
+const GluuRemovableSelectRow = ({
   label,
   name,
   value,
   formik,
   values = [],
   lsize = 12,
-  rsize = 12,
   handler,
   doc_category,
   isDirect,
   hideRemoveButton,
   modifiedFields,
   setModifiedFields,
-}: GluuRemovableSelectRowProps) {
+}: GluuRemovableSelectRowProps) => {
   const currentValue = (formik.values[name] as string | undefined) ?? value ?? ''
 
   const { t } = useTranslation()

admin-ui/app/routes/Apps/Gluu/GluuSessionTimeout.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react'
 import SessionTimeoutDialog from './GluuSessionTimeoutDialog'
 import { withIdleTimer } from 'react-idle-timer'
-import { useDispatch, useSelector } from 'react-redux'
+import { useAppDispatch, useAppSelector } from '@/redux/hooks'
 import { auditLogoutLogs } from 'Redux/features/sessionSlice'
 import { useAppNavigation, ROUTES } from '@/helpers/navigation'
 import { devLogger } from '@/utils/devLogger'
@@ -17,10 +17,10 @@ const SessionTimeout = ({ isAuthenticated }: any) => {
   const [timeoutCountdown, setTimeoutCountdown] = useState(0)
   const idleTimer = useRef(null)
   const sessionTimeout =
-    useSelector((state: any) => state.authReducer?.config?.sessionTimeoutInMins) || 5
-  const { logoutAuditSucceeded } = useSelector((state: any) => state.logoutAuditReducer)
+    Number(useAppSelector((state) => state.authReducer?.config?.sessionTimeoutInMins)) || 5
+  const { logoutAuditSucceeded } = useAppSelector((state) => state.logoutAuditReducer)
 
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
   const { navigateToRoute } = useAppNavigation()
 
   const clearSessionTimeout = () => {

admin-ui/app/routes/Apps/Gluu/GluuWebhookErrorDialog.tsx

@@ -1,7 +1,6 @@
 import { useMemo, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useDispatch } from 'react-redux'
-import { useAppSelector } from '@/redux/hooks'
+import { useAppDispatch, useAppSelector } from '@/redux/hooks'
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'
 import {
   setShowErrorModal,
@@ -19,7 +18,7 @@ import type { WebhookTriggerResponseItem } from 'Plugins/admin/redux/types/webho
 
 const GluuWebhookErrorDialog = () => {
   const { t } = useTranslation()
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
   const webhookState = useAppSelector((state) => state.webhookReducer)
   const { hasCedarReadPermission, authorizeHelper } = useCedarling()
   const { state: themeState } = useTheme()