@@ -17,7 +17,7 @@ import { Link } from "components/Link/Link";
1717import { Paywall } from "components/Paywall/Paywall" ;
1818import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility" ;
1919import { useOrganizationSettings } from "modules/management/OrganizationSettingsLayout" ;
20- import { type FC , useState } from "react" ;
20+ import { type FC , useEffect , useState } from "react" ;
2121import { Helmet } from "react-helmet-async" ;
2222import { useMutation , useQueries , useQuery , useQueryClient } from "react-query" ;
2323import { useParams , useSearchParams } from "react-router-dom" ;
@@ -27,15 +27,15 @@ import IdpSyncPageView from "./IdpSyncPageView";
2727
2828export const IdpSyncPage : FC = ( ) => {
2929 const queryClient = useQueryClient ( ) ;
30+ // IdP sync does not have its own entitlement and is based on templace_rbac
31+ const { template_rbac : isIdpSyncEnabled } = useFeatureVisibility ( ) ;
3032 const { organization : organizationName } = useParams ( ) as {
3133 organization : string ;
3234 } ;
33- const [ groupClaimField , setGroupClaimField ] = useState ( "" ) ;
34- const [ roleClaimField , setRoleClaimField ] = useState ( "" ) ;
35- // IdP sync does not have its own entitlement and is based on templace_rbac
36- const { template_rbac : isIdpSyncEnabled } = useFeatureVisibility ( ) ;
3735 const { organizations } = useOrganizationSettings ( ) ;
3836 const organization = organizations ?. find ( ( o ) => o . name === organizationName ) ;
37+ const [ groupField , setGroupField ] = useState ( "" ) ;
38+ const [ roleField , setRoleField ] = useState ( "" ) ;
3939
4040 const [
4141 groupIdpSyncSettingsQuery ,
@@ -48,15 +48,15 @@ export const IdpSyncPage: FC = () => {
4848 ...groupIdpSyncSettings ( organizationName ) ,
4949 onSuccess : ( data : GroupSyncSettings ) => {
5050 if ( data ?. field ) {
51- setGroupClaimField ( data . field ) ;
51+ setGroupField ( data . field ) ;
5252 }
5353 } ,
5454 } ,
5555 {
5656 ...roleIdpSyncSettings ( organizationName ) ,
5757 onSuccess : ( data : RoleSyncSettings ) => {
5858 if ( data ?. field ) {
59- setRoleClaimField ( data . field ) ;
59+ setRoleField ( data . field ) ;
6060 }
6161 } ,
6262 } ,
@@ -65,12 +65,25 @@ export const IdpSyncPage: FC = () => {
6565 ] ,
6666 } ) ;
6767
68+ useEffect ( ( ) => {
69+ if ( ! groupIdpSyncSettingsQuery . data ) {
70+ return ;
71+ }
72+
73+ setGroupField ( groupIdpSyncSettingsQuery . data . field ) ;
74+ } , [ groupIdpSyncSettingsQuery . data ] ) ;
75+
76+ useEffect ( ( ) => {
77+ if ( ! roleIdpSyncSettingsQuery . data ) {
78+ return ;
79+ }
80+
81+ setRoleField ( roleIdpSyncSettingsQuery . data . field ) ;
82+ } , [ roleIdpSyncSettingsQuery . data ] ) ;
83+
6884 const [ searchParams ] = useSearchParams ( ) ;
6985 const tab = searchParams . get ( "tab" ) || "groups" ;
70- const field =
71- tab === "groups"
72- ? groupIdpSyncSettingsQuery . data ?. field
73- : roleIdpSyncSettingsQuery . data ?. field ;
86+ const field = tab === "groups" ? groupField : roleField ;
7487
7588 const fieldValuesQuery = useQuery (
7689 field
@@ -103,14 +116,6 @@ export const IdpSyncPage: FC = () => {
103116 }
104117 }
105118
106- const handleGroupSyncFieldChange = ( value : string ) => {
107- setGroupClaimField ( value ) ;
108- } ;
109-
110- const handleRoleSyncFieldChange = ( value : string ) => {
111- setRoleClaimField ( value ) ;
112- } ;
113-
114119 return (
115120 < >
116121 < Helmet >
@@ -146,8 +151,8 @@ export const IdpSyncPage: FC = () => {
146151 groupsMap = { groupsMap }
147152 roles = { rolesQuery . data }
148153 organization = { organization }
149- onGroupSyncFieldChange = { handleGroupSyncFieldChange }
150- onRoleSyncFieldChange = { handleRoleSyncFieldChange }
154+ onGroupSyncFieldChange = { setGroupField }
155+ onRoleSyncFieldChange = { setRoleField }
151156 error = { error }
152157 onSubmitGroupSyncSettings = { async ( data ) => {
153158 try {
0 commit comments