fix: table: ensure boolean types in react render when expandable row

SUMMARY:

In JavaScript and TypeScript, the && operator is used for logical AND operations, but it can also be used for conditional rendering in React. The expression A && B will return B if A is truthy, and A otherwise.

In this case, rowSupportExpand && expanded && expandRowNode will render expandRowNode if both rowSupportExpand and expanded are truthy. If either of them is falsy, it will render that falsy value.

The reason we're seeing a "0" in some upstream bundles could be that either rowSupportExpand or expanded is 0. In JavaScript, 0 is considered a falsy value, so if rowSupportExpand or expanded is 0, the whole expression will evaluate to 0.

To fix this, we ensure that rowSupportExpand and expanded are always boolean values. If they're not, we convert them to booleans using !!value.

Hence the quick fix is:

{!!rowSupportExpand && !!expanded && expandRowNode}

This will render expandRowNode if both rowSupportExpand and expanded are truthy, and nothing otherwise.

JIRA TASK (Eightfold Employees Only):

ENG-90186

CHANGE TYPE:

[x] Bugfix Pull Request
[ ] Feature Pull Request

TEST COVERAGE:

[x] Tests for this change already exist
[ ] I have added unittests for this change

TEST PLAN:

Pull the PR branch and run yarn and yarn storybook. Verify the Table Expandable Row stories behave as expected.

EightfoldAI / octuple