Merge pull request #9966 from marmelab/fix-default-translation-key

Fix `<SimpleShowLayout>` uses a wrong translation key for field labels

packages/ra-core/src/core/SourceContext.tsx

@@ -30,15 +30,21 @@ export type SourceContextValue = {
  * );
  * };
  */
-export const SourceContext = createContext<SourceContextValue>({
+export const SourceContext = createContext<SourceContextValue | undefined>(
+ undefined
+);
+
+const defaultContextValue = {
  getSource: (source: string) => source,
  getLabel: (source: string) => source,
-});
-
+};
 export const SourceContextProvider = SourceContext.Provider;
 
 export const useSourceContext = () => {
  const context = useContext(SourceContext);
+ if (!context) {
+ return defaultContextValue;
+ }
  return context;
 };
 

packages/ra-core/src/i18n/useTranslateLabel.spec.tsx

@@ -1,177 +1,95 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { useTranslateLabel } from './useTranslateLabel';
-import { TestTranslationProvider } from './TestTranslationProvider';
-import { SourceContextProvider } from '..';
+
+import {
+ Basic,
+ I18nLabelAsKey,
+ I18nNoTranslation,
+ I18nTranslation,
+ InSourceContext,
+ InSourceContextI18nKey,
+ InSourceContextNoTranslation,
+ InSourceContextWithResource,
+ LabelElement,
+ LabelEmpty,
+ LabelFalse,
+ LabelText,
+ Resource,
+ Source,
+} from './useTranslateLabel.stories';
 
 describe('useTranslateLabel', () => {
- const TranslateLabel = ({
- source,
- label,
- resource,
- }: {
- source?: string;
- label?: string | false | React.ReactElement;
- resource?: string;
- }) => {
- const translateLabel = useTranslateLabel();
- return (
- <>
- {translateLabel({
- label,
- source,
- resource,
- })}
- </>
- );
- };
+ it('should compose a translation key from the resource and source', () => {
+ render(<Basic />);
+ screen.getByText('resources.posts.fields.title');
+ });
+
+ it('should use the resource in the translation key', () => {
+ render(<Resource />);
+ screen.getByText('resources.comments.fields.title');
+ });
+
+ it('should use the source in the translation key', () => {
+ render(<Source />);
+ screen.getByText('resources.posts.fields.date');
+ });
 
  it('should return null when label is false', () => {
- render(
- <TestTranslationProvider>
- <TranslateLabel label={false} source="title" resource="posts" />
- </TestTranslationProvider>
- );
+ render(<LabelFalse />);
  expect(screen.queryByText(/title/)).toBeNull();
  });
 
  it('should return null when label is empty', () => {
- render(
- <TestTranslationProvider>
- <TranslateLabel label="" source="title" resource="posts" />
- </TestTranslationProvider>
- );
+ render(<LabelEmpty />);
  expect(screen.queryByText(/title/)).toBeNull();
  });
 
  it('should return the label element when provided', () => {
- render(
- <TestTranslationProvider>
- <TranslateLabel
- label={<span>My title</span>}
- source="title"
- resource="posts"
- />
- </TestTranslationProvider>
- );
+ render(<LabelElement />);
  screen.getByText('My title');
  });
 
  it('should return the label text when provided', () => {
- render(
- <TestTranslationProvider messages={{}}>
- <TranslateLabel
- label="My title"
- source="title"
- resource="posts"
- />
- </TestTranslationProvider>
- );
+ render(<LabelText />);
  screen.getByText('My title');
  });
 
- it('should return the translated label text when provided', () => {
- render(
- <TestTranslationProvider
- messages={{
- test: { title: 'My title' },
- }}
- >
- <TranslateLabel
- label="test.title"
- source="title"
- resource="posts"
- />
- </TestTranslationProvider>
- );
- screen.getByText('My title');
- });
+ describe('i18n', () => {
+ it('should use the source and resource to create a default translation key', () => {
+ render(<I18nTranslation />);
+ screen.getByText('My Title');
+ });
 
- it('should return the inferred label from source and resource when no label is provided', () => {
- render(
- <TestTranslationProvider messages={{}}>
- <TranslateLabel source="title" resource="posts" />
- </TestTranslationProvider>
- );
- screen.getByText('Title');
- });
+ it('should use the label as key when provided', () => {
+ render(<I18nLabelAsKey />);
+ screen.getByText('My title');
+ });
 
- it('should return the translated inferred label from source and resource when no label is provided', () => {
- render(
- <TestTranslationProvider
- messages={{
- resources: {
- posts: {
- fields: {
- title: 'My Title',
- },
- },
- },
- }}
- >
- <TranslateLabel source="title" resource="posts" />
- </TestTranslationProvider>
- );
- screen.getByText('My Title');
+ it('should infer a human readable default label when no translation is provided', () => {
+ render(<I18nNoTranslation />);
+ screen.getByText('Title');
+ });
  });
 
- it('should return the inferred label from SourceContext when no label is provided but a SourceContext is present', () => {
- render(
- <TestTranslationProvider messages={{}}>
- <SourceContextProvider
- value={{
- getSource: source => source,
- getLabel: source => `test.${source}`,
- }}
- >
- <TranslateLabel source="title" resource="posts" />
- </SourceContextProvider>
- </TestTranslationProvider>
- );
- screen.getByText('Title');
- });
+ describe('SourceContext', () => {
+ it('should call getLabel for the default label', () => {
+ render(<InSourceContext />);
+ screen.getByText('Label for title');
+ });
 
- it('should return the translated label from SourceContext when no label is provided but a SourceContext is present', () => {
- render(
- <TestTranslationProvider
- messages={{
- test: {
- title: 'Label for title',
- },
- }}
- >
- <SourceContextProvider
- value={{
- getSource: source => source,
- getLabel: source => `test.${source}`,
- }}
- >
- <TranslateLabel source="title" />
- </SourceContextProvider>
- </TestTranslationProvider>
- );
- screen.getByText('Label for title');
- });
+ it('should use the getLabel return as translation key', () => {
+ render(<InSourceContextI18nKey />);
+ screen.getByText('test.title');
+ });
+
+ it('should infer a human readable default label when no translation is provided', () => {
+ render(<InSourceContextNoTranslation />);
+ screen.getByText('Title');
+ });
 
- it('should return the inferred label when a resource prop is provided even when a SourceContext is present', () => {
- render(
- <TestTranslationProvider
- messages={{
- test: {
- title: 'Label for title',
- },
- }}
- >
- <SourceContextProvider
- value={{
- getSource: source => source,
- getLabel: source => `test.${source}`,
- }}
- >
- <TranslateLabel source="title" resource="posts" />
- </SourceContextProvider>
- </TestTranslationProvider>
- );
- screen.getByText('Title');
+ it('should infer a human readable default label when a resource is provided', () => {
+ render(<InSourceContextWithResource />);
+ screen.getByText('Title');
+ });
  });
 });