feature/tentative tfvars table implementation

diggerhq · Jul 23, 2024 · 20d560e · 20d560e
1 parent f589d72
commit 20d560e
Show file tree

Hide file tree

Showing 22 changed files with 837 additions and 98 deletions.
diff --git a/...s)/(application-pages)/project/[projectSlug]/(specific-project-pages)/EmptyTFVarState.tsx b/...s)/(application-pages)/project/[projectSlug]/(specific-project-pages)/EmptyTFVarState.tsx
@@ -0,0 +1,38 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { motion } from 'framer-motion';
+import { Plus } from 'lucide-react';
+import React from 'react';
+
+interface EmptyStateProps {
+    onAddVariable: () => void;
+}
+
+const EmptyState: React.FC<EmptyStateProps> = ({ onAddVariable }) => {
+    return (
+        <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+        >
+            <Card className="mt-6 border-none bg-transparent shadow-none">
+                <CardContent className="flex flex-col items-center justify-center py-12">
+                    <h3 className="text-2xl font-semibold mb-2">No Environment Variables Yet</h3>
+                    <p className="text-muted-foreground mb-6 text-center max-w-md">
+                        Add your first environment variable to get started. These variables will be available in your project's runtime.
+                    </p>
+                    <motion.div
+                        whileHover={{ scale: 1.05 }}
+                        whileTap={{ scale: 0.95 }}
+                    >
+                        <Button onClick={onAddVariable} size="lg">
+                            <Plus className="mr-2 h-4 w-4" /> Add Environment Variable
+                        </Button>
+                    </motion.div>
+                </CardContent>
+            </Card>
+        </motion.div>
+    );
+};
+
+export default EmptyState;
diff --git a/...es)/(application-pages)/project/[projectSlug]/(specific-project-pages)/ProjectDetails.tsx b/...es)/(application-pages)/project/[projectSlug]/(specific-project-pages)/ProjectDetails.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { motion } from "framer-motion";
+import { Run, RunsTable } from "./RunsTable";
+
+export default function RunsDetails({ runs }: { runs: Run[] }) {
+    return (
+        <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.1 }}
+        >
+            <Card className="w-full">
+                <motion.div
+                    initial={{ opacity: 0, y: -5 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.15, delay: 0.1 }}
+                >
+                    <CardHeader>
+
+                        <CardTitle>Project Runs</CardTitle>
+                        <CardDescription>View all runs for this project</CardDescription>
+
+                    </CardHeader>
+                </motion.div>
+                <CardContent>
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        transition={{ duration: 0.15, delay: 0.2 }}
+                    >
+                        <RunsTable runs={runs} />
+                    </motion.div>
+                </CardContent>
+            </Card>
+        </motion.div>
+    );
+}
diff --git a/...s)/(application-pages)/project/[projectSlug]/(specific-project-pages)/ProjectSettings.tsx b/...s)/(application-pages)/project/[projectSlug]/(specific-project-pages)/ProjectSettings.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { motion } from "framer-motion";
+
+export default function ProjectSettings() {
+    return (
+        <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.1 }}
+        >
+            <Card className="w-full">
+                <motion.div
+                    initial={{ opacity: 0, y: -5 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.15, delay: 0.1 }}
+                >
+                    <CardHeader>
+                        <CardTitle>Project Settings</CardTitle>
+                        <CardDescription>Manage settings for your project</CardDescription>
+                    </CardHeader>
+                </motion.div>
+                <CardContent>
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        transition={{ duration: 0.15, delay: 0.2 }}
+                    >
+                        {/* Add your project settings management component here */}
+                    </motion.div>
+                </CardContent>
+            </Card>
+        </motion.div>
+    );
+}
diff --git a/...d-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/RunsTable.tsx b/...d-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/RunsTable.tsx
@@ -0,0 +1,57 @@
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+
+export type Run = {
+    runId: string;
+    commitId: string;
+    status: string;
+    date: string;
+    user: string;
+};
+
+type StatusColor = {
+    [key: string]: string;
+};
+
+const statusColors: StatusColor = {
+    queued: 'bg-yellow-200/50 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-200',
+    'pending approval': 'bg-blue-200/50 text-blue-800 dark:bg-blue-900/50 dark:text-blue-200',
+    running: 'bg-purple-200/50 text-purple-800 dark:bg-purple-900/50 dark:text-purple-200',
+    approved: 'bg-green-200/50 text-green-800 dark:bg-green-900/50 dark:text-green-200',
+    succeeded: 'bg-green-200/50 text-green-800 dark:bg-green-900/50 dark:text-green-200',
+    failed: 'bg-red-200/50 text-red-800 dark:bg-red-900/50 dark:text-red-200',
+};
+
+export const RunsTable = ({ runs }: { runs: Run[] }) => (
+    <Table>
+        <TableHeader>
+            <TableRow>
+                <TableHead className="text-left">Run ID</TableHead>
+                <TableHead className="text-left">Commit ID</TableHead>
+                <TableHead className="text-left">Status</TableHead>
+                <TableHead className="text-left">Date</TableHead>
+                <TableHead className="text-left">User</TableHead>
+            </TableRow>
+        </TableHeader>
+        <TableBody>
+            {runs.length > 0 ? (
+                runs.map((run) => (
+                    <TableRow key={run.runId}>
+                        <TableCell>{run.runId}</TableCell>
+                        <TableCell>{run.commitId}</TableCell>
+                        <TableCell>
+                            <span className={`px-2 py-1 rounded-full text-xs font-medium ${statusColors[run.status.toLowerCase()] || ''}`}>
+                                {run.status.toUpperCase()}
+                            </span>
+                        </TableCell>
+                        <TableCell>{run.date}</TableCell>
+                        <TableCell>{run.user}</TableCell>
+                    </TableRow>
+                ))
+            ) : (
+                <TableRow>
+                    <TableCell colSpan={5} className="text-center">No runs available</TableCell>
+                </TableRow>
+            )}
+        </TableBody>
+    </Table>
+);