[Feature]: Add Empty States for the screens

[pixelsbyeryc]

Is there an existing issue for this?

• [X] I have searched the existing issues

Summary

Empty states are great for guiding newcomers into what to do without any onboarding.

Instead of just saying "No X found.", like in the message below:

We can either do:

1. A simple message with a descriptive call to action
2. A more advanced option with buttons specific for each service

1. SImple Message

Title: "Hey! You're new around here, right? Let's get you started"

Description: "Services do X, Y, Z, and you can connect them to A, B, C. Ready to create a new Service?"

Button: "Create a new service"

CodeSandbox Welcome example (after you clicked "Create a New Sandbox"):

2. Advanced option

Title: "Hey! You're new around here, right? Let's get you started"

Description: "Services do X, Y, Z, and you can connect them to A, B, C. You can start from one of these options:"

Buttons for each one of the available services you can create

optional A call to action at the end that says "Request a new service" (that links to Github Issues).

CodeSandbox does a great job at this:

Why should this be worked on?

The issues are most related to UX:

• It feels confusing... Where should I click? Why does it feel so empty?
• Loses the opportunity to enchant new users
• It's easy to implement

How it helps:

1. It onboards the new users by guiding them through:
   • What that feature is (services, git sources, destinations, etc)
   • How to add a new one
   • How to request new features
2. It's aesthetically pleasing to see a filled screen with clear directions
3. It's low effort and high rewards (80-20 rule)

[vasani-arpit]

Nice !!

@andrasbacsai Can we do something like this? this is just a sketch idea.

found the illustrations from here https://drawkit.com/product/project-product-manager-illustrations

We can choose a theme and use different illustrator for each page like DB, destination, git and application.

[pixelsbyeryc]

@vasani-arpit would you like me to try a UI for these screens? ✌️

[vasani-arpit]

Yes, Sure but wait until @andrasbacsai's input. I think we should choose one of this styles for inspiration https://icons8.com/illustrations/styles and derive ours from it.

[andrasbacsai]

I'm closing this issue, because tracking features will be moved to GitHub discussions. Github issues will be only for bugs.

Version 4 is in full focus. v3 related issues will be closed, if it is not a critical bug.

Thanks for your understanding.