feat: Added languages to dropdown in settings

Composer/packages/client/src/pages/setting/app-settings/AppSettings.tsx

@@ -50,15 +50,37 @@ const AppSettings: React.FC<RouteComponentProps> = () => {
 
   const renderElectronSettings = isElectron();
 
-  const languageOptions = [{ key: 'en-US', text: formatMessage('English (US)') }];
+  const languageOptions = [
+    { key: 'en-US', text: 'English (US)', englishName: 'English (US)' },
+    { key: 'cs', text: 'Čeština‎ Czech', englishName: 'Czech' },
+    { key: 'de', text: 'Deutsch‎', englishName: 'German' },
+    { key: 'es', text: 'Español‎', englishName: 'Spanish' },
+    { key: 'fr', text: 'Français‎', englishName: 'French' },
+    { key: 'hu', text: 'Magyar‎', englishName: 'Hungarian' },
+    { key: 'it', text: 'Italiano‎', englishName: ' Italian' },
+    { key: 'ja', text: '日本語‎', englishName: 'Japanese' },
+    { key: 'ko', text: '한국어‎', englishName: 'Korean' },
+    { key: 'nl', text: 'Nederlands‎', englishName: 'Dutch (Netherlands)' },
+    { key: 'pl', text: 'Polski‎', englishName: 'Polish' },
+    { key: 'pt-BR', text: 'Português (Brasil)‎', englishName: 'Portuguese (Brazil)' },
+    { key: 'pt-PT', text: 'Português (Portugal)‎', englishName: 'Portuguese (Portugal)' },
+    { key: 'ru', text: 'Русский‎', englishName: 'Russian' },
+    { key: 'sv', text: 'Svenska‎', englishName: 'Swedish' },
+    { key: 'tr', text: 'Türkçe‎', englishName: 'Turkish' },
+    { key: 'zh-Hans', text: '中文(简体)‎', englishName: 'Chinese(Simplified)' },
+    { key: 'zh-Hant', text: '中文(繁體)', englishName: 'Chinese(Traditional)' },
+  ];
+
   if (process.env.NODE_ENV !== 'production') {
     languageOptions.push({
       key: 'en-US-pseudo',
       text: formatMessage('Pseudo'),
+      englishName: 'pseudo',
     });
     languageOptions.push({
       key: 'en-US-DoesNotExist',
       text: formatMessage('Does Not Exist'),
+      englishName: 'does not exist',
     });
   }
 
@@ -148,6 +170,7 @@ const AppSettings: React.FC<RouteComponentProps> = () => {
         <h2>{formatMessage('Application Language')}</h2>
         <SettingDropdown
           description={formatMessage('This is the language used for Composer’s user interface.')}
+          dropdownWidth={200}
           image={images.language}
           options={languageOptions}
           selected={userSettings.appLocale}

Composer/packages/client/src/pages/setting/app-settings/SettingDropdown.tsx

@@ -19,10 +19,11 @@ interface ISettingToggleProps {
   title: string;
   options: { key: string; text: string }[];
   selected?: string;
+  dropdownWidth?: number;
 }
 
 const SettingDropdown: React.FC<ISettingToggleProps> = (props) => {
-  const { id, title, description, image, onChange, options, selected } = props;
+  const { id, title, description, dropdownWidth, image, onChange, options, selected } = props;
   const uniqueId = useId(kebabCase(title));
 
   return (
@@ -38,6 +39,7 @@ const SettingDropdown: React.FC<ISettingToggleProps> = (props) => {
       </div>
       <div>
         <Dropdown
+          dropdownWidth={dropdownWidth}
           id={id || uniqueId}
           options={options}
           selectedKey={selected}