From 70348c6f64f1eaff0bace144fdb76def571d1b1b Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Sun, 15 Sep 2024 09:09:03 -0400
Subject: [PATCH] fix: Add new api-key CTA button is missing in
 settings/developer/api-keys (#16649)

* Add new api-key button is missing

* fix type check
---
 .../(settings)/developer/api-keys/page.tsx    |  2 +-
 .../settings/developer/api-keys-view.tsx      | 23 ++++++++++++++++---
 .../web/pages/settings/developer/api-keys.tsx | 18 +--------------
 3 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/apps/web/app/future/settings/(settings)/developer/api-keys/page.tsx b/apps/web/app/future/settings/(settings)/developer/api-keys/page.tsx
index d64087b672..bf82270f1a 100644
--- a/apps/web/app/future/settings/(settings)/developer/api-keys/page.tsx
+++ b/apps/web/app/future/settings/(settings)/developer/api-keys/page.tsx
@@ -25,7 +25,7 @@ const Page = async () => {
       description={t("create_first_api_key_description", { appName: APP_NAME })}
       CTA={<NewApiKeyButton />}
       borderInShellHeader={true}>
-      <ApiKeysView />
+      <ApiKeysView isAppDir={true} />
     </SettingsHeader>
   );
 };
diff --git a/apps/web/modules/settings/developer/api-keys-view.tsx b/apps/web/modules/settings/developer/api-keys-view.tsx
index 34bba40b23..c85d9f6a01 100644
--- a/apps/web/modules/settings/developer/api-keys-view.tsx
+++ b/apps/web/modules/settings/developer/api-keys-view.tsx
@@ -19,10 +19,18 @@ import {
   SkeletonText,
 } from "@calcom/ui";
 
-const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
+const SkeletonLoader = ({
+  title,
+  description,
+  isAppDir,
+}: {
+  title: string;
+  description: string;
+  isAppDir?: boolean;
+}) => {
   return (
     <SkeletonContainer>
-      <Meta title={title} description={description} borderInShellHeader={true} />
+      {!isAppDir ? <Meta title={title} description={description} borderInShellHeader={true} /> : null}
       <div className="divide-subtle border-subtle space-y-6 rounded-b-lg border border-t-0 px-6 py-4">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
@@ -31,7 +39,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
   );
 };
 
-const ApiKeysView = () => {
+const ApiKeysView = ({ isAppDir }: { isAppDir?: boolean }) => {
   const { t } = useLocale();
 
   const { data, isPending } = trpc.viewer.apiKeys.list.useQuery();
@@ -58,6 +66,7 @@ const ApiKeysView = () => {
   if (isPending || !data) {
     return (
       <SkeletonLoader
+        isAppDir={isAppDir}
         title={t("api_keys")}
         description={t("create_first_api_key_description", { appName: APP_NAME })}
       />
@@ -66,6 +75,14 @@ const ApiKeysView = () => {
 
   return (
     <>
+      {!isAppDir ? (
+        <Meta
+          title={t("api_keys")}
+          description={t("create_first_api_key_description", { appName: APP_NAME })}
+          CTA={<NewApiKeyButton />}
+          borderInShellHeader={true}
+        />
+      ) : null}
       <LicenseRequired>
         <div>
           {data?.length ? (
diff --git a/apps/web/pages/settings/developer/api-keys.tsx b/apps/web/pages/settings/developer/api-keys.tsx
index 33b8ef2d40..a10eb1bb02 100644
--- a/apps/web/pages/settings/developer/api-keys.tsx
+++ b/apps/web/pages/settings/developer/api-keys.tsx
@@ -1,27 +1,11 @@
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
-import { APP_NAME } from "@calcom/lib/constants";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Meta } from "@calcom/ui";
 
 import PageWrapper from "@components/PageWrapper";
 
 import ApiKeysView from "~/settings/developer/api-keys-view";
-import NewApiKeyButton from "~/settings/developer/components/CreateApiKeyButton";
 
 const Page = () => {
-  const { t } = useLocale();
-
-  return (
-    <>
-      <Meta
-        title={t("api_keys")}
-        description={t("create_first_api_key_description", { appName: APP_NAME })}
-        CTA={<NewApiKeyButton />}
-        borderInShellHeader={true}
-      />
-      <ApiKeysView />
-    </>
-  );
+  return <ApiKeysView />;
 };
 
 Page.getLayout = getLayout;