[dashboard] add license tab to the admin dashboard

[nandajavarma]

Description

This PR adds a Licence page to the admin dashboard. This will help the self-hosted user to understand the features they have available, user limit, etc. The information that are currently available on the UI are:

• Licence level (Community, Professional, or Trial)
• Licence type (Replicated or Gitpod)
• List of features and the ones enabled
• User limit, current user count

Design specs for this can be found under the issue 8413

Related Issue(s)

Fixes #8413

How to test

Admin > License tab has been tested for the following scenarios on a self-hosted setup (it won't be available for SaaS):

• Replicated community license:
  • if they exceeded user limit(lesser features) or is within
• Replicated Professional license:
  • if they exceeded user limit(lesser features) or is within
• Gitpod paid license - internal:
  • if they exceeded user limit(lesser features) or is within
• Installation with installer without a license key (default license)
  • if they exceeded user limit(lesser features) or is within

The testing can be done by manually inserting users to the d_b_user table of the mysql pod to exceed the user limits to test all scenarios.

Release Notes

[dashboard] add license tab to the admin dashboard

Documentation

[gtsiolis]

Looking at this now! 👀

[gtsiolis]

Thanks for adding this, @nandajavarma! ✨

Looks great so far! Added some comments below.

From UX perspective this is getting closer to the finish line. We should probably ask for a review from someone to take a closer look at the code before merging, too. 🏁

[nandajavarma]

/werft run with-clean-slate

👍 started the job as gitpod-build-nvn-license-dash.133

[nandajavarma]

Hey @gtsiolis ! Could you give the changes another look when you get a chance, I have modified the code to reflect the changes you suggested:

• https://nvn-license-dash.staging.gitpod-dev.com/admin/license
• https://gitpod.nanpod.fun/admin/license

[gtsiolis]

Thanks for the ping, @nandajavarma! 🏓

This is almost at the finish line! 🏁

Left a few more comments below.

[corneliusludmann]

Thanks for the great work, Nandaja! 🚀

I left a few comments.

Together with the flow chart @lucasvaltl is working on about the different states the license could reach (valid, expired, too many users, wrong domain, etc.) we need to think about how we could test every case (unit tests?) and how the license page actually looks like for each case. But that's follow-up work.

[corneliusludmann]

In this code, the validUntil param is used for Trial licenses only. However, every license could have a limited validation (I expect that we usually issue 1-year licenses that need to be renewed). Right?

[gtsiolis]

... we need to think about how we could test every case (unit tests?) and how the license page actually looks like for each case. But that's follow-up work.

@corneliusludmann Triggered also from the comment in #9343 (comment) (Cc @nandajavarma), I'd also like to better understand the options that exist and the matrix of possible use cases depending on which option a user picks to install Gitpod, so that we make the license page flexible to support all cases. Please, keep me in the loop or ping me in a follow up issue. 🏓

[jldec]

Hi, would you mind making me (jldec) admin on the preview env so that I can look at the admin UI.
(happy to follow instructions if there is a way for me to do this myself)

[corneliusludmann]

Hi, would you mind making me (jldec) admin on the preview env so that I can look at the admin UI. (happy to follow instructions if there is a way for me to do this myself)

@jldec Open a Gitpod workspace from this PR and run leeway run components:make-user-admin (source).

[jldec]

Here's what I see when I look at the preview env (I have narrowed my browser viewport). The comments are just first impressions to someone non-familiar with all the details - not intended as criticism 🙏. Generally speaking I do like the look of the design.

• The 2 boxes are not responsive, and don't wrap when the viewport is narrower - I would have expected wrapping behavior given the design (cc: @gtsiolis)

• The baseline of the X's in the left box are not aligned with the text next to them

• The vertical position of the "Compare Plans" link seems too high, leaving a large space between the text and the bottom of the box.

• (suggestion) I assume that the X's in the left box mean that the features are unavailable. This is slightly unclear because some web forms show checked checkboxes with an X and unchecked checkboxes as empty but with the checkbox frame. It would be better if there were at least one checked item, to make it easier to understand the meaning of the X vs. check iconography. (cc: @gtsiolis)

• I interpret the X's in the following way: all users have lost access to licensed features because the number of seats was exceeded -- Is this the intended interpretation?

• (suggestion) Is the 6/5 exceeded usage limit message correct? I guess this is meant to convey that this instance has a professional licence with 5 seats, and 6 users have registered. It would be clearer if the 5 purchased seats were also explicitly mentioned together with the "Professional" license description on the left, since that feels like one of the most important details.

• I don't see the "Gitpod" License type in the linked self-hosted license page) and can't really interpret what that means.

[nandajavarma]

/werft run with-clean-slate

👍 started the job as gitpod-build-nvn-license-dash.142

[jldec]

I was going through another admin epic, and noticed that the Admin Dashboard should no longer be limited to license holders. This means that Admin Dashboard could always be shown as checked in the left box :)

