diff --git a/.changeset/four-ties-raise.md b/.changeset/four-ties-raise.md
new file mode 100644
index 0000000000..163443afff
--- /dev/null
+++ b/.changeset/four-ties-raise.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder-react': minor
+---
+
+Add `ui:backstage.review.name` option for custom item names on scaffolder review page, and also add support for rendering the `title` property instead of the key name.
diff --git a/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.test.tsx b/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.test.tsx
index 69b651e672..a3fcecbe2b 100644
--- a/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.test.tsx
+++ b/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.test.tsx
@@ -434,4 +434,67 @@ describe('ReviewState', () => {
queryByRole('row', { name: 'Name > Example > Test type6' }),
).not.toBeInTheDocument();
});
+
+ it('should allow using the title property', async () => {
+ const formState = {
+ foo: 'test',
+ };
+
+ const schemas: ParsedTemplateSchema[] = [
+ {
+ mergedSchema: {
+ type: 'object',
+ properties: {
+ foo: {
+ type: 'string',
+ title: 'Test Thing',
+ },
+ },
+ },
+ schema: {},
+ title: 'test',
+ uiSchema: {},
+ },
+ ];
+
+ const { queryByRole } = render(
+ ,
+ );
+
+ expect(queryByRole('row', { name: 'Test Thing test' })).toBeInTheDocument();
+ });
+
+ it('should allow custom review name', async () => {
+ const formState = {
+ foo: 'test',
+ };
+
+ const schemas: ParsedTemplateSchema[] = [
+ {
+ mergedSchema: {
+ type: 'object',
+ properties: {
+ foo: {
+ type: 'string',
+ 'ui:backstage': {
+ review: {
+ name: 'bar',
+ },
+ },
+ },
+ },
+ },
+ schema: {},
+ title: 'test',
+ uiSchema: {},
+ },
+ ];
+
+ const { queryByRole } = render(
+ ,
+ );
+
+ expect(queryByRole('row', { name: 'Bar test' })).toBeInTheDocument();
+ expect(queryByRole('row', { name: 'Foo test' })).not.toBeInTheDocument();
+ });
});
diff --git a/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.tsx b/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.tsx
index fb6a592dce..7d2c6042dc 100644
--- a/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.tsx
+++ b/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.tsx
@@ -41,11 +41,16 @@ function processSchema(
data: formState,
});
+ const name =
+ definitionInSchema?.['ui:backstage']?.review?.name ??
+ definitionInSchema?.title ??
+ key;
+
if (definitionInSchema) {
const backstageReviewOptions = definitionInSchema['ui:backstage']?.review;
if (backstageReviewOptions) {
if (backstageReviewOptions.mask) {
- return [[key, backstageReviewOptions.mask]];
+ return [[name, backstageReviewOptions.mask]];
}
if (backstageReviewOptions.show === false) {
return [];
@@ -56,13 +61,13 @@ function processSchema(
definitionInSchema['ui:widget'] === 'password' ||
definitionInSchema['ui:field']?.toLocaleLowerCase('en-us') === 'secret'
) {
- return [[key, '******']];
+ return [[name, '******']];
}
if (definitionInSchema.enum && definitionInSchema.enumNames) {
return [
[
- key,
+ name,
definitionInSchema.enumNames[
definitionInSchema.enum.indexOf(value)
] || value,
@@ -78,7 +83,7 @@ function processSchema(
}
}
- return [[key, value]];
+ return [[name, value]];
}
/**