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

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>
   );
 };

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 ? (

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;