fix(code/frontend): should not show import error at the first time (#33921)

Author: WangQianliang

x-pack/plugins/code/public/components/admin_page/import_project.tsx

@@ -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>
@@ -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
@@ -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>

x-pack/plugins/code/public/components/admin_page/project_tab.tsx

@@ -90,6 +90,7 @@ interface State {
   importLoading: boolean;
   settingModal: { url?: string; uri?: string; show: boolean };
   repoURL: string;
+  isInvalid: boolean;
   sortOption: SortOptionsValue;
 }
 
@@ -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 = () => {
@@ -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 });
     }
   };
 
+  public updateIsInvalid = () => {
+    this.setState({ isInvalid: isImportRepositoryURLInvalid(this.state.repoURL) });
+  };
+
   public renderImportModal = () => {
     return (
       <EuiOverlayMask>
@@ -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>