feat(sanity): add `CapabilityGate` component #8621

juice49 · 2025-02-12T23:01:19Z

Description

This branch adds a CapabilityGate component that can be used to conditionally render other components based on the current rendering context. For example, to prevent the global user menu from rendering when the rendering context provides this capability. You can see this exact scenario in #8591.

What to review

Any issues with the component implementation?

Testing

There are added unit tests, and you can see the changes in action in #8591.

vercel · 2025-02-12T23:01:20Z

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	Mar 6, 2025 5:03pm
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 6, 2025 5:03pm
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 6, 2025 5:03pm

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Mar 6, 2025 5:03pm
test-next-studio	⬜️ Ignored (Inspect)			Mar 6, 2025 5:03pm

juice49 · 2025-02-12T23:01:37Z

feat(sanity): add CapabilityGate component #8621 : 2 dependent PRs (#8591 , #8838 ) 👈 (View in Graphite)
feat(sanity): add Rendering Context Store #8590
next

This stack of pull requests is managed by Graphite. Learn more about stacking.

github-actions · 2025-02-12T23:06:36Z

No changes to documentation

github-actions · 2025-02-12T23:18:27Z

⚡️ Editor Performance Report

Updated Thu, 06 Mar 2025 17:09:53 GMT

Benchmark	reference ^{latency of sanity@latest}	experiment ^{latency of this branch}	Δ (%) ^{latency difference}
article (title)	21.1 efps (48ms)	17.9 efps (56ms)	+9ms (+17.9%)	✅
article (body)	63.3 efps (16ms)	63.7 efps (16ms)	-0ms (-/-%)	✅
article (string inside object)	24.4 efps (41ms)	22.2 efps (45ms)	+4ms (+9.8%)	✅
article (string inside array)	20.8 efps (48ms)	20.8 efps (48ms)	+0ms (-/-%)	✅
recipe (name)	37.0 efps (27ms)	50.0 efps (20ms)	-7ms (-25.9%)	✅
recipe (description)	41.7 efps (24ms)	55.6 efps (18ms)	-6ms (-25.0%)	✅
recipe (instructions)	99.9+ efps (5ms)	99.9+ efps (5ms)	+0ms (-/-%)	✅
synthetic (title)	20.0 efps (50ms)	16.4 efps (61ms)	+11ms (+22.0%)	🔴
synthetic (string inside object)	19.6 efps (51ms)	16.1 efps (62ms)	+11ms (+21.6%)	🔴

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)	48ms	54ms	86ms	280ms	743ms	10.9s
article (body)	16ms	18ms	26ms	60ms	311ms	5.8s
article (string inside object)	41ms	43ms	45ms	55ms	35ms	6.7s
article (string inside array)	48ms	51ms	56ms	352ms	386ms	8.1s
recipe (name)	27ms	28ms	31ms	60ms	9ms	7.8s
recipe (description)	24ms	25ms	31ms	51ms	1ms	5.4s
recipe (instructions)	5ms	7ms	7ms	10ms	0ms	3.1s
synthetic (title)	50ms	51ms	56ms	155ms	475ms	12.3s
synthetic (string inside object)	51ms	54ms	59ms	298ms	709ms	7.8s

🧪 Experiment result

The performance result of this branch

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	56ms	76ms	89ms	258ms	1407ms	12.3s
article (body)	16ms	17ms	17ms	33ms	60ms	5.3s
article (string inside object)	45ms	48ms	52ms	146ms	329ms	7.8s
article (string inside array)	48ms	51ms	58ms	78ms	427ms	7.6s
recipe (name)	20ms	22ms	26ms	42ms	6ms	7.1s
recipe (description)	18ms	19ms	20ms	34ms	0ms	5.0s
recipe (instructions)	5ms	7ms	8ms	10ms	0ms	3.2s
synthetic (title)	61ms	63ms	66ms	212ms	1655ms	14.0s
synthetic (string inside object)	62ms	65ms	76ms	111ms	1961ms	9.5s

📚 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.

github-actions · 2025-02-12T23:22:36Z

Component Testing Report Updated Mar 6, 2025 5:15 PM (UTC)

❌ Failed Tests (2) -- expand for details

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	1m 4s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	12s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	❌ Failed (Inspect)	1m 56s	4	0	2
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	41s	11	7	0
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx	✅ Passed (Inspect)	0s	0	12	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	24s	6	0	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	13s	3	0	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	✅ Passed (Inspect)	26s	6	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	1m 5s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 34s	21	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 44s	21	0	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	12s	3	9	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	26s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	1m 37s	21	0	0
formBuilder/tree-editing/TreeEditing.spec.tsx	✅ Passed (Inspect)	0s	0	3	0
formBuilder/tree-editing/TreeEditingNestedObjects.spec.tsx	✅ Passed (Inspect)	0s	0	3	0

