fix(StructuredMetadataTable): proper render boolean values (#3162)

.changeset/popular-ghosts-remain.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core': patch
+---
+
+Proper render boolean values on StructuredMetadataTable component

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: {

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('<StructuredMetadataTable />', () => {
       });
     });
 
+    it('Supports boolean values', () => {
+      const metadata = { foo: true, bar: false };
+      const expectedValues = [
+        ['Foo', '✅'],
+        ['Bar', '❌'],
+      ];
+
+      const { getAllByRole } = render(
+        <StructuredMetadataTable metadata={metadata} />,
+      );
+
+      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: <div id="findMe"> field </div> };
       const { getByText } = render(

packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx

@@ -78,7 +78,7 @@ function renderMap(
 }
 
 function toValue(
-  value: ReactElement | object | Array<any>,
+  value: ReactElement | object | Array<any> | boolean,
   options?: any,
   nested?: boolean,
 ) {
@@ -94,6 +94,10 @@ function toValue(
     return renderList(value, nested);
   }
 
+  if (typeof value === 'boolean') {
+    return <Fragment>{value ? '✅' : '❌'}</Fragment>;
+  }
+
   return <Fragment>{value}</Fragment>;
 }