feat: platform onboarding flow and dashboard #14721

Ryukemeister · 2024-04-23T18:15:07Z

What does this PR do?

This PR adds a new flow for creating a platform client, previously we were using the flow that is used to create an organization. This PR fixes that and also adds a new dashboard for a platform user under which they can manage their oauth clients (create, update or delete) and see a list of their managed users. There are also other tabs for seeing platform docs, and other examples. This PR also includes billing in the app itself using stripe.

Steps to create a new platform client:

Go to /settings/platform/new and create a new platform user
Once that is done you are redirected to the platform dashboard, initially you'll see all the pricing plans for platform.
Once you subscribe to any of the plans through stripe you get redirected back to the actual dashboard. This dashboard has a list of your oauth client, managed users and some more resources you might need in order to get started with platform.

@PeerRich: also try:

https://localhost:3000/signup?redirect=https://app.cal.com/settings/platform/new

Loom: https://www.loom.com/share/eb02cfc3aa654e07b29c90a95c93fac4

github-actions · 2024-04-23T18:15:18Z

Thank you for following the naming conventions! 🙏 Feel free to join our discord and post your PR link.

vercel · 2024-04-23T18:16:07Z

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

Name	Status	Preview	Comments	Updated (UTC)
ai	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 9, 2024 2:45pm
platform-starter-kit	❌ Failed (Inspect)			May 9, 2024 2:45pm

2 Ignored Deployments

Name	Status	Preview	Comments	Updated (UTC)
cal	⬜️ Ignored (Inspect)	Visit Preview		May 9, 2024 2:45pm
calcom-web-canary	⬜️ Ignored (Inspect)	Visit Preview		May 9, 2024 2:45pm

graphite-app · 2024-04-23T18:20:15Z

Graphite Automations

"Add platform team as reviewer" took an action on this PR • (04/23/24)

1 reviewer was added to this PR based on Keith Williams's automation.

"Add foundation team as reviewer" took an action on this PR • (05/02/24)

1 reviewer was added to this PR based on Keith Williams's automation.

…s not

github-actions · 2024-04-23T18:43:17Z

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

New Pages Added

The following pages were added to the bundle from the code in this PR:

Page	Size (compressed)	First Load	% of Budget (`350 KB`)
`/settings/platform`	`261.12 KB`	489.8 KB	139.94%
`/settings/platform/new`	`118.64 KB`	347.31 KB	99.23%
`/settings/platform/oauth-clients/[clientId]/edit`	`259.51 KB`	488.19 KB	139.48%
`/settings/platform/oauth-clients/create`	`258.8 KB`	487.47 KB	139.28%

Three Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (`350 KB`)
`/settings/organizations/[id]/about`	`157.62 KB`	386.29 KB	110.37% (🟡 +0.54%)
`/settings/organizations/[id]/add-teams`	`157.61 KB`	386.28 KB	110.37% (🟡 +0.54%)
`/settings/organizations/new`	`157.62 KB`	386.3 KB	110.37% (🟡 +0.54%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.

… the shell isPlattform or not

deploysentinel · 2024-04-23T19:02:48Z

Current Playwright Test Results Summary

✅ 63 Passing - ⚠️ 3 Flaky

Run may still be in progress, this comment will be updated as current testing workflow or job completes...

(Last updated on 05/09/2024 03:03:16pm UTC)

Run Details

Running Workflow PR Update on Github Actions

Commit: 15f8f99

Started: 05/09/2024 03:01:24pm UTC

⚠️ Flakes

📄 apps/web/playwright/integrations-stripe.e2e.ts • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Stripe integration Pending payment booking should not be confirmed by default Retry 1 • Initial Attempt	1.32% (4) 4 / 304 runs failed over last 7 days	18.42% (56) 56 / 304 runs flaked over last 7 days

📄 apps/web/playwright/impersonation.e2e.ts • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Users can impersonate App Admin can impersonate users with impersonation enabled Retry 1 • Initial Attempt	1.54% (5) 5 / 324 runs failed over last 7 days	10.19% (33) 33 / 324 runs flaked over last 7 days

📄 apps/web/playwright/event-types.e2e.ts • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Event Types tests -- future user can add multiple organizer address Retry 1 • Initial Attempt	1.48% (5) 5 / 338 runs failed over last 7 days	28.99% (98) 98 / 338 runs flaked over last 7 days

View Detailed Build Results

supalarry

[MEDIUM] plan column of PlatformBilling

I saw in your loom and also tried myself - after finishing stripe payment the plan is none - shouldn't it be one of the PlatformPlan enum values?

[LOW] Sidebar

Personally, I would remove "Cal.com atoms" entry from sidebar and just rename "Platform docs" to "Documentation". Also, instead of having "Examples app" in the sidebar I would just put it in docs - I don't know how much value do people have of having a link to examples app because docs should mention it.

[HIGH] OAuth client users not appearing?

I created OAuth client and then created managed user for it via API- managed user email has the same OAuth client ID as in dashboard below. However, after creating the user I refresh "settings/platform" and the managed user is not appearing.

Create managed user:

It's not appearing:

Does OAuth client users show up for you under the "Managed users" ?

ThyMinimalDev · 2024-05-09T08:05:14Z

apps/web/components/settings/platform/oauth-clients/oauth-client-form/create.tsx

+    });
+  };
+
+  const isPending = isSaving;


