From f6b48a6b32c30c63f38856fc7bbd8dc43dd73550 Mon Sep 17 00:00:00 2001
From: Aditya Choudhari <aditya.choudhari@wandb.com>
Date: Tue, 8 Oct 2024 17:22:22 -0700
Subject: [PATCH 1/3] fix: Clean up policy drawer

---
 .../environment-policy-drawer/Approval.tsx    |  80 -----
 ...Criteria.tsx => ApprovalAndGovernance.tsx} |  73 ++++-
 .../environment-policy-drawer/Concurrency.tsx | 107 -------
 .../DeploymentControl.tsx                     | 285 ++++++++++++++++++
 .../EnvironmentPolicyDrawer.tsx               | 117 +++----
 .../GradualRollouts.tsx                       |  94 ------
 .../environment-policy-drawer/Overview.tsx    |  75 +----
 .../PolicyDeleteDialog.tsx                    |  57 ++++
 .../ReleaseFilter.tsx                         | 220 --------------
 ...seSequencing.tsx => ReleaseManagement.tsx} |  15 +-
 .../ReleaseWindows.tsx                        | 203 -------------
 .../RolloutAndTiming.tsx                      | 284 +++++++++++++++++
 .../ComparisonConditionRender.tsx             | 144 ++++-----
 13 files changed, 844 insertions(+), 910 deletions(-)
 delete mode 100644 apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/Approval.tsx
 rename apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/{SuccessCriteria.tsx => ApprovalAndGovernance.tsx} (62%)
 delete mode 100644 apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/Concurrency.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/DeploymentControl.tsx
 delete mode 100644 apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/GradualRollouts.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/PolicyDeleteDialog.tsx
 delete mode 100644 apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/ReleaseFilter.tsx
 rename apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/{ReleaseSequencing.tsx => ReleaseManagement.tsx} (79%)
 delete mode 100644 apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/ReleaseWindows.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/RolloutAndTiming.tsx

diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/Approval.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/Approval.tsx
deleted file mode 100644
index 512f91676..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/Approval.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import type * as SCHEMA from "@ctrlplane/db/schema";
-import React from "react";
-import { z } from "zod";
-
-import { Button } from "@ctrlplane/ui/button";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  useForm,
-} from "@ctrlplane/ui/form";
-import { Switch } from "@ctrlplane/ui/switch";
-
-import { api } from "~/trpc/react";
-
-const schema = z.object({
-  approvalRequirement: z.enum(["automatic", "manual"]),
-});
-
-export const Approval: React.FC<{
-  environmentPolicy: SCHEMA.EnvironmentPolicy;
-}> = ({ environmentPolicy }) => {
-  const form = useForm({ schema, defaultValues: { ...environmentPolicy } });
-
-  const updatePolicy = api.environment.policy.update.useMutation();
-  const utils = api.useUtils();
-
-  const { id, systemId } = environmentPolicy;
-  const onSubmit = form.handleSubmit((data) =>
-    updatePolicy
-      .mutateAsync({ id, data })
-      .then(() => form.reset(data))
-      .then(() => utils.environment.policy.byId.invalidate(id))
-      .then(() => utils.environment.policy.bySystemId.invalidate(systemId)),
-  );
-
-  return (
-    <Form {...form}>
-      <form onSubmit={onSubmit} className="space-y-6 p-2">
-        <FormField
-          control={form.control}
-          name="approvalRequirement"
-          render={({ field: { value, onChange } }) => (
-            <FormItem>
-              <div className="space-y-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="flex items-center gap-2">
-                  <span className="text-xs text-neutral-400">Enabled:</span>{" "}
-                  <Switch
-                    checked={value === "manual"}
-                    onCheckedChange={(checked) =>
-                      onChange(checked ? "manual" : "automatic")
-                    }
-                  />
-                </div>
-              </FormControl>
-            </FormItem>
-          )}
-        />
-
-        <Button
-          type="submit"
-          disabled={form.formState.isSubmitting || !form.formState.isDirty}
-        >
-          Save
-        </Button>
-      </form>
-    </Form>
-  );
-};
diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/SuccessCriteria.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/ApprovalAndGovernance.tsx
similarity index 62%
rename from apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/SuccessCriteria.tsx
rename to apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/ApprovalAndGovernance.tsx
index 7207c8353..aee552423 100644
--- a/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/SuccessCriteria.tsx
+++ b/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>
diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/Concurrency.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/Concurrency.tsx
deleted file mode 100644
index 15008c1d2..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/Concurrency.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import type * as SCHEMA from "@ctrlplane/db/schema";
-import React from "react";
-import { z } from "zod";
-
-import { Button } from "@ctrlplane/ui/button";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  useForm,
-} from "@ctrlplane/ui/form";
-import { Input } from "@ctrlplane/ui/input";
-import { RadioGroup, RadioGroupItem } from "@ctrlplane/ui/radio-group";
-
-import { api } from "~/trpc/react";
-
-const schema = z.object({
-  concurrencyType: z.enum(["all", "some"]),
-  concurrencyLimit: z.number().min(1, "Must be a positive number"),
-});
-
-export const Concurrency: React.FC<{
-  environmentPolicy: SCHEMA.EnvironmentPolicy;
-}> = ({ environmentPolicy }) => {
-  const form = useForm({ schema, defaultValues: { ...environmentPolicy } });
-
-  const updatePolicy = api.environment.policy.update.useMutation();
-  const utils = api.useUtils();
-
-  const { id, systemId } = environmentPolicy;
-  const onSubmit = form.handleSubmit((data) =>
-    updatePolicy
-      .mutateAsync({ id, data })
-      .then(() => form.reset(data))
-      .then(() => utils.environment.policy.byId.invalidate(id))
-      .then(() => utils.environment.policy.bySystemId.invalidate(systemId)),
-  );
-
-  const { concurrencyLimit } = form.watch();
-
-  return (
-    <Form {...form}>
-      <form onSubmit={onSubmit} className="space-y-6 p-2">
-        <FormField
-          control={form.control}
-          name="concurrencyType"
-          render={({ field: { value, onChange } }) => (
-            <FormItem>
-              <div className="space-y-4">
-                <div className="flex flex-col gap-1">
-                  <FormLabel>Concurrency</FormLabel>
-                  <FormDescription>
-                    The number of jobs that can run concurrently in an
-                    environment.
-                  </FormDescription>
-                </div>
-                <FormControl>
-                  <RadioGroup value={value} onValueChange={onChange}>
-                    <FormItem className="flex items-center space-x-3 space-y-0">
-                      <FormControl>
-                        <RadioGroupItem value="all" />
-                      </FormControl>
-                      <FormLabel className="flex items-center gap-2 font-normal">
-                        All jobs can run concurrently
-                      </FormLabel>
-                    </FormItem>
-                    <FormItem className="flex items-center space-x-3 space-y-0">
-                      <FormControl>
-                        <RadioGroupItem value="some" className="min-w-4" />
-                      </FormControl>
-                      <FormLabel className="flex flex-wrap items-center gap-2 font-normal">
-                        A maximum of
-                        <Input
-                          disabled={value !== "some"}
-                          type="number"
-                          value={concurrencyLimit}
-                          onChange={(e) =>
-                            form.setValue(
-                              "concurrencyLimit",
-                              e.target.valueAsNumber,
-                            )
-                          }
-                          className="border-b-1 h-6 w-16 text-xs"
-                        />
-                        jobs can run concurrently
-                      </FormLabel>
-                    </FormItem>
-                  </RadioGroup>
-                </FormControl>
-              </div>
-            </FormItem>
-          )}
-        />
-
-        <Button
-          type="submit"
-          disabled={form.formState.isSubmitting || !form.formState.isDirty}
-        >
-          Save
-        </Button>
-      </form>
-    </Form>
-  );
-};
diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/DeploymentControl.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/DeploymentControl.tsx
new file mode 100644
index 000000000..69f5a205a
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/DeploymentControl.tsx
@@ -0,0 +1,285 @@
+import type * as SCHEMA from "@ctrlplane/db/schema";
+import type { VersionCheck } from "@ctrlplane/validators/environment-policies";
+import React from "react";
+import _ from "lodash";
+import { validRange } from "semver";
+import { z } from "zod";
+
+import { Button } from "@ctrlplane/ui/button";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useForm,
+} from "@ctrlplane/ui/form";
+import { Input } from "@ctrlplane/ui/input";
+import { RadioGroup, RadioGroupItem } from "@ctrlplane/ui/radio-group";
+import {
+  isFilterCheck,
+  isNoneCheck,
+  isRegexCheck,
+  isSemverCheck,
+} from "@ctrlplane/validators/environment-policies";
+import {
+  defaultCondition,
+  isValidReleaseCondition,
+  releaseCondition,
+} from "@ctrlplane/validators/releases";
+
+import { api } from "~/trpc/react";
+import { ReleaseConditionRender } from "../release-condition/ReleaseConditionRender";
+
+const isValidRegex = (str: string) => {
+  try {
+    new RegExp(str);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+const filterSchema = z
+  .object({
+    evaluateWith: z.literal("regex"),
+    evaluate: z.string().refine(isValidRegex, {
+      message: "Invalid regex pattern",
+    }),
+  })
+  .or(
+    z.object({
+      evaluateWith: z.literal("none"),
+      evaluate: z.null(),
+    }),
+  )
+  .or(
+    z.object({
+      evaluateWith: z.literal("semver"),
+      evaluate: z
+        .string()
+        .refine((s) => validRange(s) !== null, "Invalid semver range"),
+    }),
+  )
+  .or(
+    z.object({
+      evaluateWith: z.literal("filter"),
+      evaluate: releaseCondition.refine(isValidReleaseCondition, {
+        message: "Invalid release condition",
+      }),
+    }),
+  );
+
+const schema = z
+  .object({
+    concurrencyType: z.enum(["all", "some"]),
+    concurrencyLimit: z.number().min(1, "Must be a positive number"),
+  })
+  .and(filterSchema);
+
+export const DeploymentControl: React.FC<{
+  environmentPolicy: SCHEMA.EnvironmentPolicy;
+}> = ({ environmentPolicy }) => {
+  const check: VersionCheck = { ...environmentPolicy };
+  const defaultValues = _.merge(
+    {},
+    environmentPolicy,
+    isFilterCheck(check) && { evaluate: check.evaluate },
+    isNoneCheck(check) && { evaluate: check.evaluate },
+    isSemverCheck(check) && { evaluate: check.evaluate },
+    isRegexCheck(check) && { evaluate: check.evaluate },
+  );
+  const form = useForm({ schema, defaultValues });
+  const { evaluateWith, evaluate } = form.watch();
+
+  const updatePolicy = api.environment.policy.update.useMutation();
+  const utils = api.useUtils();
+
+  const { id, systemId } = environmentPolicy;
+  const onSubmit = form.handleSubmit((data) =>
+    updatePolicy
+      .mutateAsync({ id, data })
+      .then(() => form.reset(data))
+      .then(() => utils.environment.policy.byId.invalidate(id))
+      .then(() => utils.environment.policy.bySystemId.invalidate(systemId)),
+  );
+
+  const { concurrencyLimit } = form.watch();
+
+  return (
+    <Form {...form}>
+      <form onSubmit={onSubmit} className="space-y-10 p-2">
+        <div className="flex flex-col gap-1">
+          <h1 className="text-lg font-medium">Deployment Control</h1>
+          <span className="text-sm text-muted-foreground">
+            Deployment control policies focus on regulating how deployments are
+            executed within an environment. These policies manage concurrency,
+            filtering of releases, and other operational constraints, ensuring
+            efficient and orderly deployment processes without overwhelming
+            resources or violating environment-specific rules.
+          </span>
+        </div>
+        <FormField
+          control={form.control}
+          name="concurrencyType"
+          render={({ field: { value, onChange } }) => (
+            <FormItem>
+              <div className="space-y-4">
+                <div className="flex flex-col gap-1">
+                  <FormLabel>Concurrency</FormLabel>
+                  <FormDescription>
+                    The number of jobs that can run concurrently in an
+                    environment.
+                  </FormDescription>
+                </div>
+                <FormControl>
+                  <RadioGroup value={value} onValueChange={onChange}>
+                    <FormItem className="flex items-center space-x-3 space-y-0">
+                      <FormControl>
+                        <RadioGroupItem value="all" />
+                      </FormControl>
+                      <FormLabel className="flex items-center gap-2 font-normal">
+                        All jobs can run concurrently
+                      </FormLabel>
+                    </FormItem>
+                    <FormItem className="flex items-center space-x-3 space-y-0">
+                      <FormControl>
+                        <RadioGroupItem value="some" className="min-w-4" />
+                      </FormControl>
+                      <FormLabel className="flex flex-wrap items-center gap-2 font-normal">
+                        A maximum of
+                        <Input
+                          disabled={value !== "some"}
+                          type="number"
+                          value={concurrencyLimit}
+                          onChange={(e) =>
+                            form.setValue(
+                              "concurrencyLimit",
+                              e.target.valueAsNumber,
+                            )
+                          }
+                          className="border-b-1 h-6 w-16 text-xs"
+                        />
+                        jobs can run concurrently
+                      </FormLabel>
+                    </FormItem>
+                  </RadioGroup>
+                </FormControl>
+              </div>
+            </FormItem>
+          )}
+        />
+
+        <div className="space-y-6">
+          <FormField
+            control={form.control}
+            name="evaluateWith"
+            render={({ field: { value, onChange } }) => (
+              <FormItem>
+                <div className="flex flex-col gap-1">
+                  <FormLabel>Release Filter</FormLabel>
+                  <FormDescription>
+                    Filter which releases can be deployed to this environment.
+                  </FormDescription>
+                </div>
+                <RadioGroup onValueChange={onChange} value={value}>
+                  <FormItem className="flex items-center space-x-3 space-y-0">
+                    <FormControl>
+                      <RadioGroupItem value="none" />
+                    </FormControl>
+                    <FormLabel className="flex items-center gap-2 font-normal">
+                      None
+                    </FormLabel>
+                  </FormItem>
+                  <FormItem className="flex items-center space-x-3 space-y-0">
+                    <FormControl>
+                      <RadioGroupItem value="regex" />
+                    </FormControl>
+                    <FormLabel className="flex items-center gap-2 font-normal">
+                      Regex
+                    </FormLabel>
+                  </FormItem>
+                  <FormItem className="flex items-center space-x-3 space-y-0">
+                    <FormControl>
+                      <RadioGroupItem value="semver" />
+                    </FormControl>
+                    <FormLabel className="flex items-center gap-2 font-normal">
+                      Semver
+                    </FormLabel>
+                  </FormItem>
+                  <FormItem className="flex items-center space-x-3 space-y-0">
+                    <FormControl>
+                      <RadioGroupItem value="filter" />
+                    </FormControl>
+                    <FormLabel className="flex items-center gap-2 font-normal">
+                      Filter
+                    </FormLabel>
+                  </FormItem>
+                </RadioGroup>
+              </FormItem>
+            )}
+          />
+
+          {evaluateWith === "regex" && (
+            <FormField
+              control={form.control}
+              name="evaluate"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Regex</FormLabel>
+                  <Input {...field} placeholder="^v[0-9]+.[0-9]+.[0-9]+$" />
+                </FormItem>
+              )}
+            />
+          )}
+
+          {evaluateWith === "semver" && (
+            <FormField
+              control={form.control}
+              name="evaluate"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Semver</FormLabel>
+                  <Input {...field} placeholder=">=v1.0.0" />
+                </FormItem>
+              )}
+            />
+          )}
+
+          {evaluateWith === "filter" && (
+            <FormField
+              control={form.control}
+              name="evaluate"
+              render={({ field: { onChange } }) => (
+                <FormItem>
+                  <FormLabel>Filter</FormLabel>
+                  <FormControl>
+                    <ReleaseConditionRender
+                      condition={evaluate ?? defaultCondition}
+                      onChange={onChange}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                  {form.formState.isDirty && (
+                    <span className="text-xs text-muted-foreground">
+                      Save to apply
+                    </span>
+                  )}
+                </FormItem>
+              )}
+            />
+          )}
+        </div>
+
+        <Button
+          type="submit"
+          disabled={form.formState.isSubmitting || !form.formState.isDirty}
+        >
+          Save
+        </Button>
+      </form>
+    </Form>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/EnvironmentPolicyDrawer.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/EnvironmentPolicyDrawer.tsx
index 0c4512cc9..63af1e5aa 100644
--- a/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/EnvironmentPolicyDrawer.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/EnvironmentPolicyDrawer.tsx
@@ -6,27 +6,32 @@ import { useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import {
   IconCalendar,
-  IconCheck,
-  IconChecklist,
   IconCircuitDiode,
-  IconClock,
+  IconDotsVertical,
+  IconEye,
   IconFilter,
   IconInfoCircle,
-  IconPlayerPause,
+  IconRocket,
+  IconTrash,
 } from "@tabler/icons-react";
 
+import { Button } from "@ctrlplane/ui/button";
 import { Drawer, DrawerContent, DrawerTitle } from "@ctrlplane/ui/drawer";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@ctrlplane/ui/dropdown-menu";
 
 import { api } from "~/trpc/react";
 import { TabButton } from "../TabButton";
-import { Approval } from "./Approval";
-import { Concurrency } from "./Concurrency";
-import { GradualRollouts } from "./GradualRollouts";
+import { ApprovalAndGovernance } from "./ApprovalAndGovernance";
+import { DeploymentControl } from "./DeploymentControl";
 import { Overview } from "./Overview";
-import { ReleaseFilter } from "./ReleaseFilter";
-import { ReleaseSequencing } from "./ReleaseSequencing";
-import { ReleaseWindows } from "./ReleaseWindows";
-import { SuccessCriteria } from "./SuccessCriteria";
+import { DeleteEnvironmentPolicyDialog } from "./PolicyDeleteDialog";
+import { ReleaseManagement } from "./ReleaseManagement";
+import { RolloutAndTiming } from "./RolloutAndTiming";
 
 const param = "environment_policy_id";
 export const useEnvironmentPolicyDrawer = () => {
@@ -61,22 +66,35 @@ const View: React.FC<{
 }> = ({ activeTab, environmentPolicy }) => {
   return {
     overview: <Overview environmentPolicy={environmentPolicy} />,
-    approval: <Approval environmentPolicy={environmentPolicy} />,
-    concurrency: <Concurrency environmentPolicy={environmentPolicy} />,
-    "gradual-rollout": (
-      <GradualRollouts environmentPolicy={environmentPolicy} />
-    ),
-    "success-criteria": (
-      <SuccessCriteria environmentPolicy={environmentPolicy} />
-    ),
-    "release-sequencing": (
-      <ReleaseSequencing environmentPolicy={environmentPolicy} />
-    ),
-    "release-windows": <ReleaseWindows environmentPolicy={environmentPolicy} />,
-    "release-filter": <ReleaseFilter environmentPolicy={environmentPolicy} />,
+    approval: <ApprovalAndGovernance environmentPolicy={environmentPolicy} />,
+    concurrency: <DeploymentControl environmentPolicy={environmentPolicy} />,
+    management: <ReleaseManagement environmentPolicy={environmentPolicy} />,
+    rollout: <RolloutAndTiming environmentPolicy={environmentPolicy} />,
   }[activeTab];
 };
 
+const PolicyDropdownMenu: React.FC<{
+  environmentPolicy: SCHEMA.EnvironmentPolicy;
+  children: React.ReactNode;
+}> = ({ environmentPolicy, children }) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DeleteEnvironmentPolicyDialog environmentPolicy={environmentPolicy}>
+          <DropdownMenuItem
+            className="flex items-center gap-2"
+            onSelect={(e) => e.preventDefault()}
+          >
+            <IconTrash className="h-4 w-4 text-red-500" />
+            <span>Delete</span>
+          </DropdownMenuItem>
+        </DeleteEnvironmentPolicyDialog>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
 export const EnvironmentPolicyDrawer: React.FC = () => {
   const { environmentPolicyId, removeEnvironmentPolicyId } =
     useEnvironmentPolicyDrawer();
@@ -100,7 +118,18 @@ export const EnvironmentPolicyDrawer: React.FC = () => {
           <div className="flex-shrink-0 rounded bg-purple-500/20 p-1 text-purple-400">
             <IconFilter className="h-4 w-4" />
           </div>
-          {environmentPolicy?.name ?? "Policy"}
+          {(environmentPolicy == null || environmentPolicy.name === "") &&
+            "Policy"}
+          {environmentPolicy != null && environmentPolicy.name !== "" && (
+            <span>{environmentPolicy.name}</span>
+          )}
+          {environmentPolicy != null && (
+            <PolicyDropdownMenu environmentPolicy={environmentPolicy}>
+              <Button variant="ghost" size="icon">
+                <IconDotsVertical className="h-4 w-4" />
+              </Button>
+            </PolicyDropdownMenu>
+          )}
         </DrawerTitle>
 
         <div className="flex w-full gap-6 p-6">
@@ -114,44 +143,26 @@ export const EnvironmentPolicyDrawer: React.FC = () => {
             <TabButton
               active={activeTab === "approval"}
               onClick={() => setActiveTab("approval")}
-              icon={<IconCheck className="h-4 w-4" />}
-              label="Approval"
+              icon={<IconEye className="h-4 w-4" />}
+              label="Approval & Governance"
             />
             <TabButton
               active={activeTab === "concurrency"}
               onClick={() => setActiveTab("concurrency")}
               icon={<IconCircuitDiode className="h-4 w-4" />}
-              label="Concurrency"
-            />
-            <TabButton
-              active={activeTab === "gradual-rollout"}
-              onClick={() => setActiveTab("gradual-rollout")}
-              icon={<IconClock className="h-4 w-4" />}
-              label="Gradual Rollout"
+              label="Deployment Control"
             />
             <TabButton
-              active={activeTab === "success-criteria"}
-              onClick={() => setActiveTab("success-criteria")}
-              icon={<IconChecklist className="h-4 w-4" />}
-              label="Success Criteria"
+              active={activeTab === "management"}
+              onClick={() => setActiveTab("management")}
+              icon={<IconRocket className="h-4 w-4" />}
+              label="Release Management"
             />
             <TabButton
-              active={activeTab === "release-sequencing"}
-              onClick={() => setActiveTab("release-sequencing")}
-              icon={<IconPlayerPause className="h-4 w-4" />}
-              label="Release Sequencing"
-            />
-            <TabButton
-              active={activeTab === "release-windows"}
-              onClick={() => setActiveTab("release-windows")}
+              active={activeTab === "rollout"}
+              onClick={() => setActiveTab("rollout")}
               icon={<IconCalendar className="h-4 w-4" />}
-              label="Release Windows"
-            />
-            <TabButton
-              active={activeTab === "release-filter"}
-              onClick={() => setActiveTab("release-filter")}
-              icon={<IconFilter className="h-4 w-4" />}
-              label="Release Filter"
+              label="Rollout and Timing"
             />
           </div>
 
diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/GradualRollouts.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/GradualRollouts.tsx
deleted file mode 100644
index df5a8cbdb..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/GradualRollouts.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import type * as SCHEMA from "@ctrlplane/db/schema";
-import ms from "ms";
-import prettyMilliseconds from "pretty-ms";
-import { z } from "zod";
-
-import { Button } from "@ctrlplane/ui/button";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  useForm,
-} from "@ctrlplane/ui/form";
-import { Input } from "@ctrlplane/ui/input";
-
-import { api } from "~/trpc/react";
-
-const isValidDuration = (str: string) => !isNaN(ms(str));
-
-const schema = z.object({
-  duration: z.string().refine(isValidDuration, {
-    message: "Invalid duration pattern",
-  }),
-});
-
-export const GradualRollouts: React.FC<{
-  environmentPolicy: SCHEMA.EnvironmentPolicy;
-}> = ({ environmentPolicy }) => {
-  const form = useForm({
-    schema,
-    defaultValues: { duration: prettyMilliseconds(environmentPolicy.duration) },
-  });
-
-  const updatePolicy = api.environment.policy.update.useMutation();
-  const utils = api.useUtils();
-
-  const { id, systemId } = environmentPolicy;
-  const onSubmit = form.handleSubmit((data) =>
-    updatePolicy
-      .mutateAsync({ id, data: { duration: ms(data.duration) } })
-      .then(() => form.reset(data))
-      .then(() => utils.environment.policy.byId.invalidate(id))
-      .then(() => utils.environment.policy.bySystemId.invalidate(systemId)),
-  );
-
-  return (
-    <Form {...form}>
-      <form onSubmit={onSubmit} className="space-y-6 p-2">
-        <FormField
-          control={form.control}
-          name="duration"
-          render={({ field }) => (
-            <FormItem className="space-y-4">
-              <div className="flex flex-col gap-1">
-                <FormLabel>Gradual Rollout</FormLabel>
-                <FormDescription>
-                  Enabling gradual rollouts will spread deployments out over a
-                  given duration. A default duration of 0ms means that
-                  deployments will be rolled out immediately.
-                </FormDescription>
-              </div>
-              <FormControl>
-                <div className="flex flex-col gap-1">
-                  <div className="flex items-center gap-2">
-                    <span className="text-sm text-muted-foreground">
-                      Spread deployments out over
-                    </span>
-                    <Input
-                      type="string"
-                      {...field}
-                      placeholder="1d"
-                      className="border-b-1 h-6 w-16 text-xs"
-                    />
-                  </div>
-                  <FormMessage />
-                </div>
-              </FormControl>
-            </FormItem>
-          )}
-        />
-
-        <Button
-          type="submit"
-          disabled={form.formState.isSubmitting || !form.formState.isDirty}
-        >
-          Save
-        </Button>
-      </form>
-    </Form>
-  );
-};
diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/Overview.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/Overview.tsx
index d6c7ef09d..9f664b385 100644
--- a/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/Overview.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/Overview.tsx
@@ -2,18 +2,7 @@ import type * as SCHEMA from "@ctrlplane/db/schema";
 import React from "react";
 import { z } from "zod";
 
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@ctrlplane/ui/alert-dialog";
-import { Button, buttonVariants } from "@ctrlplane/ui/button";
+import { Button } from "@ctrlplane/ui/button";
 import {
   Form,
   FormControl,
@@ -26,50 +15,6 @@ import { Input } from "@ctrlplane/ui/input";
 import { Textarea } from "@ctrlplane/ui/textarea";
 
 import { api } from "~/trpc/react";
-import { useEnvironmentPolicyDrawer } from "./EnvironmentPolicyDrawer";
-
-const DeleteEnvironmentPolicyDialog: React.FC<{
-  environmentPolicy: SCHEMA.EnvironmentPolicy;
-  children: React.ReactNode;
-}> = ({ environmentPolicy, children }) => {
-  const deleteEnvironmentPolicy = api.environment.policy.delete.useMutation();
-  const utils = api.useUtils();
-  const { removeEnvironmentPolicyId } = useEnvironmentPolicyDrawer();
-
-  const onDelete = () =>
-    deleteEnvironmentPolicy
-      .mutateAsync(environmentPolicy.id)
-      .then(removeEnvironmentPolicyId)
-      .then(() =>
-        utils.environment.policy.bySystemId.invalidate(
-          environmentPolicy.systemId,
-        ),
-      );
-
-  return (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Delete Environment Policy</AlertDialogTitle>
-        </AlertDialogHeader>
-        <AlertDialogDescription>
-          Are you sure you want to delete this environment policy? You will have
-          to recreate it from scratch.
-        </AlertDialogDescription>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction
-            onClick={onDelete}
-            className={buttonVariants({ variant: "destructive" })}
-          >
-            Delete
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-};
 
 const schema = z.object({ name: z.string(), description: z.string() });
 
@@ -125,18 +70,12 @@ export const Overview: React.FC<{
           )}
         />
 
-        <div className="flex gap-2">
-          <Button
-            type="submit"
-            disabled={updatePolicy.isPending || !form.formState.isDirty}
-          >
-            Save
-          </Button>
-          <div className="flex-grow" />
-          <DeleteEnvironmentPolicyDialog environmentPolicy={environmentPolicy}>
-            <Button variant="destructive">Delete</Button>
-          </DeleteEnvironmentPolicyDialog>
-        </div>
+        <Button
+          type="submit"
+          disabled={updatePolicy.isPending || !form.formState.isDirty}
+        >
+          Save
+        </Button>
       </form>
     </Form>
   );
diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/PolicyDeleteDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/PolicyDeleteDialog.tsx
new file mode 100644
index 000000000..f7d5c5730
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/PolicyDeleteDialog.tsx
@@ -0,0 +1,57 @@
+import type * as SCHEMA from "@ctrlplane/db/schema";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@ctrlplane/ui/alert-dialog";
+import { buttonVariants } from "@ctrlplane/ui/button";
+
+import { api } from "~/trpc/react";
+import { useEnvironmentPolicyDrawer } from "./EnvironmentPolicyDrawer";
+
+export const DeleteEnvironmentPolicyDialog: React.FC<{
+  environmentPolicy: SCHEMA.EnvironmentPolicy;
+  children: React.ReactNode;
+}> = ({ environmentPolicy, children }) => {
+  const deleteEnvironmentPolicy = api.environment.policy.delete.useMutation();
+  const utils = api.useUtils();
+  const { removeEnvironmentPolicyId } = useEnvironmentPolicyDrawer();
+
+  const { id, systemId } = environmentPolicy;
+  const onDelete = () =>
+    deleteEnvironmentPolicy
+      .mutateAsync(id)
+      .then(removeEnvironmentPolicyId)
+      .then(() => utils.environment.policy.bySystemId.invalidate(systemId));
+
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete Environment Policy</AlertDialogTitle>
+        </AlertDialogHeader>
+        <AlertDialogDescription>
+          Are you sure you want to delete this environment policy? You will have
+          to recreate it from scratch.
+        </AlertDialogDescription>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={onDelete}
+            className={buttonVariants({ variant: "destructive" })}
+          >
+            Delete
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/ReleaseFilter.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/ReleaseFilter.tsx
deleted file mode 100644
index 780589c28..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/ReleaseFilter.tsx
+++ /dev/null
@@ -1,220 +0,0 @@
-import type * as SCHEMA from "@ctrlplane/db/schema";
-import type { VersionCheck } from "@ctrlplane/validators/environment-policies";
-import _ from "lodash";
-import { validRange } from "semver";
-import { z } from "zod";
-
-import { Button } from "@ctrlplane/ui/button";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  useForm,
-} from "@ctrlplane/ui/form";
-import { Input } from "@ctrlplane/ui/input";
-import { RadioGroup, RadioGroupItem } from "@ctrlplane/ui/radio-group";
-import {
-  isFilterCheck,
-  isNoneCheck,
-  isRegexCheck,
-  isSemverCheck,
-} from "@ctrlplane/validators/environment-policies";
-import {
-  defaultCondition,
-  isValidReleaseCondition,
-  releaseCondition,
-} from "@ctrlplane/validators/releases";
-
-import { api } from "~/trpc/react";
-import { ReleaseConditionRender } from "../release-condition/ReleaseConditionRender";
-
-const isValidRegex = (str: string) => {
-  try {
-    new RegExp(str);
-    return true;
-  } catch {
-    return false;
-  }
-};
-
-const schema = z
-  .object({
-    evaluateWith: z.literal("regex"),
-    evaluate: z.string().refine(isValidRegex, {
-      message: "Invalid regex pattern",
-    }),
-  })
-  .or(
-    z.object({
-      evaluateWith: z.literal("none"),
-      evaluate: z.null(),
-    }),
-  )
-  .or(
-    z.object({
-      evaluateWith: z.literal("semver"),
-      evaluate: z
-        .string()
-        .refine((s) => validRange(s) !== null, "Invalid semver range"),
-    }),
-  )
-  .or(
-    z.object({
-      evaluateWith: z.literal("filter"),
-      evaluate: releaseCondition.refine(isValidReleaseCondition, {
-        message: "Invalid release condition",
-      }),
-    }),
-  );
-
-export const ReleaseFilter: React.FC<{
-  environmentPolicy: SCHEMA.EnvironmentPolicy;
-}> = ({ environmentPolicy }) => {
-  const check: VersionCheck = { ...environmentPolicy };
-  // schema complains about type mismatching unless we add type guards
-  const defaultValues = _.merge(
-    {},
-    environmentPolicy,
-    isFilterCheck(check) && { evaluate: check.evaluate },
-    isNoneCheck(check) && { evaluate: check.evaluate },
-    isSemverCheck(check) && { evaluate: check.evaluate },
-    isRegexCheck(check) && { evaluate: check.evaluate },
-  );
-
-  const form = useForm({ schema, defaultValues });
-  const { evaluateWith, evaluate } = form.watch();
-
-  const policyUpdate = api.environment.policy.update.useMutation();
-  const utils = api.useUtils();
-
-  const { id, systemId } = environmentPolicy;
-  const onSubmit = form.handleSubmit((data) =>
-    policyUpdate
-      .mutateAsync({ id, data })
-      .then(() => form.reset(data))
-      .then(() => utils.environment.policy.byId.invalidate(id))
-      .then(() => utils.environment.policy.bySystemId.invalidate(systemId)),
-  );
-
-  return (
-    <Form {...form}>
-      <form onSubmit={onSubmit} className="space-y-6 p-2">
-        <FormField
-          control={form.control}
-          name="evaluateWith"
-          render={({ field: { value, onChange } }) => (
-            <FormItem>
-              <FormLabel>Evaluate With</FormLabel>
-              <RadioGroup onValueChange={onChange} value={value}>
-                <FormItem className="flex items-center space-x-3 space-y-0">
-                  <FormControl>
-                    <RadioGroupItem value="none" />
-                  </FormControl>
-                  <FormLabel className="flex items-center gap-2 font-normal">
-                    None
-                  </FormLabel>
-                </FormItem>
-                <FormItem className="flex items-center space-x-3 space-y-0">
-                  <FormControl>
-                    <RadioGroupItem value="regex" />
-                  </FormControl>
-                  <FormLabel className="flex items-center gap-2 font-normal">
-                    Regex
-                  </FormLabel>
-                </FormItem>
-                <FormItem className="flex items-center space-x-3 space-y-0">
-                  <FormControl>
-                    <RadioGroupItem value="semver" />
-                  </FormControl>
-                  <FormLabel className="flex items-center gap-2 font-normal">
-                    Semver
-                  </FormLabel>
-                </FormItem>
-                <FormItem className="flex items-center space-x-3 space-y-0">
-                  <FormControl>
-                    <RadioGroupItem value="filter" />
-                  </FormControl>
-                  <FormLabel className="flex items-center gap-2 font-normal">
-                    Filter
-                  </FormLabel>
-                </FormItem>
-              </RadioGroup>
-            </FormItem>
-          )}
-        />
-
-        {evaluateWith === "regex" && (
-          <FormField
-            control={form.control}
-            name="evaluate"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Regex</FormLabel>
-                <Input {...field} placeholder="^v[0-9]+.[0-9]+.[0-9]+$" />
-              </FormItem>
-            )}
-          />
-        )}
-
-        {evaluateWith === "semver" && (
-          <FormField
-            control={form.control}
-            name="evaluate"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Semver</FormLabel>
-                <Input {...field} placeholder=">=v1.0.0" />
-              </FormItem>
-            )}
-          />
-        )}
-
-        {evaluateWith === "filter" && (
-          <FormField
-            control={form.control}
-            name="evaluate"
-            render={({ field: { onChange } }) => (
-              <FormItem>
-                <FormLabel>Filter</FormLabel>
-                <FormControl>
-                  <ReleaseConditionRender
-                    condition={evaluate ?? defaultCondition}
-                    onChange={onChange}
-                  />
-                </FormControl>
-                <FormMessage />
-                {form.formState.isDirty && (
-                  <span className="text-xs text-muted-foreground">
-                    Save to apply
-                  </span>
-                )}
-              </FormItem>
-            )}
-          />
-        )}
-
-        <div className="flex gap-2">
-          <Button
-            type="submit"
-            disabled={policyUpdate.isPending || !form.formState.isDirty}
-          >
-            Save
-          </Button>
-
-          {evaluateWith === "filter" && (
-            <Button
-              type="button"
-              variant="secondary"
-              onClick={() => form.setValue("evaluate", defaultCondition)}
-            >
-              Clear
-            </Button>
-          )}
-        </div>
-      </form>
-    </Form>
-  );
-};
diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/ReleaseSequencing.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/ReleaseManagement.tsx
similarity index 79%
rename from apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/ReleaseSequencing.tsx
rename to apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/ReleaseManagement.tsx
index b8b5c96a2..0fb04c1f1 100644
--- a/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/ReleaseSequencing.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/ReleaseManagement.tsx
@@ -17,7 +17,7 @@ import { api } from "~/trpc/react";
 
 const schema = z.object({ releaseSequencing: z.enum(["wait", "cancel"]) });
 
