feat(form): add support for disabling various array input capabilities #7615

bjoerge · 2024-10-14T14:52:47Z

Note: Opening this as a draft PR to get early feeback. Once we agree on the general direction, I'll continue with these remaining todos:

Implement for primitive arrays
Implement for Grid Array Inputs
Add tests (either e2e or unit tests if applicable)

Description

This adds support for the disableActions option on array fields for disabling various array input capabilities like:

add – Removes the ability to add new items to the array
addBefore – Removes the "Add item before"-menu item from the array item menu
addAfter – Removes the "Add item after"-menu item from the array item menu
remove – Removes the ability to remove items from the array
duplicate – Removes the ability to duplicate array items
copy – Removes the ability to copy items from the array

Usage example:

{
      name: 'someArrayField',
      options: {
        disableActions: ['add', 'duplicate'],
      },
      title: "Array you can't add elements to",
      type: 'array',
      of: [
        {
          type: 'object',
          name: 'something',
          title: 'Something',
          fields: [{name: 'first', type: 'string', title: 'First string'}],
        },
      ],
    }

Things to note:

These changes are only about UI affordances, and doesn't imply any form of write protection for the actual data
This only applies to arrays of objects and arrays of primitive values, and not to portable text arrays.
Disabling add will also implicitly disable addBefore and addAfter, thus disable inserting new items to the array entirely (although items can still be inserted via duplicate).
There might not be a compelling use case for disabling the ability to copy here(?), but including it for completeness. If all known actions are disabled, the menu items and "add"-affordances will be removed from the UI.
If we later decide to introduce a new default action, this will appear after upgrading the Studio, and will have to be explicitly disabled.

What to review

Does the feature make sense? Could the API be less confusing?

Testing

Disable each of the capabilities and check that it works as expected. See the included changes in dev/test-studio/schema/debug/simpleArrayOfObjects.js

Notes for release

Adds support for the disableActions option on array fields for disabling various array input capabilities

Note: please include the relevant parts from the description of the feature above in the release notes.

vercel · 2024-10-14T14:52:52Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
page-building-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 16, 2024 3:17pm
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 16, 2024 3:17pm
test-compiled-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 16, 2024 3:17pm
test-next-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 16, 2024 3:17pm
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 16, 2024 3:17pm

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Oct 16, 2024 3:17pm

github-actions · 2024-10-14T14:53:41Z

No changes to documentation

github-actions · 2024-10-14T14:59:09Z

Component Testing Report Updated Oct 16, 2024 3:14 PM (UTC)

✅ All Tests Passed -- expand for details

File	Status	Duration	Passed	Skipped
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	46s	15	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	8s	3	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	32s	6	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	38s	11	7
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx	✅ Passed (Inspect)	0s	0	12
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	18s	6	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	10s	3	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	✅ Passed (Inspect)	3m 0s	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	46s	15	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 40s	21	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 16s	18	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	9s	3	9
formBuilder/inputs/PortableText/RangeDecoration.spec.tsx	✅ Passed (Inspect)	26s	9	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	18s	6	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	36s	12	0
formBuilder/tree-editing/TreeEditing.spec.tsx	✅ Passed (Inspect)	0s	0	3
formBuilder/tree-editing/TreeEditingNestedObjects.spec.tsx	✅ Passed (Inspect)	0s	0	3

github-actions · 2024-10-14T15:13:26Z

⚡️ Editor Performance Report

Updated Wed, 16 Oct 2024 15:17:58 GMT

Benchmark	reference ^{latency of sanity@latest}	experiment ^{latency of this branch}	Δ (%) ^{latency difference}
article (title)	14.4 efps (70ms)	14.7 efps (68ms)	-2ms (-2.2%)	✅
article (body)	49.6 efps (20ms)	53.5 efps (19ms)	-1ms (-7.2%)	✅
article (string inside object)	15.9 efps (63ms)	17.1 efps (59ms)	-5ms (-7.1%)	✅
article (string inside array)	13.0 efps (77ms)	13.5 efps (74ms)	-3ms (-3.9%)	✅
recipe (name)	30.3 efps (33ms)	29.4 efps (34ms)	+1ms (+3.0%)	✅
recipe (description)	32.3 efps (31ms)	34.5 efps (29ms)	-2ms (-6.5%)	✅
recipe (instructions)	99.9+ efps (7ms)	99.9+ efps (7ms)	+0ms (-/-%)	✅
synthetic (title)	14.7 efps (68ms)	15.2 efps (66ms)	-2ms (-2.9%)	✅
synthetic (string inside object)	15.4 efps (65ms)	15.3 efps (66ms)	+1ms (+0.8%)	✅

