[Infra] Change the License upgrade prompt

crespocarlos commented 7 months ago

Summary

The current license upgrade prompt in Infra is inconsistent with APM (and Profiling)

Infra

Anomaly Detection:

APM

check: https://github.com/elastic/kibana/blob/main/x-pack/plugins/apm/public/components/shared/license_prompt/index.tsx#L18

How to test

Kibana needs to start with basic license:

Run: POST /_license/start_basic?acknowledge=true

AC

Infra license upgrade prompt is consistent with APM

Design

Discover and resolve infrastructure issues faster with anomaly detection

Uncover infrastructure anomalies to preempt issues and resolve them quicker with the aid of machine learning.

"Start free trial" (change this to whatever is most consistently used in Kibana)

elasticmachine commented 7 months ago

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)

jennypavlova commented 7 months ago

@crespocarlos @roshan-elastic I have a question - The APM text here is:

To use anomaly detection, you must be subscribed to an Elastic Platinum license. With it, you'll be able to monitor your services with the aid of machine learning.

Should we replace services with infrastructure, maybe?

To use anomaly detection, you must be subscribed to an Elastic Platinum license. With it, you'll be able to monitor your infrastructure with the aid of machine learning.

WDYT?

crespocarlos commented 7 months ago

Hey @jennypavlova , That looks good IMO (let's hear @roshan-elastic too). We need to adapt the copy to the Infra context.

roshan-elastic commented 7 months ago

Hey @jennypavlova , That looks good IMO (let's hear @roshan-elastic too). We need to adapt the copy to the Infra context.

LGTM! Let's go! @jennypavlova

jennypavlova commented 7 months ago

Visual / UX

@crespocarlos I am now trying the APM layout in infra and it should look similar, I guess:

Or do we want it to be the same as before (larger text inside an empty prompt but with different wording)?

The current license upgrade prompt in Infra is inconsistent with APM (and Profiling)

BTW profiling has a different license prompt:

Also, I was trying to find the most consistent and good-looking license prompt but they are all different so I guess it depends on the use case or they are developed at different points of time based on the needs back then. I looked at the code responsible for the license management locator and the license checks but I can't say that I understand a lot of the background here - when exactly do we want to "promote" getting a trial and call the action "Start Trial" and when "Upgrade subscription" (Is it also based on the license the user need - Enterprice / Platinum?), do we want to navigate to the docs if the user can't get a trial (like in Infra?) 🤔 For example if the user's trial is expired already maybe showing the "Start Trial" is not perfect if it's not available for the user. Any docs/info regarding that are welcome :)

Technical

I looked at the APM component and compared it with the current infra solution:

In APM there is a dependency on licenseManagement plugin in order to get the locator and form the URL (for the license page) and has a fallback path where in infra we just use the path. So if we want to share the component (in observability_shared for example) we can make the locator an optional prop and reuse the other part between the plugin (added a draft PR to show the idea and how it looks). I am wondering if we want to get the locator in infra as well and add the licenseManagement dependency ( I saw other places in the code where this locator is not used. What is the benefit here and do we want to keep it in general? I checked the locator code briefly and it's not dynamic (used only with { page: 'dashboard' }) so I don't know if we need it but maybe I am missing something.
One question [APM]: In infra, we have different buttons/text in case the user can start a trial (more context here) I couldn't find something similar in APM: Do you know if there is a different prompt in case the user can't start a trial? The changes to do this check for the trial in Infra are old so I am not sure if it is still relevant: @neptunian do you remember anything about the SubscriptionSplashPrompt and the validation around if the user can get a trial? I am not sure if that's the best approach but maybe we can consider something similar also for APM / now the shared component?

jennypavlova commented 7 months ago

Adding the Infra current prompt based on canStartTrial

if true:
if false:

crespocarlos commented 7 months ago

Hey @jennypavlova

Or do we want it to be the same as before (larger text inside an empty prompt but with different wording)?

I'll leave that question to @roshan-elastic.

when exactly do we want to "promote" getting a trial and call the action "Start Trial" and when "Upgrade subscription" (Is it also based on the license the user need - Enterprice / Platinum?)

Good question. Not sure if "Start Trial" is the best CTA, tbh. @roshan-elastic , wdyt?

BTW profiling has a different license prompt:

They look different but both CTAs redirect to /app/management/stack/license_management, whereas Infra redirects to https://www.elastic.co/subscriptions when it /api/license/start_trial returns false - Infra seems to be the only one doing this check, other plugins are delegating that to the license management page.

This page has everything the user needs to manage their license. The "Extend you trial" has an external link to https://www.elastic.co/subscriptions (same as infra) and a CTA to request a trial. This page can also show a "Start Trial" box (see), and it only shows when /api/license/start_trial returns true (same as infra)

IMO infra's prompt should just redirect the license management page: https://github.com/elastic/kibana/blob/main/x-pack/plugins/infra/public/components/subscription_splash_content.tsx#L66

I am wondering if we want to get the locator in infra as well and add the licenseManagement dependency ( I saw other places in the code where this locator is not used. What is the benefit here and do we want to keep it in general? I checked the locator code briefly and it's not dynamic (used only with { page: 'dashboard' }) so I don't know if we need it but maybe I am missing something.

The benefit is to avoid having hardcoded URLs, like /app/management/stack/license_management, in plugins that are not responsible for those paths. The funny thing is that the licenseManagement plugin can be disabled, so we still need to fallback to /app/management/stack/license_management.

This locator was introduced recently and doesn't seem to be widely used yet. APM started using it almost a year ago https://github.com/elastic/kibana/pull/158278

crespocarlos commented 7 months ago

Adding the Infra current prompt based on canStartTrial

if true:

if false:

Yeah. In favor of consistency, I would let this canStartTrial check for the license management page - unless there is a strong reason for Infra to do that validation and have a button redirecting to https://www.elastic.co/subscriptions.

In terms of design, I don't think it looks so bad.

Maybe `Upgrade subscription" is less misleading because it's not always that the license management page will let users start the trial license. It could show an "Extend your trial" option, which can be confusing if the button says "Start trial".

roshan-elastic commented 7 months ago

Hey @jennypavlova great write-up!

Or do we want it to be the same as before (larger text inside an empty prompt but with different wording)?

Are you able to share a screenshots of both options?

when exactly do we want to "promote" getting a trial and call the action "Start Trial" and when "Upgrade subscription" (Is it also based on the license the user need - Enterprice / Platinum?), do we want to navigate to the docs if the user can't get a trial (like in Infra?)

Yeah, this sounds fun 😬. Your suggestion below seems good?

Does this reflect my current thinking here?

If you don't have the right license level:
- if haven't started a trial:
  - Offer a free trial (big blue button 'start trial')
- else if they don't qualify for a trial:
  - Tell them to upgrade to at least a platinum license (big blue button 'upgrade subscription' - which points to a license management page)
else:
- let them use the feature

Adding the Infra current prompt based on canStartTrial

if true:

if false:

Would that be right?

crespocarlos commented 7 months ago

@roshan-elastic @jennypavlova IMHO we should not complicate the flow by creating extra conditions to display the prompt content unless it becomes the standard flow across Kibana.

What @roshan-elastic described above is essentially what infra is currently doing, except that when the trial can be started, the CTA redirects users to https://www.elastic.co/subscriptions.

What other pages do is show a button saying "Upgrade Subscription" or "Start trial" that redirects users to the license management page.

roshan-elastic commented 7 months ago

Cool @crespocarlos - do you know what the simplest flow we could apply would be that allows users to try it out or upgrade their subscription to use it?

Context : Don't want to re-invent the wheel so looking for something simple which achieves the above

crespocarlos commented 7 months ago

@roshan-elastic

Start trial is not possible

What infra does differently is this:

https://github.com/elastic/kibana/assets/2767137/c94a5390-fef4-426b-b3d6-7c408c069cf0

Infra checks if users can start their trial license and, if not, the CTA redirects to the elastic's subs page - That's what differs from the rest of Kibana

In the same scenario, profiling (and APM) simply does this:

https://github.com/elastic/kibana/assets/2767137/d7eb23df-2826-4bbe-bba2-29cbf304d2b6

Start trial is possible

Infra

https://github.com/elastic/kibana/assets/2767137/abc968bc-943f-4764-a80a-3ce5d5df679a

Profiling

https://github.com/elastic/kibana/assets/2767137/122ef1b5-f4fe-49d0-a4e0-66f6ba55ce07

do you know what the simplest flow we could apply would be that allows users to try it out or upgrade their subscription to use it?

IMO the simplest flow is to always redirect users to the license management page and let it decide what options the user has.

jennypavlova commented 7 months ago

@crespocarlos @roshan-elastic Thank you both for the feedback!

Are you able to share a screenshots of both options?

What I meant is the difference in the styling - in APM is that we don't have the icon and the text is a different size so basically we have:

and (icon / bigger text)

IMHO we should not complicate the flow by creating extra conditions to display the prompt content unless it becomes the standard flow across Kibana.

I agree with you, in general, I was trying to understand what is the standard way and try to keep it consistent but also I didn't want to make it too complicated or to make it confusing for the user ( TBH I was also surprised how many different prompts we have and got a bit lost 😅 ) I was trying to understand first why there are many options and is there any logic there we want to persist in different apps. My concern here is that we don't want to have a misleading message in some of the cases.

I am fine with more generic text (same as profiling) because it doesn't matter if we have the trial option or not - when the user is navigated to the management page the trial option will be visible anyway (depending on the case it will be to extend it or to start it):

So totally agree with having a simple flow and sharing it! Regarding the profiling I am not sure about the icon but the text and the button should be OK in all cases - maybe just the name of the license should be defined in the plugins so we don't show the wrong type.

jennypavlova commented 7 months ago

The benefit is to avoid having hardcoded URLs, like /app/management/stack/license_management, in plugins that are not responsible for those paths. The funny thing is that the licenseManagement plugin can be disabled, so we still need to fall back to /app/management/stack/license_management. This locator was introduced recently and doesn't seem to be widely used yet. APM started using it almost a year ago https://github.com/elastic/kibana/pull/158278

@crespocarlos Thanks for clarifying so we should be fine to get the licenseManagement locator in infra as well - I wanted to have it in a shared place but I guess the dependency should come from the plugin using it. I was not sure which was the preferred way - to add a locator as a dependency or to define the URL inside the plugin. So maybe allowing using the locator as optional and still keeping the fallback hardcoded should be fine (in case the locator is not present or passed from a plugin).

So the question here is do we want to change the APM text and button and share it with infra or do we want to create a new template similar to profiling? So something like this: 1.) Update APM prompt text & use in Infra (anomaly detection context)

2.) Make it more generic using profiling design (change the license and feature names and use it in both Infra & APM)

One downside is that we are not promoting the free trial that way so maybe fewer people will click on it. I am sorry if I am overcomplicating this but I think it's important to make the right decision now and to avoid supporting different versions of it and to have a consistent design at the same time.

crespocarlos commented 7 months ago

Hey @jennypavlova thanks for your questions. It's important and helps us make the right decision

So the question here is do we want to change the APM text and button and share it with infra or do we want to create a new template similar to profiling?

I'm not so sure about changing APM prompt. My idea was more to standardize infra using APM as an example.

Is your idea to create one component to be shared between Infra, APM, and Profiling? Perhaps for now we could just create a prompt - or adapt - the prompt in infra. Later we can decide if we want to unify the experience in a single component. wdyt?

About the options, according to EUI https://eui.elastic.co/#/templates/page-template/guidelines#error-and-loading-states, option 2. is preferable. But I don't know if that would look nice in APM, for instance. Look at what Custom Link shows:

I guess that's more of a question for @roshan-elastic and a designer.

One downside is that we are not promoting the free trial that way so maybe fewer people will click on it.

The "Start Trial" button just redirects to the license management page. Is your concern more about whether changing the button text will not make users click on it?

jennypavlova commented 7 months ago

Is your concern more about whether changing the button text will not make users click on it?

That could be the case I think, I am not an expert of course but if the user sees that there is an option to try it for free before upgrading could be more appealing, idk 😅

Is your idea to create one component to be shared between Infra, APM, and Profiling?

Now that I think about it it's not ideal because we have different prompt types and different content based on the license features, etc, and also depending on the position full page vs inside a tab

Perhaps for now we could just create a prompt - or adapt - the prompt in infra. Later we can decide if we want to unify the experience in a single component. wdyt?

Got it! That sounds good but maybe the APM case is not exactly what we need in Infra because it is used inside a Tab/Page Content and in Infra we have only the prompt inside the flyout - so after looking into different prompt designs/cases I am thinking that profiling design will fit better in infra with probably similar content to APM - maybe like this:

My idea was more to standardize infra using APM as an example.

I like the idea of having consistency between the UI but of course, we should also bring value/good UX and I am just not sure if the APM component will fit inside a flyout. I tried different options so we can maybe pick one for infra ( I tried to adapt the content as well) and keep the APM / Profiling unchanged.

Profiling inspired (Text changes only)

Similar to APM (different content & flyout header)

First Version: The same as APM with adding the flyout header to avoid having it as a single element and remove the logic for the trial (always show start trial - same as APM), text changes only:

We can also have the profiling design with APM content (using the "Start Trial" action/title) to combine both prompts 😅 The idea is to find what fits best for infra, I think the profiling version with the content update is better than APM for the infra use case, @roshan-elastic @crespocarlos WDYT?

crespocarlos commented 7 months ago

hey @jennypavlova

That could be the case I think, I am not an expert of course but if the user sees that there is an option to try it for free before upgrading could be more appealing, idk

Yeah. I did a quick search in Kibana. More places are using "Start trial" than "Upgrade subscription" - the latter can only be found in profiling and APM.

I like the one based on Profiling, but I find the title a bit too long. I guess we'll need @roshan-elastic help here.

roshan-elastic commented 7 months ago

Hey @crespocarlos @jennypavlova great discussions...

Just trying to understand where we are...I'm getting a bit lost with what our options are :-P

I've booked in a call for tomorrow AM if we could quickly discuss?

roshan-elastic commented 7 months ago

@jennypavlova I updated the issue with the design and text:

https://github.com/elastic/kibana/issues/176502#issue-2125143829

Thanks!

jennypavlova commented 7 months ago

Thank you @roshan-elastic, I added the changes. I only want to mention that the button is Start trial to keep it consistent. The content looks good but if you want to still mention the free trial there (like APM example in the description) I can change that.

roshan-elastic commented 7 months ago

All good @jennypavlova - great work! Yes - happy with the consistent name so thanks for taking the initiative there!

elastic / kibana