search

asyncapi / studio

Visually design your AsyncAPI files and event-driven architecture.
https://studio.asyncapi.com
Apache License 2.0
171 stars 99 forks source link

Layout improvement #703

Open Amzani opened 1 year ago

Amzani commented 1 year ago

Problem

What's the story exposing the problem the users are facing

The previous top bar disappears as it was useless (it only had the Studio logo and some links to stuff not related to Studio). Instead, it's now holding the name of the service (AsyncAPI file) we're developing and a few buttons to customize the layout. These are just the buttons that used to be on the sidebar, i.e., toggle Navigation, Docs, Diagnostics, etc.

But probably, the biggest change here is the introduction of this new sidebar on the left. It contains a bunch of buttons and also the avatar of the user. This new sidebar is meant to be the navigation for the whole application, meaning it's not just for the code editor as it was before. The purpose of this sidebar is to navigate to other parts of the application like Services, Governance, Settings, and more.

In general, now the layout is accommodated to start growing the application in a friendly and sane way.

Solution

Proposed solution with mockups, views ...

Image

Link to Figma: https://www.figma.com/proto/bPMB3lkMTOOMuKk0oGLuNm/Studio?type=design&node-id=144-4141&scaling=contain&page-id=0%3A1&starting-point-node-id=2%3A2

Rabbit holes

Potential technical, design ... challenges

  1. To incorporate this change, we plan to leverage the new design system (refer to issue #636) as our foundation. Before adding the components into studio, it's crucial to ensure they are first integrated into the design system, in case they are not already included.

Scope

Describe a list of tasks or issues that needs to be done ( you don't need to have an exhaustive list of all the tasks in the beginning)

Out of bounds

What won't be part of the scope

Success criteria

How do we know we made a good bet

divyammadhok commented 1 year ago

Hey @Amzani Let me know if you require assistance in solving this issue. I can pick it up if the issue is unblocked. I'll go through the issue and clarify any requirements once I get the go-ahead from your end.

Amzani commented 1 year ago

Hi @divyammadhok This work will start after cycle 1 is done: https://shapeit.app/projects/org/asyncapi/16/cycles/e4232524 I'll ping you here so you can contribute once we start the cycle 2.

divyammadhok commented 1 year ago

Thanks @Amzani Sounds good!

Amzani commented 1 year ago

Do we want to wait until the next architecture https://github.com/asyncapi/studio/issues/725 is completed before integrating the components ?

Any thoughts ? @Shurtu-gal @fmvilas @KhudaDad414

Shurtu-gal commented 1 year ago

Yeah we wouldn't want to increase the task of migration by adding components before everything is decided.

Amzani commented 1 year ago

@divyammadhok you might be interested to joining this effort: https://asyncapi.slack.com/archives/CQVJXFNQL/p1690810559915289

divyammadhok commented 1 year ago

@Amzani Can you share the access to this channel

fmvilas commented 1 year ago

@divyammadhok sorry for the silence. There have been summer holidays recently and @Amzani probably missed your message. You can sign in to our Slack here: https://asyncapi.com/slack-invite. After that, you'll be able to see the content of this link. Hope that helps.

divyammadhok commented 1 year ago

Hey @fmvilas Got through your message now, and I believe that the link is not valid anymore. Can you please ping this to me again? I'll make a note of joining it on time.

github-actions[bot] commented 10 months ago

This issue has been automatically marked as stale because it has not had recent activity :sleeping:

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience :heart:

shapeit-bot[bot] commented 10 months ago

Thanks for creating a new pitch 🥳. You can now create or link existing scopes. You can create new scopes in two different ways:

Option 1

  1. Edit the Pitch or Bet issue
  2. Add your scope under the scope section

See this example

Option 2

  1. Create a new issue
  2. Add this keywork in the description related to #ISSUE_BET_NUMBER

See this example

Gmin2 commented 8 months ago

Hey @Amzani can i give a hand or two in this?

Gmin2 commented 8 months ago

Hii @Shurtu-gal @Amzani @KhudaDad414 image

Is there been any plan on how to show the user avatar dynamically?

Amzani commented 8 months ago

We don't need to add the avatar as we don't support users (signin/signup) in studio @utnim2

Gmin2 commented 8 months ago

We don't need to add the avatar as we don't support users (signin/signup) in studio @utnim2

@Amzani many parts of the studio are not completed yet that is there in the figma file should i proceed with the part that is present ?

Thanks

Amzani commented 8 months ago

Best to coordinate with @Shurtu-gal as he is working on the NextJS migration, I suggest to add this enhancement as part of the new app in apps/studio-next

Amzani commented 8 months ago

@utnim2 @Shurtu-gal is adding the Editor to NextJS app in this PR https://github.com/asyncapi/studio/pull/997 (still under review), this will be useful here.

Gmin2 commented 8 months ago

i am working on sidebar and the topbar @Amzani