Feat: history enhancements

[lesleydreyer]

• Adds a trash icon to delete individual items
• Adds a clear button to clear all history
• Changes so item not in both items list and favorites list
• Fixes so it edits the correct label if the same operation is in the list twice
• Adds a callback for when you click an item and it's set as the active item in editor (helpful for customizing UI based on when query changes)
• Pass in entire item and de-structure needed properties in history store instead (helpful if you're customizing to build your own <HistoryContext.Provider... i.e. customizing the addToHistory/editLabel/etc functions to use a backend instead of a local storage and may need a unique id or other properties. Without passing the entire item there's no way to receive those extra properties but passing the entire item allows that)

closes #3123

[changeset-bot]

🦋 Changeset detected

Latest commit: 388e3d8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@graphiql/react	Minor
@graphiql/plugin-code-exporter	Major
@graphiql/plugin-explorer	Major
graphiql	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: lesleydreyer (672e48d, 15f9e98, ca26ede, a55be67, 9f2616d, 2143f77, 55e1dc7, 029f547, 97b00cb, 8fe4eb8, 3973423, ed08639, e4ab0fd, 441cbca, f5fc37f, ac45b0e, 3083963, 606c2e4, 04a1ff5, a7d1f92, 207c5c2, a9ef6a3, bd19db3, 180d559, 1842fb6, 0d0f0fd, a0fdd9a, 1ff5064, e2f8024, 20264f7, df6531d, c930668, 521d3e4, c41f137, 81c2c50, 2446791, 6197787, 0159196, 81900a2, 2bc55b8, 6b2227f, 879e195, 388e3d8)
• ✅ login: TallTed / name: Ted Thibodeau Jr (a7d1f92, df6531d, c930668, 81900a2)
• ✅ login: B2o5T / name: Dimitri POSTOLOV (03f8d48, cae0d05, db5e8e6, 92ccc04, 4ca869c, 4518886, bbabfba, da7bfc4, a2bb56b, db4b87f, 4e8d8f1, bd28da2, 7285e05, 7e7fe79, b5e88fd, d4b532b, 9f4ec37)
• ✅ login: mylesmmurphy / name: Myles Murphy (f39f52f)

[lesleydreyer]

Was going to add more tests but struggled to get them working locally so will wait for the build issue I saw open (# 3110) and then try again

[acao]

@lesleydreyer hey there, thanks for this! sorry about that toolchain issue, feel free to rebase now!

[TallTed]

tweaking language and such, for human clarity

[lesleydreyer]

@TallTed @acao I fixed to address the comments. Let me know if you'd like any changes. Thanks!

[thomasheyenbrock]

Thanks for this PR, some nice improvements here! 👏

Adds an _id prop (helpful if you're customizing to build your own HistoryContext Provider... i.e. customizing to use a backend instead of a local storage so needs a unique id)

I don't think it makes sense to add an id in the graphiql codebase just so that it can be used for external use cases. I would rather propose that we enable this by user being able to create their custom history store that implements a certain interface and pass this as a prop to GraphiQL. Just for my understanding, can you elaborate on your use-case here, i.e. when and where would you want to store the history items?

The same holds true for the _active property by the way, I wouldn't want to add this into the GraphiQL codebase without actually having a use-case for it internally.

[lesleydreyer]

@thomasheyenbrock @TallTed @acao I fixed to address the comments. Let me know if you'd like any changes. Thanks!

[acao]

wonderful work here @lesleydreyer ! it looks like all the review issues have been addressed - can you add a changeset summarizing your changes? you can just run yarn changeset add. I think this would lead to a minor release for @graphiql/react because it's a significant enhancement and adds new API features :)

[lesleydreyer]

thanks @acao! ... added the changeset

[acao]

@thomasheyenbrock and/or @jonathanawesome are you able to give this a revisit? @lesleydreyer has addressed all the review comments, and from my perspective everything here looks good to go!

[acao]

@lesleydreyer I think this looks ready to go! Just need to rebase this e2e test conflict and I'd say it's good to merge, any further nits can be addressed in later releases :)

[codecov]

Codecov Report

Merging #3130 (388e3d8) into main (b31bf66) will decrease coverage by 0.43%.
The diff coverage is 13.23%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3130      +/-   ##
==========================================
- Coverage   56.40%   55.98%   -0.43%     
==========================================
  Files         109      109              
  Lines        5159     5209      +50     
  Branches     1407     1420      +13     
==========================================
+ Hits         2910     2916       +6     
- Misses       1825     1869      +44     
  Partials      424      424              

Impacted Files	Coverage Δ
packages/graphiql-toolkit/src/storage/query.ts	36.84% <0.00%> (-8.32%)	⬇️
packages/graphiql-react/src/history/components.tsx	34.78% <9.37%> (-15.22%)	⬇️
packages/graphiql-toolkit/src/storage/history.ts	11.11% <10.52%> (-0.80%)	⬇️
packages/graphiql-react/src/history/context.tsx	60.00% <33.33%> (-5.00%)	⬇️
packages/graphiql-react/src/icons/index.ts	100.00% <100.00%> (ø)

[lesleydreyer]

@acao I updated the e2e's, I don't think i have access to merge though. Thanks!

[acao]

@lesleydreyer awesome, yay thank you! I will give this a once over tonight and hopefully we can merge this very soon

review comments addressed

[acao]

@thomasheyenbrock the storage prop already allows a custom store to be passed in. it's up to the storage implementation to decide how and where to persist various keys. I don't think an additional prop is needed