Search list for schema page with multiple services #4742

TuvalSimha · 2024-05-12T13:48:18Z

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

before.mov

After

after.mov

changeset-bot · 2024-05-12T13:48:22Z

⚠️ No Changeset found

Latest commit: 906ae35

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

github-actions · 2024-05-12T13:50:37Z

📚 Storybook Deployment

The latest changes are available as preview in: https://bbc5e9f7.hive-storybook.pages.dev

github-actions · 2024-05-12T13:53:16Z

🐋 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"
}
}

dotansimha · 2024-05-15T07:03:23Z

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.

TuvalSimha · 2024-05-15T07:57:19Z

filter schemas

@dotansimha
Fixed :) i changed it to Filter schemas

kamilkisiela

When a user searches for a subgraph and clicks on one of the options, the schema element should not be collapsed.

Another question, how does the list look like when there are 3 subgraphs and when there are 10?

lint ? fix placeholder to `Filter schemas`

TuvalSimha · 2024-05-20T15:09:37Z

@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 :

Screen.Recording.2024-05-20.at.18.05.46.mov

10 schemas

Screen.Recording.2024-05-20.at.18.06.18.mov

n1ru4l

Approved!

Only nitpick is that "Filter schema" should probably be "Find Schema" as filter implies I can select n schemas to display?

TuvalSimha · 2024-05-21T08:55:28Z

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

kamilkisiela · 2024-05-21T09:58:05Z

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.

TuvalSimha · 2024-05-21T11:35:52Z

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.

#4793

TuvalSimha self-assigned this May 12, 2024

TuvalSimha requested review from kamilkisiela, n1ru4l and dotansimha May 12, 2024 14:27

dotansimha approved these changes May 16, 2024

View reviewed changes

kamilkisiela requested changes May 16, 2024

View reviewed changes

TuvalSimha force-pushed the tuval/schema-list-search branch from cfebf20 to 271b5e4 Compare May 20, 2024 13:42

Search list for schema page with multiple services

522776e

lint ? fix placeholder to `Filter schemas`

TuvalSimha force-pushed the tuval/schema-list-search branch from 271b5e4 to 522776e Compare May 20, 2024 13:44

lint

b3f1c3f

fix some

f544d09

TuvalSimha requested review from kamilkisiela and dotansimha May 20, 2024 15:10

n1ru4l approved these changes May 21, 2024

View reviewed changes

dotansimha approved these changes May 21, 2024

View reviewed changes

placeholder

6718635

TuvalSimha enabled auto-merge (squash) May 21, 2024 09:07

Merge branch 'main' into tuval/schema-list-search

906ae35

kamilkisiela approved these changes May 21, 2024

View reviewed changes

TuvalSimha merged commit 13e54a7 into main May 21, 2024
25 checks passed

TuvalSimha deleted the tuval/schema-list-search branch May 21, 2024 11:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Search list for schema page with multiple services #4742

Search list for schema page with multiple services #4742

TuvalSimha commented May 12, 2024 •

edited

changeset-bot bot commented May 12, 2024 •

edited

github-actions bot commented May 12, 2024 •

edited

github-actions bot commented May 12, 2024 •

edited

dotansimha commented May 15, 2024

TuvalSimha commented May 15, 2024

kamilkisiela left a comment

TuvalSimha commented May 20, 2024 •

edited by kamilkisiela

n1ru4l left a comment

TuvalSimha commented May 21, 2024

kamilkisiela commented May 21, 2024

TuvalSimha commented May 21, 2024

Search list for schema page with multiple services #4742

Search list for schema page with multiple services #4742

Conversation

TuvalSimha commented May 12, 2024 • edited

Background

Description

Before

After

changeset-bot bot commented May 12, 2024 • edited

⚠️ No Changeset found

github-actions bot commented May 12, 2024 • edited

📚 Storybook Deployment

github-actions bot commented May 12, 2024 • edited

dotansimha commented May 15, 2024

TuvalSimha commented May 15, 2024

kamilkisiela left a comment

Choose a reason for hiding this comment

TuvalSimha commented May 20, 2024 • edited by kamilkisiela

n1ru4l left a comment

Choose a reason for hiding this comment

TuvalSimha commented May 21, 2024

kamilkisiela commented May 21, 2024

TuvalSimha commented May 21, 2024

TuvalSimha commented May 12, 2024 •

edited

changeset-bot bot commented May 12, 2024 •

edited

github-actions bot commented May 12, 2024 •

edited

github-actions bot commented May 12, 2024 •

edited

TuvalSimha commented May 20, 2024 •

edited by kamilkisiela