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 | 36x 36x 36x 36x 36x 36x 36x 36x 36x 36x 47x 46x 46x 2x 1x 1x 46x 1x 46x 1x 46x 49x | /*
* 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, Formik, FormikForm, FormInput, Layout, Text, Button } from '@wings-software/uicore'
import { useModalHook } from '@harness/use-modal'
import { Dialog } from '@blueprintjs/core'
import { useStrings } from 'framework/strings'
import JsonSelector from '@cv/components/JsonSelector/JsonSelector'
import { NoRecordForm, InputWithDynamicModalForJsonProps, DialogProps } from './InputWithDynamicModalForJson.types'
import { formatJSONPath, validate } from './InputWithDynamicModalForJson.utils'
import css from './InputWithDynamicModalForJson.module.scss'
export function InputWithDynamicModalForJson(props: InputWithDynamicModalForJsonProps): JSX.Element {
const {
onChange,
isQueryExecuted,
isDisabled,
sampleRecord,
inputLabel,
inputName,
noRecordModalHeader,
noRecordInputLabel,
recordsModalHeader,
showExactJsonPath,
fieldValue,
dataTooltipId
} = props
const { getString } = useStrings()
const handleOnClickAddField = (): void => {
if (sampleRecord && isQueryExecuted) {
openModalForSelectingField()
} else {
openModalforEnteringField()
}
}
const [openModalforEnteringField, hideModalForEnteringField] = useModalHook(
() => (
<Dialog {...DialogProps} onClose={hideModalForEnteringField}>
<Formik<NoRecordForm>
initialValues={{ name: '' }}
validate={value => validate(value, getString)}
formName="noRecordForm"
onSubmit={value => {
hideModalForEnteringField()
onChange(inputName, value.name)
}}
>
<FormikForm>
<Container margin="medium">
<Text font={{ size: 'medium', weight: 'bold' }} margin={{ bottom: 'large' }}>
{noRecordModalHeader}
</Text>
<FormInput.Text name="name" label={noRecordInputLabel} />
<Layout.Horizontal spacing="medium" margin={{ top: 'large', bottom: 'large' }}>
<Button text={getString('submit')} type="submit" intent="primary" />
<Button text={getString('cancel')} onClick={hideModalForEnteringField} />
</Layout.Horizontal>
</Container>
</FormikForm>
</Formik>
</Dialog>
),
[]
)
const [openModalForSelectingField, hideModalForSelectingField] = useModalHook(
() => (
<Dialog {...DialogProps} onClose={hideModalForSelectingField}>
<Container margin="medium">
<Text font={{ size: 'medium', weight: 'bold' }} margin={{ bottom: 'large' }}>
{recordsModalHeader}
</Text>
<JsonSelector
json={sampleRecord as Record<string, any>}
onPathSelect={(pathSelected: string) => {
hideModalForSelectingField()
const selectedValue = showExactJsonPath ? formatJSONPath(pathSelected) : pathSelected
onChange(inputName, selectedValue)
}}
/>
</Container>
</Dialog>
),
[sampleRecord]
)
return (
<FormInput.CustomRender
name={inputName}
render={() => {
return (
<Layout.Vertical spacing={'small'} style={{ marginBottom: 'var(--spacing-medium)' }}>
<Text style={{ fontSize: 13, fontWeight: 'normal' }} tooltipProps={{ dataTooltipId }}>
{inputLabel}
</Text>
<Button
minimal
className={css.container}
withoutCurrentColor={true}
rightIcon="plus"
iconProps={{ size: 14 }}
disabled={isDisabled}
onClick={handleOnClickAddField}
>
{fieldValue ? fieldValue : recordsModalHeader}
</Button>
</Layout.Vertical>
)
}}
/>
)
}
|