Skip to content

Commit 4712ef4

Browse files
authored
fix: hide-roles-tab-only-for-non-org-admin-in-env-project-settings (#6786)
1 parent f83802d commit 4712ef4

4 files changed

Lines changed: 105 additions & 112 deletions

File tree

frontend/web/components/EditPermissions.tsx

Lines changed: 88 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ type EditPermissionModalType = {
8989
permissionChanged?: () => void
9090
isEditUserPermission?: boolean
9191
isEditGroupPermission?: boolean
92+
isEditRolePermission?: boolean
9293
}
9394

9495
type EditPermissionsType = Omit<EditPermissionModalType, 'onSave'> & {
@@ -175,12 +176,12 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = withAdminPermissions(
175176

176177
const levelUpperCase = level.toUpperCase()
177178
const viewPermission = `VIEW_${levelUpperCase}`
178-
const projectId =
179-
props.level === 'project'
180-
? props.id
181-
: props.level === 'environment'
182-
? props.parentId
183-
: undefined
179+
let projectId: number | string | undefined
180+
if (props.level === 'project') {
181+
projectId = props.id
182+
} else if (props.level === 'environment') {
183+
projectId = props.parentId
184+
}
184185

185186
const [permissionWasCreated, setPermissionWasCreated] =
186187
useState<boolean>(false)
@@ -259,11 +260,14 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = withAdminPermissions(
259260
)
260261
}
261262

262-
const foundPermission = isGroup
263-
? findPermissionByGroup()
264-
: role
265-
? findPermissionByRole()
266-
: findPermissionByUser()
263+
let foundPermission
264+
if (isGroup) {
265+
foundPermission = findPermissionByGroup()
266+
} else if (role) {
267+
foundPermission = findPermissionByRole()
268+
} else {
269+
foundPermission = findPermissionByUser()
270+
}
267271

268272
const isProjectOrEnvironmentRole =
269273
role && (level === 'project' || level === 'environment')
@@ -708,7 +712,7 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = withAdminPermissions(
708712
deleteRolePermissionUser({
709713
organisation_id: id,
710714
role_id: roleId,
711-
user_id: roleSelected?.user_role_id!,
715+
user_id: roleSelected?.user_role_id ?? 0,
712716
}).then(onRoleRemoved as any)
713717
}
714718
}
@@ -721,7 +725,7 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = withAdminPermissions(
721725
}).then(onRoleRemoved as any)
722726
} else if (roleSelected) {
723727
deleteRolePermissionGroup({
724-
group_id: roleSelected.group_role_id!,
728+
group_id: roleSelected.group_role_id ?? 0,
725729
organisation_id: id,
726730
role_id: roleId,
727731
}).then(onRoleRemoved as any)
@@ -737,7 +741,7 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = withAdminPermissions(
737741
setRolesSelected(
738742
(rolesSelected || []).concat({
739743
group_role_id: undefined,
740-
role: usersData?.role!,
744+
role: usersData?.role ?? 0,
741745
user_role_id: usersData?.id,
742746
}),
743747
)
@@ -746,7 +750,7 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = withAdminPermissions(
746750
setRolesSelected(
747751
(rolesSelected || []).concat({
748752
group_role_id: groupsData?.id,
749-
role: groupsData?.role!,
753+
role: groupsData?.role ?? 0,
750754
user_role_id: undefined,
751755
}),
752756
)
@@ -995,6 +999,7 @@ const EditPermissions: FC<EditPermissionsType> = (props) => {
995999
const {
9961000
envId,
9971001
id,
1002+
isEditRolePermission,
9981003
level,
9991004
onSaveGroup,
10001005
onSaveUser,
@@ -1134,7 +1139,9 @@ const EditPermissions: FC<EditPermissionsType> = (props) => {
11341139
<Flex className='table-column px-3'>
11351140
<div className='mb-1 font-weight-medium'>
11361141
{`${first_name} ${last_name}`}{' '}
1137-
{id == AccountStore.getUserId() && '(You)'}
1142+
{String(id) ===
1143+
String(AccountStore.getUserId()) &&
1144+
'(You)'}
11381145
</div>
11391146
<div className='list-item-subtitle'>
11401147
{email}
@@ -1212,73 +1219,75 @@ const EditPermissions: FC<EditPermissionsType> = (props) => {
12121219
</div>
12131220
</FormGroup>
12141221
</TabItem>
1215-
<TabItem tabLabel='Roles'>
1216-
<PlanBasedAccess className='mt-4' feature={'RBAC'} theme='page'>
1217-
<Row space className='mt-4'>
1218-
<h5 className='m-b-0'>{roleTabTitle}</h5>
1219-
</Row>
1220-
<PanelSearch
1221-
id='org-members-list'
1222-
title={'Roles'}
1223-
className='no-pad'
1224-
items={roles}
1225-
itemHeight={65}
1226-
header={
1227-
<Row className='table-header px-3'>
1228-
<div
1229-
style={{
1230-
width: rolesWidths[0],
1231-
}}
1232-
>
1233-
Roles
1234-
</div>
1235-
<div
1236-
style={{
1237-
width: rolesWidths[1],
1238-
}}
1239-
>
1240-
Description
1241-
</div>
1242-
</Row>
1243-
}
1244-
renderRow={(role) => (
1245-
<Row
1246-
className='list-item clickable cursor-pointer'
1247-
key={role.id}
1248-
>
1249-
<Row
1250-
onClick={() => editRolePermissions(role)}
1251-
className='table-column px-3'
1252-
style={{
1253-
width: rolesWidths[0],
1254-
}}
1255-
>
1256-
{role.name}
1222+
{isEditRolePermission && (
1223+
<TabItem tabLabel='Roles'>
1224+
<PlanBasedAccess className='mt-4' feature={'RBAC'} theme='page'>
1225+
<Row space className='mt-4'>
1226+
<h5 className='m-b-0'>{roleTabTitle}</h5>
1227+
</Row>
1228+
<PanelSearch
1229+
id='org-members-list'
1230+
title={'Roles'}
1231+
className='no-pad'
1232+
items={roles}
1233+
itemHeight={65}
1234+
header={
1235+
<Row className='table-header px-3'>
1236+
<div
1237+
style={{
1238+
width: rolesWidths[0],
1239+
}}
1240+
>
1241+
Roles
1242+
</div>
1243+
<div
1244+
style={{
1245+
width: rolesWidths[1],
1246+
}}
1247+
>
1248+
Description
1249+
</div>
12571250
</Row>
1251+
}
1252+
renderRow={(role) => (
12581253
<Row
1259-
className='table-column px-3'
1260-
onClick={() => editRolePermissions(role)}
1261-
style={{
1262-
width: rolesWidths[1],
1263-
}}
1254+
className='list-item clickable cursor-pointer'
1255+
key={role.id}
12641256
>
1265-
{role.description}
1266-
</Row>
1267-
</Row>
1268-
)}
1269-
renderNoResults={
1270-
<Panel title={'Roles'} className='no-pad'>
1271-
<div className='search-list'>
1272-
<Row className='list-item p-3 text-muted'>
1273-
{`You currently have no roles.`}
1257+
<Row
1258+
onClick={() => editRolePermissions(role)}
1259+
className='table-column px-3'
1260+
style={{
1261+
width: rolesWidths[0],
1262+
}}
1263+
>
1264+
{role.name}
12741265
</Row>
1275-
</div>
1276-
</Panel>
1277-
}
1278-
isLoading={false}
1279-
/>
1280-
</PlanBasedAccess>
1281-
</TabItem>
1266+
<Row
1267+
className='table-column px-3'
1268+
onClick={() => editRolePermissions(role)}
1269+
style={{
1270+
width: rolesWidths[1],
1271+
}}
1272+
>
1273+
{role.description}
1274+
</Row>
1275+
</Row>
1276+
)}
1277+
renderNoResults={
1278+
<Panel title={'Roles'} className='no-pad'>
1279+
<div className='search-list'>
1280+
<Row className='list-item p-3 text-muted'>
1281+
{`You currently have no roles.`}
1282+
</Row>
1283+
</div>
1284+
</Panel>
1285+
}
1286+
isLoading={false}
1287+
/>
1288+
</PlanBasedAccess>
1289+
</TabItem>
1290+
)}
12821291
</Tabs>
12831292
</div>
12841293
)

frontend/web/components/pages/EnvironmentSettingsPage.tsx

Lines changed: 7 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import _ from 'lodash'
1717
import PageTitle from 'components/PageTitle'
1818
import { getStore } from 'common/store'
1919
import { getRoles } from 'common/services/useRole'
20-
import { getRoleEnvironmentPermissions } from 'common/services/useRolePermission'
2120
import AccountStore from 'common/stores/account-store'
2221
import { Link, useHistory, useRouteMatch } from 'react-router-dom'
2322
import { enableFeatureVersioning } from 'common/services/useEnableFeatureVersioning'
@@ -27,12 +26,7 @@ import Format from 'common/utils/format'
2726
import Setting from 'components/Setting'
2827
import API from 'project/api'
2928
import AppActions from 'common/dispatcher/app-actions'
30-
import {
31-
Environment,
32-
Webhook,
33-
Role,
34-
RolePermission,
35-
} from 'common/types/responses'
29+
import { Environment, Webhook, Role } from 'common/types/responses'
3630
import PanelSearch from 'components/PanelSearch'
3731
import moment from 'moment'
3832
import Panel from 'components/base/grid/Panel'
@@ -73,6 +67,7 @@ const EnvironmentSettingsPage: React.FC = () => {
7367
const { projectId } = useRouteContext()
7468
const [currentEnv, setCurrentEnv] = useState<Environment | null>(null)
7569
const [roles, setRoles] = useState<Role[]>([])
70+
const [rolesLoaded, setRolesLoaded] = useState(false)
7671
const [environmentContentType, setEnvironmentContentType] =
7772
useState<any>(null)
7873

@@ -130,24 +125,10 @@ const EnvironmentSettingsPage: React.FC = () => {
130125
{ organisation_id: AccountStore.getOrganisation().id },
131126
{ forceRefetch: true },
132127
)
133-
if (!roles?.data?.results?.length) return
134-
135-
const roleEnvironmentPermissions = await getRoleEnvironmentPermissions(
136-
store,
137-
{
138-
env_id: env.id,
139-
organisation_id: AccountStore.getOrganisation().id,
140-
role_id: roles.data.results[0].id,
141-
},
142-
{ forceRefetch: true },
143-
)
144-
145-
const matchingItems: Role[] = roles.data.results.filter((item1: Role) =>
146-
roleEnvironmentPermissions.data.results.some(
147-
(item2: RolePermission) => item2.role === item1.id,
148-
),
149-
)
150-
setRoles(matchingItems)
128+
if (roles?.data?.results) {
129+
setRoles(roles.data.results)
130+
setRolesLoaded(true)
131+
}
151132

152133
if (Utils.getPlansPermission('METADATA')) {
153134
const supportedContentType = await getSupportedContentType(getStore(), {
@@ -804,6 +785,7 @@ const EnvironmentSettingsPage: React.FC = () => {
804785
level='environment'
805786
roleTabTitle='Environment Permissions'
806787
roles={roles}
788+
isEditRolePermission={rolesLoaded}
807789
/>
808790
</FormGroup>
809791
</TabItem>

frontend/web/components/pages/project-settings/ProjectSettingsPage.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import EditHealthProvider from './tabs/EditHealthProvider'
1212
import FeatureExport from 'components/import-export/FeatureExport'
1313
import { GeneralTab } from './tabs/general-tab'
1414
import { SDKSettingsTab } from './tabs/SDKSettingsTab'
15-
import { PermissionsTab } from './tabs/PermissionsTab'
15+
import { ProjectPermissionsTab } from './tabs/ProjectPermissionsTab'
1616
import { CustomFieldsTab } from './tabs/CustomFieldsTab'
1717
import { ImportTab } from './tabs/ImportTab'
1818
import { useGetEnvironmentsQuery } from 'common/services/useEnvironment'
@@ -32,9 +32,9 @@ const ProjectSettingsPage = () => {
3232
error,
3333
isLoading,
3434
isUninitialized,
35-
} = useGetProjectQuery({ id: projectId! }, { skip: !projectId })
35+
} = useGetProjectQuery({ id: projectId ?? '' }, { skip: !projectId })
3636
const { data: environments } = useGetEnvironmentsQuery(
37-
{ projectId: projectId! },
37+
{ projectId: projectId ?? '' },
3838
{ skip: !projectId },
3939
)
4040

@@ -101,7 +101,7 @@ const ProjectSettingsPage = () => {
101101
},
102102
{
103103
component: (
104-
<PermissionsTab
104+
<ProjectPermissionsTab
105105
projectId={project.id}
106106
organisationId={organisationId}
107107
/>

frontend/web/components/pages/project-settings/tabs/PermissionsTab.tsx renamed to frontend/web/components/pages/project-settings/tabs/ProjectPermissionsTab.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,20 @@ import React from 'react'
44
import { useGetRolesQuery } from 'common/services/useRole'
55
import { useGetProjectPermissionsQuery } from 'common/services/useProject'
66

7-
type PermissionsTabProps = {
7+
type ProjectPermissionsTabProps = {
88
projectId: number
99
organisationId: number
1010
}
1111

12-
export const PermissionsTab = ({
12+
export const ProjectPermissionsTab = ({
1313
organisationId,
1414
projectId,
15-
}: PermissionsTabProps) => {
15+
}: ProjectPermissionsTabProps) => {
1616
const {
1717
data: rolesData,
1818
error: rolesError,
1919
isLoading: rolesLoading,
20+
isSuccess: rolesSuccess,
2021
} = useGetRolesQuery({ organisation_id: organisationId })
2122

2223
const {
@@ -38,7 +39,7 @@ export const PermissionsTab = ({
3839
)
3940
}
4041

41-
if (rolesError || permissionsError) {
42+
if (permissionsError) {
4243
return (
4344
<div className='mt-4'>
4445
<InfoMessage>Error loading permissions data</InfoMessage>
@@ -55,6 +56,7 @@ export const PermissionsTab = ({
5556
roles={rolesData?.results || []}
5657
permissions={permissionsData || []}
5758
onSaveUser={handleSaveUser}
59+
isEditRolePermission={rolesSuccess && !rolesError && !rolesLoading}
5860
/>
5961
)
6062
}

0 commit comments

Comments
 (0)