Target setting new design

[TuvalSimha]

Background

This pull request come to change Target design for setting page.

Video demo

https://github.com/kamilkisiela/graphql-hive/assets/37614975/1675a816-3b48-49eb-8a4a-0ebdda90701f

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 12dab547b722b311b1922237302103ca011c071e

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[bot]]

📚 Storybook Deployment

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

[github-actions[bot]]

🐋 This PR was built and pushed to the following Docker images (tag: 6c86ce0ef2468712f9fccb38e6a9cc010f06515c):

Docker Bake metadata

{
"app": {
  "buildx.build.ref": "builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee7/builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee70/7j1o2kyso3yex2jhcfhhrvy8x",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:757c268ae7e44806e986059a9ee925ffecab4247b43abb6fd0261e348dc00f01",
    "size": 685
  },
  "containerimage.digest": "sha256:757c268ae7e44806e986059a9ee925ffecab4247b43abb6fd0261e348dc00f01",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/app:6c86ce0ef2468712f9fccb38e6a9cc010f06515c,ghcr.io/kamilkisiela/graphql-hive/app:tuval_setting_nav"
},
"composition-federation-2": {
  "buildx.build.ref": "builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee7/builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee70/ibzv430iqmh5y4wn0w46lksbh",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:929512c4f335b78638d6f02dbc929bfbf5381b79d67019ee8fa723e27c7d70dc",
    "size": 685
  },
  "containerimage.digest": "sha256:929512c4f335b78638d6f02dbc929bfbf5381b79d67019ee8fa723e27c7d70dc",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/composition-federation-2:6c86ce0ef2468712f9fccb38e6a9cc010f06515c,ghcr.io/kamilkisiela/graphql-hive/composition-federation-2:tuval_setting_nav"
},
"emails": {
  "buildx.build.ref": "builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee7/builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee70/ux1747clnc5n3p6rksnfgx3tu",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:fe6bc4cbbbb15aaabc136e60c662aeb07c439318b6c659d17fa20a48514f425b",
    "size": 685
  },
  "containerimage.digest": "sha256:fe6bc4cbbbb15aaabc136e60c662aeb07c439318b6c659d17fa20a48514f425b",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/emails:6c86ce0ef2468712f9fccb38e6a9cc010f06515c,ghcr.io/kamilkisiela/graphql-hive/emails:tuval_setting_nav"
},
"policy": {
  "buildx.build.ref": "builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee7/builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee70/823wch6fuib3lmkuz19aycnot",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:a12c8e3840c1222caeb76295d7f959a57a2df7d36210b53de3f91977e7a9b9c3",
    "size": 685
  },
  "containerimage.digest": "sha256:a12c8e3840c1222caeb76295d7f959a57a2df7d36210b53de3f91977e7a9b9c3",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/policy:6c86ce0ef2468712f9fccb38e6a9cc010f06515c,ghcr.io/kamilkisiela/graphql-hive/policy:tuval_setting_nav"
},
"rate-limit": {
  "buildx.build.ref": "builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee7/builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee70/3z4f11h717583l2ytkf4ed2xi",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:e0d1d27db2109027f6824b37dfbf24c85fd70944bb2296f3b17c54c7258fea01",
    "size": 685
  },
  "containerimage.digest": "sha256:e0d1d27db2109027f6824b37dfbf24c85fd70944bb2296f3b17c54c7258fea01",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/rate-limit:6c86ce0ef2468712f9fccb38e6a9cc010f06515c,ghcr.io/kamilkisiela/graphql-hive/rate-limit:tuval_setting_nav"
},
"schema": {
  "buildx.build.ref": "builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee7/builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee70/kq39btzkp3hfw0zr1xodq4b4m",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:ec8805865ea03208c062ee8d588709eab86a4f5589c2750babcf9d4930b171cc",
    "size": 685
  },
  "containerimage.digest": "sha256:ec8805865ea03208c062ee8d588709eab86a4f5589c2750babcf9d4930b171cc",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/schema:6c86ce0ef2468712f9fccb38e6a9cc010f06515c,ghcr.io/kamilkisiela/graphql-hive/schema:tuval_setting_nav"
},
"server": {
  "buildx.build.ref": "builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee7/builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee70/k9sway03ag8tjd6usg53hd0w0",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:7a334c59e7bb0ba4b42aa69b357b0a7021d3cb149d0f0ed2fa99e2bf98d84650",
    "size": 685
  },
  "containerimage.digest": "sha256:7a334c59e7bb0ba4b42aa69b357b0a7021d3cb149d0f0ed2fa99e2bf98d84650",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/server:6c86ce0ef2468712f9fccb38e6a9cc010f06515c,ghcr.io/kamilkisiela/graphql-hive/server:tuval_setting_nav"
},
"storage": {
  "buildx.build.ref": "builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee7/builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee70/6q401fbeomvcx3wd7j3ml4d8j",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:73fcbf59f87258ab6fcb6025396e781ddfce04da2e854f1f6419b7e1aef1f1ac",
    "size": 685
  },
  "containerimage.digest": "sha256:73fcbf59f87258ab6fcb6025396e781ddfce04da2e854f1f6419b7e1aef1f1ac",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/storage:6c86ce0ef2468712f9fccb38e6a9cc010f06515c,ghcr.io/kamilkisiela/graphql-hive/storage:tuval_setting_nav"
},
"stripe-billing": {
  "buildx.build.ref": "builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee7/builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee70/qfqdgznxrb8p9rn75m569j1vj",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:6671c1e6b7972585635c1fdbba7e5c36febd68d08e578750fda1039e14d77833",
    "size": 685
  },
  "containerimage.digest": "sha256:6671c1e6b7972585635c1fdbba7e5c36febd68d08e578750fda1039e14d77833",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/stripe-billing:6c86ce0ef2468712f9fccb38e6a9cc010f06515c,ghcr.io/kamilkisiela/graphql-hive/stripe-billing:tuval_setting_nav"
},
"tokens": {
  "buildx.build.ref": "builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee7/builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee70/czjha49n2urtf3im4jabj137n",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:fae3547e69e1199d77eb6df997b030adb5934aaa339fb6099c4a3a56c3fd248d",
    "size": 685
  },
  "containerimage.digest": "sha256:fae3547e69e1199d77eb6df997b030adb5934aaa339fb6099c4a3a56c3fd248d",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/tokens:6c86ce0ef2468712f9fccb38e6a9cc010f06515c,ghcr.io/kamilkisiela/graphql-hive/tokens:tuval_setting_nav"
},
"usage": {
  "buildx.build.ref": "builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee7/builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee70/ezcn7xj7sxlwzcdlqcwzx9wyz",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:e5b166e3e11722468f2c6bce4589c4a79fd80a3d7703aa6a3f709dec6fd60e56",
    "size": 685
  },
  "containerimage.digest": "sha256:e5b166e3e11722468f2c6bce4589c4a79fd80a3d7703aa6a3f709dec6fd60e56",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/usage:6c86ce0ef2468712f9fccb38e6a9cc010f06515c,ghcr.io/kamilkisiela/graphql-hive/usage:tuval_setting_nav"
},
"usage-estimator": {
  "buildx.build.ref": "builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee7/builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee70/t1joozixsswt9kunez42g9tlw",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:c9d3c0065bd53a84b406c0371b7b5569f88e7fd484db6f51c0e1865f03aad8d5",
    "size": 685
  },
  "containerimage.digest": "sha256:c9d3c0065bd53a84b406c0371b7b5569f88e7fd484db6f51c0e1865f03aad8d5",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/usage-estimator:6c86ce0ef2468712f9fccb38e6a9cc010f06515c,ghcr.io/kamilkisiela/graphql-hive/usage-estimator:tuval_setting_nav"
},
"usage-ingestor": {
  "buildx.build.ref": "builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee7/builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee70/wtbzp23g9fyonjyy3vtwfowiq",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:a7cc6bf456c65a51b3c9529bbe5bed194c7d19a619bc6af86d2b4344be2e5f11",
    "size": 685
  },
  "containerimage.digest": "sha256:a7cc6bf456c65a51b3c9529bbe5bed194c7d19a619bc6af86d2b4344be2e5f11",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/usage-ingestor:6c86ce0ef2468712f9fccb38e6a9cc010f06515c,ghcr.io/kamilkisiela/graphql-hive/usage-ingestor:tuval_setting_nav"
},
"webhooks": {
  "buildx.build.ref": "builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee7/builder-0f57ab5d-912b-4dd4-812b-0eb49bf18ee70/ew3od6wdkbtund8hp6o1w12s8",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:1a2bc44d9892c7d3451622f7bfd97cbdfcfa86d6ebe935c60f4d32020f3fb6b7",
    "size": 685
  },
  "containerimage.digest": "sha256:1a2bc44d9892c7d3451622f7bfd97cbdfcfa86d6ebe935c60f4d32020f3fb6b7",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/webhooks:6c86ce0ef2468712f9fccb38e6a9cc010f06515c,ghcr.io/kamilkisiela/graphql-hive/webhooks:tuval_setting_nav"
}
}