not needed anymore, you can use isPending from useCreateOAuthClient directly

ThyMinimalDev · 2024-05-09T08:06:18Z

apps/web/components/settings/platform/oauth-clients/oauth-client-form/edit.tsx

  };
-  const isPending = isSaving || isUpdating;
+
+  const isPending = isUpdating;


not needed anymore, just use isPending from useUpdateOAuthClient directly

Ryukemeister · 2024-05-09T10:16:44Z

[MEDIUM] plan column of PlatformBilling

I saw in your loom and also tried myself - after finishing stripe payment the plan is none - shouldn't it be one of the PlatformPlan enum values?
## [LOW] Sidebar Personally, I would remove "Cal.com atoms" entry from sidebar and just rename "Platform docs" to "Documentation". Also, instead of having "Examples app" in the sidebar I would just put it in docs - I don't know how much value do people have of having a link to examples app because docs should mention it. ## [HIGH] OAuth client users not appearing? I created OAuth client and then created managed user for it via API- managed user email has the same OAuth client ID as in dashboard below. However, after creating the user I refresh "settings/platform" and the managed user is not appearing.
Create managed user:

It's not appearing:

Does OAuth client users show up for you under the "Managed users" ?

The plan column was not working because you need to configure the stripe webhook which can be done through the stripe CLI and once thats configured it works as expected
Removed examples app from sidebar and renamed platform docs to documentation so we're good on that
Managed users appears now since we have a different endpoint for it

Changes made already

add endpoint to fetch managed user from client id

602ed87

dosubot bot added platform Anything related to our platform plan ✨ feature New feature or request labels Apr 23, 2024

keithwillcode added the core area: core, team members only label Apr 23, 2024

graphite-app bot requested a review from a team April 23, 2024 18:15

update typings

ec41c68

vercel bot deployed to Preview – ai April 23, 2024 18:16 View deployment

vercel bot deployed to Preview – api April 23, 2024 18:19 View deployment

minor tweaks

da31c11

vercel bot deployed to Preview – api April 23, 2024 18:26 View deployment

Ryukemeister added 3 commits April 23, 2024 23:56

custom hook to fetch managed users from client id

7bc4a6b

add translations for platform onboarding

fc59a7f

add isPlatformOrg boolean to figure out which is platform and which i…

bbf2c8c

…s not

vercel bot deployed to Preview – api April 23, 2024 18:39 View deployment

set isPlatform hook based on data obtained from org

78d3823

Ryukemeister added 3 commits April 24, 2024 00:13

add limitWidth prop to control component width

b239856

add props to shell to make sidebar display different tabs based on if…

20f433c

… the shell isPlattform or not

platform related pages

51f56b0

Ryukemeister changed the title ~~feat: platform onboarding and dashboard~~ feat: platform onboarding flow and dashboard Apr 23, 2024

vercel bot deployed to Preview – api April 23, 2024 18:56 View deployment

vercel bot deployed to Preview – dev April 23, 2024 19:24 View deployment

fix merge conflicts

15c5189

vercel bot deployed to Preview – ai April 23, 2024 19:37 View deployment

vercel bot deployed to Preview – api April 23, 2024 19:40 View deployment

