chore: App router migration - /attributes, /privacy, /dsync, /license-key under /settings route group (#16406)

* migrate license-key/new

* migrate settings/org/dsync

* migrate settings/org/privacy

* migrate org attributes

* remove res in getServerSideProps

* Fix SettingsLayoutAppDir

* fix attributes pages

* fix

* fix

packages/features/ee/deployment/licensekey/CreateLicenseKeyForm.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import type { SessionContextValue } from "next-auth/react";
 import { useSession } from "next-auth/react";
 import { useState } from "react";

packages/features/ee/dsync/page/team-dsync-view.tsx

@@ -1,12 +1,13 @@
+"use client";
+
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
 import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Meta, SkeletonLoader, showToast } from "@calcom/ui";
+import { SkeletonLoader, showToast } from "@calcom/ui";
 
-import { getLayout } from "../../../settings/layouts/SettingsLayout";
 import ConfigureDirectorySync from "../components/ConfigureDirectorySync";
 
 // For Hosted Cal - Team view
@@ -36,7 +37,6 @@ const DirectorySync = () => {
 
   return (
     <div className="bg-default w-full sm:mx-0 xl:mt-0">
-      <Meta title={t("directory_sync")} description={t("directory_sync_description")} />
       {HOSTED_CAL_FEATURES && <ConfigureDirectorySync organizationId={currentOrg?.id || null} />}
       {/* TODO add additional settings for dsync */}
       {/* <SettingsToggle
@@ -56,6 +56,4 @@ const DirectorySync = () => {
   );
 };
 
-DirectorySync.getLayout = getLayout;
-
 export default DirectorySync;

packages/features/ee/organizations/pages/settings/attributes/attributes-create-view.tsx

@@ -9,7 +9,7 @@ import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequir
 import SettingsLayout from "@calcom/features/settings/layouts/SettingsLayout";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Meta, Button, useMeta, showToast } from "@calcom/ui";
+import { Button, useMeta, showToast } from "@calcom/ui";
 
 import { AttributeForm } from "./AttributesForm";
 
@@ -38,7 +38,6 @@ function CreateAttributesPage() {
   return (
     <>
       <LicenseRequired>
-        <Meta title="Attribute" description="Create an attribute for your team members" />
         <AttributeForm
           header={<CreateAttributeHeader isPending={mutation.isPending} />}
           onSubmit={(values) => {
@@ -75,7 +74,7 @@ function CreateAttributeHeader(props: { isPending: boolean }) {
             <span className="sr-only">{t("back_to_attributes")}</span>
           </Button>
           <div className="font-cal text-cal flex space-x-1 text-xl font-semibold leading-none">
-            <h1 className="text-emphasis">{meta.title}</h1>
+            <h1 className="text-emphasis">{meta.title || "Attribute"}</h1>
             {watchedTitle && (
               <>
                 <span className="text-subtle">/</span> <span className="text-emphasis">{watchedTitle}</span>
@@ -90,10 +89,8 @@ function CreateAttributeHeader(props: { isPending: boolean }) {
     </>
   );
 }
-function getLayout(page: React.ReactElement) {
+export function getLayout(page: React.ReactElement) {
   return <SettingsLayout hideHeader>{page}</SettingsLayout>;
 }
 
-CreateAttributesPage.getLayout = getLayout;
-
 export default CreateAttributesPage;

packages/features/ee/organizations/pages/settings/attributes/attributes-edit-view.tsx

@@ -9,7 +9,7 @@ import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequir
 import SettingsLayout from "@calcom/features/settings/layouts/SettingsLayout";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Meta, Button, useMeta, showToast } from "@calcom/ui";
+import { Button, useMeta, showToast } from "@calcom/ui";
 
 import { AttributeForm } from "./AttributesForm";
 
@@ -49,7 +49,6 @@ function CreateAttributesPage() {
   return (
     <>
       <LicenseRequired>
-        <Meta title="Attribute" description={t("edit_attribute_description")} />
         {!attribute.isLoading && attribute.data ? (
           <AttributeForm
             initialValues={{
@@ -94,7 +93,7 @@ function EditAttributeHeader(props: { isPending: boolean }) {
             <span className="sr-only">{t("back_to_attributes")}</span>
           </Button>
           <div className="font-cal text-cal flex space-x-1 text-xl font-semibold leading-none">
-            <h1 className="text-emphasis">{meta.title}</h1>
+            <h1 className="text-emphasis">{meta.title || "Attribute"}</h1>
             {watchedTitle && (
               <>
                 <span className="text-subtle">/</span> <span className="text-emphasis">{watchedTitle}</span>
@@ -110,10 +109,8 @@ function EditAttributeHeader(props: { isPending: boolean }) {
   );
 }
 
-function getLayout(page: React.ReactElement) {
+export function getLayout(page: React.ReactElement) {
   return <SettingsLayout hideHeader>{page}</SettingsLayout>;
 }
 
-CreateAttributesPage.getLayout = getLayout;
-
 export default CreateAttributesPage;

packages/features/ee/organizations/pages/settings/attributes/attributes-list-view.tsx

@@ -8,7 +8,6 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import {
-  Meta,
   Switch,
   Dropdown,
   Button,
@@ -132,7 +131,6 @@ function OrganizationAttributesPage() {
   if (isLoading) {
     return (
       <>
-        <Meta title={t("attributes")} description={t("attribute_meta_description")} />
         <div className="border-subtle bg-default flex flex-col gap-4 rounded-lg border p-6">
           <ListSkeleton />
         </div>
@@ -142,7 +140,6 @@ function OrganizationAttributesPage() {
 
   return (
     <>
-      <Meta title={t("attributes")} description={t("attribute_meta_description")} />
       <ListAttributeHeader />
       <LicenseRequired>
         <div className="border-subtle bg-default flex flex-col gap-4 rounded-lg border p-6">
@@ -191,14 +188,17 @@ function OrganizationAttributesPage() {
 
 function ListAttributeHeader() {
   const { meta } = useMeta();
+  const { t } = useLocale();
 
   return (
     <>
       <div className="min-h-6 mb-6 mt-6 flex flex-grow items-center justify-between lg:mt-12">
         <div className="flex items-center gap-4 ">
           <div className="flex flex-col space-y-1 ">
-            <h1 className="text-emphasis font-cal text-xl font-semibold leading-none">{meta.title}</h1>
-            <p className="text-subtle text-sm">{meta.description}</p>
+            <h1 className="text-emphasis font-cal text-xl font-semibold leading-none">
+              {meta.title || t("attributes")}
+            </h1>
+            <p className="text-subtle text-sm">{meta.description || t("attribute_meta_description")}</p>
           </div>
         </div>
       </div>
@@ -206,10 +206,8 @@ function ListAttributeHeader() {
   );
 }
 
-function getLayout(page: React.ReactElement) {
+export function getLayout(page: React.ReactElement) {
   return <SettingsLayout hideHeader>{page}</SettingsLayout>;
 }
 
-OrganizationAttributesPage.getLayout = getLayout;
-
 export default OrganizationAttributesPage;

packages/features/ee/organizations/pages/settings/privacy.tsx

@@ -2,14 +2,10 @@
 
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import MakeTeamPrivateSwitch from "@calcom/features/ee/teams/components/MakeTeamPrivateSwitch";
-import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { MembershipRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
-import { Meta } from "@calcom/ui";
 
 const PrivacyView = () => {
-  const { t } = useLocale();
   const { data: currentOrg } = trpc.viewer.organizations.listCurrent.useQuery();
   const isOrgAdminOrOwner =
     currentOrg &&
@@ -22,11 +18,6 @@ const PrivacyView = () => {
 
   return (
     <LicenseRequired>
-      <Meta
-        borderInShellHeader={false}
-        title={t("privacy")}
-        description={t("privacy_organization_description")}
-      />
       <div>
         <MakeTeamPrivateSwitch
           isOrg={true}
@@ -38,6 +29,5 @@ const PrivacyView = () => {
     </LicenseRequired>
   );
 };
-PrivacyView.getLayout = getLayout;
 
 export default PrivacyView;

packages/features/settings/layouts/SettingsLayout.tsx

@@ -648,14 +648,12 @@ const MobileSettingsContainer = (props: { onSideContainerOpen?: () => void }) =>
   );
 };
 
-export default function SettingsLayout({
-  children,
-  hideHeader,
-  ...rest
-}: {
+export type SettingsLayoutProps = {
   children: React.ReactNode;
   hideHeader?: boolean;
-} & ComponentProps<typeof Shell>) {
+} & ComponentProps<typeof Shell>;
+
+export default function SettingsLayout({ children, hideHeader, ...rest }: SettingsLayoutProps) {
   const pathname = usePathname();
   const state = useState(false);
   const { t } = useLocale();