feat: add translation to editor toolbar

Signed-off-by: Camila Belo <camilaibs@gmail.com>

.changeset/poor-dodos-wait.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Add translation to the editor toolbar component.

plugins/scaffolder/report-alpha.api.md

@@ -321,6 +321,16 @@ export const scaffolderTranslationRef: TranslationRef<
     readonly 'templateWizardPage.subtitle': 'Create new software components using standard templates in your organization';
     readonly 'templateWizardPage.pageTitle': 'Create a new component';
     readonly 'templateWizardPage.pageContextMenu.editConfigurationTitle': 'Edit Configuration';
+    readonly 'templateEditorToolbar.customFieldExplorerTooltip': 'Custom Fields Explorer';
+    readonly 'templateEditorToolbar.installedActionsDocumentationTooltip': 'Installed Actions Documentation';
+    readonly 'templateEditorToolbar.addToCatalogButton': 'Publish';
+    readonly 'templateEditorToolbar.addToCatalogDialogTitle': 'Publish changes';
+    readonly 'templateEditorToolbar.addToCatalogDialogContent.introduction': 'Follow the instructions below to create or update a template:';
+    readonly 'templateEditorToolbar.addToCatalogDialogContent.step1': 'Save the template files in a local directory';
+    readonly 'templateEditorToolbar.addToCatalogDialogContent.step2': 'Create a pull request to a new or existing git repository';
+    readonly 'templateEditorToolbar.addToCatalogDialogContent.step3': 'If the template already exists, the changes will be reflected in the software catalog once the pull request gets merged';
+    readonly 'templateEditorToolbar.addToCatalogDialogContent.step4': 'But if you are creating a new template, follow the documentation linked below to register the new template repository in software catalog';
+    readonly 'templateEditorToolbar.addToCatalogDialogActions.closeButton': 'Close';
   }
 >;
 

plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbar.tsx

@@ -36,6 +36,8 @@ import { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';
 
 import { ActionPageContent } from '../../../components/ActionsPage/ActionsPage';
 import { CustomFieldPlaygroud } from './CustomFieldPlaygroud';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { scaffolderTranslationRef } from '../../../translation';
 
 const useStyles = makeStyles(
   theme => ({
@@ -73,6 +75,7 @@ export function TemplateEditorToolbar(props: {
 }) {
   const { children, fieldExtensions } = props;
   const classes = useStyles();
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   const [showFieldsDrawer, setShowFieldsDrawer] = useState(false);
   const [showActionsDrawer, setShowActionsDrawer] = useState(false);
   const [showPublishModal, setShowPublishModal] = useState(false);
@@ -86,17 +89,25 @@ export function TemplateEditorToolbar(props: {
           variant="outlined"
           color="primary"
         >
-          <Tooltip title="Custom Fields Explorer">
+          <Tooltip
+            title={t('templateEditorToolbar.customFieldExplorerTooltip')}
+          >
             <Button onClick={() => setShowFieldsDrawer(true)}>
               <ExtensionIcon />
             </Button>
           </Tooltip>
-          <Tooltip title="Installed Actions Documentation">
+          <Tooltip
+            title={t(
+              'templateEditorToolbar.installedActionsDocumentationTooltip',
+            )}
+          >
             <Button onClick={() => setShowActionsDrawer(true)}>
               <DescriptionIcon />
             </Button>
           </Tooltip>
-          <Button onClick={() => setShowPublishModal(true)}>Publish</Button>
+          <Button onClick={() => setShowPublishModal(true)}>
+            {t('templateEditorToolbar.addToCatalogButton')}
+          </Button>
         </ButtonGroup>
         <Drawer
           classes={{ paper: classes.paper }}
@@ -120,32 +131,37 @@ export function TemplateEditorToolbar(props: {
           aria-labelledby="publish-dialog-title"
           aria-describedby="publish-dialog-description"
         >
-          <DialogTitle id="publish-dialog-title">Publish changes</DialogTitle>
+          <DialogTitle id="publish-dialog-title">
+            {t('templateEditorToolbar.addToCatalogDialogTitle')}
+          </DialogTitle>
           <DialogContent dividers>
             <DialogContentText id="publish-dialog-slide-description">
-              Follow the instructions below to create or update a template:
+              {t(
+                'templateEditorToolbar.addToCatalogDialogContent.introduction',
+              )}
               <ol>
-                <li>Save the template files in a local directory</li>
                 <li>
-                  Create a pull request to a new or existing git repository
+                  {t('templateEditorToolbar.addToCatalogDialogContent.step1')}
                 </li>
                 <li>
-                  If the template already exists, the changes will be reflected
-                  in the software catalog once the pull request gets merged
+                  {t('templateEditorToolbar.addToCatalogDialogContent.step2')}
                 </li>
                 <li>
-                  But if you are creating a new template, follow this{' '}
+                  {t('templateEditorToolbar.addToCatalogDialogContent.step3')}
+                </li>
+                <li>
+                  {t('templateEditorToolbar.addToCatalogDialogContent.step4')}
+                  <br />
                   <Link to="https://backstage.io/docs/features/software-templates/adding-templates/">
-                    documentation
-                  </Link>{' '}
-                  to register the new template repository in software catalog
+                    https://backstage.io/docs/features/software-templates/adding-templates/
+                  </Link>
                 </li>
               </ol>
             </DialogContentText>
           </DialogContent>
           <DialogActions>
             <Button color="primary" onClick={() => setShowPublishModal(false)}>
-              Close
+              {t('templateEditorToolbar.addToCatalogDialogActions.closeButton')}
             </Button>
           </DialogActions>
         </Dialog>

plugins/scaffolder/src/translation.ts

@@ -298,5 +298,24 @@ export const scaffolderTranslationRef = createTranslationRef({
         editConfigurationTitle: 'Edit Configuration',
       },
     },
+    templateEditorToolbar: {
+      customFieldExplorerTooltip: 'Custom Fields Explorer',
+      installedActionsDocumentationTooltip: 'Installed Actions Documentation',
+      addToCatalogButton: 'Publish',
+      addToCatalogDialogTitle: 'Publish changes',
+      addToCatalogDialogContent: {
+        introduction:
+          'Follow the instructions below to create or update a template:',
+        step1: 'Save the template files in a local directory',
+        step2: 'Create a pull request to a new or existing git repository',
+        step3:
+          'If the template already exists, the changes will be reflected in the software catalog once the pull request gets merged',
+        step4:
+          'But if you are creating a new template, follow the documentation linked below to register the new template repository in software catalog',
+      },
+      addToCatalogDialogActions: {
+        closeButton: 'Close',
+      },
+    },
   },
 });