fix(admin-ui): Use typescript generated client for Webhooks pages

admin-ui/app/components/SVG/menu/ShortCodesIcon.tsx

@@ -1,19 +1,20 @@
 import React from 'react'
 
 interface ShortCodesIconProps {
-  className: string
-  style: React.CSSProperties
+  className?: string
+  style?: React.CSSProperties
 }
 
-const ShortCodesIcon: React.FC<ShortCodesIconProps> = ({ className, style }) => {
+const ShortCodesIcon: React.FC<ShortCodesIconProps> = ({ className, style = {} }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
       strokeWidth="1.5"
       stroke="currentColor"
-      style={{ width: '18px' }}
+      className={className}
+      style={{ width: '18px', ...style }}
     >
       <path
         strokeLinecap="round"

admin-ui/app/context/theme/themeContext.tsx

@@ -11,7 +11,7 @@ type ThemeAction = {
 }
 
 // Define the context value type
-interface ThemeContextType {
+export interface ThemeContextType {
   state: ThemeState
   dispatch: Dispatch<ThemeAction>
 }

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

@@ -445,6 +445,7 @@
     "status": "Status",
     "scopes": "Scopes",
     "sort_by": "Sort By",
+    "results_per_page": "Results per page",
     "smtp_host": "SMTP Host",
     "smtp_port": "SMTP Port",
     "trust_host": "Trust Server",
@@ -742,6 +743,9 @@
     "webhook_execution_information": "Webhook Execution Information",
     "webhook_dialog_dec": "As part of the submission process, the system will automatically trigger the following associated webhooks to perform additional processing tasks.",
     "add_webhook": "Add Webhook",
+    "webhook_form_description": "Configure webhook to receive notifications when specific events occur.",
+    "no_webhooks_found": "No webhooks found",
+    "create_first_webhook": "Create your first webhook to get started",
     "permission_name_error": "Please ensure the permission name is at least 5 characters long.",
     "role_name_error": "Please ensure the role name is at least 5 characters long.",
     "error_message": "Error Message",
@@ -755,6 +759,7 @@
     "session_timeout_required_error": "Session timeout is required",
     "additional_parameters_required": "Both key and value are required for each custom parameter.",
     "invalid_json_error": "Invalid JSON value.",
+    "invalid_url_error": "Invalid URL or URL not allowed.",
     "add_identity_provider": "Add Identity Provider",
     "view_idp_details": "View IDP Details",
     "edit_identity_provider": "Edit Identity Provider",

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

@@ -445,6 +445,7 @@
     "status": "Estado",
     "scopes": "Ámbitos",
     "sort_by": "Ordenar Por",
+    "results_per_page": "Resultados por página",
     "smtp_host": "Host SMTP",
     "smtp_port": "Puerto SMTP",
     "trust_host": "Servidor de Confianza",
@@ -742,6 +743,9 @@
     "webhook_execution_information": "Información de Ejecución del Webhook",
     "webhook_dialog_dec": "Como parte del proceso de envío, el sistema activará automáticamente los siguientes webhooks asociados para realizar tareas de procesamiento adicionales.",
     "add_webhook": "Agregar Webhook",
+    "webhook_form_description": "Configure el webhook para recibir notificaciones cuando ocurran eventos específicos.",
+    "no_webhooks_found": "No se encontraron webhooks",
+    "create_first_webhook": "Cree su primer webhook para comenzar",
     "permission_name_error": "Asegúrese de que el nombre del permiso tenga al menos 5 caracteres.",
     "role_name_error": "Asegúrese de que el nombre del rol tenga al menos 5 caracteres.",
     "error_message": "Mensaje de Error",
@@ -755,6 +759,7 @@
     "session_timeout_required_error": "El tiempo de espera de sesión es obligatorio",
     "additional_parameters_required": "Both key and value are required for each custom parameter.",
     "invalid_json_error": "Valor JSON inválido.",
+    "invalid_url_error": "URL inválida o URL no permitida.",
     "add_identity_provider": "Agregar Proveedor de Identidad",
     "view_idp_details": "Ver Detalles del IdP",
     "edit_identity_provider": "Editar Proveedor de Identidad",

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

@@ -364,6 +364,7 @@
     "requirePar": "Requérir PAR",
     "scopes": "Portées",
     "sort_by": "Trier Par",
+    "results_per_page": "Résultats par page",
     "activate": "Activer",
     "active": "Active",
     "application_type": "Type de demande",
@@ -678,6 +679,9 @@
     "view_trust_relationshi_details": "Voir les détails de la relation de confiance",
     "add_trust_relationship": "Ajouter une relation de confiance",
     "add_webhook": "Ajouter un Webhook",
+    "webhook_form_description": "Configurez le webhook pour recevoir des notifications lorsque des événements spécifiques se produisent.",
+    "no_webhooks_found": "Aucun webhook trouvé",
+    "create_first_webhook": "Créez votre premier webhook pour commencer",
     "no_spaces": "ne doit pas contenir d'espaces",
     "permission_name_error": "Veuillez vous assurer que le nom de la permission comporte au moins 5 caractères.",
     "role_name_error": "Veuillez vous assurer que le nom du rôle comporte au moins 5 caractères.",
@@ -723,6 +727,7 @@
     "url_error": "Veuillez entrer une URL.",
     "missing_required_permission": "Permission requise manquante",
     "invalid_json_error": "Valeur JSON invalide.",
+    "invalid_url_error": "URL invalide ou URL non autorisée.",
     "action_commit_question": "Journal d'audit : vous souhaitez appliquer les modifications apportées sur cette page ?",
     "licenseAuditLog": "Voulez-vous vraiment réinitialiser la licence existante ?",
     "action_deletion_question": "Voulez-vous vraiment supprimer cet élément ?",

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

@@ -331,6 +331,7 @@
     "redirectUrisRegex": "Expressão regular de redirecionamento",
     "scopes": "Escopos",
     "sort_by": "Ordenar Por",
+    "results_per_page": "Resultados por página",
     "requestUris": "URIs de solicitação",
     "defaultAcrValues": "ACR padrão",
     "authorizedAcrValues": "ACRs autorizados",
@@ -699,11 +700,15 @@
     "select_message_provider_type": "Por favor, selecione o tipo de provedor de mensagens",
     "new_role": "Novo papel",
     "add_webhook": "Adicionar Webhook",
+    "webhook_form_description": "Configure o webhook para receber notificações quando eventos específicos ocorrerem.",
+    "no_webhooks_found": "Nenhum webhook encontrado",
+    "create_first_webhook": "Crie seu primeiro webhook para começar",
     "http_method_error": "Por favor, selecione um método HTTP.",
     "display_name_error": "Por favor, insira um nome de exibição.",
     "url_error": "Por favor, insira uma URL.",
     "missing_required_permission": "Permissão necessária ausente",
     "invalid_json_error": "Valor JSON inválido.",
+    "invalid_url_error": "URL inválido ou URL não permitido.",
     "license_api_not_enabled": "A API de licença não está habilitada para este aplicativo.",
     "adding_new_permission": "Adicionando nova permissão",
     "add_role": "Adicionar função",

admin-ui/plugins/admin/components/Webhook/ShortcodePopover.js → admin-ui/plugins/admin/components/Webhook/ShortcodePopover.tsx

@@ -1,24 +1,54 @@
-import * as React from 'react'
+import React, { useState, memo } from 'react'
 import Popover from '@mui/material/Popover'
 import Typography from '@mui/material/Typography'
 import Button from '@mui/material/Button'
 import Box from '@mui/material/Box'
 import Divider from '@mui/material/Divider'
-import { List, ListItemButton, ListItemText } from '@mui/material'
-import { useTranslation } from 'react-i18next'
+import List from '@mui/material/List'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemText from '@mui/material/ListItemText'
 import { HelpOutline } from '@mui/icons-material'
 import { Tooltip as ReactTooltip } from 'react-tooltip'
-import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
 import applicationstyle from 'Routes/Apps/Gluu/styles/applicationstyle'
-import ShortCodesIcon from 'Components/SVG/menu/ShortCodesIcon'
+import { ShortCodesIcon } from '@/components/SVG'
+import type { ShortcodePopoverProps, ShortcodeLabelProps } from './types'
+
+const Label: React.FC<ShortcodeLabelProps> = ({ doc_category, doc_entry, label }) => {
+  const { t, i18n } = useTranslation()
 
-export default function ShortcodePopover({
+  return (
+    <Box display="flex" gap={0.5}>
+      <Typography color="black">{t(label)}</Typography>
+      {doc_category && i18n.exists(doc_category) && (
+        <>
+          <ReactTooltip
+            id={doc_entry}
+            place="right"
+            role="tooltip"
+            style={{ zIndex: 101, maxWidth: '45vw' }}
+          >
+            {t(doc_category)}
+          </ReactTooltip>
+          <HelpOutline
+            style={{ width: 18, height: 18, marginLeft: 6, marginRight: 6 }}
+            data-tooltip-id={doc_entry}
+            data-for={doc_entry}
+          />
+        </>
+      )}
+    </Box>
+  )
+}
+
+const ShortcodePopover: React.FC<ShortcodePopoverProps> = ({
   codes,
   buttonWrapperStyles = {},
   handleSelectShortcode,
-}) {
-  const [anchorEl, setAnchorEl] = React.useState(null)
-  const handleClick = (event) => {
+}) => {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget)
   }
 
@@ -27,10 +57,15 @@ export default function ShortcodePopover({
   }
 
   const open = Boolean(anchorEl)
-  const id = open ? 'simple-popover' : undefined
+  const id = open ? 'shortcode-popover' : undefined
 
   return (
-    <div style={{ ...applicationstyle.shortCodesWrapperStyles, ...buttonWrapperStyles }}>
+    <div
+      style={{
+        ...(applicationstyle.shortCodesWrapperStyles as React.CSSProperties),
+        ...buttonWrapperStyles,
+      }}
+    >
       <Button aria-describedby={id} variant="text" sx={{ border: 0 }} onClick={handleClick}>
         <ShortCodesIcon />
       </Button>
@@ -47,7 +82,6 @@ export default function ShortcodePopover({
         <Box
           display="flex"
           flexDirection="column"
-          // gap={1}
           sx={{
             maxHeight: '300px',
             overflowY: 'auto',
@@ -56,28 +90,26 @@ export default function ShortcodePopover({
         >
           {codes?.length ? (
             <List>
-              {codes?.map((code, index) => {
-                return (
-                  <React.Fragment key={code.key}>
-                    <ListItemButton
-                      onClick={() => handleSelectShortcode(code.key)}
-                      component="button"
-                      sx={{ width: '100%' }}
-                    >
-                      <ListItemText
-                        primary={
-                          <Label
-                            doc_category={code.description}
-                            doc_entry={code.key + code.label}
-                            label={code.label}
-                          />
-                        }
-                      />
-                    </ListItemButton>
-                    {index + 1 !== codes?.length && <Divider />}
-                  </React.Fragment>
-                )
-              })}
+              {codes.map((code, index) => (
+                <React.Fragment key={code.key}>
+                  <ListItemButton
+                    onClick={() => handleSelectShortcode(code.key)}
+                    component="button"
+                    sx={{ width: '100%' }}
+                  >
+                    <ListItemText
+                      primary={
+                        <Label
+                          doc_category={code.description}
+                          doc_entry={code.key + code.label}
+                          label={code.label}
+                        />
+                      }
+                    />
+                  </ListItemButton>
+                  {index + 1 !== codes.length && <Divider />}
+                </React.Fragment>
+              ))}
             </List>
           ) : (
             <Typography sx={{ p: 2 }}>No shortcodes found!</Typography>
@@ -88,44 +120,4 @@ export default function ShortcodePopover({
   )
 }
 
-const Label = ({ doc_category, doc_entry, label }) => {
-  const { t, i18n } = useTranslation()
-
-  return (
-    <Box display="flex" gap={0.5}>
-      <Typography color="black">{t(label)}</Typography>
-      {doc_category && i18n.exists(doc_category) && (
-        <>
-          <ReactTooltip
-            tabIndex="-1"
-            id={doc_entry}
-            place="right"
-            role="tooltip"
-            style={{ zIndex: 101, maxWidth: '45vw' }}
-          >
-            {t(doc_category)}
-          </ReactTooltip>
-          <HelpOutline
-            tabIndex="-1"
-            style={{ width: 18, height: 18, marginLeft: 6, marginRight: 6 }}
-            data-tooltip-id={doc_entry}
-            data-for={doc_entry}
-          />
-        </>
-      )}
-    </Box>
-  )
-}
-
-// Adding prop validation
-Label.propTypes = {
-  doc_category: PropTypes.string,
-  doc_entry: PropTypes.string,
-  label: PropTypes.string,
-}
-
-ShortcodePopover.propTypes = {
-  codes: PropTypes.array,
-  buttonWrapperStyles: PropTypes.any,
-  handleSelectShortcode: PropTypes.func,
-}
+export default memo(ShortcodePopover)

admin-ui/plugins/admin/components/Webhook/WebhookAddPage.tsx

@@ -0,0 +1,14 @@
+import React, { memo } from 'react'
+import { Card } from 'Components'
+import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
+import WebhookForm from './WebhookForm'
+
+const WebhookAddPage: React.FC = () => {
+  return (
+    <Card style={applicationStyle.mainCard}>
+      <WebhookForm />
+    </Card>
+  )
+}
+
+export default memo(WebhookAddPage)