From f989c47e633a938ab742f3ae3ff0ca0ac0560b8c Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Fri, 27 Sep 2024 15:39:33 +0200 Subject: [PATCH] feat: add translation to editor toolbar Signed-off-by: Camila Belo --- .changeset/poor-dodos-wait.md | 5 +++ plugins/scaffolder/report-alpha.api.md | 10 +++++ .../TemplateEditorToolbar.tsx | 44 +++++++++++++------ plugins/scaffolder/src/translation.ts | 19 ++++++++ 4 files changed, 64 insertions(+), 14 deletions(-) create mode 100644 .changeset/poor-dodos-wait.md diff --git a/.changeset/poor-dodos-wait.md b/.changeset/poor-dodos-wait.md new file mode 100644 index 0000000000..f1d0b4e941 --- /dev/null +++ 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 index 2a90efc0ba..4abaab2898 100644 --- a/plugins/scaffolder/report-alpha.api.md +++ b/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'; } >; diff --git a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbar.tsx b/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbar.tsx index a33915ae01..0d78bd675c 100644 --- a/plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateEditorToolbar.tsx +++ b/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" > - + - + - + - Publish changes + + {t('templateEditorToolbar.addToCatalogDialogTitle')} + - Follow the instructions below to create or update a template: + {t( + 'templateEditorToolbar.addToCatalogDialogContent.introduction', + )}
    -
  1. Save the template files in a local directory
  2. - Create a pull request to a new or existing git repository + {t('templateEditorToolbar.addToCatalogDialogContent.step1')}
  3. - If the template already exists, the changes will be reflected - in the software catalog once the pull request gets merged + {t('templateEditorToolbar.addToCatalogDialogContent.step2')}
  4. - But if you are creating a new template, follow this{' '} + {t('templateEditorToolbar.addToCatalogDialogContent.step3')} +
    5. +
  5. + {t('templateEditorToolbar.addToCatalogDialogContent.step4')} +
    - documentation - {' '} - to register the new template repository in software catalog + https://backstage.io/docs/features/software-templates/adding-templates/ +
diff --git a/plugins/scaffolder/src/translation.ts b/plugins/scaffolder/src/translation.ts index 11c13194ce..72fc76e497 100644 --- a/plugins/scaffolder/src/translation.ts +++ b/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', + }, + }, }, });