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 | 10x 10x 10x 10x 10x 10x 10x 10x 7x 10x | /*
* Copyright 2022 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 { Container, Layout, Page } from '@harness/uicore'
import { defaultTo } from 'lodash-es'
import ResourcesCard from '@rbac/components/ResourcesCard/ResourcesCard'
import { useStrings } from 'framework/strings'
import type { ResourceCategory, ResourceType } from '@rbac/interfaces/ResourceType'
export interface ResourcesCardListProps {
selectedResourcesMap: Map<ResourceType, string[] | string>
resourceCategoryMap?: Map<ResourceType | ResourceCategory, ResourceType[] | undefined>
onResourceSelectionChange: (resourceType: ResourceType, isAdd: boolean, identifiers?: string[] | undefined) => void
onResourceCategorySelect: (types: ResourceType[], isAdd: boolean) => void
disableAddingResources?: boolean
disableSelection?: boolean
}
const ResourcesCardList: React.FC<ResourcesCardListProps> = ({
selectedResourcesMap,
resourceCategoryMap,
onResourceSelectionChange,
onResourceCategorySelect,
...props
}) => {
const { getString } = useStrings()
//TODO: Add Cypress tests for Drag and Drop
return (
<Container
padding="xlarge"
height={'100%'}
onDrop={
/* istanbul ignore next */ event => {
const resourceCategory: ResourceType | ResourceCategory = event.dataTransfer.getData('text/plain') as
| ResourceType
| ResourceCategory
const types = resourceCategoryMap?.get(resourceCategory)
if (types) {
onResourceCategorySelect(types, true)
} else {
onResourceSelectionChange(resourceCategory as ResourceType, true)
}
event.preventDefault()
event.stopPropagation()
}
}
onDragOver={
/* istanbul ignore next */ event => {
event.dataTransfer.dropEffect = 'copy'
event.preventDefault()
}
}
>
{Array.from(selectedResourcesMap.keys()).length === 0 && (
<Page.NoDataCard
message={getString('rbac.resourceGroup.dragAndDropData')}
icon="drag-handle-horizontal"
iconSize={100}
/>
)}
<Layout.Vertical spacing="small">
{Array.from(selectedResourcesMap.keys()).map(resourceType => {
return (
<ResourcesCard
key={resourceType}
resourceType={resourceType}
resourceValues={defaultTo(selectedResourcesMap.get(resourceType), [])}
onResourceSelectionChange={onResourceSelectionChange}
{...props}
/>
)
})}
</Layout.Vertical>
</Container>
)
}
export default ResourcesCardList
|