@@ -178,7 +181,11 @@ export const TaskStatusStepper = memo(
{step.name}
{isSkipped ? (
-
Skipped
+
+ {t(
+ 'templateEditorPage.taskStatusStepper.skippedStepTitle',
+ )}
+
) : (
)}
diff --git a/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorBrowser.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorBrowser.tsx
index 489ec05bbe..8bea86b074 100644
--- a/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorBrowser.tsx
+++ b/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorBrowser.tsx
@@ -23,6 +23,8 @@ import SaveIcon from '@material-ui/icons/Save';
import React from 'react';
import { useDirectoryEditor } from './DirectoryEditorContext';
import { FileBrowser } from '../../components/FileBrowser';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../translation';
const useStyles = makeStyles(theme => ({
button: {
@@ -47,6 +49,7 @@ export function TemplateEditorBrowser(props: { onClose?: () => void }) {
const classes = useStyles();
const directoryEditor = useDirectoryEditor();
const changedFiles = directoryEditor.files.filter(file => file.dirty);
+ const { t } = useTranslationRef(scaffolderTranslationRef);
const handleClose = () => {
if (!props.onClose) {
@@ -55,7 +58,7 @@ export function TemplateEditorBrowser(props: { onClose?: () => void }) {
if (changedFiles.length > 0) {
// eslint-disable-next-line no-alert
const accepted = window.confirm(
- 'Are you sure? Unsaved changes will be lost',
+ t('templateEditorPage.templateEditorBrowser.closeConfirmMessage'),
);
if (!accepted) {
return;
@@ -67,7 +70,9 @@ export function TemplateEditorBrowser(props: { onClose?: () => void }) {
return (
<>
-
+
!file.dirty)}
@@ -76,7 +81,11 @@ export function TemplateEditorBrowser(props: { onClose?: () => void }) {
-
+
directoryEditor.reload()}
@@ -85,7 +94,9 @@ export function TemplateEditorBrowser(props: { onClose?: () => void }) {
-
+
diff --git a/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorIntro.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorIntro.tsx
index 2a75c1bf2c..2318c90659 100644
--- a/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorIntro.tsx
+++ b/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorIntro.tsx
@@ -23,6 +23,8 @@ import Typography from '@material-ui/core/Typography';
import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
import { makeStyles } from '@material-ui/core/styles';
import { WebFileSystemAccess } from '../../lib/filesystem';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../translation';
const useStyles = makeStyles(theme => ({
introText: {
@@ -50,6 +52,7 @@ interface EditorIntroProps {
export function TemplateEditorIntro(props: EditorIntroProps) {
const classes = useStyles();
const supportsLoad = WebFileSystemAccess.isSupported();
+ const { t } = useTranslationRef(scaffolderTranslationRef);
const cardLoadLocal = (
@@ -65,14 +68,13 @@ export function TemplateEditorIntro(props: EditorIntroProps) {
color={supportsLoad ? undefined : 'textSecondary'}
style={{ display: 'flex', flexFlow: 'row nowrap' }}
>
- Load Template Directory
+ {t('templateEditorPage.templateEditorIntro.loadLocal.title')}
- Load a local template directory, allowing you to both edit and try
- executing your own template.
+ {t('templateEditorPage.templateEditorIntro.loadLocal.description')}
@@ -80,7 +82,9 @@ export function TemplateEditorIntro(props: EditorIntroProps) {
@@ -94,11 +98,10 @@ export function TemplateEditorIntro(props: EditorIntroProps) {
props.onSelect?.('form')}>
- Edit Template Form
+ {t('templateEditorPage.templateEditorIntro.formEditor.title')}
- Preview and edit a template form, either using a sample template or
- by loading a template from the catalog.
+ {t('templateEditorPage.templateEditorIntro.formEditor.description')}
@@ -110,11 +113,12 @@ export function TemplateEditorIntro(props: EditorIntroProps) {
props.onSelect?.('field-explorer')}>
- Custom Field Explorer
+ {t('templateEditorPage.templateEditorIntro.fieldExplorer.title')}
- View and play around with available installed custom field
- extensions.
+ {t(
+ 'templateEditorPage.templateEditorIntro.fieldExplorer.description',
+ )}
@@ -124,7 +128,7 @@ export function TemplateEditorIntro(props: EditorIntroProps) {
return (
- Get started by choosing one of the options below
+ {t('templateEditorPage.templateEditorIntro.title')}
diff --git a/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorTextArea.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorTextArea.tsx
index ce8db485ea..696b21d1df 100644
--- a/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorTextArea.tsx
+++ b/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorTextArea.tsx
@@ -27,6 +27,8 @@ import { useKeyboardEvent } from '@react-hookz/web';
import CodeMirror from '@uiw/react-codemirror';
import React, { useMemo } from 'react';
import { useDirectoryEditor } from './DirectoryEditorContext';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../translation';
const useStyles = makeStyles(theme => ({
container: {
@@ -66,6 +68,7 @@ export function TemplateEditorTextArea(props: {
}) {
const { errorText } = props;
const classes = useStyles();
+ const { t } = useTranslationRef(scaffolderTranslationRef);
const panelExtension = useMemo(() => {
if (!errorText) {
@@ -102,7 +105,11 @@ export function TemplateEditorTextArea(props: {
{props.onSave && (
-
+
props.onSave?.()}
@@ -112,7 +119,11 @@ export function TemplateEditorTextArea(props: {
)}
{props.onReload && (
-
+
props.onReload?.()}
diff --git a/plugins/scaffolder/src/next/TemplateEditorPage/TemplateFormPreviewer.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/TemplateFormPreviewer.tsx
index 7892adfb3f..07f2fd7f07 100644
--- a/plugins/scaffolder/src/next/TemplateEditorPage/TemplateFormPreviewer.tsx
+++ b/plugins/scaffolder/src/next/TemplateEditorPage/TemplateFormPreviewer.tsx
@@ -36,6 +36,8 @@ import {
} from '@backstage/plugin-scaffolder-react';
import { TemplateEditorForm } from './TemplateEditorForm';
import { TemplateEditorTextArea } from './TemplateEditorTextArea';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../translation';
const EXAMPLE_TEMPLATE_PARAMS_YAML = `# Edit the template parameters below to see how they will render in the scaffolder form UI
parameters:
@@ -119,6 +121,7 @@ export const TemplateFormPreviewer = ({
layouts?: LayoutOptions[];
}) => {
const classes = useStyles();
+ const { t } = useTranslationRef(scaffolderTranslationRef);
const alertApi = useApi(alertApiRef);
const catalogApi = useApi(catalogApiRef);
const [selectedTemplate, setSelectedTemplate] = useState('');
@@ -176,11 +179,11 @@ export const TemplateFormPreviewer = ({
- Load Existing Template
+ {t('templateEditorPage.templateFormPreviewer.title')}