chore: init policy form create

Author: adityachoudhari26

apps/web/app/routes.ts

@@ -73,6 +73,9 @@ export default [
       route("runners", "routes/ws/runners.tsx"),
       route("providers", "routes/ws/providers.tsx"),
       route("policies", "routes/ws/policies.tsx"),
+      route("policies", "routes/ws/policies/_layout.tsx", [
+        route("create", "routes/ws/policies/page.create.tsx"),
+      ]),
 
       route("settings", "routes/ws/settings/_layout.tsx", [
         route("general", "routes/ws/settings/general.tsx"),

apps/web/app/routes/ws/policies.tsx

@@ -21,6 +21,7 @@ import {
   TableRow,
 } from "~/components/ui/table";
 import { useWorkspace } from "~/components/WorkspaceProvider";
+import { buttonVariants } from "../../components/ui/button";
 
 export function meta() {
   return [
@@ -90,8 +91,16 @@ export default function Policies() {
               </BreadcrumbList>
             </Breadcrumb>
           </div>
-          <div className="text-sm text-muted-foreground">
-            {total} {total === 1 ? "policy" : "policies"}
+          <div className="flex items-center gap-4">
+            <div className="text-sm text-muted-foreground">
+              {total} {total === 1 ? "policy" : "policies"}
+            </div>
+            <a
+              href={`/${workspace.slug}/policies/create`}
+              className={buttonVariants({ variant: "default" })}
+            >
+              New Policy
+            </a>
           </div>
         </div>
       </header>

apps/web/app/routes/ws/policies/_components/PoliciesNavbarTabs.tsx

@@ -0,0 +1,28 @@
+import { Link, useLocation } from "react-router";
+
+import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";
+import { useWorkspace } from "~/components/WorkspaceProvider";
+
+type PolicyTab = "general";
+
+const usePolicyTab = (baseUrl: string): PolicyTab => {
+  const { pathname } = useLocation();
+  if (pathname === baseUrl) return "general";
+  return "general";
+};
+
+export const PoliciesNavbarTabs = () => {
+  const { workspace } = useWorkspace();
+  const baseUrl = `/${workspace.slug}/policies/create`;
+  const value = usePolicyTab(baseUrl);
+
+  return (
+    <Tabs value={value}>
+      <TabsList>
+        <TabsTrigger value="general" asChild>
+          <Link to={`${baseUrl}`}>General</Link>
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+  );
+};

apps/web/app/routes/ws/policies/_components/create/PolicyFormContext.tsx

@@ -0,0 +1,77 @@
+import type { UseFormReturn } from "react-hook-form";
+import { createContext, useContext } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Form } from "~/components/ui/form";
+
+const selectorSchema = z.object({
+  cel: z.string().min(1, "CEL expression is required"),
+});
+
+export const policyCreateFormSchema = z.object({
+  name: z.string().min(1, "Policy name is required"),
+  description: z.string().optional(),
+  priority: z.number().min(0, "Priority must be greater than 0"),
+  enabled: z.boolean().default(true),
+  target: z.object({
+    deploymentSelector: selectorSchema,
+    environmentSelector: selectorSchema,
+    resourceSelector: selectorSchema,
+  }),
+  anyApproval: z
+    .object({
+      minApprovals: z
+        .number()
+        .min(1, "Minimum approvals must be greater than 0"),
+    })
+    .optional(),
+});
+
+export type PolicyCreateFormSchema = z.infer<typeof policyCreateFormSchema>;
+
+type PolicyFormContextType = {
+  form: UseFormReturn<PolicyCreateFormSchema>;
+};
+
+const PolicyFormContext = createContext<PolicyFormContextType | null>(null);
+
+export function usePolicyCreateForm() {
+  const context = useContext(PolicyFormContext);
+  if (context == null)
+    throw new Error(
+      "usePolicyCreateForm must be used within a PolicyCreateFormContext",
+    );
+  return context;
+}
+
+export const PolicyCreateFormContextProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const form = useForm({
+    resolver: zodResolver(policyCreateFormSchema),
+    defaultValues: {
+      name: "",
+      priority: 0,
+      enabled: true,
+      target: {
+        deploymentSelector: { cel: "false" },
+        environmentSelector: { cel: "false" },
+        resourceSelector: { cel: "false" },
+      },
+    },
+  });
+
+  const onSubmit = form.handleSubmit((data) => {
+    console.log(data);
+  });
+
+  return (
+    <PolicyFormContext.Provider value={{ form }}>
+      <Form {...form}>
+        <form onSubmit={onSubmit}>{children}</form>
+      </Form>
+    </PolicyFormContext.Provider>
+  );
+};

apps/web/app/routes/ws/policies/_layout.tsx

@@ -0,0 +1,49 @@
+import { Link, Outlet } from "react-router";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "~/components/ui/breadcrumb";
+import { Separator } from "~/components/ui/separator";
+import { SidebarTrigger } from "~/components/ui/sidebar";
+import { useWorkspace } from "~/components/WorkspaceProvider";
+import { PolicyCreateFormContextProvider } from "./_components/create/PolicyFormContext";
+import { PoliciesNavbarTabs } from "./_components/PoliciesNavbarTabs";
+
+export default function PoliciesLayout() {
+  const { workspace } = useWorkspace();
+
+  return (
+    <PolicyCreateFormContextProvider>
+      <header className="flex h-16 shrink-0 items-center gap-2 border-b">
+        <div className="flex items-center gap-2 px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator
+            orientation="vertical"
+            className="mr-2 data-[orientation=vertical]:h-4"
+          />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <Link to={`/${workspace.slug}/policies`}>Policies</Link>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Create</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </div>
+      </header>
+      <main className="flex-1 overflow-auto p-6">
+        <div className="container mx-auto max-w-3xl space-y-6">
+          <PoliciesNavbarTabs />
+          <Outlet />
+        </div>
+      </main>
+    </PolicyCreateFormContextProvider>
+  );
+}

apps/web/app/routes/ws/policies/page.create.tsx

@@ -0,0 +1,27 @@
+import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+
+export function meta() {
+  return [
+    { title: "Create Policy - Ctrlplane" },
+    {
+      name: "description",
+      content: "Create a new policy",
+    },
+  ];
+}
+
+export default function PageCreate() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Create New Policy</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {/* TODO: Add policy creation form here */}
+        <p className="text-muted-foreground">
+          Policy creation form coming soon...
+        </p>
+      </CardContent>
+    </Card>
+  );
+}