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 117 118 119 120 121 122 123 | 10x 10x 10x 10x 10x 10x 11x 11x 11x 11x 11x 11x 11x 20x 10x 9x 9x 9x 9x 10x 10x 10x 11x 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 { Collapse } from '@blueprintjs/core'
import { Color, Container, FontVariation, Layout, Text } from '@harness/uicore'
import type { SharedCost, CostTarget, ViewIdCondition } from 'services/ce'
import { useStrings } from 'framework/strings'
import css from './RuleViewer.module.scss'
interface RuleViewProps {
condition: ViewIdCondition
showAndOperatior: boolean
}
const RuleView: (props: RuleViewProps) => React.ReactElement | null = ({ condition, showAndOperatior }) => {
const { getString } = useStrings()
const pillProps = {
border: { radius: 10 },
background: Color.GREY_200,
className: css.pillRadius,
padding: {
left: 'small',
right: 'small',
top: 'xsmall',
bottom: 'xsmall'
},
font: { variation: FontVariation.TINY }
}
const values = condition.values || []
const valuesToDisplay = values.slice(0, 2)
const identifierName = condition.viewField?.identifierName
const fieldName = condition.viewField?.fieldName
return fieldName && identifierName ? (
<Layout.Horizontal
spacing="small"
className={css.ruleViewContainer}
padding={{
top: 'small',
bottom: 'small'
}}
>
<Text font={{ variation: FontVariation.SMALL_SEMI }}>{`${identifierName} > ${fieldName}`}</Text>
<Text font={{ variation: FontVariation.SMALL_SEMI }}>{`${condition.viewOperator}`}</Text>
{valuesToDisplay.map(val => (
<Text {...pillProps} key={val}>
{val}
</Text>
))}
{values.length > 2 ? <Text {...pillProps}>{`+${values.length - 2}`}</Text> : null}
{showAndOperatior ? (
<Text font={{ variation: FontVariation.SMALL_SEMI }}>{getString('ce.common.and')}</Text>
) : null}
</Layout.Horizontal>
) : null
}
interface RuleViewerProps {
isOpen: boolean
value: SharedCost | CostTarget
}
const RuleViewer: (props: RuleViewerProps) => React.ReactElement | null = ({ isOpen, value }) => {
const { getString } = useStrings()
Iif (!value.rules?.length) {
return null
}
const rulesLength = value.rules.length
return (
<Collapse keepChildrenMounted isOpen={isOpen}>
<Container background={Color.GREY_100}>
{value.rules.map((rule, index) => {
const showOrOperator = index < rulesLength - 1
const viewConditions = rule.viewConditions as ViewIdCondition[]
return (
<Container
className={css.ruleViewerContainer}
key={`viewRule-${index}`}
border={{
top: true
}}
padding={{ top: 'small', bottom: 'small' }}
margin={{
left: 'large',
right: 'large'
}}
>
{(viewConditions as ViewIdCondition[]).map((condition, index1) => {
return (
<RuleView
key={`viewRule-${index}-${index1}`}
condition={condition}
showAndOperatior={index1 < viewConditions?.length - 1}
/>
)
})}
{showOrOperator ? (
<Text
background={Color.GREY_100}
font={{ variation: FontVariation.SMALL_SEMI }}
padding="small"
className={css.orOperator}
>
{getString('ce.common.or')}
</Text>
) : null}
</Container>
)
})}
</Container>
</Collapse>
)
}
export default RuleViewer
|