Target setting new design #4241

TuvalSimha · 2024-03-15T18:17:27Z

Background

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

Video demo

Screen.Recording.2024-04-18.at.17.31.49.mov

changeset-bot · 2024-03-15T18:17:31Z

⚠️ No Changeset found

Latest commit: b30c98b

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-03-15T18:19:52Z

📚 Storybook Deployment

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

github-actions · 2024-03-15T18:22:23Z

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

Docker Bake metadata

{
"app": {
  "buildx.build.ref": "builder-147febbc-f790-44b1-a9da-7ef28244c6d2/builder-147febbc-f790-44b1-a9da-7ef28244c6d20/bdbk0tfjhy6lm8rag2dgsw0dn",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:8797151568a4f6bee042331586d4a237aae6a59dab5575bfca9a4c106e6b362e",
    "size": 685
  },
  "containerimage.digest": "sha256:8797151568a4f6bee042331586d4a237aae6a59dab5575bfca9a4c106e6b362e",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/app:b30c98b70f7978a0d7544eb6fa74e05c60e4bf31,ghcr.io/kamilkisiela/graphql-hive/app:tuval_setting_nav"
},
"composition-federation-2": {
  "buildx.build.ref": "builder-147febbc-f790-44b1-a9da-7ef28244c6d2/builder-147febbc-f790-44b1-a9da-7ef28244c6d20/l44a9zkuz83ketuc4azlv6apq",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:53c2b2398808bd4d3b4d8793774866f6e18235c415ae2775848797cc4f9d97ff",
    "size": 685
  },
  "containerimage.digest": "sha256:53c2b2398808bd4d3b4d8793774866f6e18235c415ae2775848797cc4f9d97ff",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/composition-federation-2:b30c98b70f7978a0d7544eb6fa74e05c60e4bf31,ghcr.io/kamilkisiela/graphql-hive/composition-federation-2:tuval_setting_nav"
},
"emails": {
  "buildx.build.ref": "builder-147febbc-f790-44b1-a9da-7ef28244c6d2/builder-147febbc-f790-44b1-a9da-7ef28244c6d20/7tl32p5p1tt6zv69cdd166xcs",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:05f279017d68afc31b8b6b987377c87ec157f36110c0701bc9d030e0bb1eb04f",
    "size": 685
  },
  "containerimage.digest": "sha256:05f279017d68afc31b8b6b987377c87ec157f36110c0701bc9d030e0bb1eb04f",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/emails:b30c98b70f7978a0d7544eb6fa74e05c60e4bf31,ghcr.io/kamilkisiela/graphql-hive/emails:tuval_setting_nav"
},
"policy": {
  "buildx.build.ref": "builder-147febbc-f790-44b1-a9da-7ef28244c6d2/builder-147febbc-f790-44b1-a9da-7ef28244c6d20/qrg1jolig7nt6ctzhtw0c7ui1",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:73716b3cd7c48341d392176f7a8fc4690791799e85dca9c75bdae09b87d00838",
    "size": 685
  },
  "containerimage.digest": "sha256:73716b3cd7c48341d392176f7a8fc4690791799e85dca9c75bdae09b87d00838",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/policy:b30c98b70f7978a0d7544eb6fa74e05c60e4bf31,ghcr.io/kamilkisiela/graphql-hive/policy:tuval_setting_nav"
},
"rate-limit": {
  "buildx.build.ref": "builder-147febbc-f790-44b1-a9da-7ef28244c6d2/builder-147febbc-f790-44b1-a9da-7ef28244c6d20/h039ioh5yujshy3x3v2eebfkb",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:a543b0308364d5b5d8ea25e356e0c4d2236d5f5f6e727922cdb80ff9d1a19396",
    "size": 685
  },
  "containerimage.digest": "sha256:a543b0308364d5b5d8ea25e356e0c4d2236d5f5f6e727922cdb80ff9d1a19396",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/rate-limit:b30c98b70f7978a0d7544eb6fa74e05c60e4bf31,ghcr.io/kamilkisiela/graphql-hive/rate-limit:tuval_setting_nav"
},
"schema": {
  "buildx.build.ref": "builder-147febbc-f790-44b1-a9da-7ef28244c6d2/builder-147febbc-f790-44b1-a9da-7ef28244c6d20/t6uggv3iva7eimokoin0u3zh6",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:7656bbe27bf9eb94eca299cdf24bb54bf0b2a95f437b8f36e0e481940c7dc752",
    "size": 685
  },
  "containerimage.digest": "sha256:7656bbe27bf9eb94eca299cdf24bb54bf0b2a95f437b8f36e0e481940c7dc752",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/schema:b30c98b70f7978a0d7544eb6fa74e05c60e4bf31,ghcr.io/kamilkisiela/graphql-hive/schema:tuval_setting_nav"
},
"server": {
  "buildx.build.ref": "builder-147febbc-f790-44b1-a9da-7ef28244c6d2/builder-147febbc-f790-44b1-a9da-7ef28244c6d20/7nfziwv9qp5jwbgw5ib010uy0",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:218b12331d2b7ca1195fee13d536a9ce16cd741f7891fca6aba20528f3cf3003",
    "size": 685
  },
  "containerimage.digest": "sha256:218b12331d2b7ca1195fee13d536a9ce16cd741f7891fca6aba20528f3cf3003",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/server:b30c98b70f7978a0d7544eb6fa74e05c60e4bf31,ghcr.io/kamilkisiela/graphql-hive/server:tuval_setting_nav"
},
"storage": {
  "buildx.build.ref": "builder-147febbc-f790-44b1-a9da-7ef28244c6d2/builder-147febbc-f790-44b1-a9da-7ef28244c6d20/f19ni4z5iluczszxxniuv9cxd",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:9d959933885d610e977ccb8ea71168603b6b32d882b2e2bcdae8f0ae9a3c445e",
    "size": 685
  },
  "containerimage.digest": "sha256:9d959933885d610e977ccb8ea71168603b6b32d882b2e2bcdae8f0ae9a3c445e",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/storage:b30c98b70f7978a0d7544eb6fa74e05c60e4bf31,ghcr.io/kamilkisiela/graphql-hive/storage:tuval_setting_nav"
},
"stripe-billing": {
  "buildx.build.ref": "builder-147febbc-f790-44b1-a9da-7ef28244c6d2/builder-147febbc-f790-44b1-a9da-7ef28244c6d20/0s686ydkvxxvvwyki4u613637",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:906c22d52ca9b14412a323b66bf5fedb3a932470a566e823a32d697b3f38046c",
    "size": 685
  },
  "containerimage.digest": "sha256:906c22d52ca9b14412a323b66bf5fedb3a932470a566e823a32d697b3f38046c",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/stripe-billing:b30c98b70f7978a0d7544eb6fa74e05c60e4bf31,ghcr.io/kamilkisiela/graphql-hive/stripe-billing:tuval_setting_nav"
},
"tokens": {
  "buildx.build.ref": "builder-147febbc-f790-44b1-a9da-7ef28244c6d2/builder-147febbc-f790-44b1-a9da-7ef28244c6d20/ll4r0g2cfnn417koyhoib4un8",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:60ffbec80d143ca6d4cf2393ccd6e0bd03407e12c5aead02cb0a4382093c3588",
    "size": 685
  },
  "containerimage.digest": "sha256:60ffbec80d143ca6d4cf2393ccd6e0bd03407e12c5aead02cb0a4382093c3588",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/tokens:b30c98b70f7978a0d7544eb6fa74e05c60e4bf31,ghcr.io/kamilkisiela/graphql-hive/tokens:tuval_setting_nav"
},
"usage": {
  "buildx.build.ref": "builder-147febbc-f790-44b1-a9da-7ef28244c6d2/builder-147febbc-f790-44b1-a9da-7ef28244c6d20/jqiyrzvb6t1w194to6eoxg5v9",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:c4625185e5df454478e13eb6f1cda6ff06434ed2b49d6dccbb824d7e11aa9c83",
    "size": 685
  },
  "containerimage.digest": "sha256:c4625185e5df454478e13eb6f1cda6ff06434ed2b49d6dccbb824d7e11aa9c83",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/usage:b30c98b70f7978a0d7544eb6fa74e05c60e4bf31,ghcr.io/kamilkisiela/graphql-hive/usage:tuval_setting_nav"
},
"usage-estimator": {
  "buildx.build.ref": "builder-147febbc-f790-44b1-a9da-7ef28244c6d2/builder-147febbc-f790-44b1-a9da-7ef28244c6d20/nvmrqzwv5ycy6go0igze2v99u",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:85e4cd2fc9a9ff6e5f5c996cfab1fa615e5a7804a695dfd3279a45791b05cc7e",
    "size": 685
  },
  "containerimage.digest": "sha256:85e4cd2fc9a9ff6e5f5c996cfab1fa615e5a7804a695dfd3279a45791b05cc7e",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/usage-estimator:b30c98b70f7978a0d7544eb6fa74e05c60e4bf31,ghcr.io/kamilkisiela/graphql-hive/usage-estimator:tuval_setting_nav"
},
"usage-ingestor": {
  "buildx.build.ref": "builder-147febbc-f790-44b1-a9da-7ef28244c6d2/builder-147febbc-f790-44b1-a9da-7ef28244c6d20/aowficsyeallix57omnlaxkzk",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:382b202ca20a980d7fd86d41b4b5e19e58862e02342ebbb0d60b89b7662f72d0",
    "size": 685
  },
  "containerimage.digest": "sha256:382b202ca20a980d7fd86d41b4b5e19e58862e02342ebbb0d60b89b7662f72d0",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/usage-ingestor:b30c98b70f7978a0d7544eb6fa74e05c60e4bf31,ghcr.io/kamilkisiela/graphql-hive/usage-ingestor:tuval_setting_nav"
},
"webhooks": {
  "buildx.build.ref": "builder-147febbc-f790-44b1-a9da-7ef28244c6d2/builder-147febbc-f790-44b1-a9da-7ef28244c6d20/ki5d4pzdtrewnn7hcc825r6pl",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:d9814c56d25583cf97f8f2d79375323ea9552254a10b2eec144e2f92ff45cef1",
    "size": 685
  },
  "containerimage.digest": "sha256:d9814c56d25583cf97f8f2d79375323ea9552254a10b2eec144e2f92ff45cef1",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/webhooks:b30c98b70f7978a0d7544eb6fa74e05c60e4bf31,ghcr.io/kamilkisiela/graphql-hive/webhooks:tuval_setting_nav"
}
}

