@@ -50,48 +50,30 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({ oidcConfig }) => {
5050 updates to these fields in a form */ }
5151< fieldset css = { styles . box } >
5252< legend css = { styles . legend } > Groups</ legend >
53- < Stack direction = { "row" } alignItems = { "center" } spacing = { 3 } >
54- < h4 > Sync Field</ h4 >
55- < p css = { styles . secondary } >
56- { groups_field || (
57- < div
58- css = { {
59- display :"flex" ,
60- alignItems :"center" ,
61- gap :"8px" ,
62- height :0 ,
63- } }
64- >
65- < StatusIndicator color = "error" />
66- < p > disabled</ p >
67- </ div >
68- ) }
69- </ p >
70- < h4 > Regex Filter</ h4 >
71- < p css = { styles . secondary } > { group_regex_filter || "none" } </ p >
72- < h4 > Auto Create</ h4 >
73- < p css = { styles . secondary } > { group_auto_create ?. toString ( ) } </ p >
53+ < Stack direction = { "row" } alignItems = { "center" } spacing = { 8 } >
54+ < IdpField
55+ name = { "Sync Field" }
56+ fieldText = { groups_field }
57+ showStatusIndicator
58+ />
59+ < IdpField
60+ name = { "Regex Filter" }
61+ fieldText = { group_regex_filter }
62+ />
63+ < IdpField
64+ name = { "Auto Create" }
65+ fieldText = { group_auto_create ?. toString ( ) }
66+ />
7467</ Stack >
7568</ fieldset >
7669< fieldset css = { styles . box } >
7770< legend css = { styles . legend } > Roles</ legend >
7871< Stack direction = { "row" } alignItems = { "center" } spacing = { 3 } >
79- < h4 > Sync Field</ h4 >
80- < p css = { styles . secondary } >
81- { user_role_field || (
82- < div
83- css = { {
84- display :"flex" ,
85- alignItems :"center" ,
86- gap :"8px" ,
87- height :0 ,
88- } }
89- >
90- < StatusIndicator color = "error" />
91- < p > disabled</ p >
92- </ div >
93- ) }
94- </ p >
72+ < IdpField
73+ name = { "Sync Field" }
74+ fieldText = { user_role_field }
75+ showStatusIndicator
76+ />
9577</ Stack >
9678</ fieldset >
9779</ Stack >
@@ -143,6 +125,40 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({ oidcConfig }) => {
143125) ;
144126} ;
145127
128+ interface IdpFieldProps {
129+ name :string ;
130+ fieldText :string | undefined ;
131+ showStatusIndicator ?:boolean ;
132+ }
133+
134+ const IdpField :FC < IdpFieldProps > = ( {
135+ name,
136+ fieldText,
137+ showStatusIndicator= false ,
138+ } ) => {
139+ return (
140+ < span css = { { display :"flex" , alignItems :"center" , gap :"16px" } } >
141+ < h4 > { name } </ h4 >
142+ < p css = { styles . secondary } >
143+ { fieldText ||
144+ ( showStatusIndicator && (
145+ < div
146+ css = { {
147+ display :"flex" ,
148+ alignItems :"center" ,
149+ gap :"8px" ,
150+ height :0 ,
151+ } }
152+ >
153+ < StatusIndicator color = "error" />
154+ < p > disabled</ p >
155+ </ div >
156+ ) ) }
157+ </ p >
158+ </ span >
159+ ) ;
160+ } ;
161+
146162interface IdpMappingTableProps {
147163type :"Role" | "Group" ;
148164isEmpty :boolean ;