Internationalization: Add language preference analytics (#59230)

* Report change languange

* clean defaults.ini

* Add language to rudderstand user identify call

* undo changes not intended

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

@@ -102,6 +102,7 @@ jest.mock('app/core/services/PreferencesService', () => ({
 
 const props = {
   resourceUri: '/fake-api/user/1',
+  preferenceType: 'user' as const,
 };
 
 describe('SharedPreferences', () => {

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

@@ -3,7 +3,7 @@ import React, { PureComponent } from 'react';
 
 import { FeatureState, SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { config } from '@grafana/runtime';
+import { config, reportInteraction } from '@grafana/runtime';
 import {
   Button,
   Field,
@@ -26,17 +26,12 @@ import { UserPreferencesDTO } from 'app/types';
 export interface Props {
   resourceUri: string;
   disabled?: boolean;
+  preferenceType: 'org' | 'team' | 'user';
   onConfirm?: () => Promise<boolean>;
 }
 
 export type State = UserPreferencesDTO;
 
-const themes: SelectableValue[] = [
-  { value: '', label: t('shared-preferences.theme.default-label', 'Default') },
-  { value: 'dark', label: t('shared-preferences.theme.dark-label', 'Dark') },
-  { value: 'light', label: t('shared-preferences.theme.light-label', 'Light') },
-];
-
 function getLanguageOptions(): Array<SelectableValue<string>> {
   const languageOptions = LANGUAGES.map((v) => ({
     value: v.code,
@@ -58,6 +53,7 @@ const i18nFlag = Boolean(config.featureToggles.internationalization);
 
 export class SharedPreferences extends PureComponent<Props, State> {
   service: PreferencesService;
+  themeOptions: SelectableValue[];
 
   constructor(props: Props) {
     super(props);
@@ -70,6 +66,12 @@ export class SharedPreferences extends PureComponent<Props, State> {
       language: '',
       queryHistory: { homeTab: '' },
     };
+
+    this.themeOptions = [
+      { value: '', label: t('shared-preferences.theme.default-label', 'Default') },
+      { value: 'dark', label: t('shared-preferences.theme.dark-label', 'Dark') },
+      { value: 'light', label: t('shared-preferences.theme.light-label', 'Light') },
+    ];
   }
 
   async componentDidMount() {
@@ -116,6 +118,11 @@ export class SharedPreferences extends PureComponent<Props, State> {
 
   onLanguageChanged = (language: string) => {
     this.setState({ language });
+
+    reportInteraction('grafana_preferences_language_changed', {
+      toLanguage: language,
+      preferenceType: this.props.preferenceType,
+    });
   };
 
   render() {
@@ -131,8 +138,8 @@ export class SharedPreferences extends PureComponent<Props, State> {
             <FieldSet label={<Trans i18nKey="shared-preferences.title">Preferences</Trans>} disabled={disabled}>
               <Field label={t('shared-preferences.fields.theme-label', 'UI Theme')}>
                 <RadioButtonGroup
-                  options={themes}
-                  value={themes.find((item) => item.value === theme)?.value}
+                  options={this.themeOptions}
+                  value={this.themeOptions.find((item) => item.value === theme)?.value}
                   onChange={this.onThemeChanged}
                 />
               </Field>

public/app/core/services/echo/backends/analytics/RudderstackBackend.ts

@@ -75,6 +75,7 @@ export class RudderstackBackend implements EchoBackend<PageviewEchoEvent, Rudder
       window.rudderanalytics?.identify?.(identifier, {
         email: options.user.email,
         orgId: options.user.orgId,
+        language: options.user.language,
       });
     }
   }

public/app/features/org/OrgDetailsPage.tsx

@@ -61,7 +61,12 @@ export class OrgDetailsPage extends PureComponent<Props> {
             <VerticalGroup spacing="lg">
               {canReadOrg && <OrgProfile onSubmit={this.onUpdateOrganization} orgName={organization.name} />}
               {canReadPreferences && (
-                <SharedPreferences resourceUri="org" disabled={!canWritePreferences} onConfirm={this.handleConfirm} />
+                <SharedPreferences
+                  resourceUri="org"
+                  disabled={!canWritePreferences}
+                  preferenceType="org"
+                  onConfirm={this.handleConfirm}
+                />
               )}
             </VerticalGroup>
           )}

public/app/features/profile/UserProfileEditPage.tsx

@@ -62,7 +62,7 @@ export function UserProfileEditPage({
       <Page.Contents isLoading={!user}>
         <VerticalGroup spacing="md">
           <UserProfileEditForm updateProfile={updateUserProfile} isSavingUser={isUpdating} user={user} />
-          <SharedPreferences resourceUri="user" />
+          <SharedPreferences resourceUri="user" preferenceType="user" />
           <UserTeams isLoading={teamsAreLoading} teams={teams} />
           <UserOrganizations isLoading={orgsAreLoading} setUserOrg={changeUserOrg} orgs={orgs} user={user} />
           <UserSessions isLoading={sessionsAreLoading} revokeUserSession={revokeUserSession} sessions={sessions} />

public/app/features/teams/TeamSettings.tsx

@@ -84,7 +84,7 @@ export const TeamSettings: FC<Props> = ({ team, updateTeam }) => {
           </FieldSet>
         )}
       </Form>
-      <SharedPreferences resourceUri={`teams/${team.id}`} disabled={!canWriteTeamSettings} />
+      <SharedPreferences resourceUri={`teams/${team.id}`} disabled={!canWriteTeamSettings} preferenceType="team" />
     </VerticalGroup>
   );
 };