dotansimha · 2024-04-21T07:44:43Z

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

⚙️ General
🔑 Tokens
🧱 Schema Composition

n1ru4l · 2024-04-21T08:29:56Z

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 · 2024-04-21T08:30:51Z

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 · 2024-04-22T15:53:53Z

Settings
Manage your XYZ

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

kamilkisiela · 2024-04-22T15:54:54Z

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 · 2024-04-22T15:56:15Z

@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 · 2024-04-29T12:41:49Z

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

#4241 (comment)

n1ru4l · 2024-04-29T12:42:27Z

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

n1ru4l

see my two comments!

TuvalSimha · 2024-04-30T17:45:38Z

@n1ru4l @dotansimha @kamilkisiela
Little bit confused 🤣

Lets make it clear:

(tab section | content page components)

General: Target Name Edit + GraphQL Endpoint URL + Delete Target
CDN: CDN Access Token
Tokens: Registry Access Tokens
Conditional Breaking Changes: Conditional Breaking Changes
Base Schema: Extend Base Schema

right?

n1ru4l · 2024-05-03T10:19:47Z

@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 · 2024-05-05T14:56:11Z

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

TuvalSimha · 2024-05-05T14:58:18Z

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

packages/web/app/src/components/v2/modals/connect-schema.tsx

