refactor: remove New OAuth client button from admin page (#27181)

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

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

@@ -6,7 +6,6 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 
 import { OAuthClientsAdminSkeleton } from "./oauth-clients-admin-skeleton";
-import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 import { showToast } from "@calcom/ui/components/toast";
 import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
 
@@ -15,7 +14,6 @@ import { OAuthClientCreateDialog } from "../oauth/create/OAuthClientCreateModal"
 import { OAuthClientPreviewDialog } from "../oauth/create/OAuthClientPreviewDialog";
 import { OAuthClientDetailsDialog, type OAuthClientDetails } from "../oauth/view/OAuthClientDetailsDialog";
 import { OAuthClientsList } from "../oauth/OAuthClientsList";
-import { NewOAuthClientButton } from "../oauth/create/NewOAuthClientButton";
 
 export default function OAuthClientsAdminView() {
   const { t } = useLocale();
@@ -109,60 +107,38 @@ export default function OAuthClientsAdminView() {
     return <OAuthClientsAdminSkeleton />;
   }
 
-  const newOAuthClientButton = (
-    <NewOAuthClientButton
-      dataTestId="open-admin-oauth-client-create-dialog"
-      onClick={() => setIsCreatingClient(true)}
-    />
-  );
-
-  const hasClients =
-    (pendingClients && pendingClients.length > 0) ||
-    (rejectedClients && rejectedClients.length > 0) ||
-    (approvedClients && approvedClients.length > 0);
-
   return (
     <SettingsHeader
       title={t("oauth_clients_admin")}
-      description={t("oauth_clients_admin_description")}
-      CTA={newOAuthClientButton}>
-      {hasClients ? (
-        <div className="space-y-10">
-          <div className="space-y-3" data-testid="oauth-client-admin-pending-section">
-            <h2 className="text-emphasis text-base font-semibold">{t("pending")}</h2>
-            <OAuthClientsList
-              clients={pendingClients ?? []}
-              onSelectClient={(client) => setSelectedClient(client)}
-              showStatus
-            />
-          </div>
-
-          <div className="space-y-3" data-testid="oauth-client-admin-rejected-section">
-            <h2 className="text-emphasis text-base font-semibold">{t("rejected")}</h2>
-            <OAuthClientsList
-              clients={rejectedClients ?? []}
-              onSelectClient={(client) => setSelectedClient(client)}
-              showStatus
-            />
-          </div>
-
-          <div className="space-y-3" data-testid="oauth-client-admin-approved-section">
-            <h2 className="text-emphasis text-base font-semibold">{t("approved")}</h2>
-            <OAuthClientsList
-              clients={approvedClients ?? []}
-              onSelectClient={(client) => setSelectedClient(client)}
-              showStatus
-            />
-          </div>
+      description={t("oauth_clients_admin_description")}>
+      <div className="space-y-10">
+        <div className="space-y-3" data-testid="oauth-client-admin-pending-section">
+          <h2 className="text-emphasis text-base font-semibold">{t("pending")}</h2>
+          <OAuthClientsList
+            clients={pendingClients ?? []}
+            onSelectClient={(client) => setSelectedClient(client)}
+            showStatus
+          />
         </div>
-      ) : (
-        <EmptyScreen
-          Icon="key"
-          headline={t("no_oauth_clients")}
-          description={t("no_oauth_clients_admin_description")}
-          buttonRaw={newOAuthClientButton}
-        />
-      )}
+
+        <div className="space-y-3" data-testid="oauth-client-admin-rejected-section">
+          <h2 className="text-emphasis text-base font-semibold">{t("rejected")}</h2>
+          <OAuthClientsList
+            clients={rejectedClients ?? []}
+            onSelectClient={(client) => setSelectedClient(client)}
+            showStatus
+          />
+        </div>
+
+        <div className="space-y-3" data-testid="oauth-client-admin-approved-section">
+          <h2 className="text-emphasis text-base font-semibold">{t("approved")}</h2>
+          <OAuthClientsList
+            clients={approvedClients ?? []}
+            onSelectClient={(client) => setSelectedClient(client)}
+            showStatus
+          />
+        </div>
+      </div>
 
       {createdClient ? (
         <OAuthClientPreviewDialog

apps/web/playwright/oauth/oauth-client-admin.e2e.ts

@@ -3,7 +3,6 @@ import { expect, type Page } from "@playwright/test";
 import { test } from "../lib/fixtures";
 import {
   closeOAuthClientDetails,
-  createApprovedOAuthClientAsAdmin,
   createPendingOAuthClient,
   openOAuthClientDetailsFromList,
   goToAdminOAuthSettings
@@ -155,14 +154,5 @@ test.describe("OAuth clients admin", () => {
     await expectClientInAdminSection(page, "oauth-client-admin-approved-section", toBeApproved.clientId);
     await expectClientInAdminSection(page, "oauth-client-admin-rejected-section", toBeRejected.clientId);
     await expectClientInAdminSection(page, "oauth-client-admin-pending-section", staysPending.clientId);
-
-    // Admin can create an approved client from admin page
-    const adminCreatedName = `${testPrefix}admin-created-${Date.now()}`;
-    const adminCreated = await createApprovedOAuthClientAsAdmin(page, makeClientInput(adminCreatedName));
-
-    await expectClientStatusInDb(prisma, adminCreated.clientId, "APPROVED");
-
-    // Should now be in approved list
-    await expect(page.getByTestId(`oauth-client-list-item-${adminCreated.clientId}`)).toBeVisible();
   });
 });

apps/web/playwright/oauth/oauth-client-helpers.ts

@@ -68,41 +68,6 @@ export async function createPendingOAuthClient(page: Page, input: CreateOAuthCli
   return { clientId, clientSecret };
 }
 
-export async function createApprovedOAuthClientAsAdmin(
-  page: Page,
-  input: CreateOAuthClientInput
-): Promise<CreateOAuthClientResult> {
-  await goToAdminOAuthSettings(page);
-
-  await page.getByTestId("open-admin-oauth-client-create-dialog").click();
-
-  const form = page.getByTestId("oauth-client-create-form");
-  await form.locator("#name").fill(input.name);
-  await form.locator("#purpose").fill(input.purpose);
-  await form.locator("#redirectUri").fill(input.redirectUri);
-  await form.locator("#websiteUrl").fill(input.websiteUrl);
-
-  await uploadOAuthClientLogo(page, input.logoFileName);
-
-  const pkceToggle = page.getByTestId("oauth-client-pkce-toggle");
-  await expect(pkceToggle).toHaveAttribute("data-state", "unchecked");
-
-  await page.getByTestId("oauth-client-create-submit").click();
-
-  const submitted = page.getByTestId("oauth-client-submitted-modal");
-  await expect(submitted).toBeVisible();
-
-  const clientId = ((await page.getByTestId("oauth-client-submitted-client-id").textContent()) ?? "").trim();
-  expect(clientId.length).toBeGreaterThan(1);
-
-  const clientSecret = ((await page.getByTestId("oauth-client-submitted-client-secret").textContent()) ?? "").trim();
-  expect(clientSecret.length).toBeGreaterThan(1);
-
-  await page.getByTestId("oauth-client-submitted-done").click();
-
-  return { clientId, clientSecret };
-}
-
 export async function openOAuthClientDetailsFromList(page: Page, clientId: string): Promise<Locator> {
   const details = page.getByTestId("oauth-client-details-form");
   await page.getByTestId(`oauth-client-list-item-${clientId}`).click();