fix(ui-table): fix table crashing in stacked layout when using falsy children

Also fix a table example that was using Children instead of React.Children, fix CodeSandboxes
crashing because missing imports
Make CodeSandbox examples nicer by only importing samples when needed

Fixes INSTUI-4534

Author: matyasf

packages/__docs__/src/CodeSandboxButton/index.tsx

@@ -42,25 +42,51 @@ class CodeSandboxButton extends Component<CodeSandboxButtonProps> {
   render() {
     //TODO: we should not import everything everytime
     //somehow conditionally import needed modules
-    const importStatements = `import {useState, useEffect} from "react"
+    const importStatements = `import React, {useState, useEffect, useContext, Children} from "react"
 import ReactDOM from "react-dom"
 import moment from 'moment'
-import {avatarSquare, avatarPortrait, lorem} from "./samplemedia"
-import {placeholderImage} from "./samplemedia"
-import iconExample from "!svg-inline-loader!./heart_lg.svg"
 import 'moment/min/locales'
 `
-    const reactComponentPattern = /<[A-Z]\w+|Icon\w+/gm
-    const neededClasses = this.props.code
-      .match(reactComponentPattern)
-      ?.map((className) => className.replace(/</gm, '').trim())
+    let importExampleIcon = ''
+    if (this.props.code.includes('iconExample(')) {
+      importExampleIcon =
+        'import iconExample from "!svg-inline-loader!./heart_lg.svg"'
+    }
 
-    if (this.props.code.includes('Calendar')) {
-      neededClasses?.push('Calendar')
+    // import sample media
+    const neededSampleMedia: string[] = []
+    if (this.props.code.includes('avatarSquare')) {
+      neededSampleMedia.push('avatarSquare')
+    }
+    if (this.props.code.includes('avatarPortrait')) {
+      neededSampleMedia.push('avatarPortrait')
+    }
+    if (this.props.code.includes('lorem.')) {
+      neededSampleMedia.push('lorem')
+    }
+    if (this.props.code.includes('placeholderImage(')) {
+      neededSampleMedia.push('placeholderImage')
     }
+    const importSampleMedia =
+      neededSampleMedia.length > 0
+        ? `import { ${neededSampleMedia.join(', ')} } from './samplemedia'\n`
+        : ''
 
+    // import InstUI components/icons/Context
+    const neededClasses: string[] = []
+    const reactComponentPattern = /<[A-Z]\w+|Icon\w+/gm // React component or an icon
+    this.props.code
+      .match(reactComponentPattern)
+      ?.forEach((className) =>
+        neededClasses.push(className.replace(/</gm, '').trim())
+      )
+    if (this.props.code.includes('Calendar')) {
+      neededClasses.push('Calendar')
+    }
+    this.props.code
+      .match(/[A-Z]\w+Context/gm)
+      ?.forEach((className) => neededClasses.push(className))
     const uniqueClasses = [...new Set(neededClasses)]
-
     const externalElements = this.props.code
       .match(/class.\w+|function.\w+|const.\w+/gm)
       ?.map((className) =>
@@ -86,7 +112,13 @@ import 'moment/min/locales'
     const renderStatement = `const render = (el) => { ReactDOM.render(el, document.getElementById('app')) }\n`
     const codeSandboxData = {
       title: this.props.title,
-      js: importStatements + importClasses + renderStatement + codeBlock,
+      js:
+        importStatements +
+        importExampleIcon +
+        importSampleMedia +
+        importClasses +
+        renderStatement +
+        codeBlock,
       private: true,
       editors: '001',
       html: `<div id="app"></div>

packages/ui-table/src/Table/Head/index.tsx

@@ -117,7 +117,7 @@ class Head extends Component<TableHeadProps> {
     let count = 0
     Children.forEach(firstRow.props.children, (grandchild) => {
       count += 1
-      if (!grandchild.props) return
+      if (!grandchild?.props) return // grandchild can be false
       const { id, stackedSortByLabel, sortDirection, onRequestSort } =
         grandchild.props
       if (id && onRequestSort) {

packages/ui-table/src/Table/README.md

@@ -2014,7 +2014,7 @@ Custom table with `stacked` layout support:
           onMouseOver={this.toggleHoverOn}
           onMouseOut={this.toggleHoverOff}
         >
-          {Children.toArray(this.props.children)
+          {React.Children.toArray(this.props.children)
             .filter(React.isValidElement)
             .map((child, index) => {
               return React.cloneElement(child, {
@@ -2144,7 +2144,7 @@ Custom table with `stacked` layout support:
         onMouseOver={() => setIsHovered(true)}
         onMouseOut={() => setIsHovered(false)}
       >
-        {Children.toArray(children)
+        {React.Children.toArray(children)
           .filter(React.isValidElement)
           .map((child, index) => {
             return React.cloneElement(child, {

packages/ui-table/src/Table/__new-tests__/Table.test.tsx

@@ -155,10 +155,27 @@ describe('<Table />', async () => {
     render(
       <Table caption="Test table" layout="stacked">
         <Table.Head>
+          {/* @ts-expect-error error is normal here */}
           <Table.Row>
             <Table.Cell>Foo</Table.Cell>
+            {}
+            {false}
           </Table.Row>
         </Table.Head>
+        <Table.Body>
+          <Table.Row>
+            <Table.RowHeader>1</Table.RowHeader>
+            <Table.Cell>The Shawshank Redemption</Table.Cell>
+            <Table.Cell>1994</Table.Cell>
+            <Table.Cell>9.3</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.RowHeader>2</Table.RowHeader>
+            <Table.Cell>The Godfather</Table.Cell>
+            <Table.Cell>1972</Table.Cell>
+            <Table.Cell>9.2</Table.Cell>
+          </Table.Row>
+        </Table.Body>
       </Table>
     )
     const stackedTable = screen.getByRole('table')
@@ -167,7 +184,7 @@ describe('<Table />', async () => {
     expect(stackedTable).not.toHaveTextContent('Foo')
   })
 
-  it('does not crash for invalid children', async () => {
+  it('does not crash for invalid children in stacked layout', async () => {
     render(
       <Table caption="Test table" layout="stacked">
         test1