graphql-hive
graphql-hive copied to clipboard
kamilkisiela
Search list for schema page with multiple services
Background
This pull request come from #3468, the search input in schema page is bit confusing. So, we tried to make it more clear and user friendly when user have multiple services.
Description
- Search input was changed to input with list on value changed.
- List of result should be more user friendly when have multiple services.
- Added Storybook stories.
Before
https://github.com/kamilkisiela/graphql-hive/assets/37614975/e25cf003-1d05-4d0e-a5e9-f8a997d8d3c0
After
https://github.com/kamilkisiela/graphql-hive/assets/37614975/b6862e06-ef9e-497a-82b5-e0e068e9eaef
⚠️ No Changeset found
Latest commit: 906ae35bb0a1f0d9a13c75ba3bc40939d67c5a32
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
![changeset-bot[bot] avatar](https://avatars.githubusercontent.com/in/28616?v=4 "Published by a pub.dev verified publisher"){kind=small}
📚 Storybook Deployment
The latest changes are available as preview in: https://bbc5e9f7.hive-storybook.pages.dev
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
🐋 This PR was built and pushed to the following Docker images (tag: 906ae35bb0a1f0d9a13c75ba3bc40939d67c5a32):
Docker Bake metadata
{
"app": {
"buildx.build.ref": "builder-c06e9564-1274-4d80-8788-9e90483cf380/builder-c06e9564-1274-4d80-8788-9e90483cf3800/23rjofsc2ikdvjevyqk7w1vxk",
"containerimage.descriptor": {
"mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
"digest": "sha256:60bc3832706eba8880da58113ee665e852e85028d74af468a5b8df1922bea4c2",
"size": 685
},
"containerimage.digest": "sha256:60bc3832706eba8880da58113ee665e852e85028d74af468a5b8df1922bea4c2",
"image.name": "ghcr.io/kamilkisiela/graphql-hive/app:906ae35bb0a1f0d9a13c75ba3bc40939d67c5a32,ghcr.io/kamilkisiela/graphql-hive/app:tuval_schema_list_search"
},
"composition-federation-2": {
"buildx.build.ref": "builder-c06e9564-1274-4d80-8788-9e90483cf380/builder-c06e9564-1274-4d80-8788-9e90483cf3800/2rx0mnp1ax74yz4oyk3jtqtj7",
"containerimage.descriptor": {
"mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
"digest": "sha256:7b47297ba5d9ba124ef33771cca99a0e597ae75bdf5f0232542b752f428d3656",
"size": 685
},
"containerimage.digest": "sha256:7b47297ba5d9ba124ef33771cca99a0e597ae75bdf5f0232542b752f428d3656",
"image.name": "ghcr.io/kamilkisiela/graphql-hive/composition-federation-2:906ae35bb0a1f0d9a13c75ba3bc40939d67c5a32,ghcr.io/kamilkisiela/graphql-hive/composition-federation-2:tuval_schema_list_search"
},
"emails": {
"buildx.build.ref": "builder-c06e9564-1274-4d80-8788-9e90483cf380/builder-c06e9564-1274-4d80-8788-9e90483cf3800/4v03rrv48n3qoiy7e4ukld3zb",
"containerimage.descriptor": {
"mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
"digest": "sha256:69acc7a18a5be19442c2920b569c2b5ecc50114c022f6cc0e36878e039ca4e94",
"size": 685
},
"containerimage.digest": "sha256:69acc7a18a5be19442c2920b569c2b5ecc50114c022f6cc0e36878e039ca4e94",
"image.name": "ghcr.io/kamilkisiela/graphql-hive/emails:906ae35bb0a1f0d9a13c75ba3bc40939d67c5a32,ghcr.io/kamilkisiela/graphql-hive/emails:tuval_schema_list_search"
},
"policy": {
"buildx.build.ref": "builder-c06e9564-1274-4d80-8788-9e90483cf380/builder-c06e9564-1274-4d80-8788-9e90483cf3800/wfdsid0f522d5wok07sp0tv7g",
"containerimage.descriptor": {
"mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
"digest": "sha256:113d3f4d05a68c82040329163470369154454591e28a54cba177617c5b64ab60",
"size": 685
},
"containerimage.digest": "sha256:113d3f4d05a68c82040329163470369154454591e28a54cba177617c5b64ab60",
"image.name": "ghcr.io/kamilkisiela/graphql-hive/policy:906ae35bb0a1f0d9a13c75ba3bc40939d67c5a32,ghcr.io/kamilkisiela/graphql-hive/policy:tuval_schema_list_search"
},
"rate-limit": {
"buildx.build.ref": "builder-c06e9564-1274-4d80-8788-9e90483cf380/builder-c06e9564-1274-4d80-8788-9e90483cf3800/mpcfar6z6pd94nt1587d7sg45",
"containerimage.descriptor": {
"mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
"digest": "sha256:96c3451a4e5da35ee293e669d6ca50dc9712f53a64ebac2706d5d28d2a0bebe7",
"size": 685
},
"containerimage.digest": "sha256:96c3451a4e5da35ee293e669d6ca50dc9712f53a64ebac2706d5d28d2a0bebe7",
"image.name": "ghcr.io/kamilkisiela/graphql-hive/rate-limit:906ae35bb0a1f0d9a13c75ba3bc40939d67c5a32,ghcr.io/kamilkisiela/graphql-hive/rate-limit:tuval_schema_list_search"
},
"schema": {
"buildx.build.ref": "builder-c06e9564-1274-4d80-8788-9e90483cf380/builder-c06e9564-1274-4d80-8788-9e90483cf3800/lpajzauw9rpvmctkqrt15m9c9",
"containerimage.descriptor": {
"mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
"digest": "sha256:978f2ae2cf299183507689a29612b7ea89d8029aa91e36d5d7347c12b8bf7117",
"size": 685
},
"containerimage.digest": "sha256:978f2ae2cf299183507689a29612b7ea89d8029aa91e36d5d7347c12b8bf7117",
"image.name": "ghcr.io/kamilkisiela/graphql-hive/schema:906ae35bb0a1f0d9a13c75ba3bc40939d67c5a32,ghcr.io/kamilkisiela/graphql-hive/schema:tuval_schema_list_search"
},
"server": {
"buildx.build.ref": "builder-c06e9564-1274-4d80-8788-9e90483cf380/builder-c06e9564-1274-4d80-8788-9e90483cf3800/jvbvqlvfse29p9cqmj7m5l0bh",
"containerimage.descriptor": {
"mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
"digest": "sha256:5719b095881c707faf1df8bcc807a129c0cf02d9ffc34c10abda517536d8b4ca",
"size": 685
},
"containerimage.digest": "sha256:5719b095881c707faf1df8bcc807a129c0cf02d9ffc34c10abda517536d8b4ca",
"image.name": "ghcr.io/kamilkisiela/graphql-hive/server:906ae35bb0a1f0d9a13c75ba3bc40939d67c5a32,ghcr.io/kamilkisiela/graphql-hive/server:tuval_schema_list_search"
},
"storage": {
"buildx.build.ref": "builder-c06e9564-1274-4d80-8788-9e90483cf380/builder-c06e9564-1274-4d80-8788-9e90483cf3800/vl5haogq8e2ssd60kms6scql7",
"containerimage.descriptor": {
"mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
"digest": "sha256:b82e4e47ae7ca12ac0aac45a3ef0d3da78c51e673f53294ef2a460e13822bf4f",
"size": 685
},
"containerimage.digest": "sha256:b82e4e47ae7ca12ac0aac45a3ef0d3da78c51e673f53294ef2a460e13822bf4f",
"image.name": "ghcr.io/kamilkisiela/graphql-hive/storage:906ae35bb0a1f0d9a13c75ba3bc40939d67c5a32,ghcr.io/kamilkisiela/graphql-hive/storage:tuval_schema_list_search"
},
"stripe-billing": {
"buildx.build.ref": "builder-c06e9564-1274-4d80-8788-9e90483cf380/builder-c06e9564-1274-4d80-8788-9e90483cf3800/i5h5mhpoe12y32yrok1ro8rhn",
"containerimage.descriptor": {
"mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
"digest": "sha256:8b116b8c8989f4b2f2024aab388f230015d172057e81358adc222d1b81c46a5f",
"size": 685
},
"containerimage.digest": "sha256:8b116b8c8989f4b2f2024aab388f230015d172057e81358adc222d1b81c46a5f",
"image.name": "ghcr.io/kamilkisiela/graphql-hive/stripe-billing:906ae35bb0a1f0d9a13c75ba3bc40939d67c5a32,ghcr.io/kamilkisiela/graphql-hive/stripe-billing:tuval_schema_list_search"
},
"tokens": {
"buildx.build.ref": "builder-c06e9564-1274-4d80-8788-9e90483cf380/builder-c06e9564-1274-4d80-8788-9e90483cf3800/z093c0432d6nlehk98rstu6mq",
"containerimage.descriptor": {
"mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
"digest": "sha256:63b78a933670889d5f9a9c5818bf0c65ea58984ddd489901b4b8fa0696369dbe",
"size": 685
},
"containerimage.digest": "sha256:63b78a933670889d5f9a9c5818bf0c65ea58984ddd489901b4b8fa0696369dbe",
"image.name": "ghcr.io/kamilkisiela/graphql-hive/tokens:906ae35bb0a1f0d9a13c75ba3bc40939d67c5a32,ghcr.io/kamilkisiela/graphql-hive/tokens:tuval_schema_list_search"
},
"usage": {
"buildx.build.ref": "builder-c06e9564-1274-4d80-8788-9e90483cf380/builder-c06e9564-1274-4d80-8788-9e90483cf3800/wc2ng6ojr55e8yqpo3g61p8f2",
"containerimage.descriptor": {
"mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
"digest": "sha256:a11b2067039522e12ede6d84a2572892ad98e169fa0475d89c805e362fad048f",
"size": 685
},
"containerimage.digest": "sha256:a11b2067039522e12ede6d84a2572892ad98e169fa0475d89c805e362fad048f",
"image.name": "ghcr.io/kamilkisiela/graphql-hive/usage:906ae35bb0a1f0d9a13c75ba3bc40939d67c5a32,ghcr.io/kamilkisiela/graphql-hive/usage:tuval_schema_list_search"
},
"usage-estimator": {
"buildx.build.ref": "builder-c06e9564-1274-4d80-8788-9e90483cf380/builder-c06e9564-1274-4d80-8788-9e90483cf3800/xhxko5khxqghlizrtvbmimn1l",
"containerimage.descriptor": {
"mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
"digest": "sha256:c0e4f77ab82186c5c6a3872fc12c1ad35fae0ea74d7b65420bb9d727f402a2a5",
"size": 685
},
"containerimage.digest": "sha256:c0e4f77ab82186c5c6a3872fc12c1ad35fae0ea74d7b65420bb9d727f402a2a5",
"image.name": "ghcr.io/kamilkisiela/graphql-hive/usage-estimator:906ae35bb0a1f0d9a13c75ba3bc40939d67c5a32,ghcr.io/kamilkisiela/graphql-hive/usage-estimator:tuval_schema_list_search"
},
"usage-ingestor": {
"buildx.build.ref": "builder-c06e9564-1274-4d80-8788-9e90483cf380/builder-c06e9564-1274-4d80-8788-9e90483cf3800/xw4svwiphavkglpqj31zy8uuj",
"containerimage.descriptor": {
"mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
"digest": "sha256:202928b8256020b512ce5d076ce0a8525ab733014314ac5b2d5e9884884854c2",
"size": 685
},
"containerimage.digest": "sha256:202928b8256020b512ce5d076ce0a8525ab733014314ac5b2d5e9884884854c2",
"image.name": "ghcr.io/kamilkisiela/graphql-hive/usage-ingestor:906ae35bb0a1f0d9a13c75ba3bc40939d67c5a32,ghcr.io/kamilkisiela/graphql-hive/usage-ingestor:tuval_schema_list_search"
},
"webhooks": {
"buildx.build.ref": "builder-c06e9564-1274-4d80-8788-9e90483cf380/builder-c06e9564-1274-4d80-8788-9e90483cf3800/tpkzr39h61thxz2r5nfuyllm5",
"containerimage.descriptor": {
"mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
"digest": "sha256:840446b6b2d7411b318ca67e1f5e87ef9f5c01c68128028f8436b75021cab049",
"size": 685
},
"containerimage.digest": "sha256:840446b6b2d7411b318ca67e1f5e87ef9f5c01c68128028f8436b75021cab049",
"image.name": "ghcr.io/kamilkisiela/graphql-hive/webhooks:906ae35bb0a1f0d9a13c75ba3bc40939d67c5a32,ghcr.io/kamilkisiela/graphql-hive/webhooks:tuval_schema_list_search"
}
}
The Search and select schema label seems a bit weird for me, because it makes me feel like something will happen when I select an option.
I think it should be "filter schemas" or something like that.
@kamilkisiela So i did rebase, fix conflicts and fixed some issues you mentioned. You can watch the video attachment and see the behaviour.
3 schemas :
https://github.com/kamilkisiela/graphql-hive/assets/37614975/05ba5859-b3aa-4206-8076-fe58741d4c6c
10 schemas
https://github.com/kamilkisiela/graphql-hive/assets/37614975/6424eb0a-6282-4984-8a09-a5355090ea73
Approved!
Only nitpick is that "Filter schema" should probably be "Find Schema" as filter implies I can select n schemas to display?
i will change it :) @n1ru4l
Let's make subgraph schemas shareable. We could move up the state of the schema picker to the url (?service=XYZ). We can do it in a separate Pull Request.
Let's make subgraph schemas shareable. We could move up the state of the schema picker to the url (?service=XYZ). We can do it in a separate Pull Request.
https://github.com/kamilkisiela/graphql-hive/issues/4793