[EuiTableHeader] Add prop to remove <tr>

[K-Kumar-01]

Summary

Issue number #4183
Added the ability to remove the <tr/> tag.

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• Props have proper autodocs and playground toggles
• [ ] Added documentation
• [ ] Checked Code Sandbox works for the any docs examples
• Added or updated jest tests
• [ ] Checked for breaking changes and labeled appropriately
• [ ] Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

[cchaos]

Thanks for tackling this one @K-Kumar-01 . There are still some more necessary things to complete this PR, I'll update the checklist in PR summary by crossing out the ones that aren't necessary. But at top level, we'll at least need a new test for this prop and a changelog entry.

[cchaos]

As a side-note, when creating new PR's it's always best to start a new branch from the latest master branch. That way, your commit log will only include commits directly related to this PR.

[K-Kumar-01]

As a side-note, when creating new PR's it's always best to start a new branch from the latest master branch. That way, your commit log will only include commits directly related to this PR.

I will keep in mind the next time I make a PR.:)

[K-Kumar-01]

@cchaos
I have made the required changes in the file.
However, I am facing issues with writing tests as I have not written any tests earlier.

I did some test and finally, I have 2 results:
On using shallow the test passes

On using render, the test fails with the error as shown

I am not able to understand how to rectify this one. In components/basic_table/collapsed_items_actions.tsx also has a similar approach.

I do not know much about tests so I do not know if we can use shallow or not.

[cchaos]

@K-Kumar-01 Can you commit what you currently have? I'm guessing it has to do with the actual render() of the component without the <tr> and not a fault of the test. (The test doing the right thing 😉 )

[K-Kumar-01]

@cchaos I have committed the recent changes. Let me know if there are any changes required.

[cchaos]

So it looks like the way our testing suite is managed, is there is some level of DOM validation happening when creating snapshots. So that meant, when you were providing a simple string as the child of a <tr>, it said "nope 😆 " and appended the invalid child outside of the <tr> instead. So I fixed up the tests by passing the valid DOM structure and it correctly renders the snapshots.

I also updated the name of the prop.

👍 LGTM

[cchaos]

Jenkins, test this

[cchaos]

Jenkins, test this

[K-Kumar-01]

So it looks like the way our testing suite is managed, is there is some level of DOM validation happening when creating snapshots. So that meant, when you were providing a simple string as the child of a <tr>, it said "nope laughing " and appended the invalid child outside of the <tr> instead. So I fixed up the tests by passing the valid DOM structure and it correctly renders the snapshots.

I also updated the name of the prop.

+1 LGTM

Thanks a lot for the tests. I will try my best to write learn writing tests 😃 and also ensure to pass Valid DOM structure 😬

[cchaos]

Oh no worries. It caught it me off guard too and had to play around with the children I passed to see exactly what was happening. First time I've seen this, so good find! 😜

Jenkins, test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4465/

[cchaos]

Jenkins, test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4465/