feat: use translations for RepoOwnerPicker title and description fallback

Signed-off-by: Benjamin Janssens <benji.janssens@gmail.com>

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 (
     <FormControl
       margin="normal"
@@ -45,13 +49,13 @@ export const DefaultRepoOwnerPicker = ({
     >
       <TextField
         id="ownerInput"
-        label={schema?.title ?? 'Owner'}
+        label={schema?.title ?? t('fields.repoOwnerPicker.title')}
         disabled={isDisabled}
         onChange={e => onChange({ owner: e.target.value })}
         value={owner}
       />
       <FormHelperText>
-        {schema?.description ?? 'The owner of the repository'}
+        {schema?.description ?? t('fields.repoOwnerPicker.description')}
       </FormHelperText>
     </FormControl>
   );

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<string[]>([]);
 
   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 => (
           <TextField
             {...params}
-            label={schema?.title ?? 'Owner'}
+            label={schema?.title ?? t('fields.repoOwnerPicker.title')}
             disabled={isDisabled}
             required={required}
           />
@@ -102,7 +106,7 @@ export const GitHubRepoOwnerPicker = ({
         autoSelect
       />
       <FormHelperText>
-        {schema?.description ?? 'The owner of the repository'}
+        {schema?.description ?? t('fields.repoOwnerPicker.description')}
       </FormHelperText>
     </FormControl>
   );

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(
         <TestApiProvider
           apis={[
             [scmIntegrationsApiRef, mockIntegrationsApi],
@@ -88,6 +88,9 @@ describe('RepoOwnerPicker', () => {
         }),
         expect.anything(),
       );
+
+      expect(getByText('Owner')).toBeInTheDocument();
+      expect(getByText('The owner of the repository')).toBeInTheDocument();
     });
 
     it('should disable the picker when ui:disabled', async () => {

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',