paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 36 Packages Projects Releases Wiki Activity

Merge pull request #25346 from stephenglass/update/review-explode

Browse Source 
Add scaffolder option to display object items in separate rows on review page
This commit is contained in:
Ben Lambert
2024-07-19 13:44:13 +02:00
committed by GitHub
parent e878dfa45c ba67e28847
commit 0fb7c4ae72
5 changed files with 366 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/late-games-protect.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-scaffolder-react': minor
---
Add scaffolder option to display object items in separate rows on review page
plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.test.tsx
+206
View File
@@ -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 () => {
@@ -202,4 +253,159 @@ describe('ReviewState', () => {
expect(queryByRole('row', { name: 'Name type4' })).toBeInTheDocument();
});
it('should display object in separate rows', async () => {
const formState = {
name: {
foo: 'type3',
bar: 'type4',
},
};
const schemas: ParsedTemplateSchema[] = [
{
mergedSchema: {
type: 'object',
properties: {
name: {
type: 'object',
properties: {
foo: {
type: 'string',
default: 'type1',
},
bar: {
type: 'string',
default: 'type2',
},
},
},
},
},
schema: {},
title: 'test',
uiSchema: {},
},
];
const { queryByRole } = render(
<ReviewState formState={formState} schemas={schemas} />,
);
expect(queryByRole('row', { name: 'Foo type3' })).toBeInTheDocument();
expect(queryByRole('row', { name: 'Bar type4' })).toBeInTheDocument();
});
it('should display nested objects in separate rows', 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',
default: 'type1',
},
bar: {
type: 'string',
default: 'type2',
},
example: {
type: 'object',
properties: {
test: {
type: 'string',
},
},
},
},
},
},
},
schema: {},
title: 'test',
uiSchema: {},
},
];
const { queryByRole } = render(
<ReviewState formState={formState} schemas={schemas} />,
);
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',
default: 'type1',
},
bar: {
type: 'string',
default: 'type2',
},
example: {
type: 'object',
'ui:backstage': {
review: {
explode: false,
},
},
properties: {
test: {
type: 'string',
},
},
},
},
},
},
},
schema: {},
title: 'test',
uiSchema: {},
},
];
const { queryByRole } = render(
<ReviewState formState={formState} schemas={schemas} />,
);
expect(queryByRole('row', { name: 'Foo type3' })).toBeInTheDocument();
expect(queryByRole('row', { name: 'Bar type4' })).toBeInTheDocument();
expect(queryByRole('row', { name: 'Test type6' })).not.toBeInTheDocument();
});
});
plugins/scaffolder-react/src/next/components/ReviewState/ReviewState.tsx
+54 -35
View File
@@ -15,9 +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 { isJsonObject, getLastKey } from './util';
/**
* The props for the {@link ReviewState} component.
@@ -28,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
@@ -35,42 +85,11 @@ export type ReviewStateProps = {
export const ReviewState = (props: ReviewStateProps) => {
const reviewData = Object.fromEntries(
Object.entries(props.formState)
.map(([key, value]) => {
.flatMap(([key, value]) => {
for (const step of props.schemas) {
const parsedSchema = new JSONSchema(step.mergedSchema);
const definitionInSchema = parsedSchema.getSchema({
pointer: `#/${key}`,
data: props.formState,
});
if (definitionInSchema) {
const backstageReviewOptions =
definitionInSchema['ui:backstage']?.review;
if (backstageReviewOptions) {
if (backstageReviewOptions.mask) {
return [key, backstageReviewOptions.mask];
}
if (backstageReviewOptions.show === false) {
return [];
}
}
if (definitionInSchema['ui:widget'] === 'password') {
return [key, '******'];
}
if (definitionInSchema.enum && definitionInSchema.enumNames) {
return [
key,
definitionInSchema.enumNames[
definitionInSchema.enum.indexOf(value)
] || value,
];
}
}
return processSchema(key, value, step, props.formState);
}
return [key, value];
return [[key, value]];
})
.filter(prop => prop.length > 0),
);
plugins/scaffolder-react/src/next/components/ReviewState/util.test.ts
+74
View File
@@ -0,0 +1,74 @@
/*
* Copyright 2022 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { isJsonObject, getLastKey } from './util';
describe('isJsonObject', () => {
it('should return true for non-null objects', () => {
expect(isJsonObject({})).toBe(true);
expect(isJsonObject({ key: 'value' })).toBe(true);
});
it('should return false for arrays', () => {
expect(isJsonObject([])).toBe(false);
expect(isJsonObject([1, 2, 3])).toBe(false);
});
it('should return false for non-objects', () => {
expect(isJsonObject('string')).toBe(false);
expect(isJsonObject(123)).toBe(false);
expect(isJsonObject(true)).toBe(false);
expect(isJsonObject(undefined)).toBe(false);
});
});
describe('getLastKey', () => {
it('should return the last part of a simple key', () => {
expect(getLastKey('simple')).toBe('simple');
});
it('should return the last part of a nested key', () => {
expect(getLastKey('parent/child')).toBe('child');
});
it('should return the last part of a deeply nested key', () => {
expect(getLastKey('grandparent/parent/child')).toBe('child');
});
it('should handle keys with trailing slash', () => {
expect(getLastKey('parent/child/')).toBe('');
});
it('should handle empty string', () => {
expect(getLastKey('')).toBe('');
});
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@!#$%^&*()');
});
});
plugins/scaffolder-react/src/next/components/ReviewState/util.ts
+27
View File
@@ -0,0 +1,27 @@
/*
* Copyright 2022 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { JsonObject, JsonValue } from '@backstage/types';
export function isJsonObject(value?: JsonValue): value is JsonObject {
return typeof value === 'object' && !Array.isArray(value);
}
// Helper function to get the last part of the key
export function getLastKey(key: string): string {
const parts = key.split('/');
return parts[parts.length - 1];
}