-export const ReleaseSequencing: React.FC<{
+export const ReleaseManagement: React.FC<{
   environmentPolicy: SCHEMA.EnvironmentPolicy;
 }> = ({ environmentPolicy }) => {
   const form = useForm({ schema, defaultValues: { ...environmentPolicy } });
@@ -36,7 +36,18 @@ export const ReleaseSequencing: React.FC<{
 
   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">Release Management</h1>
+          <span className="text-sm text-muted-foreground">
+            Release management policies are concerned with how new and pending
+            releases are handled within the deployment pipeline. These include
+            defining sequencing rules, such as whether to cancel or await
+            pending releases when a new release is triggered, ensuring that
+            releases happen in a controlled and predictable manner without
+            conflicts or disruptions.
+          </span>
+        </div>
         <FormField
           control={form.control}
           name="releaseSequencing"
diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/ReleaseWindows.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/ReleaseWindows.tsx
deleted file mode 100644
index a4c71bb78..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/ReleaseWindows.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-import type * as schema from "@ctrlplane/db/schema";
-import React from "react";
-import { ZonedDateTime } from "@internationalized/date";
-import { IconX } from "@tabler/icons-react";
-import _ from "lodash";
-import ms from "ms";
-import { z } from "zod";
-
-import { Button } from "@ctrlplane/ui/button";
-import { DateTimePicker } from "@ctrlplane/ui/date-time-picker/date-time-picker";
-import { Form, FormField, useFieldArray, useForm } from "@ctrlplane/ui/form";
-import { Label } from "@ctrlplane/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@ctrlplane/ui/select";
-
-import { api } from "~/trpc/react";
-
-const releaseWindowsForm = z.object({
-  releaseWindows: z.array(
-    z.object({
-      policyId: z.string().uuid(),
-      recurrence: z.enum(["hourly", "daily", "weekly", "monthly"]),
-      startTime: z.date(),
-      endTime: z.date(),
-    }),
-  ),
-});
-
-const toZonedDateTime = (date: Date): ZonedDateTime => {
-  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-  const offset = -date.getTimezoneOffset() * ms("1m");
-  const year = date.getFullYear();
-  const month = date.getMonth() + 1;
-  const day = date.getDate();
-  const hour = date.getHours();
-  const minute = date.getMinutes();
-  const second = date.getSeconds();
-  const millisecond = date.getMilliseconds();
-
-  return new ZonedDateTime(
-    year,
-    month,
-    day,
-    timeZone,
-    offset,
-    hour,
-    minute,
-    second,
-    millisecond,
-  );
-};
-
-export const ReleaseWindows: React.FC<{
-  environmentPolicy: schema.EnvironmentPolicy & {
-    releaseWindows: schema.EnvironmentPolicyReleaseWindow[];
-  };
-}> = ({ environmentPolicy }) => {
-  const form = useForm({
-    schema: releaseWindowsForm,
-    defaultValues: {
-      releaseWindows: environmentPolicy.releaseWindows,
-    },
-  });
-
-  const { fields, append, remove } = useFieldArray({
-    control: form.control,
-    name: "releaseWindows",
-  });
-
-  const setPolicyWindows = api.environment.policy.setWindows.useMutation();
-  const utils = api.useUtils();
-
-  const { id: policyId, systemId } = environmentPolicy;
-  const onSubmit = form.handleSubmit((data) =>
-    setPolicyWindows
-      .mutateAsync({ policyId, releaseWindows: data.releaseWindows })
-      .then(() => form.reset(data))
-      .then(() => utils.environment.policy.byId.invalidate(policyId))
-      .then(() => utils.environment.policy.bySystemId.invalidate(systemId)),
-  );
-
-  return (
-    <Form {...form}>
-      <form onSubmit={onSubmit} className="flex flex-col gap-4">
-        <div className="flex flex-col gap-1">
-          <Label>Release Windows</Label>
-          <span className="text-xs text-muted-foreground">
-            Release windows allow you to control when deployments can be
-            released into an environment.
-          </span>
-        </div>
-
-        {fields.map((field, index) => {
-          return (
-            <FormField
-              control={form.control}
-              key={field.id}
-              name={`releaseWindows.${index}`}
-              render={({ field: { value, onChange } }) => {
-                return (
-                  <div
-                    key={index}
-                    className="flex w-fit items-center gap-2 rounded-md border p-1 text-sm"
-                  >
-                    <DateTimePicker
-                      value={toZonedDateTime(value.startTime)}
-                      aria-label="Start Time"
-                      onChange={(t) => {
-                        onChange({
-                          ...value,
-                          startTime: t.toDate(
-                            Intl.DateTimeFormat().resolvedOptions().timeZone,
-                          ),
-                        });
-                      }}
-                    />{" "}
-                    <span className="text-muted-foreground">to</span>{" "}
-                    <DateTimePicker
-                      value={toZonedDateTime(value.endTime)}
-                      onChange={(t) => {
-                        onChange({
-                          ...value,
-                          endTime: t.toDate(
-                            Intl.DateTimeFormat().resolvedOptions().timeZone,
-                          ),
-                        });
-                      }}
-                      aria-label="End Time"
-                    />
-                    <span className="text-muted-foreground">recurring</span>
-                    <div className="w-32">
-                      <Select
-                        value={value.recurrence}
-                        onValueChange={(v) => {
-                          onChange({
-                            ...value,
-                            recurrence: v,
-                          });
-                        }}
-                      >
-                        <SelectTrigger className="h-8">
-                          <SelectValue>
-                            {_.capitalize(value.recurrence)}
-                          </SelectValue>
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectGroup>
-                            <SelectItem value="hourly">hourly</SelectItem>
-                            <SelectItem value="daily">daily</SelectItem>
-                            <SelectItem value="weekly">weekly</SelectItem>
-                            <SelectItem value="monthly">monthly</SelectItem>
-                          </SelectGroup>
-                        </SelectContent>
-                      </Select>
-                    </div>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => remove(index)}
-                      className="h-6 w-6"
-                    >
-                      <IconX className="h-4 w-4" />
-                    </Button>
-                  </div>
-                );
-              }}
-            />
-          );
-        })}
-
-        <div className="flex gap-2">
-          <Button
-            type="button"
-            variant="outline"
-            className="w-fit"
-            onClick={() =>
-              append({
-                policyId: environmentPolicy.id,
-                recurrence: "weekly",
-                startTime: new Date(),
-                endTime: new Date(),
-              })
-            }
-          >
-            Add Release Window
-          </Button>
-          <Button
-            type="submit"
-            disabled={setPolicyWindows.isPending || !form.formState.isDirty}
-          >
-            Save
-          </Button>
-        </div>
-      </form>
-    </Form>
-  );
-};
diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/RolloutAndTiming.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/RolloutAndTiming.tsx
new file mode 100644
index 000000000..a04e9c6bf
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/RolloutAndTiming.tsx
@@ -0,0 +1,284 @@
+import type * as SCHEMA from "@ctrlplane/db/schema";
+import React from "react";
+import { ZonedDateTime } from "@internationalized/date";
+import { IconX } from "@tabler/icons-react";
+import _ from "lodash";
+import ms from "ms";
+import prettyMilliseconds from "pretty-ms";
+import { z } from "zod";
+
+import { Button } from "@ctrlplane/ui/button";
+import { DateTimePicker } from "@ctrlplane/ui/date-time-picker/date-time-picker";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFieldArray,
+  useForm,
+} from "@ctrlplane/ui/form";
+import { Input } from "@ctrlplane/ui/input";
+import { Label } from "@ctrlplane/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@ctrlplane/ui/select";
+
+import { api } from "~/trpc/react";
+
+const toZonedDateTime = (date: Date): ZonedDateTime => {
+  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const offset = -date.getTimezoneOffset() * ms("1m");
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const hour = date.getHours();
+  const minute = date.getMinutes();
+  const second = date.getSeconds();
+  const millisecond = date.getMilliseconds();
+
+  return new ZonedDateTime(
+    year,
+    month,
+    day,
+    timeZone,
+    offset,
+    hour,
+    minute,
+    second,
+    millisecond,
+  );
+};
+
+const isValidDuration = (str: string) => !isNaN(ms(str));
+
+const schema = z.object({
+  releaseWindows: z.array(
+    z.object({
+      policyId: z.string().uuid(),
+      recurrence: z.enum(["hourly", "daily", "weekly", "monthly"]),
+      startTime: z.date(),
+      endTime: z.date(),
+    }),
+  ),
+  duration: z.string().refine(isValidDuration, {
+    message: "Invalid duration pattern",
+  }),
+});
+
+export const RolloutAndTiming: React.FC<{
+  environmentPolicy: SCHEMA.EnvironmentPolicy & {
+    releaseWindows: SCHEMA.EnvironmentPolicyReleaseWindow[];
+  };
+}> = ({ environmentPolicy }) => {
+  const form = useForm({
+    schema,
+    defaultValues: {
+      ...environmentPolicy,
+      duration: prettyMilliseconds(environmentPolicy.duration),
+    },
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    control: form.control,
+    name: "releaseWindows",
+  });
+
+  const setPolicyWindows = api.environment.policy.setWindows.useMutation();
+  const updatePolicy = api.environment.policy.update.useMutation();
+  const utils = api.useUtils();
+
+  const { id: policyId, systemId } = environmentPolicy;
+  const onSubmit = form.handleSubmit(async (data) => {
+    const { releaseWindows, duration: durationString } = data;
+    const duration = ms(durationString);
+    await setPolicyWindows.mutateAsync({ policyId, releaseWindows });
+    await updatePolicy.mutateAsync({ id: policyId, data: { duration } });
+
+    form.reset(data);
+    await utils.environment.policy.byId.invalidate(policyId);
+    await utils.environment.policy.bySystemId.invalidate(systemId);
+  });
+
+  return (
+    <Form {...form}>
+      <form onSubmit={onSubmit} className="space-y-10 p-2">
+        <div className="flex flex-col gap-1">
+          <h1 className="text-lg font-medium">Rollout and Timing</h1>
+          <span className="text-sm text-muted-foreground">
+            Rollout and timing policies govern how and when deployments are
+            rolled out to environments. These include incremental rollout
+            strategies, scheduling deployments during specific windows, and
+            managing release timing to minimize risk and ensure stability during
+            the deployment process.
+          </span>
+        </div>
+
+        <div className="space-y-4">
+          <div className="flex flex-col gap-1">
+            <Label>Release Windows</Label>
+            <span className="text-xs text-muted-foreground">
+              Release windows allow you to control when deployments can be
+              released into an environment.
+            </span>
+          </div>
+
+          {fields.length > 0 && (
+            <div className="space-y-2">
+              {fields.map((field, index) => {
+                return (
+                  <FormField
+                    control={form.control}
+                    key={field.id}
+                    name={`releaseWindows.${index}`}
+                    render={({ field: { value, onChange } }) => {
+                      return (
+                        <div
+                          key={index}
+                          className="flex w-fit items-center gap-2 rounded-md border p-1 text-sm"
+                        >
+                          <DateTimePicker
+                            value={toZonedDateTime(value.startTime)}
+                            aria-label="Start Time"
+                            onChange={(t) => {
+                              onChange({
+                                ...value,
+                                startTime: t.toDate(
+                                  Intl.DateTimeFormat().resolvedOptions()
+                                    .timeZone,
+                                ),
+                              });
+                            }}
+                          />{" "}
+                          <span className="text-muted-foreground">to</span>{" "}
+                          <DateTimePicker
+                            value={toZonedDateTime(value.endTime)}
+                            onChange={(t) => {
+                              onChange({
+                                ...value,
+                                endTime: t.toDate(
+                                  Intl.DateTimeFormat().resolvedOptions()
+                                    .timeZone,
+                                ),
+                              });
+                            }}
+                            aria-label="End Time"
+                          />
+                          <span className="text-muted-foreground">
+                            recurring
+                          </span>
+                          <div className="w-32">
+                            <Select
+                              value={value.recurrence}
+                              onValueChange={(v) => {
+                                onChange({
+                                  ...value,
+                                  recurrence: v,
+                                });
+                              }}
+                            >
+                              <SelectTrigger className="h-8">
+                                <SelectValue>
+                                  {_.capitalize(value.recurrence)}
+                                </SelectValue>
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectGroup>
+                                  <SelectItem value="hourly">hourly</SelectItem>
+                                  <SelectItem value="daily">daily</SelectItem>
+                                  <SelectItem value="weekly">weekly</SelectItem>
+                                  <SelectItem value="monthly">
+                                    monthly
+                                  </SelectItem>
+                                </SelectGroup>
+                              </SelectContent>
+                            </Select>
+                          </div>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => remove(index)}
+                            className="h-6 w-6"
+                          >
+                            <IconX className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      );
+                    }}
+                  />
+                );
+              })}
+            </div>
+          )}
+
+          <Button
+            type="button"
+            variant="outline"
+            className="w-fit"
+            onClick={() =>
+              append({
+                policyId: environmentPolicy.id,
+                recurrence: "weekly",
+                startTime: new Date(),
+                endTime: new Date(),
+              })
+            }
+          >
+            Add Release Window
+          </Button>
+        </div>
+
+        <FormField
+          control={form.control}
+          name="duration"
+          render={({ field }) => (
+            <FormItem className="space-y-4">
+              <div className="flex flex-col gap-1">
+                <FormLabel>Gradual Rollout</FormLabel>
+                <FormDescription>
+                  Enabling gradual rollouts will spread deployments out over a
+                  given duration. A default duration of 0ms means that
+                  deployments will be rolled out immediately.
+                </FormDescription>
+              </div>
+              <FormControl>
+                <div className="flex flex-col gap-1">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm text-muted-foreground">
+                      Spread deployments out over
+                    </span>
+                    <Input
+                      type="string"
+                      {...field}
+                      placeholder="1d"
+                      className="border-b-1 h-6 w-16 text-xs"
+                    />
+                  </div>
+                  <FormMessage />
+                </div>
+              </FormControl>
+            </FormItem>
+          )}
+        />
+
+        <Button
+          type="submit"
+          disabled={
+            setPolicyWindows.isPending ||
+            updatePolicy.isPending ||
+            !form.formState.isDirty
+          }
+        >
+          Save
+        </Button>
+      </form>
+    </Form>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/release-condition/ComparisonConditionRender.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/release-condition/ComparisonConditionRender.tsx
index 930602630..9b32fca50 100644
--- a/apps/webservice/src/app/[workspaceSlug]/_components/release-condition/ComparisonConditionRender.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/_components/release-condition/ComparisonConditionRender.tsx
@@ -121,6 +121,8 @@ export const ComparisonConditionRender: React.FC<
     onChange(newCondition);
   };
 
+  const clear = () => onChange({ ...condition, conditions: [] });
+
   const not = condition.not ?? false;
 
   return (
@@ -239,90 +241,96 @@ export const ComparisonConditionRender: React.FC<
         ))}
       </div>
 
