IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

I18n: User and Org Preferences allow change of Language (#51175)

Browse Source 
* add locale selection settings under preferences; Alpha feature toggle;

* extract components' ids for internationalisation references

* migrate OrgDetailsPage tests from Enzyme to RTL

* test locale selection in shared preferences

* fix OrgDetailsPage needing a fetch polyfill; "Real fetch shouldn't be being hit." - Josh

* remove snapshot

* remove snapshot
This commit is contained in:
Polina Boneva 2022-06-23 11:20:31 +03:00 committed by GitHub
parent 0b1a886b9d
commit 496c2e26f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 247 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.betterer.results
View File

@ -104,9 +104,6 @@ exports[`no enzyme tests`] = {
"public/app/features/folders/FolderSettingsPage.test.tsx:1109052730": [
[0, 19, 13, "RegExp match", "2409514259"]
],
"public/app/features/org/OrgDetailsPage.test.tsx:3835042085": [
[0, 19, 13, "RegExp match", "2409514259"]
],
"public/app/plugins/datasource/cloudwatch/components/ConfigEditor.test.tsx:227258837": [
[0, 19, 13, "RegExp match", "2409514259"]
],

43
public/app/core/components/SharedPreferences/SharedPreferences.test.tsx
View File

@ -9,6 +9,19 @@ import { UserPreferencesDTO } from 'app/types';
import SharedPreferences from './SharedPreferences';
jest.mock('@grafana/runtime', () => {
const originalModule = jest.requireActual('@grafana/runtime');
return {
...originalModule,
config: {
...originalModule.config,
featureToggles: {
internationalization: true,
},
},
};
});
jest.mock('app/core/services/backend_srv', () => {
return {
backendSrv: {
@ -58,6 +71,7 @@ const mockPreferences: UserPreferencesDTO = {
queryHistory: {
homeTab: '',
},
locale: '',
};
const mockPrefsPatch = jest.fn();
@ -126,6 +140,11 @@ describe('SharedPreferences', () => {
expect(weekSelect).toHaveTextContent('Monday');
});
it('renders the locale preference', async () => {
const weekSelect = getSelectParent(screen.getByLabelText(/language/i));
expect(weekSelect).toHaveTextContent('Default');
});
it("saves the user's new preferences", async () => {
const darkThemeRadio = assertInstanceOf(screen.getByLabelText('Dark'), HTMLInputElement);
await userEvent.click(darkThemeRadio);
@ -133,6 +152,7 @@ describe('SharedPreferences', () => {
await selectOptionInTest(screen.getByLabelText('Home Dashboard'), 'Another Dashboard');
await selectOptionInTest(screen.getByLabelText('Timezone'), 'Australia/Sydney');
await selectOptionInTest(screen.getByLabelText('Week start'), 'Saturday');
await selectOptionInTest(screen.getByLabelText(/language/i), 'French');
await userEvent.click(screen.getByText('Save'));
expect(mockPrefsUpdate).toHaveBeenCalledWith({
@ -143,6 +163,29 @@ describe('SharedPreferences', () => {
queryHistory: {
homeTab: '',
},
locale: 'fr',
});
});
it("saves the user's default preferences", async () => {
const defThemeRadio = assertInstanceOf(screen.getByLabelText('Default'), HTMLInputElement);
await userEvent.click(defThemeRadio);
await selectOptionInTest(screen.getByLabelText('Home Dashboard'), 'Default');
await selectOptionInTest(screen.getByLabelText('Timezone'), 'Default');
await selectOptionInTest(screen.getByLabelText('Week start'), 'Default');
await selectOptionInTest(screen.getByLabelText(/language/i), 'Default');
await userEvent.click(screen.getByText('Save'));
expect(mockPrefsUpdate).toHaveBeenCalledWith({
timezone: 'browser',
weekStart: '',
theme: '',
homeDashboardId: 0,
queryHistory: {
homeTab: '',
},
locale: '',
});
});

74
public/app/core/components/SharedPreferences/SharedPreferences.tsx
View File

@ -2,8 +2,9 @@ import { css } from '@emotion/css';
import { t, Trans } from '@lingui/macro';
import React, { PureComponent } from 'react';
import { SelectableValue } from '@grafana/data';
import { FeatureState, SelectableValue } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { config } from '@grafana/runtime';
import {
Button,
Field,
@ -17,6 +18,7 @@ import {
TimeZonePicker,
Tooltip,
WeekStartPicker,
FeatureBadge,
} from '@grafana/ui';
import { PreferencesService } from 'app/core/services/PreferencesService';
import { backendSrv } from 'app/core/services/backend_srv';
@ -39,6 +41,39 @@ const themes: SelectableValue[] = [
{ value: 'light', label: t({ id: 'shared-preferences.theme.light-label', message: 'Light' }) },
];
const languages: Array<SelectableValue<string>> = [
{
value: '',
label: t({
id: 'common.locale.default',
message: 'Default',
}),
},
{
value: 'en',
label: t({
id: 'common.locale.en',
message: 'English',
}),
},
{
value: 'es',
label: t({
id: 'common.locale.es',
message: 'Spanish',
}),
},
{
value: 'fr',
label: t({
id: 'common.locale.fr',
message: 'French',
}),
},
];
const i18nFlag = Boolean(config.featureToggles.internationalization);
export class SharedPreferences extends PureComponent<Props, State> {
service: PreferencesService;
@ -51,6 +86,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
theme: '',
timezone: '',
weekStart: '',
locale: '',
dashboards: [],
queryHistory: { homeTab: '' },
};
@ -88,14 +124,15 @@ export class SharedPreferences extends PureComponent<Props, State> {
theme: prefs.theme,
timezone: prefs.timezone,
weekStart: prefs.weekStart,
locale: prefs.locale,
dashboards: [defaultDashboardHit, ...dashboards],
queryHistory: prefs.queryHistory,
});
}
onSubmitForm = async () => {
const { homeDashboardId, theme, timezone, weekStart, queryHistory } = this.state;
await this.service.update({ homeDashboardId, theme, timezone, weekStart, queryHistory });
const { homeDashboardId, theme, timezone, weekStart, locale, queryHistory } = this.state;
await this.service.update({ homeDashboardId, theme, timezone, weekStart, locale, queryHistory });
window.location.reload();
};
@ -118,6 +155,10 @@ export class SharedPreferences extends PureComponent<Props, State> {
this.setState({ homeDashboardId: dashboardId });
};
onLocaleChanged = (locale: string) => {
this.setState({ locale });
};
getFullDashName = (dashboard: SelectableValue<DashboardSearchHit>) => {
if (typeof dashboard.folderTitle === 'undefined' || dashboard.folderTitle === '') {
return dashboard.title;
@ -126,7 +167,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
};
render() {
const { theme, timezone, weekStart, homeDashboardId, dashboards } = this.state;
const { theme, timezone, weekStart, homeDashboardId, locale, dashboards } = this.state;
const { disabled } = this.props;
const styles = getStyles();
@ -206,6 +247,31 @@ export class SharedPreferences extends PureComponent<Props, State> {
/>
</Field>
{i18nFlag ? (
<Field
label={
<Label htmlFor="locale-select">
<span className={styles.labelText}>
<Trans id="shared-preferences.fields.locale-label">Language</Trans>
</span>
<FeatureBadge featureState={FeatureState.alpha} />
</Label>
}
data-testid="User preferences language drop down"
>
<Select
value={languages.find((lang) => lang.value === locale)}
onChange={(locale: SelectableValue<string>) => this.onLocaleChanged(locale.value ?? '')}
options={languages}
placeholder={t({
id: 'shared-preferences.fields.locale-placeholder',
message: 'Choose language',
})}
inputId="locale-select"
/>
</Field>
) : null}
<div className="gf-form-button-row">
<Button
type="submit"

56
public/app/features/org/OrgDetailsPage.test.tsx
View File

@ -1,9 +1,10 @@
import { shallow } from 'enzyme';
import { render } from '@testing-library/react';
import React from 'react';
import { mockToolkitActionCreator } from 'test/core/redux/mocks';
import { NavModel } from '@grafana/data';
import { backendSrv } from '../../core/services/backend_srv';
import { Organization } from '../../types';
import { OrgDetailsPage, Props } from './OrgDetailsPage';
@ -17,7 +18,26 @@ jest.mock('app/core/core', () => {
};
});
jest.mock('@grafana/runtime', () => {
const originalModule = jest.requireActual('@grafana/runtime');
return {
...originalModule,
config: {
...originalModule.config,
featureToggles: {
internationalization: true,
},
},
};
});
const setup = (propOverrides?: object) => {
jest.clearAllMocks();
// needed because SharedPreferences is rendered in the test
jest.spyOn(backendSrv, 'put');
jest.spyOn(backendSrv, 'get').mockResolvedValue({ timezone: 'UTC', homeDashboardId: 0, theme: 'dark' });
jest.spyOn(backendSrv, 'search').mockResolvedValue([]);
const props: Props = {
organization: {} as Organization,
navModel: {
@ -32,32 +52,30 @@ const setup = (propOverrides?: object) => {
setOrganizationName: mockToolkitActionCreator(setOrganizationName),
updateOrganization: jest.fn(),
};
Object.assign(props, propOverrides);
return shallow(<OrgDetailsPage {...props} />);
render(<OrgDetailsPage {...props} />);
};
describe('Render', () => {
it('should render component', () => {
const wrapper = setup();
expect(wrapper).toMatchSnapshot();
expect(() => setup()).not.toThrow();
});
it('should render organization and preferences', () => {
const wrapper = setup({
organization: {
name: 'Cool org',
id: 1,
},
preferences: {
homeDashboardId: 1,
theme: 'Default',
timezone: 'Default',
},
});
expect(wrapper).toMatchSnapshot();
expect(() =>
setup({
organization: {
name: 'Cool org',
id: 1,
},
preferences: {
homeDashboardId: 1,
theme: 'Default',
timezone: 'Default',
locale: '',
},
})
).not.toThrow();
});
});

52
public/app/features/org/__snapshots__/OrgDetailsPage.test.tsx.snap
View File

@ -1,52 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Render should render component 1`] = `
<Page
navModel={
Object {
"main": Object {
"text": "Configuration",
},
"node": Object {
"text": "Org details",
},
}
}
>
<PageContents
isLoading={true}
/>
</Page>
`;
exports[`Render should render organization and preferences 1`] = `
<Page
navModel={
Object {
"main": Object {
"text": "Configuration",
},
"node": Object {
"text": "Org details",
},
}
}
>
<PageContents
isLoading={false}
>
<VerticalGroup
spacing="lg"
>
<OrgProfile
onSubmit={[Function]}
orgName="Cool org"
/>
<SharedPreferences
disabled={false}
resourceUri="org"
/>
</VerticalGroup>
</PageContents>
</Page>
`;

1
public/app/types/preferences.ts
View File

@ -3,6 +3,7 @@ import { TimeZone } from '@grafana/data';
export interface UserPreferencesDTO {
timezone: TimeZone;
weekStart: string;
locale: string;
homeDashboardId: number;
theme: string;
queryHistory: {

24
public/locales/en/messages.po
View File

@ -13,6 +13,22 @@ msgstr ""
"Language-Team: \n"
"Plural-Forms: \n"
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "common.locale.default"
msgstr "Default"
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "common.locale.en"
msgstr "English"
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "common.locale.es"
msgstr "Spanish"
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "common.locale.fr"
msgstr "French"
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
#: public/app/features/profile/UserProfileEditForm.tsx
msgid "common.save"
@ -198,6 +214,14 @@ msgstr "Choose default dashboard"
msgid "shared-preferences.fields.home-dashboard-tooltip"
msgstr "Not finding the dashboard you want? Star it first, then it should appear in this select box."
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "shared-preferences.fields.locale-label"
msgstr "Language"
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "shared-preferences.fields.locale-placeholder"
msgstr "Choose language"
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "shared-preferences.fields.theme-label"
msgstr "UI Theme"

24
public/locales/es/messages.po
View File

@ -13,6 +13,22 @@ msgstr ""
"Language-Team: \n"
"Plural-Forms: \n"
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "common.locale.default"
msgstr ""
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "common.locale.en"
msgstr ""
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "common.locale.es"
msgstr ""
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "common.locale.fr"
msgstr ""
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
#: public/app/features/profile/UserProfileEditForm.tsx
msgid "common.save"
@ -198,6 +214,14 @@ msgstr ""
msgid "shared-preferences.fields.home-dashboard-tooltip"
msgstr ""
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "shared-preferences.fields.locale-label"
msgstr ""
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "shared-preferences.fields.locale-placeholder"
msgstr ""
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "shared-preferences.fields.theme-label"
msgstr ""

24
public/locales/fr/messages.po
View File

@ -13,6 +13,22 @@ msgstr ""
"Language-Team: \n"
"Plural-Forms: \n"
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "common.locale.default"
msgstr ""
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "common.locale.en"
msgstr ""
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "common.locale.es"
msgstr ""
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "common.locale.fr"
msgstr ""
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
#: public/app/features/profile/UserProfileEditForm.tsx
msgid "common.save"
@ -198,6 +214,14 @@ msgstr ""
msgid "shared-preferences.fields.home-dashboard-tooltip"
msgstr ""
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "shared-preferences.fields.locale-label"
msgstr ""
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "shared-preferences.fields.locale-placeholder"
msgstr ""
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "shared-preferences.fields.theme-label"
msgstr ""

24
public/locales/pseudo-LOCALE/messages.po
View File

@ -13,6 +13,22 @@ msgstr ""
"Language-Team: \n"
"Plural-Forms: \n"
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "common.locale.default"
msgstr ""
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "common.locale.en"
msgstr ""
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "common.locale.es"
msgstr ""
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "common.locale.fr"
msgstr ""
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
#: public/app/features/profile/UserProfileEditForm.tsx
msgid "common.save"
@ -198,6 +214,14 @@ msgstr ""
msgid "shared-preferences.fields.home-dashboard-tooltip"
msgstr ""
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "shared-preferences.fields.locale-label"
msgstr ""
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "shared-preferences.fields.locale-placeholder"
msgstr ""
#: public/app/core/components/SharedPreferences/SharedPreferences.tsx
msgid "shared-preferences.fields.theme-label"
msgstr ""