Add FormInputValidation to G Suite Add User Field

[cbauerman]

Changes proposed in this Pull Request

• Use FormInputValidation in the "Add G Suite User" field

BEFORE

AFTER

Testing instructions

1. Navigate to http://calypso.localhost:3000/domains/manage/email/:siteSlug: on a site with G Suite
2. Click "Add G Suite User"
3. Immediately click "Continue"
4. Confirm that all 3 fields are highlighted with red and say "This field is required." below
5. Fill in the username with a single character, like a, and press "Continue"
6. Confirm that that the username field is not highlighted
7. Replace the username with a& and press "Continue"
8. Confirm that username field now has the error message "Only number, letters, dashes, underscores, apostrophes and periods are allowed."
9. Now replace the username with 123456789123456789123456789123456789123456789123456789123456789123456789 and confirm the error message is "Please provide a valid email address.".

Fixes #29696

[matticbot]

Test live: https://calypso.live/?branch=add/gsuite-add-user-validation

[stephanethomas]

The following error is throw when I access the Add G Suite User page:

Uncaught ReferenceError: kebabCase is not defined
    at eval (app:///./client/my-sites/domains/domain-management/add-google-apps/add-email-addresses-card.jsx:479)
    at Array.map (<anonymous>)
    at getDerivedStateFromProps (app:///./client/my-sites/domains/domain-management/add-google-apps/add-email-addresses-card.jsx:466)
    at applyDerivedStateFromProps (app:///./node_modules/react-dom/cjs/react-dom.development.js:12278)
    at mountClassInstance (app:///./node_modules/react-dom/cjs/react-dom.development.js:12630)
    at updateClassComponent (app:///./node_modules/react-dom/cjs/react-dom.development.js:14256)
    at beginWork (app:///./node_modules/react-dom/cjs/react-dom.development.js:15082)
    at performUnitOfWork (app:///./node_modules/react-dom/cjs/react-dom.development.js:17820)
    at workLoop (app:///./node_modules/react-dom/cjs/react-dom.development.js:17860)
    at HTMLUnknownElement.callCallback (app:///./node_modules/react-dom/cjs/react-dom.development.js:149)

Unit tests are failing as well.

[belcherj]

Spacing looks off before you add the errors, too much space between fields:

[belcherj]

Looks like field width is tied to the error text. The last screenshot is what it should look like.

[belcherj]

The CSS needs to be fixed up so that the errors don't mess with the field widths.

[belcherj]

[cbauerman]

fieldset cannot flex.

[belcherj]

Tested and code looks good