@@ -6,6 +6,7 @@ import { Environment } from '../types/environment.types';
66import { UserGroup , UserGroupsTabStats } from '../types/userGroup.types' ;
77import { getEnvironmentUserGroups } from '../services/environments.service' ;
88import { Spin , Empty } from 'antd' ;
9+ import { trans } from 'i18n' ;
910
1011const { Search} = Input ;
1112
@@ -36,7 +37,7 @@ const UserGroupsTab: React.FC<UserGroupsTabProps> = ({ environment }) => {
3637try {
3738// Check for required environment properties
3839if ( ! environment . environmentApikey || ! environment . environmentApiServiceUrl ) {
39- setError ( 'Missing required configuration: API key or API service URL' ) ;
40+ setError ( trans ( "enterprise.environments.userGroups.missingConfiguration" ) ) ;
4041setLoading ( false ) ;
4142return ;
4243}
@@ -65,7 +66,7 @@ const UserGroupsTab: React.FC<UserGroupsTabProps> = ({ environment }) => {
6566 custom
6667} ) ;
6768} catch ( err ) {
68- setError ( err instanceof Error ?err . message :"Failed to fetch user groups" ) ;
69+ setError ( err instanceof Error ?err . message :trans ( "enterprise.environments.userGroups.errorLoadingUserGroups" ) ) ;
6970} finally {
7071setLoading ( false ) ;
7172setRefreshing ( false ) ;
@@ -134,7 +135,7 @@ const UserGroupsTab: React.FC<UserGroupsTabProps> = ({ environment }) => {
134135// Table columns
135136const columns = [
136137{
137- title :'User Group' ,
138+ title :trans ( "enterprise.environments.userGroups.userGroup" ) ,
138139key :'group' ,
139140render :( group :UserGroup ) => (
140141< div style = { { display :'flex' , alignItems :'center' } } >
@@ -158,50 +159,50 @@ const UserGroupsTab: React.FC<UserGroupsTabProps> = ({ environment }) => {
158159) ,
159160} ,
160161{
161- title :'Type' ,
162+ title :trans ( "enterprise.environments.userGroups.type" ) ,
162163key :'type' ,
163164render :( _ :any , group :UserGroup ) => {
164165if ( group . allUsersGroup ) return (
165166< Tag color = "blue" style = { { borderRadius :'4px' } } >
166- < UserOutlined style = { { marginRight :4 } } /> All Users
167+ < UserOutlined style = { { marginRight :4 } } /> { trans ( "enterprise.environments.userGroups.allUsers" ) }
167168</ Tag >
168169) ;
169170if ( group . devGroup ) return (
170171< Tag color = "purple" style = { { borderRadius :'4px' } } >
171- < CodeOutlined style = { { marginRight :4 } } /> Developers
172+ < CodeOutlined style = { { marginRight :4 } } /> { trans ( "enterprise.environments.userGroups.developers" ) }
172173</ Tag >
173174) ;
174175return (
175176< Tag color = "default" style = { { borderRadius :'4px' } } >
176- < SettingOutlined style = { { marginRight :4 } } /> Custom
177+ < SettingOutlined style = { { marginRight :4 } } /> { trans ( "enterprise.environments.userGroups.custom" ) }
177178</ Tag >
178179) ;
179180} ,
180181} ,
181182{
182- title :'Members' ,
183+ title :trans ( "enterprise.environments.userGroups.members" ) ,
183184key :'members' ,
184185render :( _ :any , group :UserGroup ) => (
185- < Tooltip title = "Total number of members in this group" >
186+ < Tooltip title = { trans ( "enterprise.environments.userGroups.totalMembersTooltip" ) } >
186187< Tag style = { { borderRadius :'4px' , backgroundColor :'#f6f6f6' , color :'#333' } } >
187188< UserOutlined style = { { marginRight :4 } } /> { group . stats ?. userCount || 0 }
188189</ Tag >
189190</ Tooltip >
190191) ,
191192} ,
192193{
193- title :'Admin Members' ,
194+ title :trans ( "enterprise.environments.userGroups.adminMembers" ) ,
194195key :'adminMembers' ,
195196render :( _ :any , group :UserGroup ) => (
196- < Tooltip title = "Number of admin users in this group" >
197+ < Tooltip title = { trans ( "enterprise.environments.userGroups.adminMembersTooltip" ) } >
197198< Tag style = { { borderRadius :'4px' , backgroundColor :'#fff1f0' , color :'#cf1322' } } >
198199< UserOutlined style = { { marginRight :4 } } /> { group . stats ?. adminUserCount || 0 }
199200</ Tag >
200201</ Tooltip >
201202) ,
202203} ,
203204{
204- title :'Created' ,
205+ title :trans ( "enterprise.environments.userGroups.created" ) ,
205206dataIndex :'createTime' ,
206207key :'createTime' ,
207208render :( createTime :number ) => (
@@ -223,25 +224,25 @@ const UserGroupsTab: React.FC<UserGroupsTabProps> = ({ environment }) => {
223224} } >
224225< div >
225226< Title level = { 4 } style = { { margin :0 , marginBottom :'4px' } } >
226- < UsergroupAddOutlined style = { { marginRight :8 } } /> User Groups
227+ < UsergroupAddOutlined style = { { marginRight :8 } } /> { trans ( "enterprise.environments.userGroups.title" ) }
227228</ Title >
228229< p style = { { marginBottom :0 , color :'#8c8c8c' , fontSize :'14px' } } >
229- Manage user groups in this environment
230+ { trans ( "enterprise.environments.userGroups.subtitle" ) }
230231</ p >
231232</ div >
232233< Button
233234icon = { < SyncOutlined spin = { refreshing } /> }
234235onClick = { handleRefresh }
235236loading = { loading }
236237>
237- Refresh
238+ { trans ( "enterprise.environments.userGroups.refresh" ) }
238239</ Button >
239240</ div >
240241
241242{ /* Error display */ }
242243{ error && (
243244< Alert
244- message = "Error loading user groups"
245+ message = { trans ( "enterprise.environments.userGroups.errorLoadingUserGroups" ) }
245246description = { error }
246247type = "error"
247248showIcon
@@ -252,8 +253,8 @@ const UserGroupsTab: React.FC<UserGroupsTabProps> = ({ environment }) => {
252253{ /* Configuration warnings */ }
253254{ ( ! environment . environmentApikey || ! environment . environmentApiServiceUrl ) && ! error && (
254255< Alert
255- message = "Configuration Issue"
256- description = "Missing required configuration: API key or API service URL"
256+ message = { trans ( "enterprise.environments.userGroups.configurationIssue" ) }
257+ description = { trans ( "enterprise.environments.userGroups.missingConfiguration" ) }
257258type = "warning"
258259showIcon
259260style = { { marginBottom :"16px" } }
@@ -264,28 +265,28 @@ const UserGroupsTab: React.FC<UserGroupsTabProps> = ({ environment }) => {
264265< Row gutter = { [ 16 , 16 ] } style = { { marginBottom :'20px' } } >
265266< Col xs = { 24 } sm = { 12 } md = { 6 } >
266267< StatCard
267- title = "Total Groups"
268+ title = { trans ( "enterprise.environments.userGroups.totalGroups" ) }
268269value = { stats . total }
269270icon = { < TeamOutlined /> }
270271/>
271272</ Col >
272273< Col xs = { 24 } sm = { 12 } md = { 6 } >
273274< StatCard
274- title = "All Users Groups"
275+ title = { trans ( "enterprise.environments.userGroups.allUsersGroups" ) }
275276value = { stats . allUsers }
276277icon = { < UserOutlined /> }
277278/>
278279</ Col >
279280< Col xs = { 24 } sm = { 12 } md = { 6 } >
280281< StatCard
281- title = "Developer Groups"
282+ title = { trans ( "enterprise.environments.userGroups.developerGroups" ) }
282283value = { stats . developers }
283284icon = { < CodeOutlined /> }
284285/>
285286</ Col >
286287< Col xs = { 24 } sm = { 12 } md = { 6 } >
287288< StatCard
288- title = "Custom Groups"
289+ title = { trans ( "enterprise.environments.userGroups.customGroups" ) }
289290value = { stats . custom }
290291icon = { < SettingOutlined /> }
291292/>
@@ -305,23 +306,23 @@ const UserGroupsTab: React.FC<UserGroupsTabProps> = ({ environment }) => {
305306</ div >
306307) :userGroups . length === 0 ?(
307308< Empty
308- description = { error || "No user groups found in this environment" }
309+ description = { error || trans ( "enterprise.environments.userGroups.noUserGroupsFound" ) }
309310image = { Empty . PRESENTED_IMAGE_SIMPLE }
310311/>
311312) :(
312313< >
313314{ /* Search Bar */ }
314315< div style = { { marginBottom :16 } } >
315316< Search
316- placeholder = "Search user groups by name or ID"
317+ placeholder = { trans ( "enterprise.environments.userGroups.searchUserGroups" ) }
317318allowClear
318319onSearch = { value => setSearchText ( value ) }
319320onChange = { e => setSearchText ( e . target . value ) }
320321style = { { width :300 } }
321322/>
322323{ searchText && filteredUserGroups . length !== userGroups . length && (
323324< div style = { { marginTop :8 , color :'#8c8c8c' , fontSize :'13px' } } >
324- Showing { filteredUserGroups . length } of { userGroups . length } user groups
325+ { trans ( "enterprise.environments.userGroups.showingResults" , { count : filteredUserGroups . length , total : userGroups . length } ) }
325326</ div >
326327) }
327328</ div >
@@ -332,7 +333,7 @@ const UserGroupsTab: React.FC<UserGroupsTabProps> = ({ environment }) => {
332333rowKey = "groupId"
333334pagination = { {
334335pageSize :10 ,
335- showTotal :( total , range ) => ` ${ range [ 0 ] } - ${ range [ 1 ] } of ${ total } user groups` ,
336+ showTotal :( total , range ) => trans ( "enterprise.environments.userGroups.paginationTotal" , { start : range [ 0 ] , end : range [ 1 ] , total} ) ,
336337size :'small'
337338} }
338339size = "middle"