add OAuth client developer settings page with approval workflow

apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/oAuth/page.tsx

@@ -1,25 +1,31 @@
 import { _generateMetadata, getTranslate } from "app/_utils";
+import { cookies, headers } from "next/headers";
+import { redirect } from "next/navigation";
 
-import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 
-import LegacyPage from "~/settings/admin/oauth-view";
+import { buildLegacyRequest } from "@lib/buildLegacyCtx";
+
+import OAuthClientsAdminView from "~/settings/admin/oauth-clients-admin-view";
+
+const Page = async () => {
+  const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
+  await getTranslate();
+
+  if (!session) {
+    redirect("/auth/login?callbackUrl=/settings/admin/oauth");
+  }
+
+  return <OAuthClientsAdminView />;
+};
 
 export const generateMetadata = async () =>
   await _generateMetadata(
-    (t) => t("oAuth"),
-    (t) => t("admin_oAuth_description"),
+    (t) => t("oauth_clients_admin"),
+    (t) => t("oauth_clients_admin_description"),
     undefined,
     undefined,
-    "/settings/admin/oAuth"
+    "/settings/admin/oauth"
   );
 
-const Page = async () => {
-  const t = await getTranslate();
-  return (
-    <SettingsHeader title={t("oAuth")} description={t("admin_oAuth_description")}>
-      <LegacyPage />
-    </SettingsHeader>
-  );
-};
-
 export default Page;

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx

@@ -146,6 +146,11 @@ const getTabs = (orgBranding: OrganizationBranding | null) => {
           href: "/settings/developer/api-keys",
           trackingMetadata: { section: "developer", page: "api_keys" },
         },
