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 | 5x 5x 5x 5x 5x 5x 5x 5x 5x 966x 966x 966x 966x 212x 520x 966x 966x 215x 4x 10x 211x 966x 243x 966x 49x 5x | /*
* 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, useEffect, useMemo } from 'react'
import get from 'lodash/get'
import { FormError, FormInput, SelectOption } from '@harness/uicore'
import { useStrings } from 'framework/strings'
import type { Feature } from 'services/cf'
import { CFVariationColors, PERCENTAGE_ROLLOUT_VALUE } from '@cf/constants'
import type { FlagSettingsVariationCellFields } from '@cf/pages/target-group-detail/TargetGroupDetailPage.types'
import useFormValues from '@cf/hooks/useFormValues'
import PercentageRollout from '@cf/components/PercentageRollout/PercentageRollout'
import css from './VariationsCell.module.scss'
export interface VariationsCellProps {
row: { original: Feature }
value: { disabled?: boolean }
}
const VariationsCell: FC<VariationsCellProps> = ({ row: { original: flag }, value: { disabled = false } }) => {
const { getString } = useStrings()
const { values, setField, errors } = useFormValues<FlagSettingsVariationCellFields>()
const fieldPrefix = `flags.${flag.identifier}`
const flagItems = useMemo<SelectOption[]>(
() => [
...flag.variations.map<SelectOption>(({ identifier, name }, index) => ({
label: name || identifier,
value: identifier,
icon: {
name: 'full-circle',
style: { color: CFVariationColors[index] }
}
})),
{
label: getString('cf.featureFlags.percentageRollout'),
value: PERCENTAGE_ROLLOUT_VALUE,
icon: { name: 'percentage' }
}
],
[flag.variations]
)
const rowValues = useMemo<FlagSettingsVariationCellFields>(() => get(values, fieldPrefix), [values, fieldPrefix])
useEffect(() => {
if (rowValues?.variation === PERCENTAGE_ROLLOUT_VALUE) {
flag.variations.forEach(({ identifier }, index) =>
setField(`${fieldPrefix}.percentageRollout.variations[${index}].variation`, identifier)
)
} else {
setField(`${fieldPrefix}.percentageRollout`, undefined)
}
}, [fieldPrefix, flag.variations, rowValues?.variation, setField])
const percentageRolloutError = useMemo<string>(
() => get(errors, `${fieldPrefix}.percentageRollout.variations`, '') as string,
[errors, fieldPrefix]
)
return (
<div className={css.wrapper}>
<FormInput.Select
placeholder={getString('cf.segmentDetail.selectVariation')}
name={`${fieldPrefix}.variation`}
items={flagItems}
disabled={disabled}
className={css.input}
/>
{rowValues?.variation === PERCENTAGE_ROLLOUT_VALUE && (
<>
<PercentageRollout
variations={flag.variations}
prefix={field => `${fieldPrefix}.percentageRollout.${field}`}
fieldValues={rowValues.percentageRollout}
data-testid="variation-percentage-rollout"
hideOverError
/>
{percentageRolloutError && (
<FormError name={`${fieldPrefix}.percentageRollout`} errorMessage={percentageRolloutError} />
)}
</>
)}
</div>
)
}
export default VariationsCell
|