-      <DropdownMenu>
-        <DropdownMenuTrigger
-          className="w-max focus-visible:outline-none"
-          asChild
-        >
-          <Button
-            type="button"
-            variant="outline"
-            className={cn(
-              "flex items-center gap-1 bg-inherit px-2 text-muted-foreground hover:bg-neutral-800/50",
-              depth === 0 && "border-neutral-800/70",
-            )}
+      <div className="flex">
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            className="w-max focus-visible:outline-none"
+            asChild
           >
-            <IconPlus className="h-4 w-4" /> Add Condition{" "}
-            <IconChevronDown className="h-4 w-4" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" className="text-muted-foreground">
-          <DropdownMenuGroup>
-            <DropdownMenuItem
-              onClick={() =>
-                addCondition({
-                  type: ReleaseFilterType.Metadata,
-                  operator: ReleaseOperator.Equals,
-                  key: "",
-                  value: "",
-                })
-              }
-            >
-              Metadata
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={() =>
-                addCondition({
-                  type: ReleaseFilterType.CreatedAt,
-                  operator: ReleaseOperator.Before,
-                  value: new Date().toISOString(),
-                })
-              }
-            >
-              Created at
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={() =>
-                addCondition({
-                  type: ReleaseFilterType.Version,
-                  operator: ReleaseOperator.Equals,
-                  value: "",
-                })
-              }
+            <Button
+              type="button"
+              variant="outline"
+              className={cn(
+                "flex items-center gap-1 bg-inherit px-2 text-muted-foreground hover:bg-neutral-800/50",
+                depth === 0 && "border-neutral-800/70",
+              )}
             >
