feat: adding new page that allows users to select template (#147)

[boyney123]

Description

Issue: #147

This is a PR that allows users to select a template from the list of templates.

An idea for /new page that allows users to select templates before they go into the editor.

Currently, work in progress.

[netlify]

✔️ Deploy Preview for modest-rosalind-098b67 ready!

🔨 Explore the source changes: af5a976

🔍 Inspect the deploy log: https://app.netlify.com/sites/modest-rosalind-098b67/deploys/61a4e63f7988cd0008bf7b26

😎 Browse the preview: https://deploy-preview-158--modest-rosalind-098b67.netlify.app/

[boyney123]

Made some changes following the conversation over at #167

• New Icon on the left that allows users to create a new file from a list of examples
• When selecting an example to use that is loaded into the editor and views are changed.

[boyney123]

What do you think to the UI/Experience @magicmatatjahu @mcturco ?

I guess the copy on the page will change too

[mcturco]

This is looking great, @boyney123! There are just a few things that I have thoughts on:

• change overflow: scroll to overflow: auto to get rid of the x and y scrollbars
• Apache Kakfa has a typo, it should be Apache Kafka, correct?
• Request a template or add one to the list --> where are we imagining this to link to? Should we create a pop up form of some sort? Or maybe if we want a feedback form, perhaps we just render it on the page at the bottom without the extra click? Or maybe on click of that button a short form slides down
• I think that the Welcome title would only make sense if it was the first screen when you got to the studio. Perhaps this title should be something more indicating of action that the user would take on this screen. I think we could potentially change it to something like Get started with a template or Quick start. I am also unsure if we need the copy that explains what AsyncAPI is (at least on this screen). I think our main goal here is to direct the user to select a template. I do like the copy there that says To get started please select a template. as it is clearly defining the purpose for this screen.
• I think that the font-sizes should be a bit larger, 12pt font (0.75rem) is a bit small for large screens when you are at 4k. I could put together a mock up and present what I think would work best if that helps?

In addition to the above, I think it would be helpful if I created icons for each of the template cards that relates to the type of template that you are choosing, that way it might give the user a chance to associate that template with a visual which will in turn make the selection process a little bit easier for them.

Also, I think if we aren't going to load in the Studio with this screen first, it might be helpful to "hint" at it on the main screen. Maybe is a small window that says "New here? Start with a template" that would maybe pop out just near the new navigation item that you added for the templates screen. I can prepare a mock up for that too if we like that idea.

[boyney123]

Thanks for the review @mcturco !

Request a template or add one to the list --> where are we imagining this to link to? Should we create a pop up form of some sort? Or maybe if we want a feedback form, perhaps we just render it on the page at the bottom without the extra click? Or maybe on click of that button a short form slides down

Yeah, I'm thinking maybe a link to a new GitHub issue that is prefilled which allows them to just say what they are interested in, not sure if the feature is required to be honest, I thought it would be nice touch to get some user feedback.

So if user clicks button, a new tab is open in GitHub with predefined issue template which allows them to specify what kind of template they might want to use or see.

I think that the Welcome title would only make sense if it was the first screen when you got to the studio. Perhaps this title should be something more indicating of action that the user would take on this screen. I think we could potentially change it to something like Get started with a template or Quick start. I am also unsure if we need the copy that explains what AsyncAPI is (at least on this screen). I think our main goal here is to direct the user to select a template. I do like the copy there that says To get started please select a template. as it is clearly defining the purpose for this screen.

Yeah I agree I think Quick start sounds good. Guess I'm thinking about the users that come from the website straight into the Studio, just exploring mode and not really knowing what they are looking at or doing.... but maybe we can address this usecase in another feature/pull request? I like your suggestions about keeping it simplified, I guess users that already know what AsyncAPI is, don't need to be reminded here

I think that the font-sizes should be a bit larger, 12pt font (0.75rem) is a bit small for large screens when you are at 4k. I could put together a mock up and present what I think would work best if that helps?

Yeah fair enough! I'm using tailwind text-xs at the moment, but that is a tad too small, let me change that to test-sm to see what you think :)

In addition to the above, I think it would be helpful if I created icons for each of the template cards that relates to the type of template that you are choosing, that way it might give the user a chance to associate that template with a visual which will in turn make the selection process a little bit easier for them.

Sounds great to me!!

Also, I think if we aren't going to load in the Studio with this screen first, it might be helpful to "hint" at it on the main screen. Maybe is a small window that says "New here? Start with a template" that would maybe pop out just near the new navigation item that you added for the templates screen. I can prepare a mock up for that too if we like that idea.

Well there is an option we could use something like query string to determine which page you load in on, for example studio.asyncapi.com?page=template or something, and we could go to that URL from the landing page for example, which allows users to get started on this page, is that what you are thinking?

[boyney123]

@mcturco just made some changes:

• removed the AsyncAPI info
• changed to Quick Start
• Bumped up the text size

Let me know when you get some icons for the templates and will add them in to see what they look like, or you add them, up to you :)

