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 | 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 43x 43x 43x 43x 12x 26x 16x 26x 43x 1x 41x 84x 3x 1x 1x 3x | /*
* 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, { FC, useMemo } from 'react'
import { useParams } from 'react-router-dom'
import { Button, ButtonVariation, Heading, PageError, SelectOption } from '@wings-software/uicore'
import { FieldArray } from 'formik'
import { FontVariation } from '@harness/design-system'
import { useStrings } from 'framework/strings'
import { useGetAllTargetAttributes, Clause, Segment } from 'services/cf'
import { ContainerSpinner } from '@common/components/ContainerSpinner/ContainerSpinner'
import { FeatureFlagBucketBy, getErrorMessage } from '@cf/utils/CFUtils'
import RuleRow from './RuleRow'
import css from './TargetBasedOnConditions.module.scss'
import sectionCss from './Section.module.scss'
export interface TargetBasedOnConditionsProps {
targetGroup: Segment
values: { rules: Clause[] }
}
const TargetBasedOnConditions: FC<TargetBasedOnConditionsProps> = ({ targetGroup, values }) => {
const { getString } = useStrings()
const { accountId: accountIdentifier, orgIdentifier, projectIdentifier } = useParams<Record<string, string>>()
const {
data: targetAttributes,
loading,
error,
refetch: refetchTargetAttributes
} = useGetAllTargetAttributes({
queryParams: {
environmentIdentifier: targetGroup.environment as string,
accountIdentifier,
orgIdentifier,
projectIdentifier
}
})
const targetAttributeItems = useMemo<SelectOption[]>(
() => [
{
label: getString('name'),
value: FeatureFlagBucketBy.NAME
},
{
label: getString('identifier'),
value: FeatureFlagBucketBy.IDENTIFIER
},
...(targetAttributes || [])
.filter(attribute => attribute !== FeatureFlagBucketBy.NAME && attribute !== FeatureFlagBucketBy.IDENTIFIER)
.sort((a, b) => a.localeCompare(b))
.map(attribute => ({ label: attribute, value: attribute }))
],
[targetAttributes]
)
return (
<section className={sectionCss.section}>
{loading && <ContainerSpinner />}
{error && <PageError message={getErrorMessage(error)} onClick={async () => await refetchTargetAttributes()} />}
{targetAttributes && (
<>
<Heading level={3} font={{ variation: FontVariation.FORM_SUB_SECTION }}>
{getString('cf.segmentDetail.targetBasedOnCondition')}
</Heading>
<FieldArray
name="rules"
render={arrayHelpers => (
<>
{values.rules.length > 0 && (
<div className={css.rows} data-testid="rule-rows">
{values.rules.map((_, index) => (
<RuleRow
key={index}
namePrefix={`${arrayHelpers.name}[${index}]`}
targetAttributeItems={targetAttributeItems}
onDelete={() => arrayHelpers.remove(index)}
/>
))}
</div>
)}
<Button
text={getString('cf.segmentDetail.addRule')}
variation={ButtonVariation.LINK}
icon="plus"
onClick={e => {
e.preventDefault()
arrayHelpers.push({
id: '',
attribute: '',
op: '',
values: [],
negate: false
})
}}
/>
</>
)}
/>
</>
)}
</section>
)
}
export default TargetBasedOnConditions
|