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 | 10x 10x 10x 10x 10x 10x 10x 10x 8x 8x 8x 8x 16x 10x | /*
* 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 { defaultTo as _defaultTo } from 'lodash-es'
import { Button, Color, Container, Formik, FormikForm, FormInput, Layout, Text } from '@harness/uicore'
import * as Yup from 'yup'
import type { AccessPointScreenMode } from '@ce/types'
import type { AccessPoint } from 'services/lw'
import { useStrings } from 'framework/strings'
import { VALID_DOMAIN_REGEX } from '@ce/constants'
import css from './GCPAccessPoint.module.scss'
export interface GcpDnsFormVal {
customDomain: string
name: string
}
interface GCPDnsMappingProps {
mode: AccessPointScreenMode
handleSubmit: (values: GcpDnsFormVal) => void
loadBalancer: AccessPoint
handleCancel?: () => void
}
const GCPDnsMapping: React.FC<GCPDnsMappingProps> = ({ mode, handleSubmit, loadBalancer, handleCancel }) => {
const { getString } = useStrings()
const isCreateMode = mode === 'create'
const isEditMode = mode === 'edit'
return (
<Container>
<Formik
initialValues={{
customDomain: _defaultTo(loadBalancer.host_name, ''),
name: _defaultTo(loadBalancer.name, '')
}}
formName="azureDnsMapping"
onSubmit={handleSubmit}
render={({ submitForm, values }) => (
<FormikForm>
<Layout.Vertical>
<FormInput.Text
name="name"
label="Provide a name for the Load balancer"
className={css.lbNameInput}
disabled={!isCreateMode}
/>
<Text color={Color.GREY_400} className={css.configInfo}>
{getString('ce.co.accessPoint.domainMappingDescription', {
lb: getString('ce.co.accessPoint.loadbalancer')
})}
</Text>
<Layout.Horizontal style={{ minHeight: 300, justifyContent: 'space-between' }}>
<Layout.Horizontal className={css.customDomainContainer} flex={{ alignItems: 'flex-start' }}>
<FormInput.Text
name={'customDomain'}
label={'Enter Domain name'}
style={{ width: 300, marginRight: 20 }}
disabled={isEditMode}
/>
</Layout.Horizontal>
<div className={css.othersHelpTextContainer}>
<Layout.Horizontal>
{/* <img src={helpTextIcon} /> */}
<Text>{getString('ce.co.accessPoint.helpCenter.heading')}</Text>
</Layout.Horizontal>
<hr></hr>
<Text>{getString('ce.co.autoStoppingRule.setupAccess.helpText.dns.setup.mapToDNS.title')}</Text>
<ol type={'1'}>
<li>{getString('ce.co.accessPoint.helpCenter.step1')}</li>
<li>{getString('ce.co.accessPoint.helpCenter.step2')}</li>
<li>{getString('ce.co.autoStoppingRule.setupAccess.helpText.dns.setup.mapToDNS.step3')}</li>
</ol>
</div>
</Layout.Horizontal>
</Layout.Vertical>
<Layout.Horizontal>
<Button
intent="primary"
text={'Continue'}
rightIcon={'chevron-right'}
onClick={submitForm}
disabled={!(values.customDomain && values.name)}
className={css.saveBtn}
data-testid={'saveGcpDetails'}
></Button>
{!isCreateMode && (
<Button intent="none" text={'Cancel'} onClick={handleCancel} data-testid={'cancelBtn'}></Button>
)}
</Layout.Horizontal>
</FormikForm>
)}
validationSchema={Yup.object().shape({
name: Yup.string().required('Name is a required field'),
customDomain: Yup.string()
.required('Domain name is a required field')
.matches(VALID_DOMAIN_REGEX, 'Enter a valid domain')
})}
></Formik>
</Container>
)
}
export default GCPDnsMapping
|