[dotansimha]

I think we need to rethink the sidebar title and icons. Maybe something like that?

⚙️ General 🔑 Tokens 🧱 Schema Composition

[n1ru4l]

If we use icons please icons without color and not built-in emojis that will look completly different based on the OS being used.

As for the seperations, I would even separate CDN access tokens and registry tokens to their own pages, as well as conditional breaking changes and base schemas.

[n1ru4l]

I think the yellow underline might be a bit too aggressive, we already have a similar side menu for the user role management settings on the organisation level, we could mostly re-use these styles.

[kamilkisiela]

Settings Manage your XYZ

is no longer needed and it will just look a bit better

[kamilkisiela]

And let's not use icons as it's really just 2-3 groups there, described by a single word. No need to have icons

[kamilkisiela]

@TuvalSimha you can check the sub-menu I did for members, because we already have such thing in Hive, now we will have 2 differently looking menus that serve the same purpose.

[n1ru4l]

Let's also separate CDN access tokens and registry tokens to their own pages

https://github.com/kamilkisiela/graphql-hive/pull/4241#issuecomment-2067958416

[n1ru4l]

Lets have a "Conditional breaking changes" page, and a "base schema" page.

[TuvalSimha]

@n1ru4l @dotansimha @kamilkisiela Little bit confused 🤣

Lets make it clear:

(tab section | content page components)

1. General: Target Name Edit + GraphQL Endpoint URL + Delete Target
2. CDN: CDN Access Token
3. Tokens: Registry Access Tokens
4. Conditional Breaking Changes: Conditional Breaking Changes
5. Base Schema: Extend Base Schema

right?

[n1ru4l]

@TuvalSimha Let's also drop the "shape"/frame around the single sections:

Instead, we can make it look more flat similar to GitHub, and separate different sections through headings and spacings like GitHub settings:

Kind of what we already do on the members page:

[TuvalSimha]

@dotansimha @kamilkisiela @n1ru4l

So i worked on it, created new components for that to make sure all be with the same design. You can watch the video below

https://github.com/kamilkisiela/graphql-hive/assets/37614975/6d0d2750-3203-45c0-98fd-e0f79dc4d484

Thoughts?

[TuvalSimha]

@dotansimha @kamilkisiela @n1ru4l

So i worked on it, created new components for that to make sure all be with the same design. You can watch the video below

Screen.Recording.2024-05-05.at.17.53.48.mov Thoughts?

Oh, and for this moment every sub page for Members without any main title (see the main title in Target setting) i can add if we want. Also, what about the organization settings design?