chore: App router migration - general settings

[joeauyeung]

What does this PR do?

• Tackles the following settings categories

  • Profile
  • Security
  • Billing
  • Developer

• Adds missing pages in Admin, Billing and Developer sections

• Removes references to the pages routes

• Refactors how we handle the settings headers. Instead of relying on the MetaContext we now generate the settings header server side

  • In the page.tsx we get the session and t function server side.
  • We then use the <SettingsHeader> component to set the page title and description
    • The <SettingsHeader> is abstracted from the <SettingsLayout>

Mandatory Tasks (DO NOT REMOVE)

• [x] I have self-reviewed the code (A decent size PR without self-review might be rejected).
• [ ] I have added a Docs issue here if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
• [ ] I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

• For the new routes visit the normal pages routers and the/future routes

[graphite-app[bot]]

Graphite Automations

"Add consumer team as reviewer" took an action on this PR • (08/21/24)

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

"Add platform team as reviewer" took an action on this PR • (08/21/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 • (08/21/24)

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

[vercel[bot]]

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

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
cal	⬜️ Ignored (Inspect)	Visit Preview		Sep 9, 2024 0:55am
calcom-web-canary	⬜️ Ignored (Inspect)	Visit Preview		Sep 9, 2024 0:55am

[hbjORbj]

Hey @joeauyeung ! I opened a PR, fixing type errors in this branch

[anikdhabal]

Hey @joeauyeung ! I opened a PR, fixing type errors in this branch

We need to fix the type error in this branch before merging, no need to create a new pr for that. @joeauyeung will fix the type error

[hbjORbj]

We need to fix the type error in this branch before merging, no need to create a new pr for that.

@anikdhabal Hey, nice to meet you! My PR is targeting this branch, not main, so I think it's not a problem! Also, I wanted to push directly to this branch but I've got no GH permissions yet. I think @joeauyeung already asked the team to give me a maintainer role, so it's all good.

@joeauyeung will fix the type error

FYI, I am leading the efforts for app router migration from now. Joe and I agreed that @joeauyeung will keep himself busy with other tasks ;)

[hbjORbj]

Oh, I see you @anikdhabal already closed the PR. That's ok, I will cherry-pick my commits and push to this branch once I get the GH permissions.

[anikdhabal]

Oh, I see you @anikdhabal already closed the PR. That's ok, I will cherry-pick my commits and push to this branch once I get the GH permissions.

Hey @hbjORbj, nice to meet you. Let's push the changes in this branch once you have permission

[hbjORbj]

Hey @joeauyeung , I see that you introduce quite changes to some submodules in /packages; e.g., /packages/trpc. Can you leave some explanatory comments?

[hbjORbj]

Also, if it helps, here's a list you can use to go through:

settings/admin/lockedSMS settings/admin/organizations/[id]/edit settings/admin/users/[id]/edit settings/billing settings/developer/api-keys settings/developer/webhooks settings/developer/webhooks/new settings/developer/webhooks/[id] settings/my-account/appearance settings/my-account/calendars settings/my-account/conferencing settings/my-account/general settings/my-account/out-of-office settings/my-account/profile settings/organizations/admin-api settings/security/impersonation settings/security/password settings/security/sso settings/security/two-factor-auth

[joeauyeung]

@hbjORbj the admin settings have a different layout than the other settings pages. What are your thoughts on having two route groups for the different layouts?

https://github.com/calcom/cal.com/pull/16312/commits/dcb2b6073fc50453e0620ea366a51623036aef2a

[github-actions[bot]]

E2E results are ready!

• Workflow #31028.1 latest results

[joeauyeung]

@hbjORbj I also refactored the pages to remove instances of <Meta /> from the app router pages.

Two changes I made were:

• If the page was in the /web/modules folder and was just the <Meta /> component and the page component. We can remove the page from the /modules and call the <Meta /> component directly in the page route and import the page component directly in both
• In some skeleton loaders it would use the <Meta /> component. This was used to set the meta on page load. However, since we can do this server side in the app router, I removed it from the skeleton loaders. I didn't see any noticeable differences between the two types of routers.

[hbjORbj]

@joeauyeung One UI issue I found is that some settings pages of app router have a bottom border that doesn't exist in pages router. But I recommend you address this in a separate PR!

• pages router

• app router