feat(devtools): Allow editing of context value in Consumer

[eps1lon]

Review on per-commit basis advised

Summary

Allow editing of the context value from a consumer if the value comes from a Provider component.

Test Plan

Verified locally by using react-devtools-shell:

master:

pr:

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 1e301d0:

Sandbox	Source
frosty-surf-b44j9	Configuration

[sizebot]

No significant bundle size changes to report.

Size changes (stable)

Generated by 🚫 dangerJS against 1e301d0

[sizebot]

No significant bundle size changes to report.

Size changes (experimental)

Generated by 🚫 dangerJS against 1e301d0

[gaearon]

<Consumer> is effectively a mostly legacy API now that we have useContext and class contextType. If we're going to implement this feature, I think it only makes sense to implement there.

I don't think letting you edit from Consumer is the right UI regardless. I think maybe it should offer a "link" to jump to the appropriate Provider. So that you can see which one manages it and that it's higher up the tree.

Then in the Provider maybe it does make sense to edit it. Although at that point you might as well just edit the appropriate state? So perhaps it's really the "jump to provider" feature that would be most useful.

[eps1lon]

I think maybe it should offer a "link" to jump to the appropriate Provider.

Yep, I was thinking this as well. Happy to abandon this one in favor of a "jump to provider" feature combined with #18255

Although at that point you might as well just edit the appropriate state?

You mean like

function App() {
  const [state] = React.useState({ color: 2 }); // <--- edit this hook instead?
  return <Context.Provider value={value} />
}

It's not always obvious where the value of a provider comes from. Could be a memo or useState or useReducer hook. I think editing the value directly is more straight forward.

[eps1lon]

But I do feel like that being able to edit context in the context of the component is still important (useContext) here. Otherwise it's not easy to jump between the component props and the context for that particular component.

[stale]

This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.

[eps1lon]

bump

[stale]

This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.

[eps1lon]

Abandoning. Context.Consumer isn't that important. useContext would be more helpful but is more complicate last I looked.