diff --git a/.changeset/popular-ghosts-remain.md b/.changeset/popular-ghosts-remain.md new file mode 100644 index 0000000000..4a170c7618 --- /dev/null +++ b/.changeset/popular-ghosts-remain.md @@ -0,0 +1,5 @@ +--- +'@backstage/core': patch +--- + +Proper render boolean values on StructuredMetadataTable component diff --git a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx index 97591ebab3..fcaa92457f 100644 --- a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx +++ b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx @@ -24,6 +24,8 @@ const metadata = { description: 'This is a long description of what this is doing (and some additional info too). \n It has new lines and extra text to make it especially annoying to render. But it just ignores them.', something: 'Yes', + 'true value': true, + 'false value': false, owner: 'squad', 'longer key name': ['v1', 'v2', 'v3'], rules: { diff --git a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.test.tsx b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.test.tsx index 68d4262c3e..0844710876 100644 --- a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.test.tsx +++ b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { render } from '@testing-library/react'; +import { render, within } from '@testing-library/react'; import { startCase } from 'lodash'; import React from 'react'; import { StructuredMetadataTable } from './StructuredMetadataTable'; @@ -70,6 +70,26 @@ describe('', () => { }); }); + it('Supports boolean values', () => { + const metadata = { foo: true, bar: false }; + const expectedValues = [ + ['Foo', '✅'], + ['Bar', '❌'], + ]; + + const { getAllByRole } = render( + , + ); + + getAllByRole('row').forEach((row, index) => { + const [firstCell, secondCell] = within(row).getAllByRole('cell'); + const [expectedKey, expectedValue] = expectedValues[index]; + + expect(firstCell).toHaveTextContent(expectedKey); + expect(secondCell).toHaveTextContent(expectedValue); + }); + }); + it('Supports react elements', () => { const metadata = { react:
field
}; const { getByText } = render( diff --git a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx index 52ad9a320a..4868af54bd 100644 --- a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx +++ b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx @@ -78,7 +78,7 @@ function renderMap( } function toValue( - value: ReactElement | object | Array, + value: ReactElement | object | Array | boolean, options?: any, nested?: boolean, ) { @@ -94,6 +94,10 @@ function toValue( return renderList(value, nested); } + if (typeof value === 'boolean') { + return {value ? '✅' : '❌'}; + } + return {value}; }