mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-01-06 05:40:02 -06:00
Code Issues Packages Projects Releases 100 Wiki Activity

moved environmentNotice to shared component and made some refactors

Browse Source
This commit is contained in:
Dhruwang
2023-09-05 20:03:04 +05:30
parent 59af9c9905
commit 6ab89fa054
6 changed files with 78 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@@ -4,18 +4,18 @@ import { REVALIDATION_INTERVAL } from "@formbricks/lib/constants";
import SettingsCard from "../SettingsCard";
import SettingsTitle from "../SettingsTitle";
import ApiKeyList from "./ApiKeyList";
import EnvironmentNotice from "@/app/(app)/environments/[environmentId]/settings/setup/EnvironmentNotice";
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.">
<ApiKeyList environmentId={params.environmentId} environmentType="development" />
</SettingsCard>
<EnvironmentNotice environmentId={params.environmentId} pageType="apiSettings"/>
<SettingsCard
title="Production Env Keys"
description="Add and remove API keys for your Production environment.">

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

@@ -1,52 +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,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>
Production environment API keys can exclusively be generated and utilized within the production environment, and similarly, development API keys follow the same pattern.
</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>
);
}

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

@@ -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} pageType="setupChecklist"/>
<EnvironmentNotice environmentId={params.environmentId} pageType="setupChecklist" />
<SettingsCard
title="How to setup"
description="Follow these steps to setup the Formbricks widget within your app"

65
apps/web/components/shared/EnvironmentNotice.tsx Normal file
View File

@@ -0,0 +1,65 @@
"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>
{environment.type === "production" && (
<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>
You&apos;re currently in the production environment, so you can only create production API keys.
<a onClick={() => changeEnvironment("development")} className="ml-1 cursor-pointer underline">
Switch to Development 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>
);
}