-              Version
-            </DropdownMenuItem>
-            {depth < 2 && (
+              <IconPlus className="h-4 w-4" /> Add Condition{" "}
+              <IconChevronDown className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="text-muted-foreground">
+            <DropdownMenuGroup>
+              <DropdownMenuItem
+                onClick={() =>
+                  addCondition({
+                    type: ReleaseFilterType.Metadata,
+                    operator: ReleaseOperator.Equals,
+                    key: "",
+                    value: "",
+                  })
+                }
+              >
+                Metadata
+              </DropdownMenuItem>
               <DropdownMenuItem
                 onClick={() =>
                   addCondition({
-                    type: ReleaseFilterType.Comparison,
-                    operator: ReleaseOperator.And,
-                    conditions: [],
-                    not: false,
+                    type: ReleaseFilterType.CreatedAt,
+                    operator: ReleaseOperator.Before,
+                    value: new Date().toISOString(),
                   })
                 }
               >
-                Filter group
+                Created at
               </DropdownMenuItem>
-            )}
-            {depth < 2 && (
               <DropdownMenuItem
                 onClick={() =>
                   addCondition({
-                    type: ReleaseFilterType.Comparison,
-                    operator: ReleaseOperator.And,
-                    not: true,
-                    conditions: [],
+                    type: ReleaseFilterType.Version,
+                    operator: ReleaseOperator.Equals,
+                    value: "",
                   })
                 }
               >
-                Not group
+                Version
               </DropdownMenuItem>
-            )}
-          </DropdownMenuGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
+              {depth < 2 && (
+                <DropdownMenuItem
+                  onClick={() =>
+                    addCondition({
+                      type: ReleaseFilterType.Comparison,
+                      operator: ReleaseOperator.And,
+                      conditions: [],
+                      not: false,
+                    })
+                  }
+                >
+                  Filter group
+                </DropdownMenuItem>
+              )}
+              {depth < 2 && (
+                <DropdownMenuItem
+                  onClick={() =>
+                    addCondition({
+                      type: ReleaseFilterType.Comparison,
+                      operator: ReleaseOperator.And,
+                      not: true,
+                      conditions: [],
+                    })
+                  }
+                >
+                  Not group
+                </DropdownMenuItem>
+              )}
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <div className="flex-grow" />
+        <Button variant="outline" type="button" onClick={clear}>
+          Clear
+        </Button>
+      </div>
     </div>
   );
 };

