fix: Clean up policy drawer

apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/SuccessCriteria.tsx → apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/ApprovalAndGovernance.tsx

@@ -1,4 +1,5 @@
-import type * as schema from "@ctrlplane/db/schema";
+import type * as SCHEMA from "@ctrlplane/db/schema";
+import React from "react";
 import { z } from "zod";
 
 import { Button } from "@ctrlplane/ui/button";
@@ -13,24 +14,27 @@ import {
 } from "@ctrlplane/ui/form";
 import { Input } from "@ctrlplane/ui/input";
 import { RadioGroup, RadioGroupItem } from "@ctrlplane/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@ctrlplane/ui/select";
 
 import { api } from "~/trpc/react";
 
-const successCriteriaForm = z.object({
+const schema = z.object({
+  approvalRequirement: z.enum(["automatic", "manual"]),
   successType: z.enum(["all", "some", "optional"]),
   successMinimum: z.number().min(0, "Must be a positive number"),
 });
 
-export const SuccessCriteria: React.FC<{
-  environmentPolicy: schema.EnvironmentPolicy;
+export const ApprovalAndGovernance: React.FC<{
+  environmentPolicy: SCHEMA.EnvironmentPolicy;
 }> = ({ environmentPolicy }) => {
-  const form = useForm({
-    schema: successCriteriaForm,
-    defaultValues: {
-      successType: environmentPolicy.successType,
-      successMinimum: environmentPolicy.successMinimum,
-    },
-  });
+  const form = useForm({ schema, defaultValues: { ...environmentPolicy } });
+  const { successMinimum } = form.watch();
 
   const updatePolicy = api.environment.policy.update.useMutation();
   const utils = api.useUtils();
@@ -44,16 +48,55 @@ export const SuccessCriteria: React.FC<{
       .then(() => utils.environment.policy.bySystemId.invalidate(systemId)),
   );
 
-  const { successMinimum } = form.watch();
-
   return (
     <Form {...form}>
-      <form onSubmit={onSubmit} className="space-y-6 p-2">
+      <form onSubmit={onSubmit} className="space-y-10 p-2">
+        <div className="flex flex-col gap-1">
+          <h1 className="text-lg font-medium">Approval & Governance</h1>
+          <span className="text-sm text-muted-foreground">
+            This category defines policies that govern the oversight and
+            approval process for deployments. These policies ensure that
+            deployments meet specific criteria or gain necessary approvals
+            before proceeding, contributing to compliance, quality assurance,
+            and overall governance of the deployment process.
+          </span>
+        </div>
+
+        <FormField
+          control={form.control}
+          name="approvalRequirement"
+          render={({ field: { value, onChange } }) => (
+            <FormItem className="space-y-4">
+              <div className="flex flex-col gap-1">
+                <FormLabel>Approval gates</FormLabel>
+                <FormDescription>
+                  If enabled, a release will require approval from an authorized
+                  user before it can be deployed to any environment with this
+                  policy.
+                </FormDescription>
+              </div>
+              <FormControl>
+                <div className="w-32">
+                  <Select value={value} onValueChange={onChange}>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="manual">Manual</SelectItem>
+                      <SelectItem value="automatic">Automatic</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </FormControl>
+            </FormItem>
+          )}
+        />
+
         <FormField
           control={form.control}
           name="successType"
           render={({ field: { value, onChange } }) => (
-            <FormItem className="space-y-6">
+            <FormItem className="space-y-4">
               <div className="flex flex-col gap-1">
                 <FormLabel>Previous Deploy Status</FormLabel>
                 <FormDescription>