? lint fix some prettier ? fix and clean set up pnpm ? major change in design clean import ? titles fixed pnpm i fix ? lint pnpm i ? clean more storybook prettier pnpm i pnpm i ? pnpm i prettier & router lint lint fix? prettier fix CDN routes search? ? ? ? ? Kamil helped me <3 Kamil hints Copy paste from Kamil DM fix Link search in menu page is undefined also

TuvalSimha marked this pull request as draft March 15, 2024 18:17

TuvalSimha self-assigned this Mar 19, 2024

TuvalSimha marked this pull request as ready for review March 19, 2024 07:40

TuvalSimha changed the title ~~Draft: setting nav design~~ Target setting new design Mar 19, 2024

TuvalSimha force-pushed the tuval/setting-nav branch from 1bd5e8b to 0b6acf5 Compare March 19, 2024 07:46

TuvalSimha force-pushed the tuval/setting-nav branch from 29fdd2e to 7384244 Compare March 28, 2024 13:19

TuvalSimha requested review from kamilkisiela and n1ru4l March 28, 2024 13:53

TuvalSimha force-pushed the tuval/setting-nav branch from 5430ea7 to 38e8496 Compare April 26, 2024 14:15

n1ru4l requested changes Apr 29, 2024

View reviewed changes

TuvalSimha force-pushed the tuval/setting-nav branch 2 times, most recently from a46ceee to 39cd2ea Compare April 30, 2024 19:01

