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 | 83x 83x 83x 83x 83x 83x 83x 83x 83x 83x 83x 83x 33x 33x 33x 33x 33x 33x 1x 33x 33x 33x 83x | /*
* 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 { connect, FormikContext } from 'formik'
import {
FormikTooltipContext,
DataTooltipInterface,
MultiTypeInputType,
HarnessDocTooltip,
Container
} from '@wings-software/uicore'
import { get, compact } from 'lodash-es'
import { FormGroup, IFormGroupProps, Intent } from '@blueprintjs/core'
import { useStrings } from 'framework/strings'
import { errorCheck } from '@common/utils/formikHelpers'
import MultiTypeFieldSelector from '@common/components/MultiTypeFieldSelector/MultiTypeFieldSelector'
import { ExpressionsListInput } from '@common/components/ExpressionsListInput/ExpressionsListInput'
import { DelegateSelectors, DelegateSelectorsProps } from '@common/components/DelegateSelectors/DelegateSelectors'
import css from './MultiTypeDelegateSelector.module.scss'
export interface MultiTypeDelegateSelectorProps extends IFormGroupProps {
name: string
label?: string
expressions?: string[]
allowableTypes?: MultiTypeInputType[]
tooltipProps?: DataTooltipInterface
inputProps: Omit<DelegateSelectorsProps, 'onChange'>
}
export interface ConnectedMultiTypeDelegateSelectorProps extends MultiTypeDelegateSelectorProps {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
formik: FormikContext<any>
}
export function MultiTypeDelegateSelector(props: ConnectedMultiTypeDelegateSelectorProps): React.ReactElement {
const {
formik,
allowableTypes = [MultiTypeInputType.FIXED, MultiTypeInputType.RUNTIME, MultiTypeInputType.EXPRESSION],
label,
name,
expressions = [],
inputProps,
...restProps
} = props
const value = get(formik.values, name)
const hasError = errorCheck(name, formik)
const { getString } = useStrings()
const {
intent = hasError ? Intent.DANGER : Intent.NONE,
helperText = hasError ? get(formik.errors, name) : null,
disabled,
...rest
} = restProps
const handleDelegateSelectorFixedValueChange = React.useCallback((tags: string[]) => {
formik.setFieldValue(name, compact(tags))
}, [])
const tooltipContext = React.useContext(FormikTooltipContext)
const dataTooltipId =
props.tooltipProps?.dataTooltipId || (tooltipContext?.formName ? `${tooltipContext?.formName}_${name}` : '')
return (
<FormGroup
{...rest}
labelFor={name}
label={label ? <HarnessDocTooltip tooltipId={dataTooltipId} labelText={label} /> : label}
intent={intent}
helperText={helperText}
>
<Container className={css.fieldSelectorContainer}>
<MultiTypeFieldSelector
name={name}
label={getString('common.defineDelegateSelector')}
defaultValueToReset={['']}
skipRenderValueInExpressionLabel
allowedTypes={allowableTypes}
supportListOfExpressions={true}
disableMultiSelectBtn={disabled}
expressionRender={() => (
<ExpressionsListInput name={name} value={value} readOnly={disabled} expressions={expressions} />
)}
style={{ flexGrow: 1, marginBottom: 0 }}
>
<DelegateSelectors
{...inputProps}
wrapperClassName={css.wrapper}
selectedItems={value}
readonly={disabled}
onTagInputChange={handleDelegateSelectorFixedValueChange}
/>
</MultiTypeFieldSelector>
</Container>
</FormGroup>
)
}
export default connect<MultiTypeDelegateSelectorProps>(MultiTypeDelegateSelector)
|