Layout improvement

[Amzani]

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 ...

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 Create a Studio design system and UI kit #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)

• SideBar
• TopBar

Out of bounds

What won't be part of the scope

Success criteria

How do we know we made a good bet

[divyammadhok]

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]

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]

Thanks @Amzani Sounds good!

[Amzani]

Do we want to wait until the next architecture #725 is completed before integrating the components ?

Any thoughts ? @Shurtu-gal @fmvilas @KhudaDad414

[Shurtu-gal]

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

[Amzani]

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

[divyammadhok]

@Amzani Can you share the access to this channel

[fmvilas]

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

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]

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

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 ❤️

[shapeit-bot]

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]

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

[Gmin2]

Hii @Shurtu-gal @Amzani @KhudaDad414

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

[Amzani]

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

[Gmin2]

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]

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]

@utnim2 @Shurtu-gal is adding the Editor to NextJS app in this PR #997 (still under review), this will be useful here.

[Gmin2]

i am working on sidebar and the topbar
@Amzani