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 | 100x 100x 100x 100x 100x 100x 100x 100x 100x 100x 100x 100x 100x 100x 100x 100x 100x 28x 28x 28x 28x 28x 28x 28x 28x | /*
* 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 isEmpty from 'lodash/isEmpty'
import { useParams } from 'react-router-dom'
import cx from 'classnames'
import { Text, Container, Layout } from '@wings-software/uicore'
import { Color } from '@harness/design-system'
import { Connectors } from '@connectors/constants'
import { FormMultiTypeConnectorField } from '@connectors/components/ConnectorReferenceField/FormMultiTypeConnectorField'
import { useStrings } from 'framework/strings'
import { MultiTypeTextField } from '@common/components/MultiTypeText/MultiTypeText'
import { useVariablesExpression } from '@pipeline/components/PipelineStudio/PiplineHooks/useVariablesExpression'
import { useGitScope } from '@pipeline/utils/CIUtils'
import { StepViewType } from '@pipeline/components/AbstractSteps/Step'
import { getOptionalSubLabel } from './CIStepOptionalConfig'
import { AllMultiTypeInputTypesForStep } from './StepUtils'
import css from '@pipeline/components/PipelineSteps/Steps/Steps.module.scss'
interface ConnectorRefWithImageProps {
showOptionalSublabel?: boolean
readonly?: boolean
showConnectorRef?: boolean
showImage?: boolean
stepViewType: StepViewType
path?: string
}
export const ConnectorRefWithImage: React.FC<ConnectorRefWithImageProps> = props => {
const { showOptionalSublabel, readonly, showConnectorRef = true, showImage = true, stepViewType, path } = props
const { getString } = useStrings()
const { expressions } = useVariablesExpression()
const gitScope = useGitScope()
const { accountId, projectIdentifier, orgIdentifier } = useParams<{
projectIdentifier: string
orgIdentifier: string
accountId: string
}>()
const stepCss = stepViewType === StepViewType.DeploymentForm ? css.sm : css.lg
const prefix = isEmpty(path) ? '' : `${path}.`
return (
<>
{showConnectorRef ? (
<Container className={css.bottomMargin3}>
<FormMultiTypeConnectorField
label={
<Layout.Horizontal flex={{ justifyContent: 'flex-start', alignItems: 'baseline' }}>
<Text
className={css.inpLabel}
color={Color.GREY_600}
font={{ size: 'small', weight: 'semi-bold' }}
style={{ display: 'flex', alignItems: 'center' }}
>
{getString('pipelineSteps.connectorLabel')}
</Text>
{showOptionalSublabel ? getOptionalSubLabel(getString) : null}
</Layout.Horizontal>
}
type={[Connectors.GCP, Connectors.AWS, Connectors.DOCKER]}
width={385}
name={`${prefix}spec.connectorRef`}
placeholder={getString('select')}
accountIdentifier={accountId}
projectIdentifier={projectIdentifier}
orgIdentifier={orgIdentifier}
multiTypeProps={{
expressions,
allowableTypes: AllMultiTypeInputTypesForStep,
disabled: readonly
}}
gitScope={gitScope}
setRefValue
/>
</Container>
) : null}
{showImage ? (
<Container className={cx(css.formGroup, stepCss, css.bottomMargin5)}>
<MultiTypeTextField
name={`${prefix}spec.image`}
label={
<Layout.Horizontal flex={{ justifyContent: 'flex-start', alignItems: 'baseline' }}>
<Text
className={css.inpLabel}
color={Color.GREY_600}
font={{ size: 'small', weight: 'semi-bold' }}
tooltipProps={
showOptionalSublabel
? {}
: {
dataTooltipId: 'image'
}
}
placeholder={getString('imagePlaceholder')}
>
{getString('imageLabel')}
</Text>
{showOptionalSublabel ? getOptionalSubLabel(getString, 'image') : null}
</Layout.Horizontal>
}
multiTextInputProps={{
multiTextInputProps: {
allowableTypes: AllMultiTypeInputTypesForStep
}
}}
/>
</Container>
) : null}
</>
)
}
|