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 | 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 1x 1x 1x 1x 1x 1x 1x | /*
* 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, { useCallback } from 'react'
import * as Yup from 'yup'
import { Formik } from 'formik'
import { cloneDeep, debounce } from 'lodash-es'
import { Heading, Container, FormikForm } from '@wings-software/uicore'
import { Color } from '@harness/design-system'
import { NameIdDescription } from '@common/components/NameIdDescriptionTags/NameIdDescriptionTags'
import { useStrings } from 'framework/strings'
import { usePipelineContext } from '@pipeline/components/PipelineStudio/PipelineContext/PipelineContext'
import { isDuplicateStageId } from '@pipeline/components/PipelineStudio/StageBuilder/StageBuilderUtil'
import { illegalIdentifiers, regexIdentifier } from '@common/utils/StringUtils'
import type { StageElementConfig } from 'services/cd-ng'
export default function StageOverview(_props: React.PropsWithChildren<unknown>): JSX.Element {
const {
state: {
pipeline: { stages = [] },
selectionState: { selectedStageId }
},
isReadonly,
updateStage,
getStageFromPipeline
} = usePipelineContext()
const { stage } = getStageFromPipeline(selectedStageId || '')
const cloneOriginalData = cloneDeep(stage)
const { getString } = useStrings()
// eslint-disable-next-line react-hooks/exhaustive-deps
const updateStageDebounced = useCallback(
debounce((values: StageElementConfig): void => {
updateStage({ ...stage?.stage, ...values })
}, 300),
[stage?.stage, updateStage]
)
return (
<Container padding={{ top: 'small', right: 'xxlarge', bottom: 'xxlarge', left: 'xxlarge' }}>
<Heading color={Color.BLACK} level={3} style={{ fontWeight: 600, fontSize: '16px', lineHeight: '24px' }}>
{getString('stageOverview')}
</Heading>
<Container id="stageOverview">
<Formik
enableReinitialize
initialValues={{
identifier: cloneOriginalData?.stage!.identifier,
name: cloneOriginalData?.stage!.name,
description: cloneOriginalData?.stage!.description,
tags: cloneOriginalData?.stage!.tags || {}
}}
validationSchema={{
name: Yup.string().trim().required(getString('approvalStage.stageNameRequired')),
identifier: Yup.string().when('name', {
is: val => val?.length,
then: Yup.string()
.required(getString('validation.identifierRequired'))
.matches(regexIdentifier, getString('validation.validIdRegex'))
.notOneOf(illegalIdentifiers)
})
}}
validate={values => {
const errors: { name?: string } = {}
if (isDuplicateStageId(values.identifier!, stages)) {
errors.name = getString('validation.identifierDuplicate')
}
if (cloneOriginalData) {
updateStageDebounced({
...(cloneOriginalData.stage as StageElementConfig),
name: values?.name || '',
identifier: values?.identifier || '',
description: values?.description || ''
})
}
return errors
}}
onSubmit={values => {
if (cloneOriginalData) {
updateStageDebounced({
...(cloneOriginalData.stage as StageElementConfig),
name: values?.name || '',
identifier: values?.identifier || '',
description: values?.description || ''
})
}
}}
>
{formikProps => (
<FormikForm>
<Container
margin={{ top: 'large' }}
padding="large"
style={{
borderRadius: '4px',
width: 400,
filter: 'drop-shadow(0px 0px 1px rgba(40, 41, 61, 0.16))'
}}
background={Color.WHITE}
>
<NameIdDescription
formikProps={formikProps}
descriptionProps={{
disabled: isReadonly
}}
identifierProps={{
isIdentifierEditable: false,
inputGroupProps: { disabled: isReadonly }
}}
/>
</Container>
</FormikForm>
)}
</Formik>
</Container>
{_props.children}
</Container>
)
}
|