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 124 | 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 25x 25x 25x 25x 25x 6x 6x 25x 4x 28x 28x 28x 28x 4x 2x 2x | /*
* 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 { FormInput, SelectOption, Layout, Radio, Container, HarnessDocTooltip } from '@wings-software/uicore'
import { noop } from 'lodash-es'
import { Color } from '@harness/design-system'
import { Formik, FormikProps } from 'formik'
import * as Yup from 'yup'
import isEmpty from 'lodash/isEmpty'
import { useStrings } from 'framework/strings'
import { StageErrorContext } from '@pipeline/context/StageErrorContext'
import { DeployTabs } from '@cd/components/PipelineStudio/DeployStageSetupShell/DeployStageSetupShellUtils'
import css from './PropagateWidget.module.scss'
export const setupMode = {
PROPAGATE: 'PROPAGATE',
DIFFERENT: 'DIFFERENT'
}
export interface PropagateWidgetProps {
setupModeType: string
isReadonly: boolean
previousStageList: SelectOption[]
selectedPropagatedState: SelectOption | undefined
initWithServiceDefinition: () => void
setSetupMode: (setupModeType: string) => void
setSelectedPropagatedState: (item: SelectOption) => void
}
export default function PropagateWidget(props: PropagateWidgetProps): JSX.Element {
const {
setupModeType,
isReadonly,
previousStageList,
selectedPropagatedState,
initWithServiceDefinition,
setSetupMode,
setSelectedPropagatedState
} = props
const { getString } = useStrings()
const formikRef = React.useRef<FormikProps<unknown> | null>(null)
const { subscribeForm, unSubscribeForm } = React.useContext(StageErrorContext)
React.useEffect(() => {
subscribeForm({ tab: DeployTabs.SERVICE, form: formikRef })
return () => unSubscribeForm({ tab: DeployTabs.SERVICE, form: formikRef })
}, [])
return (
<Formik<{ setupModeType: string; selectedPropagatedState: SelectOption | undefined }>
onSubmit={noop}
validationSchema={Yup.object().shape({
selectedPropagatedState: Yup.object().when('setupModeType', {
is: setupMode.PROPAGATE,
then: Yup.object().test(
'selectedPropagatedState',
getString('cd.pipelineSteps.serviceTab.propagateStage'),
propagatedState => !isEmpty(propagatedState.value)
)
})
})}
initialValues={{
setupModeType: setupModeType,
selectedPropagatedState: selectedPropagatedState
}}
enableReinitialize
>
{formik => {
window.dispatchEvent(new CustomEvent('UPDATE_ERRORS_STRIP', { detail: DeployTabs.SERVICE }))
formikRef.current = formik
const { values } = formik
return (
<Container>
<Layout.Horizontal flex={{ justifyContent: 'flex-start' }} spacing={'xxxlarge'}>
<section
onClick={() => !isReadonly && setSetupMode(setupMode.PROPAGATE)}
className={css.stageSelectionGrid}
>
<Layout.Horizontal flex spacing={'medium'}>
<Radio
color={Color.GREY_500}
font={{ weight: 'semi-bold' }}
label={'Propagate from:'}
checked={values.setupModeType === setupMode.PROPAGATE}
className={css.propagateFromRadio}
/>
<FormInput.Select
className={css.stageSelectDropDown}
name={'selectedPropagatedState'}
placeholder={getString('pipeline.selectStagePlaceholder')}
disabled={values.setupModeType === setupMode.DIFFERENT || isReadonly}
onChange={value => {
formik.setFieldValue('selectedPropagatedState', value)
setSelectedPropagatedState(value)
}}
value={values.selectedPropagatedState}
items={previousStageList}
/>
<span data-tooltip-id="selectPropagatedState" />
<HarnessDocTooltip useStandAlone={true} tooltipId="selectPropagatedState" />
</Layout.Horizontal>
</section>
<section onClick={() => !isReadonly && initWithServiceDefinition()} className={css.stageSelectionGrid}>
<Radio
color={Color.GREY_500}
font={{ weight: 'semi-bold' }}
label={getString('cd.pipelineSteps.serviceTab.differentService')}
checked={values.setupModeType === setupMode.DIFFERENT}
/>
</section>
</Layout.Horizontal>
</Container>
)
}}
</Formik>
)
}
|