github-actions · 2025-03-05T10:12:46Z

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	42.03%	54349 / 129288
🔵	Statements	42.03%	54349 / 129288
🔵	Functions	46.93%	2729 / 5815
🔵	Branches	79.42%	10185 / 12824

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/sanity/src/core/components/CapabilityGate.tsx	100%	66.66%	100%	100%

Generated in workflow #31818 for commit 0e446c7 by the Vitest Coverage Report Action

jordanl17 · 2025-03-06T12:57:59Z

packages/sanity/src/core/components/CapabilityGate.test.tsx

+    {wrapper},
+  )
+
+  expect(screen.getByTestId('user-menu')).toBeTruthy()


NIT: .toBeInTheDocument() rather than .toBeTruthy()

Thanks. Curious: is that just a style preference?

Functionally, in this case there's no difference - but if you were using queryByTestId instead then that throws instead of returns null - so mostly around consistency of approach I suppose. toBeTruthy/Falsy I feel are best avoided in many cases for the additional false positives they might capture eg "" 0 - again not relevant in this case where you are returning the element

Thank you for explaining. Makes sense! 🙂 I'm actually usually very opposed to truthy/falsey checks, for the reasons you stated.

The base branch was changed.

juice49 · 2025-03-06T16:56:46Z

Merge activity

Mar 6, 11:56 AM EST: Graphite rebased this pull request as part of a merge.
Mar 6, 12:09 PM EST: Graphite couldn't merge this PR because it was not satisfying all requirements (Failed CI: 'playwright-ct-test (firefox, 1, 2)').
Mar 6, 12:20 PM EST: A user started a stack merge that includes this pull request via Graphite.
Mar 6, 12:21 PM EST: A user merged this pull request with Graphite.

This was referenced Feb 12, 2025

feat(sanity): add Rendering Context Store #8590

Merged

feat(sanity): hide global user menu inside Core UI Rendering Context #8591

Merged

vercel bot had a problem deploying to Preview – performance-studio February 12, 2025 23:07 Failure

vercel bot deployed to Preview – page-building-studio February 12, 2025 23:07 View deployment

vercel bot deployed to Preview – test-studio February 12, 2025 23:08 View deployment

juice49 force-pushed the feat/sapp-2363/studio-rendering-content-capability-gate branch from e23ed66 to f6ea950 Compare March 3, 2025 11:35

juice49 force-pushed the feat/sapp-2363/studio-rendering-context branch from 6c79dc5 to 455d288 Compare March 3, 2025 11:35

vercel bot had a problem deploying to Preview – performance-studio March 3, 2025 11:39 Failure

vercel bot deployed to Preview – page-building-studio March 3, 2025 11:41 View deployment

vercel bot deployed to Preview – test-studio March 3, 2025 11:43 View deployment

juice49 force-pushed the feat/sapp-2363/studio-rendering-context branch 6 times, most recently from 0774445 to 5785e3e Compare March 4, 2025 22:29

juice49 force-pushed the feat/sapp-2363/studio-rendering-content-capability-gate branch from f6ea950 to f4321f9 Compare March 4, 2025 22:30

juice49 force-pushed the feat/sapp-2363/studio-rendering-context branch from 5785e3e to 2798b2d Compare March 4, 2025 22:30

vercel bot deployed to Preview – test-studio March 4, 2025 22:37 View deployment

vercel bot had a problem deploying to Preview – performance-studio March 4, 2025 22:40 Failure

vercel bot deployed to Preview – page-building-studio March 4, 2025 22:41 View deployment

juice49 mentioned this pull request Mar 4, 2025

feat(sanity): hide workspace switcher inside Core UI rendering context #8838

Merged

juice49 force-pushed the feat/sapp-2363/studio-rendering-context branch from 54002b7 to 19b1d80 Compare March 5, 2025 10:04

juice49 force-pushed the feat/sapp-2363/studio-rendering-content-capability-gate branch from f4321f9 to d1fef34 Compare March 5, 2025 10:08

juice49 requested review from cngonzalez and pedrobonamin and removed request for a team and cngonzalez March 6, 2025 12:36

juice49 force-pushed the feat/sapp-2363/studio-rendering-content-capability-gate branch from 87e5ac2 to b2df74b Compare March 6, 2025 12:37

