Merge pull request #867 from rebeccaalpert/table

fix(TableMessage): Handle inline code

Author: thatblindgeye

packages/module/src/Message/Message.test.tsx

@@ -118,6 +118,13 @@ const TABLE = `
 
  `;
 
+const TABLE_WITH_INLINE_CODE = `
+| Status | Finding |
+|---|---|
+| \`1/1 Running\`, 0 restarts | Healthy — no crashes |
+| \`1/1 Ready\` | Desired replicas met |
+`;
+
 const ONE_COLUMN_TABLE = `
 
  | Column 1 |
@@ -1041,6 +1048,24 @@ describe('Message', () => {
     render(<Message avatar="./img" role="user" name="User" content={TABLE} tableProps={{ 'aria-label': 'Test' }} />);
     expect(screen.getByRole('grid', { name: /Test/i })).toBeTruthy();
   });
+  it('should wrap table cell content so inline code does not break grid layout', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content={TABLE_WITH_INLINE_CODE}
+        tableProps={{ 'aria-label': 'Inline code table' }}
+      />
+    );
+    const statusCell = screen.getByRole('cell', { name: /1\/1 Running/i });
+    expect(statusCell.querySelector(':scope > .pf-chatbot__message-table-cell-content')).toBeTruthy();
+    expect(statusCell.querySelector(':scope > code')).toBeFalsy();
+    expect(statusCell.querySelector('.pf-chatbot__message-inline-code')).toBeTruthy();
+    expect(
+      screen.getByRole('columnheader', { name: /Status/i }).querySelector('.pf-chatbot__message-table-cell-content')
+    ).toBeTruthy();
+  });
   it('should render footnote correctly', () => {
     render(<Message avatar="./img" role="user" name="User" content={FOOTNOTE} />);
     expect(screen.getByText(/This is some text with a footnote/i)).toBeTruthy();

packages/module/src/Message/TableMessage/TableCellContent.tsx

@@ -0,0 +1,9 @@
+/**
+ * Wraps table cell content in a single element so phrasing content (e.g. inline
+ * code mixed with text) is not a direct child of td/th.
+ */
+const TableCellContent = ({ children }: { children?: React.ReactNode }) => (
+  <span className="pf-chatbot__message-table-cell-content">{children}</span>
+);
+
+export default TableCellContent;

packages/module/src/Message/TableMessage/TdMessage.tsx

@@ -4,7 +4,12 @@
 
 import { ExtraProps } from 'react-markdown';
 import { Td, TdProps } from '@patternfly/react-table';
+import TableCellContent from './TableCellContent';
 
-const TdMessage = ({ children, ...props }: Omit<TdProps, 'ref'> & ExtraProps) => <Td {...props}>{children}</Td>;
+const TdMessage = ({ children, ...props }: Omit<TdProps, 'ref'> & ExtraProps) => (
+  <Td {...props}>
+    <TableCellContent>{children}</TableCellContent>
+  </Td>
+);
 
 export default TdMessage;

packages/module/src/Message/TableMessage/ThMessage.tsx

@@ -4,7 +4,12 @@
 
 import { ExtraProps } from 'react-markdown';
 import { Th, ThProps } from '@patternfly/react-table';
+import TableCellContent from './TableCellContent';
 
-const ThMessage = ({ children, ...props }: Omit<ThProps, 'ref'> & ExtraProps) => <Th {...props}>{children}</Th>;
+const ThMessage = ({ children, ...props }: Omit<ThProps, 'ref'> & ExtraProps) => (
+  <Th {...props}>
+    <TableCellContent>{children}</TableCellContent>
+  </Th>
+);
 
 export default ThMessage;