feat: Added languages to dropdown in settings

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

@@ -50,7 +50,27 @@ 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)' },
+    { key: 'cs', text: 'Čeština‎ Czech' }, //Czech
+    { key: 'de', text: 'Deutsch‎' }, //German
+    { key: 'es', text: 'Español‎' }, //Spanish
+    { key: 'fr', text: 'Français‎' }, //French
+    { key: 'hu', text: 'Magyar‎' }, //Hungarian
+    { key: 'it', text: 'Italiano‎' }, //Italian
+    { key: 'ja', text: '日本語‎' }, //Japanese
+    { key: 'ko', text: '한국어‎' }, //Korean
+    { key: 'nl', text: 'Nederlands‎' }, //Dutch (Netherlands)
+    { key: 'pl', text: 'Polski‎' }, //Polish
+    { key: 'pt-BR', text: 'Português (Brasil)‎' }, //Portuguese (Brazil)
+    { key: 'pt-PT', text: 'Português (Portugal)‎' }, //Portuguese (Portugal)
+    { key: 'ru', text: 'Русский‎' }, //Russian
+    { key: 'sv', text: 'Svenska‎' }, //Swedish
+    { key: 'tr', text: 'Türkçe‎' }, //Turkish
+    { key: 'zh-Hans', text: '中文(简体)‎' }, //Chinese(Simplified)
+    { key: 'zh-Hant', text: '中文(繁體)' }, //Chinese(Traditional)
+  ];
+
   if (process.env.NODE_ENV !== 'production') {
     languageOptions.push({
       key: 'en-US-pseudo',
@@ -148,6 +168,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}

Composer/packages/client/src/utils/fileUtil.ts

@@ -91,7 +91,7 @@ export async function loadLocale(locale: string) {
   const data = resp?.data;
   if (data == null || typeof data === 'string') {
     // this is an invalid locale, so don't set anything
-    console.error('Tried to read an invalid locale');
+    console.log('Tried to read an invalid locale');
     return null;
   } else {
     // We don't care about the return value except in our unit tests