Skip to content

Commit

Permalink
Merge pull request #872 from leoendless/refactor/projectCreat
Browse files Browse the repository at this point in the history 
refactor: Refactor project create name validation
  • Loading branch information
@ks-ci-bot
ks-ci-bot authored Jul 22, 2020
2 parents b2d301c + 2e71397 commit 61b3894
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 85 deletions.
72 changes: 23 additions & 49 deletions src/components/Modals/FedProjectCreate/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default class FedProjectCreateModal extends React.Component {
this.store = props.store

this.formRef = React.createRef()
this.clusterRef = React.createRef()
this.nameRef = React.createRef()
}

get networkOptions() {
Expand All @@ -74,48 +74,32 @@ export default class FedProjectCreateModal extends React.Component {
}))
}

nameValidator = (rule, value, callback) => {
nameValidator = async (rule, value, callback) => {
if (!value) {
return callback()
}

const { cluster } = this.props
this.store.checkName({ name: value, cluster }).then(resp => {
if (resp.exist) {
return callback({ message: t('Name exists'), field: rule.field })
}
callback()
})
}

multiClusterValidator = async (rule, value, callback) => {
const name = get(this.props.formTemplate, 'metadata.name')

if (!value || !name) {
return callback()
const resp = await this.store.checkName({ name: value })
if (resp.exist) {
return callback({
message: t('The project name exists on the host cluster.'),
field: rule.field,
})
}

if (value.length > 0) {
const resp = await this.store.checkName({ name })
if (resp.exist) {
return callback({
message: t('The project name exists on the host cluster.'),
field: rule.field,
})
}
}
const clusters = get(this.props.formTemplate, 'spec.placement.clusters', [])

const resps = await Promise.all([
...value.map(cluster =>
this.store.checkName({ name, cluster: cluster.name })
...clusters.map(cluster =>
this.store.checkName({ name: value, cluster: cluster.name })
),
])

const index = resps.findIndex(item => item.exist)

if (index > -1 && value[index]) {
if (index > -1 && clusters[index]) {
return callback({
message: t('NAME_EXIST_IN_CLUSTER', { cluster: value[index].name }),
message: t('NAME_EXIST_IN_CLUSTER', { cluster: clusters[index].name }),
field: rule.field,
})
}
Expand All @@ -137,23 +121,20 @@ export default class FedProjectCreateModal extends React.Component {
'spec.placement.clusters',
uniqBy(clusters, 'name')
)
}

handleNameChange = () => {
if (this.clusterRef && this.clusterRef.current) {
const name = 'spec.placement.clusters'
if (this.nameRef && this.nameRef.current) {
const name = 'metadata.name'
if (
this.formRef &&
this.formRef.current &&
!isEmpty(this.formRef.current.state.errors)
) {
this.formRef.current.resetValidateResults(name)
}
if (this.clusterRef.current.state.error) {
this.clusterRef.current.validate({
[name]: get(this.props.formTemplate, name),
})
}

this.nameRef.current.validate({
[name]: get(this.props.formTemplate, name),
})
}
}

Expand All @@ -164,11 +145,7 @@ export default class FedProjectCreateModal extends React.Component {
desc={t('PROJECT_CLUSTER_SETTINGS_DESC')}
>
<Form.Item
ref={this.clusterRef}
rules={[
{ required: true, message: t('Please select a cluster') },
{ validator: this.multiClusterValidator },
]}
rules={[{ required: true, message: t('Please select a cluster') }]}
>
<ArrayInput
name="spec.placement.clusters"
Expand Down Expand Up @@ -219,20 +196,17 @@ export default class FedProjectCreateModal extends React.Component {
<Form.Item
label={t('Name')}
desc={t('SERVICE_NAME_DESC')}
ref={this.nameRef}
rules={[
{ required: true, message: t('Please input name') },
{
pattern: PATTERN_SERVICE_NAME,
message: `${t('Invalid name')}, ${t('SERVICE_NAME_DESC')}`,
},
{ validator: this.nameValidator },
]}
>
<Input
name="metadata.name"
onChange={this.handleNameChange}
autoFocus={true}
maxLength={63}
/>
<Input name="metadata.name" autoFocus={true} maxLength={63} />
</Form.Item>
</Column>
<Column>
Expand Down
54 changes: 18 additions & 36 deletions src/components/Modals/ProjectCreate/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export default class ProjectCreateModal extends React.Component {
this.workspaceStore = new WorkspaceStore()

this.formRef = React.createRef()
this.clusterRef = React.createRef()
this.nameRef = React.createRef()
}

componentDidMount() {
Expand Down Expand Up @@ -103,44 +103,35 @@ export default class ProjectCreateModal extends React.Component {
return callback()
}

const { cluster } = this.props
this.store.checkName({ name: value, cluster }).then(resp => {
if (resp.exist) {
return callback({ message: t('Name exists'), field: rule.field })
}
callback()
})
}
const cluster =
this.props.cluster || get(this.props.formTemplate, 'cluster')

singleClusterValidator = (rule, value, callback) => {
const name = get(this.props.formTemplate, 'metadata.name')

if (!value || !name) {
if (!cluster && globals.app.isMultiCluster) {
return callback()
}

this.store.checkName({ name, cluster: value }).then(resp => {
this.store.checkName({ name: value, cluster }).then(resp => {
if (resp.exist) {
return callback({ message: t('Name exists'), field: rule.field })
}
callback()
})
}

handleNameChange = () => {
if (this.clusterRef && this.clusterRef.current) {
handleClusterChange = () => {
if (this.nameRef && this.nameRef.current) {
const name = 'metadata.name'
if (
this.formRef &&
this.formRef.current &&
!isEmpty(this.formRef.current.state.errors)
) {
this.formRef.current.resetValidateResults('cluster')
}
if (this.clusterRef.current.state.error) {
this.clusterRef.current.validate({
cluster: get(this.props.formTemplate, 'cluster'),
})
this.formRef.current.resetValidateResults(name)
}

this.nameRef.current.validate({
[name]: get(this.props.formTemplate, name),
})
}
}

Expand All @@ -159,18 +150,15 @@ export default class ProjectCreateModal extends React.Component {
desc={t('Select the cluster to create the project.')}
>
<Form.Item
ref={this.clusterRef}
rules={[
{ required: true, message: t('Please select a cluster') },
{ validator: this.singleClusterValidator },
]}
rules={[{ required: true, message: t('Please select a cluster') }]}
>
<Select
name="cluster"
className={styles.cluster}
options={this.clusters}
valueRenderer={this.valueRenderer}
optionRenderer={this.optionRenderer}
onChange={this.handleClusterChange}
/>
</Form.Item>
</Form.Group>
Expand Down Expand Up @@ -212,23 +200,17 @@ export default class ProjectCreateModal extends React.Component {
<Form.Item
label={t('Name')}
desc={t('SERVICE_NAME_DESC')}
ref={this.nameRef}
rules={[
{ required: true, message: t('Please input name') },
{
pattern: PATTERN_SERVICE_NAME,
message: `${t('Invalid name')}, ${t('SERVICE_NAME_DESC')}`,
},
{
validator: hideCluster ? this.nameValidator : null,
},
{ validator: this.nameValidator },
]}
>
<Input
name="metadata.name"
onChange={this.handleNameChange}
autoFocus={true}
maxLength={63}
/>
<Input name="metadata.name" autoFocus={true} maxLength={63} />
</Form.Item>
</Column>
<Column>
Expand Down

0 comments on commit 61b3894

Please sign in to comment.