efps — editor "frames per second". The number of updates assumed to be possible within a second.

Derived from input latency. efps = 1000 / input_latency

Detailed information

🏠 Reference result

The performance result of sanity@latest

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	70ms	78ms	95ms	439ms	1031ms	15.4s
article (body)	20ms	22ms	45ms	164ms	346ms	6.9s
article (string inside object)	63ms	65ms	73ms	254ms	483ms	9.4s
article (string inside array)	77ms	80ms	90ms	217ms	1257ms	10.6s
recipe (name)	33ms	36ms	42ms	79ms	1ms	9.0s
recipe (description)	31ms	32ms	40ms	114ms	0ms	6.2s
recipe (instructions)	7ms	9ms	10ms	43ms	0ms	3.4s
synthetic (title)	68ms	77ms	94ms	376ms	1624ms	16.0s
synthetic (string inside object)	65ms	68ms	85ms	639ms	1837ms	10.7s

🧪 Experiment result

The performance result of this branch

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	68ms	73ms	135ms	227ms	529ms	14.1s
article (body)	19ms	22ms	65ms	189ms	232ms	6.4s
article (string inside object)	59ms	61ms	66ms	143ms	413ms	9.2s
article (string inside array)	74ms	77ms	83ms	215ms	1128ms	10.0s
recipe (name)	34ms	36ms	55ms	80ms	0ms	9.0s
recipe (description)	29ms	32ms	36ms	77ms	0ms	6.2s
recipe (instructions)	7ms	8ms	9ms	20ms	0ms	3.4s
synthetic (title)	66ms	68ms	76ms	139ms	837ms	14.2s
synthetic (string inside object)	66ms	73ms	83ms	484ms	1830ms	9.9s

📚 Glossary

column definitions

benchmark — the name of the test, e.g. "article", followed by the label of the field being measured, e.g. "(title)".

latency — the time between when a key was pressed and when it was rendered. derived from a set of samples. the median (p50) is shown to show the most common latency.

p75 — the 75th percentile of the input latency in the test run. 75% of the sampled inputs in this benchmark were processed faster than this value. this provides insight into the upper range of typical performance.

p90 — the 90th percentile of the input latency in the test run. 90% of the sampled inputs were faster than this. this metric helps identify slower interactions that occurred less frequently during the benchmark.

p99 — the 99th percentile of the input latency in the test run. only 1% of sampled inputs were slower than this. this represents the worst-case scenarios encountered during the benchmark, useful for identifying potential performance outliers.

blocking time — the total time during which the main thread was blocked, preventing user input and UI updates. this metric helps identify performance bottlenecks that may cause the interface to feel unresponsive.

test duration — how long the test run took to complete.

bjoerge requested review from mmgj and EoinFalconer October 14, 2024 14:53

bjoerge requested review from markmichon, runeb and rexxars and removed request for mmgj October 15, 2024 08:25

feat(form): add support for disabling various array input capabilities

1e974cf

bjoerge force-pushed the sdx-1641 branch from 8e079c5 to 1e974cf Compare October 16, 2024 15:06

vercel bot deployed to Preview – performance-studio October 16, 2024 15:09 View deployment

vercel bot deployed to Preview – page-building-studio October 16, 2024 15:10 View deployment

vercel bot deployed to Preview – test-studio October 16, 2024 15:10 View deployment

vercel bot deployed to Preview – test-next-studio October 16, 2024 15:14 View deployment

vercel bot deployed to Preview – test-compiled-studio October 16, 2024 15:17 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(form): add support for disabling various array input capabilities #7615

feat(form): add support for disabling various array input capabilities #7615

bjoerge commented Oct 14, 2024 •

edited

Loading

vercel bot commented Oct 14, 2024 •

edited

Loading

github-actions bot commented Oct 14, 2024

github-actions bot commented Oct 14, 2024 •

edited

Loading

github-actions bot commented Oct 14, 2024 •

edited

Loading

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

feat(form): add support for disabling various array input capabilities #7615

Are you sure you want to change the base?

feat(form): add support for disabling various array input capabilities #7615

Conversation

bjoerge commented Oct 14, 2024 • edited Loading

Description

What to review

Testing

Notes for release

vercel bot commented Oct 14, 2024 • edited Loading

github-actions bot commented Oct 14, 2024

github-actions bot commented Oct 14, 2024 • edited Loading

github-actions bot commented Oct 14, 2024 • edited Loading

⚡️ Editor Performance Report

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

bjoerge commented Oct 14, 2024 •

edited

Loading

vercel bot commented Oct 14, 2024 •

edited

Loading

github-actions bot commented Oct 14, 2024 •

edited

Loading

github-actions bot commented Oct 14, 2024 •

edited

Loading