TuvalSimha requested a review from n1ru4l May 5, 2024 15:48

TuvalSimha force-pushed the tuval/setting-nav branch 2 times, most recently from 588cb26 to 55964ce Compare May 8, 2024 08:40

TuvalSimha force-pushed the tuval/setting-nav branch 5 times, most recently from 95d1234 to d7d4f8b Compare May 12, 2024 14:15

TuvalSimha force-pushed the tuval/setting-nav branch from 5459657 to 6fd8911 Compare May 19, 2024 08:51

kamilkisiela reviewed May 20, 2024

View reviewed changes

packages/web/app/src/components/v2/modals/connect-schema.tsx Outdated Show resolved Hide resolved

TuvalSimha force-pushed the tuval/setting-nav branch from c82f5bc to 4f9a537 Compare May 20, 2024 12:53

TuvalSimha requested a review from kamilkisiela May 20, 2024 12:54

kamilkisiela force-pushed the tuval/setting-nav branch from 4f9a537 to abeaceb Compare May 23, 2024 08:56

fixes

ba29369

kamilkisiela enabled auto-merge (squash) May 23, 2024 09:24

TuvalSimha added 3 commits June 4, 2024 13:50

Merge branch 'main' into tuval/setting-nav

a440ed6

Merge branch 'main' into tuval/setting-nav

38777a2

Merge branch 'main' into tuval/setting-nav

b30c98b

kamilkisiela disabled auto-merge June 4, 2024 11:15

kamilkisiela merged commit da1d8ac into main Jun 4, 2024
22 of 25 checks passed

kamilkisiela deleted the tuval/setting-nav branch June 4, 2024 11:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Target setting new design #4241

Target setting new design #4241

TuvalSimha commented Mar 15, 2024 •

edited

changeset-bot bot commented Mar 15, 2024 •

edited

github-actions bot commented Mar 15, 2024 •

edited

github-actions bot commented Mar 15, 2024 •

edited

dotansimha commented Apr 21, 2024

n1ru4l commented Apr 21, 2024

n1ru4l commented Apr 21, 2024 •

edited

kamilkisiela commented Apr 22, 2024 •

edited

kamilkisiela commented Apr 22, 2024 •

edited

kamilkisiela commented Apr 22, 2024

n1ru4l commented Apr 29, 2024

n1ru4l commented Apr 29, 2024

n1ru4l left a comment

TuvalSimha commented Apr 30, 2024

n1ru4l commented May 3, 2024 •

edited

TuvalSimha commented May 5, 2024 •

edited

TuvalSimha commented May 5, 2024

Target setting new design #4241

Target setting new design #4241

Conversation

TuvalSimha commented Mar 15, 2024 • edited

Background

Video demo

changeset-bot bot commented Mar 15, 2024 • edited

⚠️ No Changeset found

github-actions bot commented Mar 15, 2024 • edited

📚 Storybook Deployment

github-actions bot commented Mar 15, 2024 • edited

dotansimha commented Apr 21, 2024

n1ru4l commented Apr 21, 2024

n1ru4l commented Apr 21, 2024 • edited

kamilkisiela commented Apr 22, 2024 • edited

kamilkisiela commented Apr 22, 2024 • edited

kamilkisiela commented Apr 22, 2024

n1ru4l commented Apr 29, 2024

n1ru4l commented Apr 29, 2024

n1ru4l left a comment

Choose a reason for hiding this comment

TuvalSimha commented Apr 30, 2024

n1ru4l commented May 3, 2024 • edited

TuvalSimha commented May 5, 2024 • edited

TuvalSimha commented May 5, 2024

TuvalSimha commented Mar 15, 2024 •

edited

changeset-bot bot commented Mar 15, 2024 •

edited

github-actions bot commented Mar 15, 2024 •

edited

github-actions bot commented Mar 15, 2024 •

edited

n1ru4l commented Apr 21, 2024 •

edited

kamilkisiela commented Apr 22, 2024 •

edited

kamilkisiela commented Apr 22, 2024 •

edited

n1ru4l commented May 3, 2024 •

edited

TuvalSimha commented May 5, 2024 •

edited