Admin Wizard Choose License

[leog]

What does this PR do?

Implements 2 more steps in the Admin wizard for self-hosters to choose a license.

Closes #5998 #6014

Environment: Staging(main branch) / Production

Loom Video: UPDATED: https://loom.com/share/0d58e2fa5683478ebb52954b92eb6ee9

Type of change

• [X] New feature (non-breaking change which adds functionality)

How should this be tested?

Go to /auth/setup in a self-hosted Cal.com and see the wizard come up or If you don't have any user created in the database it will come up automatically when visiting the app. You can see two more steps or just one depending on the license chosen after setting up the first user (admin).

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
cal	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Feb 7, 2023 at 10:49PM (UTC)
cal-com-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Feb 7, 2023 at 10:49PM (UTC)
ui	❌ Failed (Inspect)			Feb 7, 2023 at 10:49PM (UTC)

[emrysal]

@leog could you add a loom 🙏 ?

[leog]

@leog could you add a loom 🙏 ?

@emrysal Totally forgot, will do. UPDATE: https://www.loom.com/share/16a661f55cf549c3b0e784fba65cf733

Do self hosters really care about these models? That's another good point @emrysal we don't want to mixup what should live in our console DB with here. We can also check for CALCOM_LICENSE_KEY for this.

@emrysal @zomars That's a good point, I just limited to implement what was needed from the ticket, which specifies creating those steps in the admin wizard and put things together following the RFC: Self-hosted instance metadata DB table. I was suggesting @PeerRich that we could probably send an API request to us to let us know when someone consents a license on their self-hosted instance to track down usages.

[PeerRich]

how do I test this the best?

[leog]

how do I test this the best?

@PeerRich Locally, removing all users if you want to go through the admin wizard from scratch or signing in as admin and going to /auth/setup

[PeerRich]

oh i made a mistake, but should be an easy fix:

the {{enterprise_booking_fee}} is not being picked up correctly @leog

[leog]

the {{enterprise_booking_fee}} is not being picked up correctly @leog

@PeerRich Fixed. I will work on the suggestions from the other folks and will be ready Monday.

[leog]

Latest Loom: https://loom.com/share/0d58e2fa5683478ebb52954b92eb6ee9

[sean-brydon]

I'm not sure if its just me but i kinda believe this should be one form ultimately and we handle the final submit on the last step of the wizard and not on every step.

UX seems weird to me if you start completing this (without ever hitting a final step in the form) - close the tab and you need to resume from where you left off. Im not sure if my perception of a stepper form is off but this just went against my intuition when testing it out.

We do this elsewhere - eventTypes is a good example ... Each page "settings tab" isnt a unique form and the content is wrapped in a single form itself.

@emrysal @zomars maybe im just being nit picky here but this just didnt click with me

I know RHF has a good example of a form stepper where each step is contained within one form

Note: this isnt a nit with your code its just a nit with how we handle wizard forms. Creates unexpected behaviour... This can also be seen when creating a team and you end up with an unpublished team which is really weird

[leog]

Also just a nit - i dont think this is the right stepper component?

We are using the same one that was already there for the wizard in Console if I remember correctly. You should definitely create a follow up issue to correct this if you like @sean-brydon, and let's confirm with @Jaibles just in case.

[ciaranha]

Ideally we should be using the same stepper component everywhere. The one that's used in our general onboarding and in the DS

[zomars]

How do FREE users finish this step?

EDIT: Nevermind just missed the previous step

[leog]

Applied all the feedback. Thanks everyone. @PeerRich @zomars @sean-brydon @Jaibles

• Switched the stepper for the correct one
• Changed the wizard styles to match the design system
• Allowed to go back in steps without blocking choosing another option for license
• Removed the license type as we don't need to keep track of which license was selected to show already done steps
• Added "License" in Admin section of User settings and Cmd+k "Choose a license" option that gos to the admin wizard
• Dynamically removed the first step regarding creating the first (admin) user if user count was already different than 0
• Made sure console wizard also looked good with the wizard revamped styles to follow DS -> https://github.com/calcom/console/pull/64
• Also note there are changes in API to get the license key from the database instead of the env var -> https://github.com/calcom/api/pull/229

Warning There is still a pending discussion with @zomars related to having the license key in the session to be able to use it in telemetry.

Here is what admin wizard looks like now:

https://user-images.githubusercontent.com/467258/214700677-ac701a0c-b358-426c-9a9a-85e644dd804d.mov

[PeerRich]

this is getting really close to completion! lots of great changes recently

[sean-brydon]

Applied all the feedback. Thanks everyone. @PeerRich @zomars @sean-brydon @Jaibles

• Switched the stepper for the correct one
• Changed the wizard styles to match the design system
• Allowed to go back in steps without blocking choosing another option for license
• Removed the license type as we don't need to keep track of which license was selected to show already done steps
• Added "License" in Admin section of User settings and Cmd+k "Choose a license" option that gos to the admin wizard
• Dynamically removed the first step regarding creating the first (admin) user if user count was already different than 0
• Made sure console wizard also looked good with the wizard revamped styles to follow DS -> Revamped the wizard to accomodate new style console#64
• Also note there are changes in API to get the license key from the database instead of the env var -> Relying on deployment license key api#229

Warning There is still a pending discussion with @zomars related to having the license key in the session to be able to use it in telemetry.

Here is what admin wizard looks like now:

Screen.Recording.2023-01-25.at.18.57.16.mov

Yoo this is looking good! Am i missing where the designs are for this or did @Jaibles pull a uno reverse card after the fact :D As these look a bit different https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/%E2%9D%96-Cal-DS?node-id=23849%3A147371&t=zWPdT0NqVfk8GfXA-4

[leog]

Yoo this is looking good! Am i missing where the designs are for this or did @Jaibles pull a uno reverse card after the fact :D As these look a bit different https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/%E2%9D%96-Cal-DS?node-id=23849%3A147371&t=zWPdT0NqVfk8GfXA-4

https://www.figma.com/file/UajFu4M1APhn2AywAEJkJr?node-id=1426:116568&comments-enabled=1&viewer=1 😖

[sean-brydon]

Yoo this is looking good! Am i missing where the designs are for this or did @Jaibles pull a uno reverse card after the fact :D As these look a bit different https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/%E2%9D%96-Cal-DS?node-id=23849%3A147371&t=zWPdT0NqVfk8GfXA-4

https://www.figma.com/file/UajFu4M1APhn2AywAEJkJr?node-id=1426:116568&comments-enabled=1&viewer=1 😖

Lol nice - @Jaibles im gonna guess its the one in the DS file right??

@leog Happy to lend a hand refactoring the UI if it turns out to be the wrong one :D

[ciaranha]

Yep @Sean i did pull a reverse card but did share it with @leog in the file earlier so he's worked off the right designs :) I also let him know it wasn't a requirement to do! But just wanted to make it easier to use the existing component and adjusted it to be more consistent with current onboarding. No major changes!

[leog]

Thanks @Jaibles for the support 🤗

@zomars restored the env var for backward compatibility, the PR shrieked quite a bit now.

Other pending PRs related to this one:

• Made sure console wizard also looked good with the wizard revamped styles to follow DS -> https://github.com/calcom/console/pull/64
• Also note there are changes in API to get the license key from the database instead of the env var -> https://github.com/calcom/api/pull/229

[leog]

We should have tested this better before merging @zomars, I had to create #6954 and #6977 afterwards.