fix(crud): expandable readonly document COMPASS-4635

[kraenhansen]

Description

This is the final sub-task of COMPASS-4635 adding an "expand all" / "collapse all" button to the read-only view.

Merging this PR will:

• Make the ReadonlyDocument expandable, by registering relevant event listeners on the doc updating a local state.
• Pass a callback into the DocumentActionsGroup component to render the "expand button".
• Add extra gutter width in the Element component when used in a ReadonlyDocument to avoid conflicts with the field-level expand/collapse icons.

Screen.Recording.2024-11-05.at.12.54.59.mov

Checklist

• New tests and/or benchmarks are included
• Documentation is changed or added
• I have signed the MongoDB Contributor License Agreement (https://www.mongodb.com/legal/contributor-agreement)

Motivation and Context

• Bugfix
• New feature
• Dependency update
• Misc

Open Questions

Dependents

Types of changes

• Backport Needed
• Patch (non-breaking change which fixes an issue)
• Minor (non-breaking change which adds functionality)
• Major (fix or feature that would cause existing functionality to change)

[gribnoysup]

This either needs a default value (or maybe should be done outside of this component altogether), otherwise you're breaking the padding when value is not provided (left is this branch):

[kraenhansen]

The line you're referencing is used only to calculate the offset of the "Show more" link when displaying long lists of values. But you're right something was broken: I wasn't passing the extraGutterWidth through to the child elements of an element.

[kraenhansen]

I've updated the video in the description.

[gribnoysup]

Seems like in readonly the extra fields button is now misaligned

Still thinking that maybe if we're trying to add a uniform gutter to the whole Document here to everything, there might be a better place for that than manually passing it to all the nested elements like Element, there is probably a spot that doesn't require us to track down the value in multiple places and only do it in one 🤔

[gribnoysup]

If we want this to be very flexible in the component interface we probably should note that this value should match exactly the space left by hidden editing action buttons in the editable card, so that in case the editable card gets updated we can find this and update the value

[kraenhansen]

I don't think there a requirement that this offset match any other state as such. Just that it's enough for the expand button to not overlay the icons of the individual elements.

[kraenhansen]

Seems like in readonly the extra fields button is now misaligned

My bad again. It seems I haven't got sufficient test data to trigger these edge-cases. I forgot to pass the extraGutterWidth to the calculateShowMoreToggleOffset call in the HadronDocument component: 5278c0c

there might be a better place for that than manually passing it to all the nested elements like Element

Perhaps. I haven't found one. The obvious would be a paddingLeft somewhere in the document, but that messes up the effect (gray background) when hovering an element in the document.

[gribnoysup]

Nit: this element is known to be a performance bottleneck due to the sheer amount of dom elements it might end up rendering on the page (yeah, even if they are just empty divs, "expand all" on a massive document and you're rendering thousands of these), so one thing I'd suggest here is to combine your extra width into the existing element:

Suggested change

	{typeof extraGutterWidth === 'number' && (
	<div style={{ width: extraGutterWidth }} />
	)}
	<div className={elementSpacer} style={{ width: elementSpacerWidth }}>
	<div className={elementSpacer} style={{ width: elementSpacerWidth + (extraGutterWidth ?? 0) }}>

(or you can include it in the existing calculate extra width function above)

It's less of an issue now that we're virtualizing the list of these document cards in most cases, but doesn't hurt to be a bit more vigilant about that in this particular element.

Also if you want to keep the extra element, you might want to add the same elementSpacer class to it to make sure that it won't get the default flex shrink value that would allow it to be resized inside of this flex parent

[kraenhansen]

I've updated the code to use the existing spacer and fixed what I believe was a bug in the calculation of the spacer width 🤞

[kraenhansen]

I've updated the code to use the existing element spacer 👍

Here's a screenshot of the "show more" links on fields and array items:

[kraenhansen]

Since this takes the editable as an argument and displaying the spacer isn't conditional on the value of editable I've moved it out of the OFFSET_WHEN_EDITABLE (now editableOffset).

[kraenhansen]

I've updated the casing (and namig) on these local variables, since they are not global constants.