Added dropdown for Applanguage in UserUpdation form

public/locales/en.json

@@ -282,7 +282,7 @@
     "lastName": "Last Name",
     "email": "Email",
     "password": "Password",
-    "appLanguageCode": "App Language Code",
+    "appLanguageCode": "Default Language",
     "userType": "User Type",
     "admin": "Admin",
     "superAdmin": "Superadmin",

public/locales/fr.json

@@ -282,7 +282,7 @@
     "lastName": "Nom de famille",
     "email": "E-mail",
     "password": "Mot de passe",
-    "appLanguageCode": "Code de langue de l'application",
+    "appLanguageCode": "Langue par défaut",
     "userType": "Type d'utilisateur",
     "admin": "Administrateur",
     "superAdmin": "Super administrateur",

public/locales/hi.json

@@ -282,7 +282,7 @@
     "lastName": "उपनाम",
     "email": "ईमेल",
     "password": "पासवर्ड",
-    "appLanguageCode": "ऐप भाषा कोड",
+    "appLanguageCode": "डिफ़ॉल्ट भाषा",
     "userType": "उपयोगकर्ता का प्रकार",
     "admin": "व्यवस्थापक",
     "superAdmin": "सुपरएडमिन",

public/locales/sp.json

@@ -282,7 +282,7 @@
     "lastName": "Apellido",
     "email": "Correo electrónico",
     "password": "Clave",
-    "appLanguageCode": "Código de idioma de la aplicación",
+    "appLanguageCode": "Idioma predeterminado",
     "userType": "Tipo de usuario",
     "admin": "Administración",
     "superAdmin": "Superadministrador",

public/locales/zh.json

@@ -282,7 +282,7 @@
     "lastName": "姓",
     "email": "電子郵件",
     "password": "密碼",
-    "appLanguageCode": "應用語言代碼",
+    "appLanguageCode": "默认语言",
     "userType": "用戶類型",
     "admin": "行政",
     "superAdmin": "超級管理員",

src/components/UserUpdate/UserUpdate.test.tsx

@@ -49,7 +49,7 @@ describe('Testing User Update', () => {
     lastName: 'Doe',
     email: 'johndoe@gmail.com',
     password: 'qwerty',
-    applangcode: '2',
+    applangcode: 'en',
     selectedOption: 'selectadmin',
     displayImage: new File(['hello'], 'hello.png', { type: 'image/png' }),
   };
@@ -75,8 +75,8 @@ describe('Testing User Update', () => {
     );
     userEvent.type(screen.getByPlaceholderText(/Email/i), formData.email);
     userEvent.type(screen.getByPlaceholderText(/Password/i), formData.password);
-    userEvent.type(
-      screen.getByPlaceholderText(/App Language Code/i),
+    userEvent.selectOptions(
+      screen.getByTestId(/applangcode/i),
       formData.applangcode
     );
     userEvent.click(screen.getByLabelText('Admin'));
@@ -100,7 +100,7 @@ describe('Testing User Update', () => {
     expect(screen.getByPlaceholderText(/Password/i)).toHaveValue(
       formData.password
     );
-    expect(screen.getByPlaceholderText(/App Language Code/i)).toHaveValue(
+    expect(screen.getByTestId(/applangcode/i)).toHaveValue(
       formData.applangcode
     );
     expect(screen.getByLabelText('Admin')).not.toBeChecked();
@@ -112,9 +112,7 @@ describe('Testing User Update', () => {
     expect(screen.getByPlaceholderText(/Last Name/i)).toBeInTheDocument();
     expect(screen.getByPlaceholderText(/Email/i)).toBeInTheDocument();
     expect(screen.getByPlaceholderText(/Password/i)).toBeInTheDocument();
-    expect(
-      screen.getByPlaceholderText(/App Language Code/i)
-    ).toBeInTheDocument();
+    expect(screen.getByTestId(/applangcode/i)).toBeInTheDocument();
     expect(screen.getByText('User Type')).toBeInTheDocument();
     expect(screen.getByText('Admin')).toBeInTheDocument();
     expect(screen.getByText('Superadmin')).toBeInTheDocument();

src/components/UserUpdate/UserUpdate.tsx

@@ -3,6 +3,7 @@ import { useMutation } from '@apollo/client';
 import { UPDATE_USER_MUTATION } from 'GraphQl/Mutations/mutations';
 import { useTranslation } from 'react-i18next';
 
+import { languages } from 'utils/languages';
 import styles from './UserUpdate.module.css';
 
 interface UserUpdateProps {
@@ -130,19 +131,22 @@ function UserUpdate(props: UserUpdateProps): JSX.Element {
           <div className={styles.dispflex}>
             <div>
               <label>{t('appLanguageCode')}</label>
-              <input
-                type="input"
-                id="applangcode"
-                placeholder={t('appLanguageCode')}
-                required
-                value={formState.applangcode}
+              <select
+                className="form-control"
+                data-testid="applangcode"
                 onChange={(e) => {
                   setFormState({
                     ...formState,
                     applangcode: e.target.value,
                   });
                 }}
-              />
+              >
+                {languages.map((language, index: number) => (
+                  <option key={index} value={language.code}>
+                    {language.name}
+                  </option>
+                ))}
+              </select>
             </div>
             <div>
               <label>{t('userType')}</label>