fix: username suggestions alignment (#1279)

Co-authored-by: Kyrylo Hudym-Levkovych <kyr.hudym@kyrs-MacBook-Pro.local>

.env

@@ -23,6 +23,7 @@ POST_REGISTRATION_REDIRECT_URL=''
 SEARCH_CATALOG_URL=''
 # ***** Features flags *****
 DISABLE_ENTERPRISE_LOGIN=''
+ENABLE_AUTO_GENERATED_USERNAME=''
 ENABLE_DYNAMIC_REGISTRATION_FIELDS=''
 ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN=''
 ENABLE_POST_REGISTRATION_RECOMMENDATIONS=''

src/common-components/ThirdPartyAuth.jsx

@@ -37,6 +37,7 @@ const ThirdPartyAuth = (props) => {
   const isSocialAuthActive = !!providers.length && !currentProvider;
   const isEnterpriseLoginDisabled = getConfig().DISABLE_ENTERPRISE_LOGIN;
   const enterpriseLoginURL = getConfig().LMS_BASE_URL + ENTERPRISE_LOGIN_URL;
+  const isThirdPartyAuthActive = isSocialAuthActive || (isEnterpriseLoginDisabled && isInstitutionAuthActive);
 
   return (
     <>
@@ -61,7 +62,7 @@ const ThirdPartyAuth = (props) => {
         </Hyperlink>
       )}
 
-      {thirdPartyAuthApiStatus === PENDING_STATE ? (
+      {thirdPartyAuthApiStatus === PENDING_STATE && isThirdPartyAuthActive ? (
         <div className="mt-4">
           <Skeleton className="tpa-skeleton" height={36} count={2} />
         </div>

src/config/index.js

@@ -4,6 +4,7 @@ const configuration = {
   USER_RETENTION_COOKIE_NAME: process.env.USER_RETENTION_COOKIE_NAME || '',
   // Features
   DISABLE_ENTERPRISE_LOGIN: process.env.DISABLE_ENTERPRISE_LOGIN || '',
+  ENABLE_AUTO_GENERATED_USERNAME: process.env.ENABLE_AUTO_GENERATED_USERNAME || false,
   ENABLE_DYNAMIC_REGISTRATION_FIELDS: process.env.ENABLE_DYNAMIC_REGISTRATION_FIELDS || false,
   ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN: process.env.ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN || false,
   ENABLE_POST_REGISTRATION_RECOMMENDATIONS: process.env.ENABLE_POST_REGISTRATION_RECOMMENDATIONS || false,

src/register/RegistrationFields/CountryField/CountryField.jsx

@@ -97,7 +97,7 @@ const CountryField = (props) => {
   };
 
   const getCountryList = () => countryList.map((country) => (
-    <FormAutosuggestOption key={country[COUNTRY_CODE_KEY]} id={country[COUNTRY_CODE_KEY]}>
+    <FormAutosuggestOption key={country[COUNTRY_DISPLAY_KEY]} id={country[COUNTRY_CODE_KEY]}>
       {country[COUNTRY_DISPLAY_KEY]}
     </FormAutosuggestOption>
   ));

src/register/RegistrationFields/UsernameField/UsernameField.jsx

@@ -101,7 +101,7 @@ const UsernameField = (props) => {
   };
 
   const suggestedUsernames = () => (
-    <div className={className}>
+    <div className={className} role="listbox">
       <span className="text-gray username-suggestion--label">{formatMessage(messages['registration.username.suggestion.label'])}</span>
       <div className="username-scroll-suggested--form-field">
         {usernameSuggestions.map((username, index) => (
@@ -112,7 +112,9 @@ const UsernameField = (props) => {
             className="username-suggestions--chip data-hj-suppress"
             autoComplete={props.autoComplete}
             key={`suggestion-${index.toString()}`}
+            tabIndex={0}
             onClick={(e) => handleSuggestionClick(e, username)}
+            role="option"
           >
             {username}
           </Button>
@@ -123,7 +125,7 @@ const UsernameField = (props) => {
   );
 
   if (usernameSuggestions.length > 0 && errorMessage && value === ' ') {
-    className = 'username-suggestions__error';
+    className = 'username-suggestions';
     iconButton = <IconButton src={Close} iconAs={Icon} alt="Close" onClick={() => handleUsernameSuggestionClose()} variant="black" size="sm" className="username-suggestions__close__button" />;
     suggestedUsernameDiv = suggestedUsernames();
   } else if (usernameSuggestions.length > 0 && value === ' ') {
@@ -134,14 +136,15 @@ const UsernameField = (props) => {
     suggestedUsernameDiv = suggestedUsernames();
   }
   return (
-    <FormGroup
-      {...props}
-      handleChange={handleOnChange}
-      handleFocus={handleOnFocus}
-      handleBlur={handleOnBlur}
-    >
+    <div className="username__form-group-wrapper">
       {suggestedUsernameDiv}
-    </FormGroup>
+      <FormGroup
+        {...props}
+        handleChange={handleOnChange}
+        handleFocus={handleOnFocus}
+        handleBlur={handleOnBlur}
+      />
+    </div>
   );
 };
 

src/register/RegistrationPage.jsx

@@ -60,6 +60,7 @@ const RegistrationPage = (props) => {
     showConfigurableEdxFields: getConfig().SHOW_CONFIGURABLE_EDX_FIELDS,
     showConfigurableRegistrationFields: getConfig().ENABLE_DYNAMIC_REGISTRATION_FIELDS,
     showMarketingEmailOptInCheckbox: getConfig().MARKETING_EMAILS_OPT_IN,
+    autoGeneratedUsernameEnabled: getConfig().ENABLE_AUTO_GENERATED_USERNAME,
   };
   const {
     handleInstitutionLogin,
@@ -215,6 +216,9 @@ const RegistrationPage = (props) => {
       delete payload.password;
       payload.social_auth_provider = currentProvider;
     }
+    if (flags.autoGeneratedUsernameEnabled) {
+      delete payload.username;
+    }
 
     // Validating form data before submitting
     const { isValid, fieldErrors, emailSuggestion } = isFormValid(
@@ -324,16 +328,18 @@ const RegistrationPage = (props) => {
                 helpText={[formatMessage(messages['help.text.email'])]}
                 floatingLabel={formatMessage(messages['registration.email.label'])}
               />
-              <UsernameField
-                name="username"
-                spellCheck="false"
-                value={formFields.username}
-                handleChange={handleOnChange}
-                handleErrorChange={handleErrorChange}
-                errorMessage={errors.username}
-                helpText={[formatMessage(messages['help.text.username.1']), formatMessage(messages['help.text.username.2'])]}
-                floatingLabel={formatMessage(messages['registration.username.label'])}
-              />
+              {!flags.autoGeneratedUsernameEnabled && (
+                <UsernameField
+                  name="username"
+                  spellCheck="false"
+                  value={formFields.username}
+                  handleChange={handleOnChange}
+                  handleErrorChange={handleErrorChange}
+                  errorMessage={errors.username}
+                  helpText={[formatMessage(messages['help.text.username.1']), formatMessage(messages['help.text.username.2'])]}
+                  floatingLabel={formatMessage(messages['registration.username.label'])}
+                />
+              )}
               {!currentProvider && (
                 <PasswordField
                   name="password"

src/register/RegistrationPage.test.jsx

@@ -134,9 +134,16 @@ describe('RegistrationPage', () => {
     jest.clearAllMocks();
   });
 
-  const populateRequiredFields = (getByLabelText, payload, isThirdPartyAuth = false) => {
+  const populateRequiredFields = (
+    getByLabelText,
+    payload,
+    isThirdPartyAuth = false,
+    autoGeneratedUsernameEnabled = false,
+  ) => {
     fireEvent.change(getByLabelText('Full name'), { target: { value: payload.name, name: 'name' } });
-    fireEvent.change(getByLabelText('Public username'), { target: { value: payload.username, name: 'username' } });
+    if (!autoGeneratedUsernameEnabled) {
+      fireEvent.change(getByLabelText('Public username'), { target: { value: payload.username, name: 'username' } });
+    }
     fireEvent.change(getByLabelText('Email'), { target: { value: payload.email, name: 'email' } });
 
     fireEvent.change(getByLabelText('Country/Region'), { target: { value: payload.country, name: 'country' } });
@@ -299,6 +306,44 @@ describe('RegistrationPage', () => {
       });
     });
 
+    it('should submit form without UsernameField when autoGeneratedUsernameEnabled is true', () => {
+      mergeConfig({
+        ENABLE_AUTO_GENERATED_USERNAME: true,
+      });
+      jest.spyOn(global.Date, 'now').mockImplementation(() => 0);
+      const payload = {
+        name: 'John Doe',
+        email: 'john.doe@gmail.com',
+        password: 'password1',
+        country: 'Pakistan',
+        honor_code: true,
+        totalRegistrationTime: 0,
+      };
+
+      store.dispatch = jest.fn(store.dispatch);
+      const { getByLabelText, container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      populateRequiredFields(getByLabelText, payload, false, true);
+      const button = container.querySelector('button.btn-brand');
+      fireEvent.click(button);
+      expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({ ...payload, country: 'PK' }));
+      mergeConfig({
+        ENABLE_AUTO_GENERATED_USERNAME: false,
+      });
+    });
+
+    it('should not display UsernameField when ENABLE_AUTO_GENERATED_USERNAME is true', () => {
+      mergeConfig({
+        ENABLE_AUTO_GENERATED_USERNAME: true,
+      });
+
+      const { queryByLabelText } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
+      expect(queryByLabelText('Username')).toBeNull();
+
+      mergeConfig({
+        ENABLE_AUTO_GENERATED_USERNAME: false,
+      });
+    });
+
     it('should not dispatch registerNewUser on empty form Submission', () => {
       store.dispatch = jest.fn(store.dispatch);
 

src/register/components/ConfigurableRegistrationForm.jsx

@@ -33,7 +33,11 @@ const ConfigurableRegistrationForm = (props) => {
     autoSubmitRegistrationForm,
   } = props;
 
-  const countryList = useMemo(() => getCountryList(getLocale()), []);
+  /** The reason for adding the entry 'United States' is that Chrome browser aut-fill the form with the 'Unites
+  States' instead of 'United States of America' which does not exist in country dropdown list and gets the user
+  confused and unable to create an account. So we added the United States entry in the dropdown list.
+ */
+  const countryList = useMemo(() => getCountryList(getLocale()).concat([{ code: 'US', name: 'United States' }]), []);
 
   let showTermsOfServiceAndHonorCode = false;
   let showCountryField = false;

src/register/data/sagas.js

@@ -1,11 +1,14 @@
 import { camelCaseObject } from '@edx/frontend-platform';
 import { logError, logInfo } from '@edx/frontend-platform/logging';
-import { call, put, takeEvery } from 'redux-saga/effects';
+import {
+  call, put, race, take, takeEvery,
+} from 'redux-saga/effects';
 
 import {
   fetchRealtimeValidationsBegin,
   fetchRealtimeValidationsFailure,
   fetchRealtimeValidationsSuccess,
+  REGISTER_CLEAR_USERNAME_SUGGESTIONS,
   REGISTER_FORM_VALIDATIONS,
   REGISTER_NEW_USER,
   registerNewUserBegin,
@@ -41,9 +44,15 @@ export function* handleNewUserRegistration(action) {
 export function* fetchRealtimeValidations(action) {
   try {
     yield put(fetchRealtimeValidationsBegin());
-    const { fieldValidations } = yield call(getFieldsValidations, action.payload.formPayload);
 
-    yield put(fetchRealtimeValidationsSuccess(camelCaseObject(fieldValidations)));
+    const { response } = yield race({
+      response: call(getFieldsValidations, action.payload.formPayload),
+      cancel: take(REGISTER_CLEAR_USERNAME_SUGGESTIONS),
+    });
+
+    if (response) {
+      yield put(fetchRealtimeValidationsSuccess(camelCaseObject(response.fieldValidations)));
+    }
   } catch (e) {
     if (e.response && e.response.status === 403) {
       yield put(fetchRealtimeValidationsFailure());

src/sass/_registration.scss

@@ -65,10 +65,15 @@
   margin-right: 0.25rem;
 }
 
-.username-suggestions {
+.username__form-group-wrapper {
   position: relative;
-  margin-top: -2.5rem;
-  margin-left: 15px;
+}
+
+.username-suggestions {
+  position: absolute;
+  inset: 0;
+  padding-left: 15px;
+  z-index: 100;
 }
 
 .username-suggestions__close__button {
@@ -76,13 +81,6 @@
   position: absolute;
 }
 
-.username-suggestions__error {
-  position: relative;
-  margin-top: -13.7%;
-  margin-bottom: 11%;
-  margin-left: 15px;
-}
-
 .username-scroll-suggested--form-field {
   width: 20rem;
   white-space: nowrap;