Merge pull request backstage#26879 from backstage/scaffolder/editor-t…

…oolbar-translation [Scaffolder] Add translation to editor toolbar
teknokeras · Oct 2, 2024 · 41f8c8e · 41f8c8e
2 parents e918061 + 8f52640
commit 41f8c8e
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 25 deletions.
diff --git a/.changeset/poor-dodos-wait.md b/.changeset/poor-dodos-wait.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Add translation to the editor toolbar component.
diff --git a/plugins/scaffolder/report-alpha.api.md b/plugins/scaffolder/report-alpha.api.md
@@ -321,6 +321,14 @@ 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.stepsIntroduction': 'Follow the instructions below to create or update a template:';
+    readonly 'templateEditorToolbar.addToCatalogDialogContent.stepsListItems': 'Save the template files in a local directory\nCreate a pull request to a new or existing git repository\nIf the template already exists, the changes will be reflected in the software catalog once the pull request gets merged\nBut if you are creating a new template, follow the documentation linked below to register the new template repository in software catalog';
+    readonly 'templateEditorToolbar.addToCatalogDialogActions.documentationUrl': 'https://backstage.io/docs/features/software-templates/adding-templates/';
+    readonly 'templateEditorToolbar.addToCatalogDialogActions.documentationButton': 'Go to the documentation';
   }
 >;
 

diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbar.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbar.tsx
@@ -31,11 +31,12 @@ import DialogActions from '@material-ui/core/DialogActions';
 import ExtensionIcon from '@material-ui/icons/Extension';
 import DescriptionIcon from '@material-ui/icons/Description';
 
-import { Link } from '@backstage/core-components';
 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 +74,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 +88,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 +130,36 @@ 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:
-              <ol>
-                <li>Save the template files in a local directory</li>
-                <li>
-                  Create a pull request to a new or existing git repository
-                </li>
-                <li>
-                  If the template already exists, the changes will be reflected
-                  in the software catalog once the pull request gets merged
-                </li>
-                <li>
-                  But if you are creating a new template, follow this{' '}
-                  <Link to="https://backstage.io/docs/features/software-templates/adding-templates/">
-                    documentation
-                  </Link>{' '}
-                  to register the new template repository in software catalog
-                </li>
-              </ol>
+              {t(
+                'templateEditorToolbar.addToCatalogDialogContent.stepsIntroduction',
+              )}
+              <ul>
+                {t(
+                  'templateEditorToolbar.addToCatalogDialogContent.stepsListItems',
+                )
+                  .split('\n')
+                  .map((step, index) => (
+                    <li key={index}>{step}</li>
+                  ))}
+              </ul>
             </DialogContentText>
           </DialogContent>
           <DialogActions>
-            <Button color="primary" onClick={() => setShowPublishModal(false)}>
-              Close
+            <Button
+              color="primary"
+              href={t(
+                'templateEditorToolbar.addToCatalogDialogActions.documentationUrl',
+              )}
+              target="_blank"
+            >
+              {t(
+                'templateEditorToolbar.addToCatalogDialogActions.documentationButton',
+              )}
             </Button>
           </DialogActions>
         </Dialog>

diff --git a/plugins/scaffolder/src/translation.ts b/plugins/scaffolder/src/translation.ts
@@ -298,5 +298,22 @@ export const scaffolderTranslationRef = createTranslationRef({
         editConfigurationTitle: 'Edit Configuration',
       },
     },
+    templateEditorToolbar: {
+      customFieldExplorerTooltip: 'Custom Fields Explorer',
+      installedActionsDocumentationTooltip: 'Installed Actions Documentation',
+      addToCatalogButton: 'Publish',
+      addToCatalogDialogTitle: 'Publish changes',
+      addToCatalogDialogContent: {
+        stepsIntroduction:
+          'Follow the instructions below to create or update a template:',
+        stepsListItems:
+          'Save the template files in a local directory\nCreate a pull request to a new or existing git repository\nIf the template already exists, the changes will be reflected in the software catalog once the pull request gets merged\nBut if you are creating a new template, follow the documentation linked below to register the new template repository in software catalog',
+      },
+      addToCatalogDialogActions: {
+        documentationButton: 'Go to the documentation',
+        documentationUrl:
+          'https://backstage.io/docs/features/software-templates/adding-templates/',
+      },
+    },
   },
 });