I18n: Add Brazilian Portuguese (#84461)

* Add pt-br as supported language

* docs

* update pt-br path:

* docs

contribute/internationalization.md

@@ -66,13 +66,19 @@ While the `t` function can technically be used outside of React functions (e.g,
 
 ## How to add a new language
 
-1. Add new locale in Crowdin and download files to repo
+1. Add a new locale in Crowdin
-   1. Grafana OSS Crowdin project -> "dot dot dot" menu in top right -> Target languages
+   1. Grafana OSS Crowdin project
-   2. If Crowdin's locale code is different from our IETF language tag, add a custom mapping in Project Settings -> Language mapping
+   2. "dot dot dot" menu in top right
-   3. GH repo grafana/grafana -> Actions -> Choose `Crowdin Download Action` -> Run workflow -> Creates a PR automatically
+   3. Target languages, and add the language
-2. Review the PR `I18n: Download translations from Crowdin`
+   4. If Crowdin's locale code is different from our IETF language tag (such as Chinese Simplified), add a custom mapping in Project Settings -> Language mapping
-3. Update `public/app/core/internationalization/constants.ts` (add new constant, and add to `LOCALES`) and add changes to the open PR
+2. Sync the new (empty) language to the repo
-4. Approve and merge the PR
+   1. In Grafana's Github Actions, go to [Crowdin Download Action](https://github.com/grafana/grafana/actions/workflows/i18n-crowdin-download.yml)
+   2. Select 'Run workflow', from main
+   3. The workflow will create a PR with the new language files, which can be reviewed and merged
+3. Update `public/app/core/internationalization/constants.ts`
+   1. Add a new constant for the new language
+   2. Add the new constant to the `LOCALES` array
+   3. Create a PR with the changes and merge when you are ready to release the new language (probably wait until we have translations for it)
 
 ## How translations work in Grafana
 

public/app/core/components/SharedPreferences/SharedPreferences.tsx

@@ -18,7 +18,7 @@ import {
 } from '@grafana/ui';
 import { DashboardPicker } from 'app/core/components/Select/DashboardPicker';
 import { t, Trans } from 'app/core/internationalization';
-import { LANGUAGES } from 'app/core/internationalization/constants';
+import { LANGUAGES, PSEUDO_LOCALE } from 'app/core/internationalization/constants';
 import { PreferencesService } from 'app/core/services/PreferencesService';
 import { changeTheme } from 'app/core/services/theme';
 
@@ -35,7 +35,17 @@ function getLanguageOptions(): Array<SelectableValue<string>> {
   const languageOptions = LANGUAGES.map((v) => ({
     value: v.code,
     label: v.name,
-  }));
+  })).sort((a, b) => {
+    if (a.value === PSEUDO_LOCALE) {
+      return 1;
+    }
+
+    if (b.value === PSEUDO_LOCALE) {
+      return -1;
+    }
+
+    return a.label.localeCompare(b.label);
+  });
 
   const options = [
     {

public/app/core/internationalization/constants.ts

@@ -4,6 +4,7 @@ export const ENGLISH_US = 'en-US';
 export const FRENCH_FRANCE = 'fr-FR';
 export const SPANISH_SPAIN = 'es-ES';
 export const GERMAN_GERMANY = 'de-DE';
+export const BRAZILIAN_PORTUGUESE = 'pt-br';
 export const CHINESE_SIMPLIFIED = 'zh-Hans';
 export const PSEUDO_LOCALE = 'pseudo-LOCALE';
 
@@ -50,6 +51,12 @@ export const LANGUAGES: LanguageDefinitions[] = [
     name: '中文（简体）',
     loader: () => import('../../../locales/zh-Hans/grafana.json'),
   },
+
+  {
+    code: BRAZILIAN_PORTUGUESE,
+    name: 'Português Brasileiro',
+    loader: () => import('../../../locales/pt-BR/grafana.json'),
+  },
 ];
 
 if (process.env.NODE_ENV === 'development') {