diff --git a/plugins/scaffolder/src/components/fields/RepoOwnerPicker/DefaultRepoOwnerPicker.tsx b/plugins/scaffolder/src/components/fields/RepoOwnerPicker/DefaultRepoOwnerPicker.tsx index e97574499c..48d7da8ba8 100644 --- a/plugins/scaffolder/src/components/fields/RepoOwnerPicker/DefaultRepoOwnerPicker.tsx +++ b/plugins/scaffolder/src/components/fields/RepoOwnerPicker/DefaultRepoOwnerPicker.tsx @@ -17,8 +17,10 @@ import FormControl from '@material-ui/core/FormControl'; import FormHelperText from '@material-ui/core/FormHelperText'; import TextField from '@material-ui/core/TextField'; +import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; import { BaseRepoOwnerPickerProps } from './types'; +import { scaffolderTranslationRef } from '../../../translation'; /** * The underlying component that is rendered in the form for the `DefaultRepoOwnerPicker` @@ -37,6 +39,8 @@ export const DefaultRepoOwnerPicker = ({ }: BaseRepoOwnerPickerProps) => { const { owner } = state; + const { t } = useTranslationRef(scaffolderTranslationRef); + return ( onChange({ owner: e.target.value })} value={owner} /> - {schema?.description ?? 'The owner of the repository'} + {schema?.description ?? t('fields.repoOwnerPicker.description')} ); diff --git a/plugins/scaffolder/src/components/fields/RepoOwnerPicker/GitHubRepoOwnerPicker.tsx b/plugins/scaffolder/src/components/fields/RepoOwnerPicker/GitHubRepoOwnerPicker.tsx index 38955bbba1..9258ef312d 100644 --- a/plugins/scaffolder/src/components/fields/RepoOwnerPicker/GitHubRepoOwnerPicker.tsx +++ b/plugins/scaffolder/src/components/fields/RepoOwnerPicker/GitHubRepoOwnerPicker.tsx @@ -22,7 +22,10 @@ import TextField from '@material-ui/core/TextField'; import Autocomplete from '@material-ui/lab/Autocomplete'; import { useCallback, useState } from 'react'; import useDebounce from 'react-use/esm/useDebounce'; +import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; + import { BaseRepoOwnerPickerProps } from './types'; +import { scaffolderTranslationRef } from '../../../translation'; /** * The underlying component that is rendered in the form for the `GitHubRepoOwnerPicker` @@ -49,6 +52,7 @@ export const GitHubRepoOwnerPicker = ({ const [availableOwners, setAvailableOwners] = useState([]); const scaffolderApi = useApi(scaffolderApiRef); + const { t } = useTranslationRef(scaffolderTranslationRef); const updateAvailableOwners = useCallback(() => { if (!scaffolderApi.autocomplete || !accessToken || !host) { @@ -93,7 +97,7 @@ export const GitHubRepoOwnerPicker = ({ renderInput={params => ( @@ -102,7 +106,7 @@ export const GitHubRepoOwnerPicker = ({ autoSelect /> - {schema?.description ?? 'The owner of the repository'} + {schema?.description ?? t('fields.repoOwnerPicker.description')} ); diff --git a/plugins/scaffolder/src/components/fields/RepoOwnerPicker/RepoOwnerPicker.test.tsx b/plugins/scaffolder/src/components/fields/RepoOwnerPicker/RepoOwnerPicker.test.tsx index 5b5ef1a869..3c02e82f6c 100644 --- a/plugins/scaffolder/src/components/fields/RepoOwnerPicker/RepoOwnerPicker.test.tsx +++ b/plugins/scaffolder/src/components/fields/RepoOwnerPicker/RepoOwnerPicker.test.tsx @@ -50,7 +50,7 @@ describe('RepoOwnerPicker', () => { it('should render the repo owner picker with minimal props', async () => { const onSubmit = jest.fn(); - const { getByRole } = await renderInTestApp( + const { getByRole, getByText } = await renderInTestApp( { }), expect.anything(), ); + + expect(getByText('Owner')).toBeInTheDocument(); + expect(getByText('The owner of the repository')).toBeInTheDocument(); }); it('should disable the picker when ui:disabled', async () => { diff --git a/plugins/scaffolder/src/translation.ts b/plugins/scaffolder/src/translation.ts index 78ca15e2ff..efe61d5209 100644 --- a/plugins/scaffolder/src/translation.ts +++ b/plugins/scaffolder/src/translation.ts @@ -137,6 +137,10 @@ export const scaffolderTranslationRef = createTranslationRef({ description: 'The name of the repository', }, }, + repoOwnerPicker: { + title: 'Owner', + description: 'The owner of the repository', + }, }, listTaskPage: { title: 'List template tasks',