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 | 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 4x 3x 4x 4x 4x 4x 4x 4x 2x 2x 4x 4x 4x 4x | /*
* 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 { Formik, FormikProps } from 'formik'
import { noop } from 'lodash-es'
import * as Yup from 'yup'
import { IconName, GroupedThumbnailSelect } from '@wings-software/uicore'
import { useStrings, UseStringsReturn } from 'framework/strings'
import { StageErrorContext } from '@pipeline/context/StageErrorContext'
import { DeployTabs } from '@cd/components/PipelineStudio/DeployStageSetupShell/DeployStageSetupShellUtils'
import { InfraDeploymentType } from '@cd/components/PipelineSteps/PipelineStepsUtil'
import css from './SelectInfrastructureType.module.scss'
export function getInfraDeploymentTypeSchema(
getString: UseStringsReturn['getString']
): Yup.StringSchema<string | undefined> {
return Yup.string()
.oneOf(Object.values(InfraDeploymentType))
.required(getString('cd.pipelineSteps.infraTab.deploymentType'))
}
interface InfrastructureItem {
label: string
icon: IconName
value: string
disabled?: boolean
}
interface InfrastructureGroup {
groupLabel: string
items: InfrastructureItem[]
}
interface SelectDeploymentTypeProps {
selectedInfrastructureType?: string
onChange: (deploymentType: string | undefined) => void
isReadonly: boolean
}
export default function SelectDeploymentType(props: SelectDeploymentTypeProps): JSX.Element {
const { selectedInfrastructureType, onChange, isReadonly } = props
const { getString } = useStrings()
const infraGroups: InfrastructureGroup[] = [
{
groupLabel: getString('pipelineSteps.deploy.infrastructure.directConnection'),
items: [
{
label: getString('pipelineSteps.deploymentTypes.kubernetes'),
icon: 'service-kubernetes',
value: InfraDeploymentType.KubernetesDirect
}
]
},
{
groupLabel: getString('pipelineSteps.deploy.infrastructure.viaCloudProvider'),
items: [
{
label: getString('pipelineSteps.deploymentTypes.gk8engine'),
icon: 'google-kubernetes-engine',
value: InfraDeploymentType.KubernetesGcp
}
]
}
]
const { subscribeForm, unSubscribeForm } = React.useContext(StageErrorContext)
const formikRef = React.useRef<FormikProps<unknown> | null>(null)
React.useEffect(() => {
subscribeForm({ tab: DeployTabs.INFRASTRUCTURE, form: formikRef })
return () => unSubscribeForm({ tab: DeployTabs.INFRASTRUCTURE, form: formikRef })
}, [])
return (
<Formik<{ deploymentType?: string }>
onSubmit={noop}
initialValues={{ deploymentType: selectedInfrastructureType }}
enableReinitialize
validationSchema={Yup.object().shape({
deploymentType: getInfraDeploymentTypeSchema(getString)
})}
>
{formik => {
window.dispatchEvent(new CustomEvent('UPDATE_ERRORS_STRIP', { detail: DeployTabs.INFRASTRUCTURE }))
formikRef.current = formik
return (
<GroupedThumbnailSelect
className={css.thumbnailSelect}
name={'deploymentType'}
onChange={onChange}
groups={infraGroups}
isReadonly={isReadonly}
/>
)
}}
</Formik>
)
}
|