apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues 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
pull/51296/head^2
Polina Boneva 4 years ago 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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 3
      .betterer.results
  2. 43
      public/app/core/components/SharedPreferences/SharedPreferences.test.tsx
  3. 74
      public/app/core/components/SharedPreferences/SharedPreferences.tsx
  4. 56
      public/app/features/org/OrgDetailsPage.test.tsx
  5. 52
      public/app/features/org/__snapshots__/OrgDetailsPage.test.tsx.snap
  6. 1
      public/app/types/preferences.ts
  7. 24
      public/locales/en/messages.po
  8. 24
      public/locales/es/messages.po
  9. 24
      public/locales/fr/messages.po
  10. 24
      public/locales/pseudo-LOCALE/messages.po

3
.betterer.results
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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 ""

Write Preview
Loading…
Cancel
Save