+        {
+          name: "oAuth",
+          href: "/settings/developer/oauth",
+          trackingMetadata: { section: "developer", page: "oauth_clients" }
+        },
         {
           name: "admin_api",
           href: "/settings/organizations/admin-api",
@@ -280,7 +285,7 @@ const getTabs = (orgBranding: OrganizationBranding | null) => {
         },
         {
           name: "oAuth",
-          href: "/settings/admin/oAuth",
+          href: "/settings/admin/oauth",
           trackingMetadata: { section: "admin", page: "oauth" },
         },
         {
@@ -297,7 +302,7 @@ const getTabs = (orgBranding: OrganizationBranding | null) => {
     },
   ];
 
-  tabs.find((tab) => {
+  for (const tab of tabs) {
     if (tab.name === "security" && !HOSTED_CAL_FEATURES) {
       tab.children?.push({
         name: "sso_configuration",
@@ -307,21 +312,21 @@ const getTabs = (orgBranding: OrganizationBranding | null) => {
       // TODO: Enable dsync for self hosters
       // tab.children?.push({ name: "directory_sync", href: "/settings/security/dsync" });
     }
+
     if (tab.name === "admin" && IS_CALCOM) {
       tab.children?.push({
         name: "create_org",
         href: "/settings/organizations/new",
         trackingMetadata: { section: "admin", page: "create_org" },
       });
-    }
-    if (tab.name === "admin" && IS_CALCOM) {
+
       tab.children?.push({
         name: "create_license_key",
         href: "/settings/license-key/new",
         trackingMetadata: { section: "admin", page: "create_license_key" },
       });
     }
-  });
+  }
 
   return tabs;
 };
@@ -337,7 +342,7 @@ const organizationAdminKeys = [
   "delegation_credential",
 ];
 
-export interface SettingsPermissions {
+interface SettingsPermissions {
   canViewRoles?: boolean;
   canViewOrganizationBilling?: boolean;
   canUpdateOrganization?: boolean;
@@ -553,7 +558,7 @@ const TeamListCollapsible = ({ teamFeatures }: { teamFeatures?: Record<number, T
           if (!teamMenuState[index]) {
             return null;
           }
-          if (teamMenuState.some((teamState) => teamState.teamId === team.id))
+          if (teamMenuState.some((teamState) => teamState.teamId === team.id)) {
             return (
               <Collapsible
                 className="cursor-pointer"
@@ -696,6 +701,9 @@ const TeamListCollapsible = ({ teamFeatures }: { teamFeatures?: Record<number, T
                 </CollapsibleContent>
               </Collapsible>
             );
+          }
+
+          return null;
         })}
     </>
   );
@@ -1033,14 +1041,14 @@ const MobileSettingsContainer = (props: { onSideContainerOpen?: () => void }) =>
   );
 };
 
-export type SettingsLayoutProps = {
+type SettingsLayoutProps = {
   children: React.ReactNode;
   containerClassName?: string;
   teamFeatures?: Record<number, TeamFeatures>;
   permissions?: SettingsPermissions;
 } & ComponentProps<typeof Shell>;
 
-export default function SettingsLayoutAppDirClient({
+function SettingsLayoutAppDirClient({
   children,
   teamFeatures,
   permissions,
@@ -1129,3 +1137,6 @@ const SidebarContainerElement = ({
     </>
   );
 };
+
+export type { SettingsLayoutProps, SettingsPermissions };
+export default SettingsLayoutAppDirClient;

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/developer/oauth/page.tsx

@@ -0,0 +1,33 @@
+import { _generateMetadata, getTranslate } from "app/_utils";
+import { cookies, headers } from "next/headers";
+import { redirect } from "next/navigation";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+
+import { buildLegacyRequest } from "@lib/buildLegacyCtx";
+
+import OAuthClientsView from "~/settings/developer/oauth-clients-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("oauth_clients"),
+    (t) => t("oauth_clients_description"),
+    undefined,
+    undefined,
+    "/settings/developer/oauth"
+  );
+
+const Page = async () => {
+  const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
+  const t = await getTranslate();
+
+  if (!session) {
+    redirect("/auth/login?callbackUrl=/settings/developer/oauth");
+  }
+
+  return (
+    <OAuthClientsView />
+  );
+};
+
+export default Page;

apps/web/app/api/auth/oauth/token/__tests__/route.test.ts

@@ -149,6 +149,7 @@ describe("POST /api/auth/oauth/token", () => {
       redirectUri: "https://app.example.com/callback",
       clientSecret: null,
       clientType: "PUBLIC" as const,
+      status: "APPROVED" as const,
     } as const;
 
     const mockAccessCode = {
@@ -279,6 +280,7 @@ describe("POST /api/auth/oauth/token", () => {
       redirectUri: "https://app.example.com/callback",
       clientSecret: "hashed_secret",
       clientType: "CONFIDENTIAL" as const,
+      status: "APPROVED" as const,
     } as const;
 
     const mockAccessCode = {
@@ -494,6 +496,7 @@ describe("POST /api/auth/oauth/token", () => {
         redirectUri: "https://app.example.com/callback",
         clientSecret: null,
         clientType: "PUBLIC" as const,
+        status: "APPROVED" as const,
       } as Awaited<ReturnType<typeof prismaMock.oAuthClient.findUnique>>);
 
       const tokenRequest = createTokenRequest({
@@ -517,6 +520,7 @@ describe("POST /api/auth/oauth/token", () => {
         redirectUri: "https://app.example.com/callback",
         clientSecret: null,
         clientType: "PUBLIC" as const,
+        status: "APPROVED" as const,
       } as Awaited<ReturnType<typeof prismaMock.oAuthClient.findUnique>>);
       prismaMock.accessCode.findFirst.mockResolvedValue(null);
 

apps/web/modules/settings/admin/oauth-clients-admin-skeleton.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { SkeletonText, SkeletonContainer } from "@calcom/ui/components/skeleton";
+
+export const OAuthClientsAdminSkeleton = () => {
+  return (
+    <SkeletonContainer>
+      <div className="mb-8">
+        <SkeletonText className="h-7 w-64" />
+        <div className="mt-2 flex items-start justify-between gap-4">
+          <SkeletonText className="h-4 w-full max-w-xl" />
+          <div className="bg-emphasis h-9 w-20 rounded-md" />
+        </div>
+      </div>
+
+      <div className="space-y-10">
+        {[1, 2, 3].map((section) => (
+          <div key={section} className="space-y-3">
+            <SkeletonText className="h-5 w-24" />
+            <div className="border-subtle rounded-lg border">
+              {[1, 2, 3].map((row) => (
+                <div
+                  // eslint-disable-next-line react/no-array-index-key
+                  key={`${section}-${row}`}
+                  className={`flex items-center justify-between p-4 ${row !== 3 ? "border-subtle border-b" : ""}`}>
+                  <div className="flex items-center gap-4">
+                    <div className="bg-emphasis h-10 w-10 rounded-full" />
+                    <SkeletonText className="h-4 w-40" />
+                  </div>
+                  <div className="flex items-center gap-4">
+                    <SkeletonText className="h-5 w-20 rounded-full" />
+                    <div className="bg-emphasis h-5 w-5 rounded" />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </SkeletonContainer>
+  );
+};