juice49 force-pushed the feat/sapp-2363/studio-rendering-context branch from 19b1d80 to daf24a6 Compare March 6, 2025 12:37

vercel bot deployed to Preview – page-building-studio March 6, 2025 12:44 View deployment

vercel bot deployed to Preview – performance-studio March 6, 2025 12:44 View deployment

vercel bot deployed to Preview – test-studio March 6, 2025 12:45 View deployment

jordanl17 reviewed Mar 6, 2025

View reviewed changes

jordanl17 previously approved these changes Mar 6, 2025

View reviewed changes

juice49 changed the base branch from feat/sapp-2363/studio-rendering-context to graphite-base/8621 March 6, 2025 15:50

juice49 force-pushed the graphite-base/8621 branch from daf24a6 to b0c005a Compare March 6, 2025 15:50

juice49 force-pushed the feat/sapp-2363/studio-rendering-content-capability-gate branch from b2df74b to 34943ef Compare March 6, 2025 15:50

juice49 changed the base branch from graphite-base/8621 to next March 6, 2025 15:51

juice49 force-pushed the feat/sapp-2363/studio-rendering-content-capability-gate branch from 34943ef to 0a6f7ba Compare March 6, 2025 15:51

vercel bot deployed to Preview – performance-studio March 6, 2025 15:57 View deployment

vercel bot deployed to Preview – page-building-studio March 6, 2025 15:57 View deployment

vercel bot deployed to Preview – test-studio March 6, 2025 15:59 View deployment

juice49 requested a review from jordanl17 March 6, 2025 16:28

jordanl17 approved these changes Mar 6, 2025

View reviewed changes

feat(sanity): add CapabilityGate component

0e446c7

juice49 force-pushed the feat/sapp-2363/studio-rendering-content-capability-gate branch from 0a6f7ba to 0e446c7 Compare March 6, 2025 16:56

vercel bot deployed to Preview – page-building-studio March 6, 2025 17:02 View deployment

vercel bot deployed to Preview – performance-studio March 6, 2025 17:03 View deployment

vercel bot deployed to Preview – test-studio March 6, 2025 17:03 View deployment

juice49 merged commit 5b06c42 into next Mar 6, 2025
68 checks passed

juice49 deleted the feat/sapp-2363/studio-rendering-content-capability-gate branch March 6, 2025 17:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(sanity): add `CapabilityGate` component #8621

feat(sanity): add `CapabilityGate` component #8621

juice49 commented Feb 12, 2025 •

edited

Loading

vercel bot commented Feb 12, 2025 •

edited

Loading

juice49 commented Feb 12, 2025 •

edited

Loading

github-actions bot commented Feb 12, 2025

github-actions bot commented Feb 12, 2025 •

edited

Loading

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

github-actions bot commented Feb 12, 2025 •

edited

Loading

github-actions bot commented Mar 5, 2025 •

edited

Loading

jordanl17 Mar 6, 2025

juice49 Mar 6, 2025

jordanl17 Mar 6, 2025

juice49 Mar 6, 2025

juice49 commented Mar 6, 2025 •

edited

Loading

feat(sanity): add CapabilityGate component #8621

feat(sanity): add CapabilityGate component #8621

Conversation

juice49 commented Feb 12, 2025 • edited Loading

Description

What to review

Testing

vercel bot commented Feb 12, 2025 • edited Loading

juice49 commented Feb 12, 2025 • edited Loading

github-actions bot commented Feb 12, 2025

github-actions bot commented Feb 12, 2025 • edited Loading

⚡️ Editor Performance Report

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

github-actions bot commented Feb 12, 2025 • edited Loading

github-actions bot commented Mar 5, 2025 • edited Loading

Coverage Report

jordanl17 Mar 6, 2025

Choose a reason for hiding this comment

juice49 Mar 6, 2025

Choose a reason for hiding this comment

jordanl17 Mar 6, 2025

Choose a reason for hiding this comment

juice49 Mar 6, 2025

Choose a reason for hiding this comment

juice49 commented Mar 6, 2025 • edited Loading

Merge activity

feat(sanity): add `CapabilityGate` component #8621

feat(sanity): add `CapabilityGate` component #8621

juice49 commented Feb 12, 2025 •

edited

Loading

vercel bot commented Feb 12, 2025 •

edited

Loading

juice49 commented Feb 12, 2025 •

edited

Loading

github-actions bot commented Feb 12, 2025 •

edited

Loading

github-actions bot commented Feb 12, 2025 •

edited

Loading

github-actions bot commented Mar 5, 2025 •

edited

Loading

juice49 commented Mar 6, 2025 •

edited

Loading