refactor(client): turn image validation component into subComponent (#49155)

* refactor(client): clean extra FormGroup component in personal info

* Revert "refactor(client): clean extra FormGroup component in personal info"

This reverts commit cc29df3033.

* refactor show image component into JSX

* Remove redundant text

Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>

---------

Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>

client/src/components/settings/about.tsx

@@ -48,6 +48,18 @@ type AboutState = {
   isPictureUrlValid: boolean;
 };
 
+const ShowImageValidationWarning = ({
+  alertContent
+}: {
+  alertContent: string;
+}) => {
+  return (
+    <HelpBlock>
+      <Alert bsStyle='info'>{alertContent}</Alert>
+    </HelpBlock>
+  );
+};
+
 class AboutSettings extends Component<AboutProps, AboutState> {
   validationImage: HTMLImageElement;
   static displayName: string;
@@ -79,7 +91,6 @@ class AboutSettings extends Component<AboutProps, AboutState> {
       picture === formValues.picture &&
       about === formValues.about
     ) {
-      // eslint-disable-next-line react/no-did-update-set-state
       return this.setState({
         originalValues: {
           name,
@@ -170,21 +181,6 @@ class AboutSettings extends Component<AboutProps, AboutState> {
     }));
   };
 
-  showImageValidationWarning = () => {
-    const { t } = this.props;
-    if (this.state.isPictureUrlValid === false) {
-      return (
-        <HelpBlock>
-          <Alert bsStyle='info' closeLabel={t('buttons.close')}>
-            {t('validation.url-not-image')}
-          </Alert>
-        </HelpBlock>
-      );
-    } else {
-      return true;
-    }
-  };
-
   handleAboutChange = (e: React.FormEvent<HTMLInputElement>) => {
     const value = (e.target as HTMLInputElement).value.slice(0);
     return this.setState(state => ({
@@ -210,9 +206,9 @@ class AboutSettings extends Component<AboutProps, AboutState> {
       toggleKeyboardShortcuts
     } = this.props;
     return (
-      <div className='about-settings'>
+      <>
         <UsernameSettings username={username} />
-        <br />
+        <Spacer />
         <SectionHeader>{t('settings.headings.personal-info')}</SectionHeader>
         <FullWidthRow>
           <form id='camper-identity' onSubmit={this.handleSubmit}>
@@ -246,7 +242,11 @@ class AboutSettings extends Component<AboutProps, AboutState> {
                   type='url'
                   value={picture}
                 />
-                {this.showImageValidationWarning()}
+                {!this.state.isPictureUrlValid && (
+                  <ShowImageValidationWarning
+                    alertContent={t('validation.url-not-image')}
+                  />
+                )}
               </FormGroup>
               <FormGroup controlId='about-about'>
                 <ControlLabel>
@@ -279,7 +279,7 @@ class AboutSettings extends Component<AboutProps, AboutState> {
             toggleKeyboardShortcuts={toggleKeyboardShortcuts}
           />
         </FullWidthRow>
-      </div>
+      </>
     );
   }
 }