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 dfa1c9c097..194c5f3e77 100644
--- a/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.test.tsx
+++ b/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.test.tsx
@@ -69,6 +69,9 @@ describe('ReviewState', () => {
const formState = {
name: 'John Doe',
test: 'bob',
+ nest: {
+ foo: 'bar',
+ },
};
const schemas: ParsedTemplateSchema[] = [
@@ -85,6 +88,20 @@ describe('ReviewState', () => {
},
},
},
+ nest: {
+ type: 'object',
+ properties: {
+ foo: {
+ type: 'string',
+ 'ui:widget': 'password',
+ 'ui:backstage': {
+ review: {
+ show: false,
+ },
+ },
+ },
+ },
+ },
},
},
schema: {},
@@ -99,12 +116,16 @@ describe('ReviewState', () => {
);
expect(getAllByRole('row').length).toEqual(1);
expect(queryByRole('row', { name: 'Name ******' })).not.toBeInTheDocument();
+ expect(queryByRole('row', { name: 'Foo ******' })).not.toBeInTheDocument();
});
it('should allow for masking an option with a set text', () => {
const formState = {
name: 'John Doe',
test: 'bob',
+ nest: {
+ foo: 'bar',
+ },
};
const schemas: ParsedTemplateSchema[] = [
@@ -121,6 +142,20 @@ describe('ReviewState', () => {
},
},
},
+ nest: {
+ type: 'object',
+ properties: {
+ foo: {
+ type: 'string',
+ 'ui:widget': 'password',
+ 'ui:backstage': {
+ review: {
+ mask: 'lols',
+ },
+ },
+ },
+ },
+ },
},
},
schema: {},
@@ -135,11 +170,15 @@ describe('ReviewState', () => {
);
expect(getByRole('row', { name: 'Name lols' })).toBeInTheDocument();
+ expect(getByRole('row', { name: 'Foo lols' })).toBeInTheDocument();
});
it('should display enum label from enumNames', async () => {
const formState = {
name: 'type2',
+ nest: {
+ foo: 'type2',
+ },
};
const schemas: ParsedTemplateSchema[] = [
@@ -153,6 +192,17 @@ describe('ReviewState', () => {
enum: ['type1', 'type2', 'type3'],
enumNames: ['Label-type1', 'Label-type2', 'Label-type3'],
},
+ nest: {
+ type: 'object',
+ properties: {
+ foo: {
+ type: 'string',
+ default: 'type1',
+ enum: ['type1', 'type2', 'type3'],
+ enumNames: ['Label-type1', 'Label-type2', 'Label-type3'],
+ },
+ },
+ },
},
},
schema: {},
@@ -169,6 +219,7 @@ describe('ReviewState', () => {
expect(
queryByRole('row', { name: 'Name Label-type2' }),
).toBeInTheDocument();
+ expect(queryByRole('row', { name: 'Foo Label-type2' })).toBeInTheDocument();
});
it('should display enum value if no corresponding enumNames', async () => {
@@ -203,7 +254,7 @@ describe('ReviewState', () => {
expect(queryByRole('row', { name: 'Name type4' })).toBeInTheDocument();
});
- it('should display exploded object in separate rows', async () => {
+ it('should display object in separate rows', async () => {
const formState = {
name: {
foo: 'type3',
@@ -218,11 +269,6 @@ describe('ReviewState', () => {
properties: {
name: {
type: 'object',
- 'ui:backstage': {
- review: {
- explode: true,
- },
- },
properties: {
foo: {
type: 'string',
@@ -239,7 +285,6 @@ describe('ReviewState', () => {
schema: {},
title: 'test',
uiSchema: {},
- description: 'asd',
},
];
@@ -251,7 +296,7 @@ describe('ReviewState', () => {
expect(queryByRole('row', { name: 'Bar type4' })).toBeInTheDocument();
});
- it('should display exploded nested objects', async () => {
+ it('should display nested objects in separate rows', async () => {
const formState = {
name: {
foo: 'type3',
@@ -269,11 +314,60 @@ describe('ReviewState', () => {
properties: {
name: {
type: 'object',
- 'ui:backstage': {
- review: {
- explode: true,
+ properties: {
+ foo: {
+ type: 'string',
+ default: 'type1',
+ },
+ bar: {
+ type: 'string',
+ default: 'type2',
+ },
+ example: {
+ type: 'object',
+ properties: {
+ test: {
+ type: 'string',
+ },
+ },
},
},
+ },
+ },
+ },
+ schema: {},
+ title: 'test',
+ uiSchema: {},
+ },
+ ];
+
+ const { queryByRole } = render(
+ ,
+ );
+
+ expect(queryByRole('row', { name: 'Foo type3' })).toBeInTheDocument();
+ expect(queryByRole('row', { name: 'Bar type4' })).toBeInTheDocument();
+ expect(queryByRole('row', { name: 'Test type6' })).toBeInTheDocument();
+ });
+
+ it('should display partially nested objects', async () => {
+ const formState = {
+ name: {
+ foo: 'type3',
+ bar: 'type4',
+ example: {
+ test: 'type6',
+ },
+ },
+ };
+
+ const schemas: ParsedTemplateSchema[] = [
+ {
+ mergedSchema: {
+ type: 'object',
+ properties: {
+ name: {
+ type: 'object',
properties: {
foo: {
type: 'string',
@@ -287,7 +381,7 @@ describe('ReviewState', () => {
type: 'object',
'ui:backstage': {
review: {
- explode: true,
+ explode: false,
},
},
properties: {
@@ -303,67 +397,6 @@ describe('ReviewState', () => {
schema: {},
title: 'test',
uiSchema: {},
- description: 'asd',
- },
- ];
-
- const { queryByRole } = render(
- ,
- );
-
- expect(queryByRole('row', { name: 'Foo type3' })).toBeInTheDocument();
- expect(queryByRole('row', { name: 'Bar type4' })).toBeInTheDocument();
- expect(queryByRole('row', { name: 'Test type6' })).toBeInTheDocument();
- });
-
- it('should display partially exploded nested objects', async () => {
- const formState = {
- name: {
- foo: 'type3',
- bar: 'type4',
- example: {
- test: 'type6',
- },
- },
- };
-
- const schemas: ParsedTemplateSchema[] = [
- {
- mergedSchema: {
- type: 'object',
- properties: {
- name: {
- type: 'object',
- 'ui:backstage': {
- review: {
- explode: true,
- },
- },
- properties: {
- foo: {
- type: 'string',
- default: 'type1',
- },
- bar: {
- type: 'string',
- default: 'type2',
- },
- example: {
- type: 'object',
- properties: {
- test: {
- type: 'string',
- },
- },
- },
- },
- },
- },
- },
- schema: {},
- title: 'test',
- uiSchema: {},
- description: 'asd',
},
];
diff --git a/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.tsx b/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.tsx
index d320ad80a6..d87584afff 100644
--- a/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.tsx
+++ b/plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.tsx
@@ -15,10 +15,10 @@
*/
import React from 'react';
import { StructuredMetadataTable } from '@backstage/core-components';
-import { JsonObject } from '@backstage/types';
+import { JsonObject, JsonValue } from '@backstage/types';
import { Draft07 as JSONSchema } from 'json-schema-library';
import { ParsedTemplateSchema } from '../../hooks/useTemplateSchema';
-import { processEntry } from './util';
+import { isJsonObject, getLastKey } from './util';
/**
* The props for the {@link ReviewState} component.
@@ -29,6 +29,55 @@ export type ReviewStateProps = {
formState: JsonObject;
};
+function processSchema(
+ key: string,
+ value: JsonValue | undefined,
+ schema: ParsedTemplateSchema,
+ formState: JsonObject,
+): [string, JsonValue | undefined][] {
+ const parsedSchema = new JSONSchema(schema.mergedSchema);
+ const definitionInSchema = parsedSchema.getSchema({
+ pointer: `#/${key}`,
+ data: formState,
+ });
+
+ if (definitionInSchema) {
+ const backstageReviewOptions = definitionInSchema['ui:backstage']?.review;
+ if (backstageReviewOptions) {
+ if (backstageReviewOptions.mask) {
+ return [[getLastKey(key), backstageReviewOptions.mask]];
+ }
+ if (backstageReviewOptions.show === false) {
+ return [];
+ }
+ }
+
+ if (definitionInSchema['ui:widget'] === 'password') {
+ return [[getLastKey(key), '******']];
+ }
+
+ if (definitionInSchema.enum && definitionInSchema.enumNames) {
+ return [
+ [
+ getLastKey(key),
+ definitionInSchema.enumNames[
+ definitionInSchema.enum.indexOf(value)
+ ] || value,
+ ],
+ ];
+ }
+
+ if (backstageReviewOptions?.explode !== false && isJsonObject(value)) {
+ // Recurse nested objects
+ return Object.entries(value).flatMap(([nestedKey, nestedValue]) =>
+ processSchema(`${key}/${nestedKey}`, nestedValue, schema, formState),
+ );
+ }
+ }
+
+ return [[getLastKey(key), value]];
+}
+
/**
* The component used by the {@link Stepper} to render the review step.
* @alpha
@@ -38,7 +87,7 @@ export const ReviewState = (props: ReviewStateProps) => {
Object.entries(props.formState)
.flatMap(([key, value]) => {
for (const step of props.schemas) {
- return processEntry(key, value, step, props.formState);
+ return processSchema(key, value, step, props.formState);
}
return [[key, value]];
})
diff --git a/plugins/scaffolder-react/src/next/components/ReviewState/util.test.ts b/plugins/scaffolder-react/src/next/components/ReviewState/util.test.ts
index e2a10587dc..9b88ff157e 100644
--- a/plugins/scaffolder-react/src/next/components/ReviewState/util.test.ts
+++ b/plugins/scaffolder-react/src/next/components/ReviewState/util.test.ts
@@ -14,9 +14,7 @@
* limitations under the License.
*/
-import { flattenObject, isJsonObject } from './util';
-import { Draft07 as JSONSchema } from 'json-schema-library';
-import { ParsedTemplateSchema } from '../../hooks/useTemplateSchema';
+import { isJsonObject, getLastKey } from './util';
describe('isJsonObject', () => {
it('should return true for non-null objects', () => {
@@ -24,10 +22,6 @@ describe('isJsonObject', () => {
expect(isJsonObject({ key: 'value' })).toBe(true);
});
- it('should return false for null', () => {
- expect(isJsonObject(null)).toBe(false);
- });
-
it('should return false for arrays', () => {
expect(isJsonObject([])).toBe(false);
expect(isJsonObject([1, 2, 3])).toBe(false);
@@ -41,146 +35,40 @@ describe('isJsonObject', () => {
});
});
-describe('flattenObject', () => {
- it('should handle an empty object', () => {
- const schemas: ParsedTemplateSchema[] = [
- {
- mergedSchema: {
- type: 'object',
- properties: {
- name: {
- type: 'object',
- 'ui:backstage': {
- review: {
- explode: true,
- },
- },
- properties: {},
- },
- },
- },
- schema: {},
- title: 'test',
- uiSchema: {},
- },
- ];
-
- const parsedSchema = new JSONSchema(schemas[0].mergedSchema);
-
- const result = flattenObject({}, '', parsedSchema, {});
-
- expect(result).toEqual([]);
+describe('getLastKey', () => {
+ it('should return the last part of a simple key', () => {
+ expect(getLastKey('simple')).toBe('simple');
});
- it('should flatten a simple object', () => {
- const formState = {
- name: {
- foo: 'value1',
- bar: 'value2',
- },
- };
-
- const schemas: ParsedTemplateSchema[] = [
- {
- mergedSchema: {
- type: 'object',
- properties: {
- name: {
- type: 'object',
- 'ui:backstage': {
- review: {
- explode: true,
- },
- },
- properties: {
- foo: {
- type: 'string',
- },
- bar: {
- type: 'string',
- },
- },
- },
- },
- },
- schema: {},
- title: 'test',
- uiSchema: {},
- },
- ];
-
- const [key, value] = Object.entries(formState)[0];
- const parsedSchema = new JSONSchema(schemas[0].mergedSchema);
-
- const result = flattenObject(value, key, parsedSchema, formState);
-
- expect(result).toEqual([
- ['foo', 'value1'],
- ['bar', 'value2'],
- ]);
+ it('should return the last part of a nested key', () => {
+ expect(getLastKey('parent/child')).toBe('child');
});
- it('should recurse into a nested object', () => {
- const formState = {
- name: {
- foo: 'value1',
- bar: 'value2',
- example: {
- test: 'value3',
- },
- },
- };
- const schemas: ParsedTemplateSchema[] = [
- {
- mergedSchema: {
- type: 'object',
- properties: {
- name: {
- type: 'object',
- 'ui:backstage': {
- review: {
- explode: true,
- },
- },
- properties: {
- foo: {
- type: 'string',
- },
- bar: {
- type: 'string',
- },
- example: {
- type: 'object',
- 'ui:backstage': {
- review: {
- explode: true,
- },
- },
- properties: {
- test: {
- type: 'string',
- },
- },
- },
- },
- },
- },
- },
- schema: {},
- title: 'test',
- uiSchema: {},
- },
- ];
+ it('should return the last part of a deeply nested key', () => {
+ expect(getLastKey('grandparent/parent/child')).toBe('child');
+ });
- const [key, value] = Object.entries(formState)[0];
- const parsedSchema = new JSONSchema(schemas[0].mergedSchema);
+ it('should handle keys with trailing slash', () => {
+ expect(getLastKey('parent/child/')).toBe('');
+ });
- const result = flattenObject(value, key, parsedSchema, formState);
+ it('should handle empty string', () => {
+ expect(getLastKey('')).toBe('');
+ });
- expect(result).toEqual([
- ['foo', 'value1'],
- ['bar', 'value2'],
- ['test', 'value3'],
- ]);
+ it('should handle keys with multiple consecutive slashes', () => {
+ expect(getLastKey('parent//child')).toBe('child');
+ });
+
+ it('should handle keys with only slashes', () => {
+ expect(getLastKey('////')).toBe('');
+ });
+
+ it('should handle keys with spaces', () => {
+ expect(getLastKey('parent/child with spaces')).toBe('child with spaces');
+ });
+
+ it('should handle keys with special characters', () => {
+ expect(getLastKey('parent/child@!#$%^&*()')).toBe('child@!#$%^&*()');
});
});
diff --git a/plugins/scaffolder-react/src/next/components/ReviewState/util.ts b/plugins/scaffolder-react/src/next/components/ReviewState/util.ts
index e040b851d3..52503bedfd 100644
--- a/plugins/scaffolder-react/src/next/components/ReviewState/util.ts
+++ b/plugins/scaffolder-react/src/next/components/ReviewState/util.ts
@@ -16,64 +16,13 @@
*/
import { JsonObject, JsonValue } from '@backstage/types';
-import { Draft07 as JSONSchema } from 'json-schema-library';
-import { ParsedTemplateSchema } from '../../hooks';
export function isJsonObject(value?: JsonValue): value is JsonObject {
- return typeof value === 'object' && value !== null && !Array.isArray(value);
-}
-
-export function processEntry(
- key: string,
- value: JsonValue | undefined,
- schema: ParsedTemplateSchema,
- formState: JsonObject,
-): [string, JsonValue | undefined][] {
- const parsedSchema = new JSONSchema(schema.mergedSchema);
- const definitionInSchema = parsedSchema.getSchema({
- pointer: `#/${key}`,
- data: formState,
- });
-
- if (definitionInSchema) {
- const backstageReviewOptions = definitionInSchema['ui:backstage']?.review;
- if (backstageReviewOptions) {
- if (backstageReviewOptions.mask) {
- return [[getLastKey(key), backstageReviewOptions.mask]];
- }
- if (backstageReviewOptions.show === false) {
- return [];
- }
- }
-
- if (isJsonObject(value)) {
- // Process nested objects
- return Object.entries(value).flatMap(([nestedKey, nestedValue]) =>
- processEntry(`${key}/${nestedKey}`, nestedValue, schema, formState),
- );
- }
-
- if (definitionInSchema['ui:widget'] === 'password') {
- return [[getLastKey(key), '******']];
- }
-
- if (definitionInSchema.enum && definitionInSchema.enumNames) {
- return [
- [
- getLastKey(key),
- definitionInSchema.enumNames[
- definitionInSchema.enum.indexOf(value)
- ] || value,
- ],
- ];
- }
- }
-
- return [[getLastKey(key), value]];
+ return typeof value === 'object' && !Array.isArray(value);
}
// Helper function to get the last part of the key
-function getLastKey(key: string): string {
+export function getLastKey(key: string): string {
const parts = key.split('/');
return parts[parts.length - 1];
}