refactor: Solve confusion around dev/prod API Keys

refactor: Solve confusion around dev/prod API Keys

apps/web/app/(app)/environments/[environmentId]/settings/api-keys/ApiKeyList.tsx

@@ -25,6 +25,11 @@ export default async function ApiKeyList({
   const apiKeys = await getApiKeys(environmentTypeId);
 
   return (
-    <EditApiKeys environmentTypeId={environmentTypeId} environmentType={environmentType} apiKeys={apiKeys} />
+    <EditApiKeys
+      environmentTypeId={environmentTypeId}
+      environmentType={environmentType}
+      apiKeys={apiKeys}
+      environmentId={environmentId}
+    />
   );
 }

apps/web/app/(app)/environments/[environmentId]/settings/api-keys/EditApiKeys.tsx

@@ -15,10 +15,12 @@ export default function EditAPIKeys({
   environmentTypeId,
   environmentType,
   apiKeys,
+  environmentId,
 }: {
   environmentTypeId: string;
   environmentType: string;
   apiKeys: TApiKey[];
+  environmentId: string;
 }) {
   const [isAddAPIKeyModalOpen, setOpenAddAPIKeyModal] = useState(false);
   const [isDeleteKeyModalOpen, setOpenDeleteKeyModal] = useState(false);
@@ -52,6 +54,7 @@ export default function EditAPIKeys({
       <div className="mb-6 text-right">
         <Button
           variant="darkCTA"
+          disabled={environmentId !== environmentTypeId}
           onClick={() => {
             setOpenAddAPIKeyModal(true);
           }}>

apps/web/app/(app)/environments/[environmentId]/settings/api-keys/page.tsx

@@ -4,11 +4,13 @@ import { REVALIDATION_INTERVAL } from "@formbricks/lib/constants";
 import SettingsCard from "../SettingsCard";
 import SettingsTitle from "../SettingsTitle";
 import ApiKeyList from "./ApiKeyList";
+import EnvironmentNotice from "@/components/shared/EnvironmentNotice";
 
 export default async function ProfileSettingsPage({ params }) {
   return (
     <div>
       <SettingsTitle title="API Keys" />
+      <EnvironmentNotice environmentId={params.environmentId} pageType="apiSettings" />
       <SettingsCard
         title="Development Env Keys"
         description="Add and remove API keys for your Development environment.">

apps/web/app/(app)/environments/[environmentId]/settings/setup/EnvironmentNotice.tsx

@@ -1,41 +0,0 @@
-"use client";
-
-import LoadingSpinner from "@/components/shared/LoadingSpinner";
-import { useEnvironment } from "@/lib/environments/environments";
-import { ErrorComponent } from "@formbricks/ui";
-import { LightBulbIcon } from "@heroicons/react/24/solid";
-import { useRouter } from "next/navigation";
-
-export default function EnvironmentNotice({ environmentId }: { environmentId: string }) {
-  const { environment, isErrorEnvironment, isLoadingEnvironment } = useEnvironment(environmentId);
-  const router = useRouter();
-
-  const changeEnvironment = (environmentType: string) => {
-    const newEnvironmentId = environment.product.environments.find((e) => e.type === environmentType)?.id;
-    router.push(`/environments/${newEnvironmentId}/`);
-  };
-
-  if (isLoadingEnvironment) {
-    return <LoadingSpinner />;
-  }
-
-  if (isErrorEnvironment) {
-    return <ErrorComponent />;
-  }
-
-  return (
-    <div>
-      {environment.type === "production" && !environment.widgetSetupCompleted && (
-        <div className="flex items-center space-y-3 rounded-lg border border-blue-100 bg-blue-50 p-4 text-sm text-blue-900 shadow-sm md:space-y-0 md:text-base">
-          <LightBulbIcon className="mr-3 h-6 w-6 text-blue-400" />
-          <p>
-            You&apos;re currently in the Production environment.
-            <a onClick={() => changeEnvironment("development")} className="ml-1 cursor-pointer underline">
-              Switch to Development environment.
-            </a>
-          </p>
-        </div>
-      )}
-    </div>
-  );
-}

apps/web/app/(app)/environments/[environmentId]/settings/setup/page.tsx

@@ -1,7 +1,7 @@
 import WidgetStatusIndicator from "@/components/shared/WidgetStatusIndicator";
 import SettingsCard from "../SettingsCard";
 import SettingsTitle from "../SettingsTitle";
-import EnvironmentNotice from "./EnvironmentNotice";
+import EnvironmentNotice from "../../../../../../components/shared/EnvironmentNotice";
 import SetupInstructions from "./SetupInstructions";
 
 export default function ProfileSettingsPage({ params }) {
@@ -12,7 +12,7 @@ export default function ProfileSettingsPage({ params }) {
         <WidgetStatusIndicator environmentId={params.environmentId} type="large" />
       </SettingsCard>
 
-      <EnvironmentNotice environmentId={params.environmentId} />
+      <EnvironmentNotice environmentId={params.environmentId} pageType="setupChecklist" />
       <SettingsCard
         title="How to setup"
         description="Follow these steps to setup the Formbricks widget within your app"

apps/web/components/shared/EnvironmentNotice.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import LoadingSpinner from "@/components/shared/LoadingSpinner";
+import { useEnvironment } from "@/lib/environments/environments";
+import { ErrorComponent } from "@formbricks/ui";
+import { LightBulbIcon } from "@heroicons/react/24/solid";
+import { useRouter } from "next/navigation";
+
+export default function EnvironmentNotice({
+  environmentId,
+  pageType,
+}: {
+  environmentId: string;
+  pageType: string;
+}) {
+  const { environment, isErrorEnvironment, isLoadingEnvironment } = useEnvironment(environmentId);
+  const router = useRouter();
+
+  const changeEnvironment = (environmentType: string) => {
+    const newEnvironmentId = environment.product.environments.find((e) => e.type === environmentType)?.id;
+    router.push(`/environments/${newEnvironmentId}/`);
+  };
+
+  if (isLoadingEnvironment) {
+    return <LoadingSpinner />;
+  }
+
+  if (isErrorEnvironment) {
+    return <ErrorComponent />;
+  }
+  if (pageType === "apiSettings") {
+    return (
+      <div>
+        <div className="flex items-center space-y-3 rounded-lg border border-blue-100 bg-blue-50 p-4 text-sm text-blue-900 shadow-sm md:space-y-0 md:text-base">
+          <LightBulbIcon className="mr-3 h-8 w-8 text-blue-400" />
+          <p>
+            {environment.type === "production"
+              ? "You're currently in the production environment, so you can only create production API keys. "
+              : "You're currently in the development environment, so you can only create development API keys. "}
+            <a
+              onClick={() =>
+                changeEnvironment(environment.type === "production" ? "development" : "production")
+              }
+              className="ml-1 cursor-pointer underline">
+              Switch to {environment.type === "production" ? "Development" : "Production"} now.
+            </a>
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (pageType === "setupChecklist")
+    return (
+      <div>
+        {environment.type === "production" && !environment.widgetSetupCompleted && (
+          <div className="flex items-center space-y-3 rounded-lg border border-blue-100 bg-blue-50 p-4 text-sm text-blue-900 shadow-sm md:space-y-0 md:text-base">
+            <LightBulbIcon className="mr-3 h-6 w-6 text-blue-400" />
+            <p>
+              You&apos;re currently in the Production environment.
+              <a onClick={() => changeEnvironment("development")} className="ml-1 cursor-pointer underline">
+                Switch to Development environment.
+              </a>
+            </p>
+          </div>
+        )}
+      </div>
+    );
+}