feat(admin): adding uniformity in cancel and back buttons present along with TS migration, Tabs navigation throttling issue and type safe implementation in SAML

admin-ui/app/helpers/navigation.ts

@@ -49,6 +49,7 @@ const ROUTES = {
   LDAP_EDIT: (configId: string) => `/config/ldap/edit/${encodeURIComponent(configId)}`,
 
   // SAML
+  SAML_CONFIG: '/saml/config',
   SAML_SP_LIST: '/saml/service-providers',
   SAML_SP_ADD: '/saml/service-providers/add',
   SAML_SP_EDIT: '/saml/service-providers/edit',

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

@@ -995,8 +995,9 @@
     "loading_database_information": "Loading database information...",
     "idp": "IDP",
     "sp": "SP",
-    "create_sp": "Create Service Provider",
-    "edit_sp": "Edit Service Provider",
+    "create_service_provider": "Create Service Provider",
+    "edit_service_provider": "Edit Service Provider",
+    "view_service_provider": "View Service Provider",
     "create_idp": "Create IDP",
     "edit_idp": "Edit IDP",
     "application_settings": "Application Settings",
@@ -1076,7 +1077,12 @@
     "cedar_Init": "Cedarling is trying to initialize, please wait",
     "newPermission": "New Permission",
     "addingNewApiPermission": "Adding new API Permission",
-    "followingPermissionRequiredToBeAdded": "Following permission required to be added!"
+    "followingPermissionRequiredToBeAdded": "The following permission must be added:",
+    "identity_provider": "Identity Provider",
+    "edit_identity_provider": "Edit Identity Provider",
+    "create_identity_provider": "Create Identity Provider",
+    "view_identity_provider": "View Identity Provider",
+    "delete_identity_provider": "Delete Identity Provider"
   },
   "links": {
     "support": "https://support.gluu.org/"

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

@@ -987,8 +987,9 @@
     "loading_database_information": "Cargando información de la base de datos...",
     "idp": "IDP",
     "sp": "SP",
-    "create_sp": "Crear Service Provider",
-    "edit_sp": "Editar Service Provider",
+    "create_service_provider": "Crear Proveedor de Servicio",
+    "edit_service_provider": "Editar Proveedor de Servicio",
+    "view_service_provider": "Ver Proveedor de Servicio",
     "create_idp": "Crear IDP",
     "edit_idp": "Editar IDP",
     "application_settings": "Configuración de la aplicación",
@@ -1068,7 +1069,12 @@
     "cedar_Init": "Cedarling está intentando inicializarse, por favor espera",
     "newPermission": "Nuevo permiso",
     "addingNewApiPermission": "Añadiendo nuevo permiso API",
-    "followingPermissionRequiredToBeAdded": "¡Es necesario añadir el siguiente permiso!"
+    "followingPermissionRequiredToBeAdded": "¡Es necesario añadir el siguiente permiso!",
+    "identity_provider": "Proveedor de Identidad",
+    "edit_identity_provider": "Editar Proveedor de Identidad",
+    "create_identity_provider": "Crear Proveedor de Identidad",
+    "view_identity_provider": "Ver Proveedor de Identidad",
+    "delete_identity_provider": "Eliminar Proveedor de Identidad"
   },
   "links": {
     "support": "https://support.gluu.org/"

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

@@ -924,8 +924,9 @@
     "all_scopes": "Toutes les portées",
     "idp": "IDP",
     "sp": "SP",
-    "create_sp": "Créer un fournisseur de services",
-    "edit_sp": "Modifier un fournisseur de services",
+    "create_service_provider": "Créer un fournisseur de services",
+    "edit_service_provider": "Modifier un fournisseur de services",
+    "view_service_provider": "Voir le fournisseur de services",
     "create_idp": "Créer un IDP",
     "edit_idp": "Modifier un IDP",
     "client_advanced": "Avancée",
@@ -971,6 +972,11 @@
     "newPermission": "Nouvelle Permission",
     "addingNewApiPermission": "Ajout d'une nouvelle autorisation API",
     "followingPermissionRequiredToBeAdded": "Une autorisation est requise pour être ajouté!",
+    "identity_provider": "Fournisseur d'Identité",
+    "edit_identity_provider": "Modifier le Fournisseur d'Identité",
+    "create_identity_provider": "Créer un Fournisseur d'Identité",
+    "view_identity_provider": "Voir le Fournisseur d'Identité",
+    "delete_identity_provider": "Supprimer le Fournisseur d'Identité",
     "authentication": "Authentification"
   },
   "links": {

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

@@ -914,8 +914,9 @@
     "loading_database_information": "Carregando informações do banco de dados...",
     "idp": "IDP",
     "sp": "SP",
-    "create_sp": "Criar Provedor de Serviços",
-    "edit_sp": "Editar Provedor de Serviços",
+    "create_service_provider": "Criar Provedor de Serviços",
+    "edit_service_provider": "Editar Provedor de Serviços",
+    "view_service_provider": "Visualizar Provedor de Serviços",
     "create_idp": "Criar IDP",
     "edit_idp": "Editar IDP",
     "all_oidc_clients": "Todos os clientes OIDC",
@@ -965,6 +966,11 @@
     "newPermission": "Nova Permissão",
     "addingNewApiPermission": "Adicionando nova permissão de API",
     "followingPermissionRequiredToBeAdded": "É necessária a permissão seguinte para ser adicionado!",
+    "identity_provider": "Provedor de Identidade",
+    "edit_identity_provider": "Editar Provedor de Identidade",
+    "create_identity_provider": "Criar Provedor de Identidade",
+    "view_identity_provider": "Visualizar Provedor de Identidade",
+    "delete_identity_provider": "Excluir Provedor de Identidade",
     "authentication": "Autenticação"
   },
   "links": {

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

@@ -1,16 +1,40 @@
 import React from 'react'
 import { Input, FormGroup } from 'Components'
 import { useTranslation } from 'react-i18next'
+import type { GluuAdvancedSearchProps } from './types'
 
 function GluuAdvancedSearch({
   handler,
+  onChange,
+  onKeyDown,
   patternId,
   limitId,
   limit,
   pattern = '',
   showLimit = true,
-}: any) {
+  controlled = false,
+}: GluuAdvancedSearchProps) {
   const { t } = useTranslation()
+
+  const handleChange: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined = onChange
+    ? onChange
+    : handler
+      ? (event: React.ChangeEvent<HTMLInputElement>) => {
+          handler(event)
+        }
+      : undefined
+
+  const handleKeyDown: ((event: React.KeyboardEvent<HTMLInputElement>) => void) | undefined =
+    onKeyDown
+      ? onKeyDown
+      : handler
+        ? (event: React.KeyboardEvent<HTMLInputElement>) => {
+            handler(event)
+          }
+        : undefined
+
+  const patternProps = controlled ? { value: pattern || '' } : { defaultValue: pattern }
+
   return (
     <FormGroup row style={{ marginTop: '10px' }}>
       {showLimit && (
@@ -21,7 +45,7 @@ function GluuAdvancedSearch({
           name="limit"
           data-testid={limitId}
           defaultValue={limit}
-          onChange={handler}
+          onChange={handleChange}
           onKeyDown={(evt) => evt.key === 'e' && evt.preventDefault()}
         />
       )}
@@ -32,10 +56,10 @@ function GluuAdvancedSearch({
         data-testid={patternId}
         type="text"
         name="pattern"
-        defaultValue={pattern}
+        {...patternProps}
         placeholder={t('placeholders.search_pattern')}
-        onChange={handler}
-        onKeyDown={handler}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
       />
     </FormGroup>
   )

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

@@ -22,13 +22,15 @@ import { useCedarling } from '@/cedarling'
 import { ADMIN_UI_RESOURCES } from '@/cedarling/utility'
 import { CEDAR_RESOURCE_SCOPES } from '@/cedarling/constants/resourceScopes'
 import customColors from '@/customColors'
-import type { GluuCommitDialogProps } from './types'
 import type { RootState } from '@/redux/sagas/types/audit'
-
-type JsonValue = string | number | boolean | null | { [key: string]: JsonValue } | JsonValue[]
+import type { GluuCommitDialogOperation, GluuCommitDialogProps, JsonValue } from './types'
 
 const USER_MESSAGE = 'user_action_message'
 
+const isJsonValueArray = (value: JsonValue): value is JsonValue[] => {
+  return Array.isArray(value)
+}
+
 const GluuCommitDialog = ({
   handler,
   modal,
@@ -181,7 +183,7 @@ const GluuCommitDialog = ({
                 </FormGroup>
               ) : null}
               {operations &&
-                operations.map((item, key) => (
+                operations.map((item: GluuCommitDialogOperation, key: number) => (
                   <FormGroup row key={key}>
                     <Col sm={1} style={{ fontWeight: 'bold' }}>
                       Set
@@ -200,7 +202,7 @@ const GluuCommitDialog = ({
                       to
                     </Col>
                     <Col sm={5} style={{ overflow: 'auto' }}>
-                      {Array.isArray(item.value) ? (
+                      {isJsonValueArray(item.value) ? (
                         renderArrayValue(item.value, key)
                       ) : typeof item.value === 'boolean' ? (
                         <Badge color={`primary-${selectedTheme}`}>{String(item.value)}</Badge>

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

@@ -101,7 +101,6 @@ const GluuDialog = ({ row, handler, modal, onAccept, subject, name, feature }: a
                   name="user_action_message"
                   onChange={(e) => setUserMessage(e.target.value)}
                   placeholder={t('placeholders.action_commit_message')}
-                  defaultValue=""
                   value={userMessage}
                 />
                 {userMessage.length < 10 && (

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

@@ -159,7 +159,7 @@ export default function GluuTabs({ tabNames, tabToShow, withNavigation = false }
     }
 
     const activeTab = tabNames[activeIndex] ?? null
-    if (isNavigationTab(activeTab)) {
+    if (isNavigationTab(activeTab) && activeTab.path !== path.pathname) {
       navigateToRoute(activeTab.path, { replace: true })
     }
     setValue(activeIndex)

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

@@ -1,25 +1,52 @@
-import { useCallback, useState } from 'react'
-import { useDropzone } from 'react-dropzone'
+import type { MouseEvent } from 'react'
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import { useDropzone, type Accept } from 'react-dropzone'
 import { Box } from '@mui/material'
 import { Button } from 'reactstrap'
+import { ThemeContext } from 'Context/theme/themeContext'
 
-const GluuUploadFile = ({
-  accept = {
-    'application/jwt': ['.jwt'],
-  },
+interface GluuUploadFileProps {
+  accept?: Accept
+  onDrop: (files: File[]) => void
+  placeholder: string
+  onClearFiles: () => void
+  disabled?: boolean
+  fileName?: string | null
+  showClearButton?: boolean
+}
+
+const DEFAULT_ACCEPT: Accept = {
+  'application/jwt': ['.jwt'],
+}
+
+const GluuUploadFile: React.FC<GluuUploadFileProps> = ({
+  accept = DEFAULT_ACCEPT,
   onDrop,
   placeholder,
   onClearFiles,
-  disabled,
-  fileName,
-}: any) => {
-  const [preDefinedFileName, setPreDefinedFileName] = useState(fileName || null)
-  const [selectedFile, setSelectedFile] = useState<any>(null)
-  const handleDrop = useCallback((acceptedFiles: any) => {
-    const file = acceptedFiles[0]
-    setSelectedFile(file)
-    onDrop(acceptedFiles)
-  }, [])
+  disabled = false,
+  fileName = null,
+  showClearButton = true,
+}) => {
+  const theme = useContext(ThemeContext)
+  const selectedTheme = useMemo(() => theme?.state.theme || 'darkBlack', [theme?.state.theme])
+
+  const [preDefinedFileName, setPreDefinedFileName] = useState<string | null>(fileName || null)
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+
+  useEffect(() => {
+    setPreDefinedFileName(fileName || null)
+  }, [fileName])
+
+  const handleDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      const [file] = acceptedFiles
+      if (!file) return
+      setSelectedFile(file)
+      onDrop([file])
+    },
+    [onDrop],
+  )
 
   const {
     getRootProps: getRootProps1,
@@ -31,12 +58,15 @@ const GluuUploadFile = ({
     disabled,
   })
 
-  const clearFiles = useCallback((event: any) => {
-    event.stopPropagation()
-    setSelectedFile(null)
-    onClearFiles()
-    setPreDefinedFileName(null)
-  }, [])
+  const clearFiles = useCallback(
+    (event: MouseEvent<HTMLButtonElement>) => {
+      event.stopPropagation()
+      setSelectedFile(null)
+      setPreDefinedFileName(null)
+      onClearFiles()
+    },
+    [onClearFiles],
+  )
 
   return (
     <div className="col-md-12">
@@ -45,15 +75,17 @@ const GluuUploadFile = ({
         {selectedFile || preDefinedFileName ? (
           <Box display={'flex'} justifyContent={'space-between'} alignItems={'center'}>
             <Box display="flex" justifyContent="flex-start" alignItems="center" gap={1}>
-              <strong>{preDefinedFileName || selectedFile?.name}</strong>
+              <strong>{selectedFile?.name || preDefinedFileName}</strong>
               {selectedFile ? (
                 <p className="m-0">({((selectedFile?.size || 0) / 1000).toFixed(0)}K)</p>
               ) : null}
             </Box>
-            <Button onClick={clearFiles}>
-              <i className="fa fa-remove me-2"></i>
-              Clear
-            </Button>
+            {showClearButton && (
+              <Button color={`primary-${selectedTheme}`} onClick={clearFiles}>
+                <i className="fa fa-remove me-2"></i>
+                Clear
+              </Button>
+            )}
           </Box>
         ) : (
           <p className="m-0">{placeholder}</p>