[mcturco]

@boyney123 here are some really annoying little designer tweaks 😄 (see screenshot below)

I think after this, we can probably launch it the way it is because I think it is a very useful thing to add and it definitely works. I think after we ship this, I would like to iterate on the design - this is where I can add the icons.

Well there is an option we could use something like query string to determine which page you load in on

We can definitely do this! What I was thinking was regardless of where you are coming from to the studio, on the main screen we can have a little "bubble" (kind of like a suggestion pop up that you can close out) where it let's you know that this is a new feature that we have added. I can mock it up for you and attach it to a separate issue for the design iteration!

[boyney123]

Thanks, @mcturco! (Sorry taken a while to get to this one).

Changes have been made, what browser are you using to see those scroll issues? I made the scroll changes too, if you could confirm they are OK? 🙏

@magicmatatjahu you mentioned last week we should move this icon in the nav, what do you both think? @magicmatatjahu mentioned may be moving it to the bottom vs at the top, I'm happy either way, guess my only thought was at the top as it felt natural to me

[magicmatatjahu]

@boyney123 Awesome! I think that we should add that icon not as first but as last, for a simple reason: How many people will there be who will open a new file each time? Most people will focus on navigation, editor, html and visualiser, so the new panel should be displayed last in navigation (not at the bottom, but last 😅 )

[boyney123]

Hey @magicmatatjahu yeah fair enough! I moved it on the sidebar, let me know what you think?

[magicmatatjahu]

@boyney123 Awesome! I only have problem with this logic what exactly is opened (which panels) when you choose the example from new view, e.g.: if I closed the navigation and template I only see editor, but then if I open new example, nav, editor and template is visible, I think that we should only show previous opened panels, what do you think?

Please also run npm run lint:fix and then fix linter problems :)

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[magicmatatjahu]

@boyney123 I updated your PR with my suggestion :)

@mcturco Hi! Could you check if everything is good in point of view UX? As I see, David previously propagated your suggestions :)

[mcturco]

Thanks @boyney123 for making those changes! I was seeing the scroll bar issue in Chrome, but you seemed to have fixed the issue 👍 As for the icon placement on the navigation, I have to say that i think it makes more sense to add it at the top of the list since it could give people the opportunity to see it and use a template, but perhaps we can see how it is working on the bottom first and then make adjustments if we need to in the future. I have a few feature suggestions for the UX anyways that we can resolve in a separate issue/PR. But I think this all looks good to launch for now until we iterate! 😄

[magicmatatjahu]

@mcturco Thanks for comment!

have a few feature suggestions for the UX anyways that we can resolve in a separate issue/PR. But I think this all looks good to launch for now until we iterate! 😄

Could you create issue for that? :)

As for the icon placement on the navigation, I have to say that i think it makes more sense to add it at the top of the list since it could give people the opportunity to see it and use a template, but perhaps we can see how it is working on the bottom first and then make adjustments if we need to in the future.

I thought so too, but then I realized that if it will be first, people might accidentally open the view and want to close the navigation, hence my suggestion to put it at the end for safety :)

[mcturco]

@magicmatatjahu

Could you create issue for that? :)

Sure, I can write that up now 👍

I thought so too, but then I realized that if it will be first, people might accidentally open the view and want to close the navigation

No worries! I'm fine with seeing how the placement is working once we push these changes live. The UX updates that I will be suggesting might also help with this :)

[asyncapi-bot]

🎉 This PR is included in version 0.4.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