Merge pull request #32 from diggerhq/feat/project-drift-tab

Add drift tab for project

Author: ZIJ

src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/drift/page.tsx

@@ -0,0 +1,18 @@
+import { getProjectById, getSlimProjectBySlug } from '@/data/user/projects';
+import { projectSlugParamSchema } from '@/utils/zod-schemas/params';
+
+
+
+export default async function ProjectSettingsPage({ params }: { params: unknown }) {
+    const { projectSlug } = projectSlugParamSchema.parse(params);
+    const projectId = (await getSlimProjectBySlug(projectSlug)).id;
+    const project = await getProjectById(projectId);
+
+    return (
+        <div className="flex flex-col space-y-4 max-w-5xl mt-2">
+            <pre className="bg-muted p-4 rounded-md overflow-auto flex-1 max-h-[600px] text-sm whitespace-pre-wrap">
+                {project.latest_drift_output || "No drift detected as of last run"}
+            </pre>
+        </div>
+    );
+}

src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/layout.tsx

@@ -1,10 +1,10 @@
 import { PageHeading } from "@/components/PageHeading";
 import { TabsNavigationV2 } from "@/components/TabsNavigation/TabsNavigation";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { getProjectTitleById, getSlimProjectBySlug } from "@/data/user/projects";
-import { isLocalEnvironment } from "@/lib/utils";
+import { getProjectById, getProjectTitleById, getSlimProjectBySlug } from "@/data/user/projects";
 import { projectSlugParamSchema } from "@/utils/zod-schemas/params";
-import { AlertCircleIcon, GitBranch } from "lucide-react";
+import { AlertCircleIcon, ExternalLink, GitBranch } from "lucide-react";
+import Link from "next/link";
 import { Suspense } from "react";
 
 
@@ -20,11 +20,13 @@ async function ProjectPageHeading({ projectId, branch }: { projectId: string, br
 
 export default async function ProjectPagesLayout({ params, children }: { params: unknown, children: React.ReactNode }) {
   const { projectSlug } = projectSlugParamSchema.parse(params);
-  const project = await getSlimProjectBySlug(projectSlug);
+
+  //TODO figure out a better way to access drift, without fetching twice
+  const projectId = (await getSlimProjectBySlug(projectSlug)).id;
+  const project = await getProjectById(projectId);
 
 
 
-  // fetch the drift alerts
   const tabs = [
     {
       label: 'Runs',
@@ -38,17 +40,21 @@ export default async function ProjectPagesLayout({ params, children }: { params:
       label: 'Settings',
       href: `/project/${projectSlug}/settings`,
     },
+    {
+      label: 'Drift',
+      href: `/project/${projectSlug}/drift`,
+    },
   ];
   return <>
     <div className="flex flex-col">
-      {isLocalEnvironment && (
+      {project.latest_drift_output && (
         <Alert variant="default" className="mb-6 max-w-5xl border-orange-500/50 text-orange-700 dark:border-orange-300/50 dark:text-orange-300 [&>svg]:text-orange-600 dark:[&>svg]:text-orange-400 bg-orange-50 dark:bg-orange-900/10">
           <AlertCircleIcon className="h-4 w-4" />
           <AlertTitle>
             Drift Detected
           </AlertTitle>
           <AlertDescription>
-            Changes have been detected in your infrastructure that differ from your Terraform configuration. Please review and reconcile these differences.
+            Changes have been detected in your infrastructure that differ from your Terraform configuration. <Link href={`/project/${projectSlug}/drift`} className="inline-flex items-center underline underline-offset-2">Review the differences<ExternalLink size={14} className="ml-1 inline-block align-text-bottom" /></Link>
           </AlertDescription>
         </Alert>
       )}

src/lib/database.types.ts

@@ -277,6 +277,7 @@ export type Database = {
           digger_job_id: string
           digger_job_summary_id: string | null
           id: string
+          is_drift_job: boolean | null
           job_spec: string | null
           plan_footprint: string | null
           pr_comment_url: string | null
@@ -295,6 +296,7 @@ export type Database = {
           digger_job_id: string
           digger_job_summary_id?: string | null
           id?: string
+          is_drift_job?: boolean | null
           job_spec?: string | null
           plan_footprint?: string | null
           pr_comment_url?: string | null
@@ -313,6 +315,7 @@ export type Database = {
           digger_job_id?: string
           digger_job_summary_id?: string | null
           id?: string
+          is_drift_job?: boolean | null
           job_spec?: string | null
           plan_footprint?: string | null
           pr_comment_url?: string | null
@@ -1310,6 +1313,7 @@ export type Database = {
           is_managing_state: boolean | null
           labels: string[] | null
           latest_action_on: string | null
+          latest_drift_output: string | null
           name: string
           organization_id: string
           project_status: Database["public"]["Enums"]["project_status"]
@@ -1333,6 +1337,7 @@ export type Database = {
           is_managing_state?: boolean | null
           labels?: string[] | null
           latest_action_on?: string | null
+          latest_drift_output?: string | null
           name: string
           organization_id: string
           project_status?: Database["public"]["Enums"]["project_status"]
@@ -1356,6 +1361,7 @@ export type Database = {
           is_managing_state?: boolean | null
           labels?: string[] | null
           latest_action_on?: string | null
+          latest_drift_output?: string | null
           name?: string
           organization_id?: string
           project_status?: Database["public"]["Enums"]["project_status"]