Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Code] should not show error at the first time #33921

Merged
merged 1 commit into from
Mar 28, 2019
Merged

[Code] should not show error at the first time #33921

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions x-pack/plugins/code/public/components/admin_page/import_project.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,24 +33,32 @@ class CodeImportProject extends React.PureComponent<
importRepo: (p: string) => void;
importLoading: boolean;
},
{ value: string }
{ value: string; isInvalid: boolean }
> {
public state = {
value: '',
isInvalid: false,
};

public onChange = (e: ChangeEvent<HTMLInputElement>) => {
this.setState({
value: e.target.value,
isInvalid: isImportRepositoryURLInvalid(e.target.value),
});
};

public submitImportProject = () => {
if (!isImportRepositoryURLInvalid(this.state.value)) {
this.props.importRepo(this.state.value);
} else if (!this.state.isInvalid) {
this.setState({ isInvalid: true });
}
};

public updateIsInvalid = () => {
this.setState({ isInvalid: isImportRepositoryURLInvalid(this.state.value) });
};

public render() {
return (
<ImportWrapper>
Expand All @@ -61,7 +69,7 @@ class CodeImportProject extends React.PureComponent<
label="Repository URL"
helpText="e.g. https://github.com/elastic/elasticsearch"
fullWidth
isInvalid={isImportRepositoryURLInvalid(this.state.value)}
isInvalid={this.state.isInvalid}
error="This field shouldn't be empty."
>
<EuiFieldText
Expand All @@ -71,7 +79,8 @@ class CodeImportProject extends React.PureComponent<
data-test-subj="importRepositoryUrlInputBox"
isLoading={this.props.importLoading}
fullWidth={true}
isInvalid={isImportRepositoryURLInvalid(this.state.value)}
onBlur={this.updateIsInvalid}
isInvalid={this.state.isInvalid}
/>
</EuiFormRow>
</EuiFlexItem>
Expand Down
19 changes: 13 additions & 6 deletions x-pack/plugins/code/public/components/admin_page/project_tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ interface State {
importLoading: boolean;
settingModal: { url?: string; uri?: string; show: boolean };
repoURL: string;
isInvalid: boolean;
sortOption: SortOptionsValue;
}

Expand All @@ -109,11 +110,12 @@ class CodeProjectTab extends React.PureComponent<Props, State> {
settingModal: { show: false },
repoURL: '',
sortOption: SortOptionsValue.alphabetical_asc,
isInvalid: false,
};
}

public closeModal = () => {
this.setState({ showImportProjectModal: false, repoURL: '' });
this.setState({ showImportProjectModal: false, repoURL: '', isInvalid: false });
};

public openModal = () => {
Expand All @@ -131,15 +133,22 @@ class CodeProjectTab extends React.PureComponent<Props, State> {
public onChange = (e: ChangeEvent<HTMLInputElement>) => {
this.setState({
repoURL: e.target.value,
isInvalid: isImportRepositoryURLInvalid(e.target.value),
});
};

public submitImportProject = () => {
if (!isImportRepositoryURLInvalid(this.state.repoURL)) {
this.props.importRepo(this.state.repoURL);
} else if (!this.state.isInvalid) {
this.setState({ isInvalid: true });
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think when you are trying to submit the project, the isInvalid should have already been correctly set by the onChange?. I feel like the logic here for the entire function should be

if (!this.state.isInvalid) {
  this.props.importRepo(this.state.repoURL);
}

comments?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if you didn't input anything and click import, isInvalid is actually false.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok, make sense. then I think it worth a comment in here.

}
};

public updateIsInvalid = () => {
this.setState({ isInvalid: isImportRepositoryURLInvalid(this.state.repoURL) });
};

public renderImportModal = () => {
return (
<EuiOverlayMask>
Expand All @@ -152,19 +161,17 @@ class CodeProjectTab extends React.PureComponent<Props, State> {
<h3>Repository URL</h3>
</EuiTitle>
<EuiForm>
<EuiFormRow
isInvalid={isImportRepositoryURLInvalid(this.state.repoURL)}
error="This field shouldn't be empty."
>
<EuiFormRow isInvalid={this.state.isInvalid} error="This field shouldn't be empty.">
<EuiFieldText
value={this.state.repoURL}
onChange={this.onChange}
onBlur={this.updateIsInvalid}
placeholder="https://github.com/elastic/elasticsearch"
aria-label="input project url"
data-test-subj="importRepositoryUrlInputBox"
isLoading={this.props.importLoading}
fullWidth={true}
isInvalid={isImportRepositoryURLInvalid(this.state.repoURL)}
isInvalid={this.state.isInvalid}
/>
</EuiFormRow>
</EuiForm>
Expand Down