refactor: replace cloud tests layout with new onboarding component an…

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/tests/(overview)/loading.tsx

@@ -0,0 +1,63 @@
+import { Button } from "@comp/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "@comp/ui/card";
+import { Input } from "@comp/ui/input";
+import { getI18n } from "@/locales/server";
+
+export default async function Loading() {
+	const t = await getI18n();
+
+	return (
+		<div className="space-y-12 grid grid-cols-1 md:grid-cols-2 gap-4">
+			<Card>
+				<CardHeader>
+					<CardTitle>{t("settings.general.org_name")}</CardTitle>
+					<CardDescription>
+						{t("settings.general.org_name_description")}
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<Input
+						type="text"
+						placeholder="Loading..."
+						className="max-w-[300px]"
+					/>
+				</CardContent>
+				<CardFooter className="flex justify-between">
+					<div>{t("settings.general.org_name_tip")}</div>
+					<Button disabled aria-label={t("common.actions.save")}>
+						{t("common.actions.save")}
+					</Button>
+				</CardFooter>
+			</Card>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>{t("settings.general.org_website")}</CardTitle>
+					<CardDescription>
+						{t("settings.general.org_website_description")}
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<Input
+						type="url"
+						placeholder="Loading..."
+						className="max-w-[300px]"
+					/>
+				</CardContent>
+				<CardFooter className="flex justify-between">
+					<div>{t("settings.general.org_website_tip")}</div>
+					<Button disabled aria-label={t("common.actions.save")}>
+						{t("common.actions.save")}
+					</Button>
+				</CardFooter>
+			</Card>
+		</div>
+	);
+}

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/tests/(overview)/page.tsx

@@ -1,123 +1,49 @@
-import { cache } from "react";
-import { auth } from "@comp/auth";
-import { TestsSeverity } from "@/components/tests/charts/tests-severity";
-import { TestsByAssignee } from "@/components/tests/charts/tests-by-assignee";
+import { AppOnboarding } from "@/components/app-onboarding";
 import { getI18n } from "@/locales/server";
-import { db } from "@comp/db";
-import type { Metadata } from "next";
 import { setStaticParamsLocale } from "next-international/server";
-import { redirect } from "next/navigation";
-import { headers } from "next/headers";
 
-export default async function TestsOverview({
-	params,
+export default async function CloudTests({
+  params,
 }: {
-	params: Promise<{ locale: string }>;
+  params: Promise<{ locale: string }>;
 }) {
-	const { locale } = await params;
-	setStaticParamsLocale(locale);
-
-	const session = await auth.api.getSession({
-		headers: await headers(),
-	});
-
-	if (!session?.session?.activeOrganizationId) {
-		redirect("/onboarding");
-	}
-
-	const overview = await getTestsOverview(session.session.activeOrganizationId);
-
-	if (overview?.totalTests === 0) {
-		redirect(`/${session.session.activeOrganizationId}/tests/all`);
-	}
-
-	return (
-		<div className="space-y-4 sm:space-y-8">
-			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-				<TestsSeverity
-					totalTests={overview.totalTests}
-					infoSeverityTests={overview.infoSeverityTests}
-					lowSeverityTests={overview.lowSeverityTests}
-					mediumSeverityTests={overview.mediumSeverityTests}
-					highSeverityTests={overview.highSeverityTests}
-					criticalSeverityTests={overview.criticalSeverityTests}
-				/>
-				<TestsByAssignee
-					organizationId={session.session.activeOrganizationId}
-				/>
-			</div>
-		</div>
-	);
+  const { locale } = await params;
+  const t = await getI18n();
+  setStaticParamsLocale(locale);
+
+  return (
+    <div className="max-w-[1200px] m-auto">
+      <div className="mt-8">
+        <AppOnboarding
+          title={t("app_onboarding.cloud_tests.title")}
+          description={t("app_onboarding.cloud_tests.description")}
+          imageSrc="/onboarding/cloud-management.webp"
+          imageAlt="Cloud Management"
+          sheetName="create-cloud-test-sheet"
+          faqs={[
+            {
+              questionKey: t(
+                "app_onboarding.cloud_tests.faqs.question_1",
+              ),
+              answerKey: t("app_onboarding.cloud_tests.faqs.answer_1"),
+            },
+            {
+              questionKey: t(
+                "app_onboarding.cloud_tests.faqs.question_2",
+              ),
+              answerKey: t("app_onboarding.cloud_tests.faqs.answer_2"),
+            },
+            {
+              questionKey: t(
+                "app_onboarding.cloud_tests.faqs.question_3",
+              ),
+              answerKey: t("app_onboarding.cloud_tests.faqs.answer_3"),
+            },
+          ]}
+        />
+      </div>
+    </div>
+  );
 }
 
-const getTestsOverview = cache(async (organizationId: string) => {
-	return await db.$transaction(async (tx) => {
-		const [
-			totalTests,
-			infoSeverityTests,
-			lowSeverityTests,
-			mediumSeverityTests,
-			highSeverityTests,
-			criticalSeverityTests,
-		] = await Promise.all([
-			tx.integrationResult.count({
-				where: {
-					organizationId,
-				},
-			}),
-			tx.integrationResult.count({
-				where: {
-					organizationId,
-					severity: "INFO",
-				},
-			}),
-			tx.integrationResult.count({
-				where: {
-					organizationId,
-					severity: "LOW",
-				},
-			}),
-			tx.integrationResult.count({
-				where: {
-					organizationId,
-					severity: "MEDIUM",
-				},
-			}),
-			tx.integrationResult.count({
-				where: {
-					organizationId,
-					severity: "HIGH",
-				},
-			}),
-			tx.integrationResult.count({
-				where: {
-					organizationId,
-					severity: "CRITICAL",
-				},
-			}),
-		]);
 
-		return {
-			totalTests,
-			infoSeverityTests,
-			lowSeverityTests,
-			mediumSeverityTests,
-			highSeverityTests,
-			criticalSeverityTests,
-		};
-	});
-});
-
-export async function generateMetadata({
-	params,
-}: {
-	params: Promise<{ locale: string }>;
-}): Promise<Metadata> {
-	const { locale } = await params;
-	setStaticParamsLocale(locale);
-	const t = await getI18n();
-
-	return {
-		title: t("sidebar.tests"),
-	};
-}