Skip to content

Commit

Permalink
Add i18n texts for BigCalendar and panel options
Browse files Browse the repository at this point in the history
  • Loading branch information
asimonok committed Oct 23, 2023
1 parent 172e917 commit 4b62d49
Show file tree
Hide file tree
Showing 12 changed files with 310 additions and 196 deletions.
5 changes: 5 additions & 0 deletions jest-setup.js
Original file line number Diff line number Diff line change
@@ -1,2 +1,7 @@
// Jest setup provided by Grafana scaffolding
import './.config/jest-setup';

/**
* Setup i18n
*/
import './src/i18n';
12 changes: 9 additions & 3 deletions src/components/BigCalendar/BigCalendar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { Calendar, Event } from 'react-big-calendar';
import { Global } from '@emotion/react';
import { PanelProps } from '@grafana/data';
import { Alert, Drawer, useStyles2, useTheme2 } from '@grafana/ui';
import { useTranslation } from 'react-i18next';
import { TestIds } from '../../constants';
import { useCalendarEvents, useCalendarRange, useLocalizer } from '../../hooks';
import { CalendarEvent, CalendarOptions, View } from '../../types';
Expand Down Expand Up @@ -37,6 +38,11 @@ export const BigCalendar: React.FC<Props> = ({ height, events, timeRange, onChan
const theme = useTheme2();
const styles = useStyles2(BigCalendarStyles);

/**
* Translation
*/
const { t } = useTranslation();

/**
* Localizer
*/
Expand Down Expand Up @@ -145,16 +151,16 @@ export const BigCalendar: React.FC<Props> = ({ height, events, timeRange, onChan

if (!isViewExist) {
return (
<Alert title="No Views" severity="info" data-testid={TestIds.bigCalendar.noViewsMessage}>
Please enable at least one view.
<Alert title={t('panel.noViewsTitle')} severity="info" data-testid={TestIds.bigCalendar.noViewsMessage}>
{t('panel.noViewsMessage')}
</Alert>
);
}

return (
<div data-testid={TestIds.bigCalendar.root}>
{activeEvent && (
<Drawer title="Event Details" onClose={() => setActiveEvent(null)}>
<Drawer title={t('eventDetailsDrawer.title')} onClose={() => setActiveEvent(null)}>
<EventDetails event={activeEvent} />
</Drawer>
)}
Expand Down
10 changes: 8 additions & 2 deletions src/components/EventDetails/EventDetails.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { useMemo } from 'react';
import { textUtil } from '@grafana/data';
import { Card, LinkButton, TagList, useStyles2 } from '@grafana/ui';
import { useTranslation } from 'react-i18next';
import { TestIds } from '../../constants';
import { Styles } from '../../styles';
import { CalendarEvent } from '../../types';
Expand All @@ -27,11 +28,16 @@ export const EventDetails: React.FC<Props> = ({ event, showFullInfo = true, onCl
*/
const styles = useStyles2(Styles);

/**
* Translation
*/
const { t } = useTranslation();

/**
* Meta
*/
const meta = useMemo(() => {
const location = event.location ? `Location: ${event.location}` : '';
const location = event.location ? t('eventDetailsDrawer.location', { location: event.location }) : '';

if (event.end) {
return [
Expand All @@ -45,7 +51,7 @@ export const EventDetails: React.FC<Props> = ({ event, showFullInfo = true, onCl
}

return [`${event.start.format('LLL')}`, location];
}, [event.end, event.location, event.start]);
}, [event.end, event.location, event.start, t]);

/**
* Tags
Expand Down
1 change: 0 additions & 1 deletion src/constants/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
export * from './default';
export * from './messages';
export * from './options';
export * from './tests';
70 changes: 0 additions & 70 deletions src/constants/messages.ts

This file was deleted.

57 changes: 29 additions & 28 deletions src/constants/options.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { SelectableValue } from '@grafana/data';
import { TFunction } from 'i18next';
import { CalendarType, View } from '../types';

/**
Expand All @@ -21,67 +22,67 @@ export enum AnnotationsType {
/**
* Links Options
*/
export const LinksOptions = [
{ value: true, label: 'Open Link' },
{ value: false, label: 'Show Details' },
export const LinksOptions = (t: TFunction) => [
{ value: true, label: t('panelOptions.quickLinks.options.enabled') },
{ value: false, label: t('panelOptions.quickLinks.options.disabled') },
];

/**
* Scroll Options
*/
export const ScrollOptions = [
{ value: true, label: 'Auto' },
{ value: false, label: 'Disabled' },
export const ScrollOptions = (t: TFunction) => [
{ value: true, label: t('panelOptions.autoScroll.options.enabled') },
{ value: false, label: t('panelOptions.autoScroll.options.disabled') },
];

/**
* Display Time Options
*/
export const DisplayTimeOptions = [
{ value: true, label: 'Enabled' },
{ value: false, label: 'Disabled' },
export const DisplayTimeOptions = (t: TFunction) => [
{ value: true, label: t('panelOptions.displayTime.options.enabled') },
{ value: false, label: t('panelOptions.displayTime.options.disabled') },
];

/**
* Color Options
*/
export const ColorsOptions = [
{ value: Colors.FRAME, label: 'Frame' },
{ value: Colors.EVENT, label: 'Event' },
export const ColorsOptions = (t: TFunction) => [
{ value: Colors.FRAME, label: t('panelOptions.colors.options.frame') },
{ value: Colors.EVENT, label: t('panelOptions.colors.options.event') },
];

/**
* Calendar Type Options
*/
export const CalendarTypeOptions = [
{ value: CalendarType.LEGACY, label: 'Legacy' },
{ value: CalendarType.BIG_CALENDAR, label: 'Big Calendar' },
export const CalendarTypeOptions = (t: TFunction) => [
{ value: CalendarType.LEGACY, label: t('panelOptions.calendarType.options.legacy') },
{ value: CalendarType.BIG_CALENDAR, label: t('panelOptions.calendarType.options.bigCalendar') },
];

/**
* Annotations Options
*/
export const AnnotationsOptions = [
{ value: true, label: 'Enabled' },
{ value: false, label: 'Disabled' },
export const AnnotationsOptions = (t: TFunction) => [
{ value: true, label: t('panelOptions.annotations.annotations.options.enabled') },
{ value: false, label: t('panelOptions.annotations.annotations.options.disabled') },
];

/**
* Annotations Type Options
*/
export const AnnotationsTypeOptions = [
{ value: AnnotationsType.ALL, label: 'Any' },
{ value: AnnotationsType.ALERT, label: 'Alerts' },
{ value: AnnotationsType.ANNOTATION, label: 'Annotations' },
export const AnnotationsTypeOptions = (t: TFunction) => [
{ value: AnnotationsType.ALL, label: t('panelOptions.annotations.annotationsType.options.all') },
{ value: AnnotationsType.ALERT, label: t('panelOptions.annotations.annotationsType.options.alert') },
{ value: AnnotationsType.ANNOTATION, label: t('panelOptions.annotations.annotationsType.options.annotation') },
];

/**
* Calendar View Options
*/
export const CalendarViewOptions: Array<SelectableValue<View>> = [
{ value: View.DAY, label: 'Day' },
{ value: View.WEEK, label: 'Week' },
{ value: View.WORK_WEEK, label: 'Work Week' },
{ value: View.MONTH, label: 'Month' },
{ value: View.YEAR, label: 'Year' },
export const CalendarViewOptions = (t: TFunction): Array<SelectableValue<View>> => [
{ value: View.DAY, label: t('panelOptions.views.options.day') },
{ value: View.WEEK, label: t('panelOptions.views.options.week') },
{ value: View.WORK_WEEK, label: t('panelOptions.views.options.workWeek') },
{ value: View.MONTH, label: t('panelOptions.views.options.month') },
{ value: View.YEAR, label: t('panelOptions.views.options.year') },
];
54 changes: 16 additions & 38 deletions src/hooks/useLocalizer.test.ts
Original file line number Diff line number Diff line change
@@ -1,70 +1,48 @@
import dayjs from 'dayjs';
import { config } from '@grafana/runtime';
import { renderHook } from '@testing-library/react';
import { LanguageMessages } from '../constants';
import { t } from 'i18next';
import { getUserLanguage } from '../utils';
import { useLocalizer } from './useLocalizer';

/**
* Mock @grafana/runtime
* Mock utils
*/
jest.mock('@grafana/runtime', () => ({
config: {
bootData: {
user: {
language: 'en-US',
},
},
},
jest.mock('../utils', () => ({
...jest.requireActual('../utils'),
getUserLanguage: jest.fn(() => 'en'),
}));

describe('Use Localizer', () => {
it('Should set dayjs locale', () => {
config.bootData = {
user: {
language: 'fr-EN',
},
} as any;
jest.mocked(getUserLanguage).mockReturnValue('fr');
renderHook(() => useLocalizer());

expect(dayjs.locale()).toEqual('fr');
});

it('Should set dayjs locale', () => {
config.bootData = {
user: {},
} as any;
jest.mocked(getUserLanguage).mockReturnValue('en');
renderHook(() => useLocalizer());

expect(dayjs.locale()).toEqual('en');
});

it('Should set default dayjs locale', () => {
config.bootData = {
user: {
language: '123',
},
} as any;
jest.mocked(getUserLanguage).mockReturnValue('123' as any);
renderHook(() => useLocalizer());

expect(dayjs.locale()).toEqual('en');
});

['es-SP', 'fr-EN', 'de-GE', 'zh-CH'].forEach((locale) => {
it(`Should set messages for ${locale}`, () => {
config.bootData = {
user: {
language: locale,
},
} as any;
['es', 'fr', 'de', 'zh'].forEach((lang) => {
it(`Should set messages for ${lang}`, () => {
jest.mocked(getUserLanguage).mockReturnValue(lang as any);
const { result } = renderHook(() => useLocalizer());

const lang = locale.split('-')[0]
const expectedMessages = LanguageMessages[lang];
expect(result.current.messages).toEqual(expectedMessages)
if (result.current.messages.showMore && expectedMessages.showMore) {
expect(result.current.messages.showMore(10)).toEqual(expectedMessages.showMore(10))
expect(result.current.messages.noEventsInRange).toEqual(t('localizerMessages.noEventsInRange'));
if (result.current.messages.showMore) {
expect(result.current.messages.showMore(10)).toEqual(t('localizerMessages.showMore', { total: 10 }));
}
});
})

});
});
Loading

0 comments on commit 4b62d49

Please sign in to comment.