fix(admin-ui): Migrate SAML plugin to use orval generated typescript client

admin-ui/.gitignore

@@ -1,5 +1,6 @@
 # build output
 dist
+.fix-orval-enums-out
 
 # dependencies
 node_modules

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

@@ -56,11 +56,11 @@ TabPanel.displayName = 'TabPanel'
 const isNavigationTab = (tab: TabItem | null): tab is NavigationTab => {
   return Boolean(
     tab &&
-    typeof tab === 'object' &&
-    'name' in tab &&
-    'path' in tab &&
-    typeof tab.path === 'string' &&
-    tab.path.trim().length > 0,
+      typeof tab === 'object' &&
+      'name' in tab &&
+      'path' in tab &&
+      typeof tab.path === 'string' &&
+      tab.path.trim().length > 0,
   )
 }
 

admin-ui/package.json

@@ -39,7 +39,7 @@
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json}\"",
     "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json}\"",
     "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",
+    "api:orval": "rimraf jans_config_api_orval && openapi-merge-cli && orval --config ./orval.config.ts && npx tsc -p script/fix-orval-enums.tsconfig.json && node .fix-orval-enums-out/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",

admin-ui/plugins/saml/components/SamlConfigurationForm.tsx

@@ -1,37 +1,37 @@
 import { useFormik } from 'formik'
 import React, { useState, useEffect, useMemo, useCallback, memo, useRef } from 'react'
+import { useDispatch } from 'react-redux'
 import { Row, Col, Form, FormGroup, CustomInput } from 'Components'
-import { useDispatch, useSelector } from 'react-redux'
 import GluuCommitDialog from 'Routes/Apps/Gluu/GluuCommitDialog'
 import GluuFormFooter from 'Routes/Apps/Gluu/GluuFormFooter'
 import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
 import { useCedarling } from '@/cedarling'
 import GluuLabel from 'Routes/Apps/Gluu/GluuLabel'
 import GluuToogleRow from 'Routes/Apps/Gluu/GluuToogleRow'
 import { useTranslation } from 'react-i18next'
-import { putSamlProperties, getSamlConfiguration } from 'Plugins/saml/redux/features/SamlSlice'
 import SetTitle from 'Utils/SetTitle'
 import { adminUiFeatures } from 'Plugins/admin/helper/utils'
 import { ADMIN_UI_RESOURCES } from '@/cedarling/utility'
 import { CEDAR_RESOURCE_SCOPES } from '@/cedarling/constants/resourceScopes'
 import { samlConfigurationValidationSchema } from '../helper/validations'
 import { transformToFormValues } from '../helper/utils'
+import { updateToast } from 'Redux/features/toastSlice'
+import { useSamlConfiguration, useUpdateSamlConfiguration } from './hooks'
 import type { SamlConfigurationFormValues } from '../types'
-import type { SamlRootState } from '../types/state'
 
 const DOC_SECTION = 'samlConfiguration' as const
 
 const SamlConfigurationForm: React.FC = () => {
   const { t } = useTranslation()
-  const { authorizeHelper, hasCedarWritePermission } = useCedarling()
   const dispatch = useDispatch()
+  const { authorizeHelper, hasCedarWritePermission } = useCedarling()
   const [modal, setModal] = useState<boolean>(false)
-  const { configuration, loading } = useSelector((state: SamlRootState) => state.idpSamlReducer)
-  SetTitle(t('titles.saml_management'))
 
-  useEffect(() => {
-    dispatch(getSamlConfiguration())
-  }, [dispatch])
+  const { data: configuration, isLoading: queryLoading } = useSamlConfiguration()
+  const updateConfigMutation = useUpdateSamlConfiguration()
+  const loading = queryLoading || updateConfigMutation.isPending
+
+  SetTitle(t('titles.saml_management'))
 
   const samlResourceId = useMemo(() => ADMIN_UI_RESOURCES.SAML, [])
   const samlScopes = useMemo(() => CEDAR_RESOURCE_SCOPES[samlResourceId], [samlResourceId])
@@ -61,14 +61,22 @@ const SamlConfigurationForm: React.FC = () => {
   })
 
   const handleSubmit = useCallback(
-    (values: SamlConfigurationFormValues, messages: string) => {
-      dispatch(
-        putSamlProperties({
-          action: { action_message: messages, action_data: values },
-        }),
-      )
+    async (values: SamlConfigurationFormValues, messages: string) => {
+      try {
+        await updateConfigMutation.mutateAsync({
+          data: values,
+          userMessage: messages,
+        })
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error
+            ? error.message
+            : (error as { response?: { data?: { message?: string } } })?.response?.data?.message ||
+              t('messages.error_in_saving')
+        dispatch(updateToast(true, 'error', errorMessage))
+      }
     },
-    [dispatch],
+    [updateConfigMutation, dispatch, t],
   )
 
   const { setFieldValue, resetForm, handleSubmit: formikHandleSubmit } = formik

admin-ui/plugins/saml/components/SamlPage.tsx

@@ -1,22 +1,16 @@
 import React, { useMemo, useCallback } from 'react'
 import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
 import { Card, CardBody } from 'Components'
-import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
 import GluuTabs from 'Routes/Apps/Gluu/GluuTabs'
 import SetTitle from 'Utils/SetTitle'
 import { useTranslation } from 'react-i18next'
-import { useSelector } from 'react-redux'
 import { ROUTES } from '@/helpers/navigation'
 import SamlConfigurationForm from './SamlConfigurationForm'
 import WebsiteSsoIdentityBrokeringList from './WebsiteSsoIdentityBrokeringList'
 import WebsiteSsoServiceProviderList from './WebsiteSsoServiceProviderList'
-import type { SamlRootState } from '../types/state'
 
 const SamlPage = React.memo(() => {
   const { t } = useTranslation()
-  const { loadingSamlIdp, loadingWebsiteSsoServiceProvider } = useSelector(
-    (state: SamlRootState) => state.idpSamlReducer,
-  )
 
   SetTitle(t('titles.saml_management'))
 
@@ -46,13 +40,11 @@ const SamlPage = React.memo(() => {
   )
 
   return (
-    <GluuLoader blocking={loadingSamlIdp || loadingWebsiteSsoServiceProvider}>
-      <Card className="mb-3" style={applicationStyle.mainCard}>
-        <CardBody>
-          <GluuTabs tabNames={tabNames} tabToShow={tabToShow} withNavigation={true} />
-        </CardBody>
-      </Card>
-    </GluuLoader>
+    <Card className="mb-3" style={applicationStyle.mainCard}>
+      <CardBody>
+        <GluuTabs tabNames={tabNames} tabToShow={tabToShow} withNavigation={true} />
+      </CardBody>
+    </Card>
   )
 })