refactor(compass-crud): turn cell renderer into a functional component COMPASS-9387 #7027
Conversation
gagik
force-pushed
the
gagik/cell-render-refactor
branch
from
7656961 to
f31490c
Compare
gagik
changed the title
gagik
changed the title
| <IconButton | ||
| className={undoButtonClass} | ||
| // @ts-expect-error TODO: size="small" is not an acceptable size | ||
| size="small" |
There was a problem hiding this comment.
do we have a resolution for this?
There was a problem hiding this comment.
Doesn't look like it and I don't see any tickets that would indicate that lg team is planning to add that variant even though the Icon component itself supports it. We already wrap the IconButton component for other reasons, might as well extend it a bit more to support the small size, at least temporarily, seems like the only thing passing small here does at the moment is just making it so that the width / height sizes that leafygreen would otherwise apply to the button are not applied
| onUndo, | ||
| onExpand, | ||
| }) => { | ||
| const [, forceUpdate] = useReducer((x: number) => x + 1, 0); |
There was a problem hiding this comment.
Not that you need to, it's a one liner, but we do have useForceUpdate in compass-components 🙂 (Althought I don't remember if we export it or not)
| event.stopPropagation(); | ||
| this.props.drillDown(this.props.node.data.hadronDocument, this.element); | ||
| } | ||
| }, [element]); |
There was a problem hiding this comment.
This memo on element here (and probably in most other places where you have this as a dep for hooks) is an issue: element reference itself is stable, and so even though you have the subscription to the element change events that call forceUpdate, the values are still kept intact by the memo logic. As a repro you can try editing an array and then reverting the changes, you can observe that the length stays the same on revert (and the same works currently on main):
| // `ag-grid` renders this component outside of the context chain | ||
| // so we re-supply the dark mode theme here. | ||
| <LeafyGreenProvider darkMode={darkMode}> | ||
| <div> |
There was a problem hiding this comment.
It's maybe a diff making it harder to understand for me, but is there any specific reason we added a div here?
This refactor will enable the cell renderer to more naturally use the
useContextMenushook.Most of the code was quite old and written with class components in mind. This tries to keep changes minimal but also untangles some of the harder to follow logic with different states of a cell.