See ebb90c6 and #6932 (comment) - cc: @mrsimonemms

[nandajavarma]

@jldec My understanding was that, the bit about admin dashboard always being shown is only true in the case of community license. As in, a person setting up self-hosted Gitpod with a Starter plan(until 10 users they get all the enterprise features) gets a fallback upon crossing the 10 user limit and they get only admin dashboard. This is not the case with a paid license. We do not offer fallback. We disable signups and this list basically shows that none of the features are available.

Correct me if I am wrong @mrsimonemms

[corneliusludmann]

Whether the admin dashboard is available or not is outside of the scope of this pull request, in my opinion. We need to fix this on the license code level (if needed) and not in the UI.

Nevertheless, good heads up, @jldec! 🙏

---

@lucasvaltl We need to consider this in our license evaluation work and check implementation vs. what we really want. Homepage tells currently that admin dashboard is a EE feature but I think Jürgen is right here that the admin dashboard is intentional always available (code-wise).

[nandajavarma]

Sorry about the late update on this PR. Holidays did make things a bit late. The preview environment got cleaned up, and your accounts are not there anymore. I can grant admin access as and when necessary.

@corneliusludmann

• I have updated the Compare Plans button to be a simple link that opens up in a new tab. This should make it function a lot nicer.
• About the expiry date, you are absolutely right. The fact that we set one year expiry on professional license was not known to me. I have changed the UI to show the expiry date for both trial and paid accounts. In the case of community, replicated does not allow setting an expiry date. Hence, the tagline will always just display free.

@jldec

• About the responsiveness of the UI, I was hoping we could take up on a second iteration of the UI. Since my front end experience is zero, I would prefer if the WebApp team can help me on this one. I have created a draft issue for this one over at self-hosted project board.
• Good point about the X's. I believe I have fixed their alignment now.
• Alignment of Compare plans is fixed now.
• About the specifics of the features allowed list, I have created a draft issue to fix it. It is a bit out of scope for this PR since we have to further modify the licensor. This is definitely in the pipeline.
• In my opinion, same goes for displaying the users purchased. Once we have our improved licensor in place, this bit can be updated to show more meaning info.
• Currently, the term Gitpod license is used to mean that it is Non replicated license. Since we promote the use of Replciated as the installation medium, the users will see Replicated here. In our preview environments, since we use licensor created licenses, it should up as Gitpod.

Let me know your thoughts! And apologies for the very long waiting time on this PR.

[gtsiolis]

Thanks @nandajavarma for tackling all pending discussions!

FWIW, regarding responsive layout mentioned in #9343 (comment) is part of a larger topic affecting more parts of the dashboard, see #4050. In case there's anything we could do ad-hoc to improve the responsive layout in every PR that introduces new components or patterns we could do that! However, it's also ok or even preferred to leave this out of the scope of this PR.

UX in this PR now looks mergable! 🛹

Do you think it's worth passing this to someone else to take a closer look at the code changes? 🏀

[jldec]

/werft run with-clean-slate

👍 started the job as gitpod-build-nvn-license-dash.150
(with .werft/ from main)

[jldec]

Thank you @nandajavarma - this looks much more polished now.
You have addressed all of my feedback in your comments or in fixes.
LGTM