From 73680504187afc1b4f6eff3db5ddbe5eb4f90fc9 Mon Sep 17 00:00:00 2001
From: Aditya Choudhari <aditya.choudhari@wandb.com>
Date: Tue, 8 Oct 2024 17:23:43 -0700
Subject: [PATCH 2/3] nit

---
 .../EnvironmentPolicyDrawer.tsx               | 34 +++++++++----------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/EnvironmentPolicyDrawer.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/EnvironmentPolicyDrawer.tsx
index 63af1e5aa..3e26dce6f 100644
--- a/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/EnvironmentPolicyDrawer.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/EnvironmentPolicyDrawer.tsx
@@ -76,24 +76,22 @@ const View: React.FC<{
 const PolicyDropdownMenu: React.FC<{
   environmentPolicy: SCHEMA.EnvironmentPolicy;
   children: React.ReactNode;
-}> = ({ environmentPolicy, children }) => {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DeleteEnvironmentPolicyDialog environmentPolicy={environmentPolicy}>
-          <DropdownMenuItem
-            className="flex items-center gap-2"
-            onSelect={(e) => e.preventDefault()}
-          >
-            <IconTrash className="h-4 w-4 text-red-500" />
-            <span>Delete</span>
-          </DropdownMenuItem>
-        </DeleteEnvironmentPolicyDialog>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};
+}> = ({ environmentPolicy, children }) => (
+  <DropdownMenu>
+    <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DeleteEnvironmentPolicyDialog environmentPolicy={environmentPolicy}>
+        <DropdownMenuItem
+          className="flex items-center gap-2"
+          onSelect={(e) => e.preventDefault()}
+        >
+          <IconTrash className="h-4 w-4 text-red-500" />
+          <span>Delete</span>
+        </DropdownMenuItem>
+      </DeleteEnvironmentPolicyDialog>
+    </DropdownMenuContent>
+  </DropdownMenu>
+);
 
 export const EnvironmentPolicyDrawer: React.FC = () => {
   const { environmentPolicyId, removeEnvironmentPolicyId } =

From 02fa8eb7321fbb73e602c6ade08976d06b0ac245 Mon Sep 17 00:00:00 2001
From: Aditya Choudhari <aditya.choudhari@wandb.com>
Date: Tue, 8 Oct 2024 17:26:17 -0700
Subject: [PATCH 3/3] nit

---
 .../environment-policy-drawer/RolloutAndTiming.tsx          | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/RolloutAndTiming.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/RolloutAndTiming.tsx
index a04e9c6bf..bf22aca97 100644
--- a/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/RolloutAndTiming.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/_components/environment-policy-drawer/RolloutAndTiming.tsx
@@ -78,12 +78,10 @@ export const RolloutAndTiming: React.FC<{
     releaseWindows: SCHEMA.EnvironmentPolicyReleaseWindow[];
   };
 }> = ({ environmentPolicy }) => {
+  const duration = prettyMilliseconds(environmentPolicy.duration);
   const form = useForm({
     schema,
-    defaultValues: {
-      ...environmentPolicy,
-      duration: prettyMilliseconds(environmentPolicy.duration),
-    },
+    defaultValues: { ...environmentPolicy, duration },
   });
 
   const { fields, append, remove } = useFieldArray({