Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 25x 25x 10x 10x 10x 60x 30x 5x 30x 10x 5x 1x 10x 10x 30x 30x 10x | /*
* Copyright 2021 Harness Inc. All rights reserved.
* Use of this source code is governed by the PolyForm Shield 1.0.0 license
* that can be found in the licenses directory at the root of this repository, also available at
* https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
*/
import React from 'react'
import cx from 'classnames'
import { Card, Icon, Layout, Text, Checkbox } from '@wings-software/uicore'
import { Color } from '@harness/design-system'
import type { Permission } from 'services/rbac'
import RbacFactory from '@rbac/factories/RbacFactory'
import type { ResourceType, ResourceCategory } from '@rbac/interfaces/ResourceType'
import type { PermissionIdentifier } from '@rbac/interfaces/PermissionIdentifier'
import { useStrings } from 'framework/strings'
import css from './PermissionCard.module.scss'
interface PermissionCardProps {
resourceTypes?: ResourceType[]
resourceCategory: ResourceType | ResourceCategory
permissionMap: Map<ResourceType, Permission[]>
selected?: boolean
disableEdit?: boolean
onChangePermission: (permission: string, isAdd: boolean) => void
isPermissionEnabled: (_permission: string) => boolean
}
const PermissionCard: React.FC<PermissionCardProps> = ({
resourceCategory,
resourceTypes,
selected,
disableEdit,
permissionMap,
onChangePermission,
isPermissionEnabled
}) => {
const { getString } = useStrings()
const getPermissionList = (resource: ResourceType): JSX.Element | undefined => {
const handler = RbacFactory.getResourceTypeHandler(resource)
if (handler && handler.permissionLabels) {
const permissions = Object.keys(handler.permissionLabels)
const permissionArray = permissionMap.get(resource)
const sortedList: Permission[] = permissions.reduce((acc: Permission[], value) => {
const item = permissionArray?.find(_permission => _permission['identifier'] === value)
if (item) {
acc.push(item)
}
return acc
}, [])
return (
<div className={css.permissionList}>
{sortedList.map(permission => {
return (
<Checkbox
labelElement={
handler.permissionLabels?.[permission.identifier as PermissionIdentifier] || permission.action
}
data-testid={`checkBox-${resource}-${permission.action}`}
key={permission.name}
disabled={disableEdit}
defaultChecked={isPermissionEnabled(permission.identifier)}
onChange={(event: React.FormEvent<HTMLInputElement>) => {
onChangePermission(permission.identifier, event.currentTarget.checked)
}}
className={css.checkbox}
/>
)
})}
</div>
)
}
}
const resourceHandler =
RbacFactory.getResourceCategoryHandler(resourceCategory as ResourceCategory) ||
RbacFactory.getResourceTypeHandler(resourceCategory as ResourceType)
return resourceHandler ? (
<Card className={cx(css.card, { [css.selectedCard]: selected })}>
<Layout.Vertical padding="small" width="100%">
<Layout.Horizontal width="100%" className={css.permissionRow}>
<Layout.Horizontal spacing="medium" className={css.center}>
<Icon name={resourceHandler.icon} size={30} />
<Text color={Color.BLACK} font={{ weight: 'semi-bold' }}>
{getString(resourceHandler.label)}
</Text>
</Layout.Horizontal>
{resourceTypes && Array.from(resourceTypes).length
? null
: getPermissionList(resourceCategory as ResourceType)}
</Layout.Horizontal>
{resourceTypes && Array.from(resourceTypes).length ? (
<Layout.Vertical padding={{ top: 'large' }}>
{Array.from(resourceTypes).map(resource => {
const handler = RbacFactory.getResourceTypeHandler(resource)
return (
handler && (
<div key={resource} className={cx(css.permissionRow, css.groupRow)}>
<Text color={Color.BLACK} padding={{ left: 'large' }}>
{getString(handler.label)}
</Text>
{getPermissionList(resource)}
</div>
)
)
})}
</Layout.Vertical>
) : null}
</Layout.Vertical>
</Card>
) : null
}
export default PermissionCard
|