vercel bot deployed to Preview – dev April 23, 2024 19:52 View deployment

vercel bot deployed to Preview – api May 8, 2024 14:59 View deployment

vercel bot deployed to Preview – dev May 8, 2024 15:04 View deployment

Ryukemeister added 3 commits May 8, 2024 21:18

remove managed users endpoint since it already exists

55a4801

url for endpoint

ec8a1ec

Merge branch 'main' into platform-onboarding

a053092

vercel bot deployed to Preview – api May 8, 2024 16:01 View deployment

vercel bot deployed to Preview – dev May 8, 2024 16:13 View deployment

supalarry self-requested a review May 8, 2024 17:19

supalarry requested changes May 8, 2024

View reviewed changes

ThyMinimalDev reviewed May 9, 2024

View reviewed changes

Ryukemeister added 4 commits May 9, 2024 15:33

rename tabs

e7dfce8

pr feedback

b4dc744

managed users endpoint

d4a0bef

update endpoint

1070ce9

vercel bot deployed to Preview – api May 9, 2024 10:10 View deployment

Ryukemeister added 2 commits May 9, 2024 15:40

remove form

470212a

Merge branch 'main' into platform-onboarding

e6325c8

vercel bot deployed to Preview – api May 9, 2024 10:28 View deployment

vercel bot deployed to Preview – dev May 9, 2024 10:31 View deployment

supalarry self-requested a review May 9, 2024 14:30

supalarry approved these changes May 9, 2024

View reviewed changes

Merge branch 'main' into platform-onboarding

15f8f99

vercel bot deployed to Preview – ai May 9, 2024 14:45 View deployment

vercel bot deployed to Preview – api May 9, 2024 14:49 View deployment

vercel bot deployed to Preview – dev May 9, 2024 14:54 View deployment

baileypumfleet merged commit c2a07e2 into main May 9, 2024
40 checks passed

baileypumfleet deleted the platform-onboarding branch May 9, 2024 17:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: platform onboarding flow and dashboard #14721

feat: platform onboarding flow and dashboard #14721

Ryukemeister commented Apr 23, 2024 •

edited

github-actions bot commented Apr 23, 2024 •

edited

vercel bot commented Apr 23, 2024 •

edited

graphite-app bot commented Apr 23, 2024 •

edited

github-actions bot commented Apr 23, 2024 •

edited

deploysentinel bot commented Apr 23, 2024 •

edited

Test Case Results

Test Case Results

Test Case Results

supalarry left a comment •

edited

ThyMinimalDev May 9, 2024

ThyMinimalDev May 9, 2024

Ryukemeister commented May 9, 2024

[MEDIUM] plan column of PlatformBilling

feat: platform onboarding flow and dashboard #14721

feat: platform onboarding flow and dashboard #14721

Conversation

Ryukemeister commented Apr 23, 2024 • edited

What does this PR do?

Steps to create a new platform client:

github-actions bot commented Apr 23, 2024 • edited

vercel bot commented Apr 23, 2024 • edited

graphite-app bot commented Apr 23, 2024 • edited

Graphite Automations

github-actions bot commented Apr 23, 2024 • edited

📦 Next.js Bundle Analysis for @calcom/web

New Pages Added

Three Pages Changed Size

deploysentinel bot commented Apr 23, 2024 • edited

Current Playwright Test Results Summary

⚠️ Flakes

Test Case Results

Test Case Results

Test Case Results

supalarry left a comment • edited

Choose a reason for hiding this comment

[MEDIUM] plan column of PlatformBilling

[LOW] Sidebar

[HIGH] OAuth client users not appearing?

ThyMinimalDev May 9, 2024

Choose a reason for hiding this comment

ThyMinimalDev May 9, 2024

Choose a reason for hiding this comment

Ryukemeister commented May 9, 2024

[MEDIUM] plan column of PlatformBilling

Ryukemeister commented Apr 23, 2024 •

edited

github-actions bot commented Apr 23, 2024 •

edited

vercel bot commented Apr 23, 2024 •

edited

graphite-app bot commented Apr 23, 2024 •

edited

github-actions bot commented Apr 23, 2024 •

edited

deploysentinel bot commented Apr 23, 2024 •

edited

supalarry left a comment •

edited