feat: suggest bounded expirations for policy skips in ui

apps/web/app/routes/ws/deployments/_components/environmentversiondecisions/policy-skip/CreateSkipForm.tsx

@@ -1,155 +1,106 @@
 import type { WorkspaceEngine } from "@ctrlplane/workspace-engine-sdk";
-import type { UseFormReturn } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
+import { useState } from "react";
 import { toast } from "sonner";
-import { z } from "zod";
 
 import { trpc } from "~/api/trpc";
 import { Button } from "~/components/ui/button";
-import { DateTimePicker } from "~/components/ui/datetime-picker";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-} from "~/components/ui/form";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
 } from "~/components/ui/select";
 import { useWorkspace } from "~/components/WorkspaceProvider";
+import { ExpirySelect } from "../../release-targets/ExpirySelect";
+import { expiryOptionsForRule } from "../../release-targets/skip-expiry";
 import { getRuleDisplay } from "./utils";
 
-const formSchema = z.object({
-  id: z.string(),
-  expiresAt: z.date().optional(),
-});
-type FormSchema = z.infer<typeof formSchema>;
-
-function useSkipForm(environmentId: string, versionId: string) {
-  const { workspace } = useWorkspace();
-  const form = useForm<FormSchema>({
-    resolver: zodResolver(formSchema),
-  });
-
-  const utils = trpc.useUtils();
-
-  const createSkipMutation =
-    trpc.policySkips.createForEnvAndVersion.useMutation();
-  const onSubmit = form.handleSubmit((data) => {
-    createSkipMutation
-      .mutateAsync({
-        workspaceId: workspace.id,
-        environmentId,
-        versionId,
-        ruleId: data.id,
-        expiresAt: data.expiresAt,
-      })
-      .then(() => toast.success("Skip added"))
-      .then(() => form.reset())
-      .then(() =>
-        utils.policySkips.forEnvAndVersion.invalidate({
-          environmentId,
-          versionId,
-        }),
-      );
-  });
-
-  return { form, onSubmit, isPending: createSkipMutation.isPending };
-}
-
-function RuleSelect({
-  rules,
-  form,
-}: {
+type CreateSkipFormProps = {
   rules: WorkspaceEngine["schemas"]["PolicyRule"][];
-  form: UseFormReturn<FormSchema>;
-}) {
-  const selectedRuleId = form.watch("id");
-  const selectedRule = rules.find((rule) => rule.id === selectedRuleId);
-
-  return (
-    <FormField
-      control={form.control}
-      name="id"
-      render={({ field }) => (
-        <FormItem>
-          <FormLabel>Rule</FormLabel>
-          <FormControl>
-            <Select value={field.value} onValueChange={field.onChange}>
-              <SelectTrigger className="w-full">
-                {selectedRule ? getRuleDisplay(selectedRule) : "Select a rule"}
-              </SelectTrigger>
-              <SelectContent align="start">
-                {rules.map((rule) => (
-                  <SelectItem key={rule.id} value={rule.id}>
-                    {getRuleDisplay(rule)}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </FormControl>
-        </FormItem>
-      )}
-    />
-  );
-}
-
-function ExpiresAtSelect({ form }: { form: UseFormReturn<FormSchema> }) {
-  return (
-    <FormField
-      control={form.control}
-      name="expiresAt"
-      render={({ field }) => (
-        <FormItem>
-          <FormLabel>Expires At (optional)</FormLabel>
-          <FormControl>
-            <DateTimePicker
-              value={field.value}
-              onChange={field.onChange}
-              placeholder=""
-            />
-          </FormControl>
-        </FormItem>
-      )}
-    />
-  );
-}
+  environmentId: string;
+  versionId: string;
+};
 
 export function CreateSkipForm({
   rules,
   environmentId,
   versionId,
-}: {
-  rules: WorkspaceEngine["schemas"]["PolicyRule"][];
-  environmentId: string;
-  versionId: string;
-}) {
-  const { form, onSubmit, isPending } = useSkipForm(environmentId, versionId);
+}: CreateSkipFormProps) {
+  const { workspace } = useWorkspace();
+  const utils = trpc.useUtils();
+  const [now] = useState(() => new Date());
+  const [ruleId, setRuleId] = useState<string | undefined>(undefined);
+  const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
+
+  const { data: evaluations = [] } = trpc.deploymentVersions.evaulate.useQuery(
+    { versionId, environmentId },
+    { enabled: ruleId != null },
+  );
+  const options = expiryOptionsForRule(evaluations, ruleId, now);
+  const selected = options.find((o) => o.id === selectedId) ?? options[0];
+  const expiresAt = selected?.value ?? undefined;
+
+  const selectedRule = rules.find((rule) => rule.id === ruleId);
+  const createSkip = trpc.policySkips.createForEnvAndVersion.useMutation({
+    onSuccess: () => {
+      toast.success("Skip added");
+      setRuleId(undefined);
+      setSelectedId(undefined);
+      utils.policySkips.forEnvAndVersion.invalidate({ environmentId, versionId });
+    },
+  });
 
-  const selectedRuleId = form.watch("id");
+  const onAdd = () => {
+    if (ruleId == null) return;
+    createSkip.mutate({
+      workspaceId: workspace.id,
+      environmentId,
+      versionId,
+      ruleId,
+      expiresAt,
+    });
+  };
 
   return (
-    <Form {...form}>
-      <form onSubmit={onSubmit} className="space-y-4">
-        <h3 className="font-medium">Add new skip</h3>
-        <div className="flex flex-col gap-4">
-          <RuleSelect rules={rules} form={form} />
-          <ExpiresAtSelect form={form} />
-          <Button
-            type="submit"
-            size="sm"
-            className="w-fit"
-            disabled={selectedRuleId == null || isPending}
+    <div className="space-y-4">
+      <h3 className="font-medium">Add new skip</h3>
+      <div className="flex flex-col gap-4">
+        <div className="space-y-1.5">
+          <span className="text-xs font-medium">Rule</span>
+          <Select
+            value={ruleId}
+            onValueChange={(id) => {
+              setRuleId(id);
+              setSelectedId(undefined);
+            }}
           >
-            Add skip
-          </Button>
+            <SelectTrigger className="w-full">
+              {selectedRule ? getRuleDisplay(selectedRule) : "Select a rule"}
+            </SelectTrigger>
+            <SelectContent align="start">
+              {rules.map((rule) => (
+                <SelectItem key={rule.id} value={rule.id}>
+                  {getRuleDisplay(rule)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
-      </form>
-    </Form>
+        <ExpirySelect
+          options={options}
+          selectedId={selected?.id}
+          onChange={setSelectedId}
+        />
+        <Button
+          type="button"
+          size="sm"
+          className="w-fit"
+          disabled={ruleId == null || createSkip.isPending}
+          onClick={onAdd}
+        >
+          Add skip
+        </Button>
+      </div>
+    </div>
   );
 }

apps/web/app/routes/ws/deployments/_components/release-targets/ExpirySelect.tsx

@@ -0,0 +1,50 @@
+import { formatDistanceToNowStrict } from "date-fns";
+import { TriangleAlert } from "lucide-react";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from "~/components/ui/select";
+import type { ExpiryOption } from "./skip-expiry";
+
+export type ExpirySelectProps = {
+  options: ExpiryOption[];
+  selectedId: string | undefined;
+  onChange: (id: string) => void;
+};
+
+export function ExpirySelect({ options, selectedId, onChange }: ExpirySelectProps) {
+  const selected = options.find((o) => o.id === selectedId) ?? options[0];
+
+  return (
+    <div className="space-y-1.5">
+      <span className="text-xs font-medium">Expires</span>
+      <Select value={selected?.id} onValueChange={onChange}>
+        <SelectTrigger className="w-full">
+          {selected?.label ?? "Select when this skip expires"}
+        </SelectTrigger>
+        <SelectContent align="start">
+          {options.map((option) => (
+            <SelectItem key={option.id} value={option.id}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      {selected != null && selected.value != null && (
+        <p className="text-xs text-muted-foreground">
+          Expires in {formatDistanceToNowStrict(selected.value)}
+        </p>
+      )}
+      {selected != null && selected.value == null && (
+        <p className="flex items-start gap-1.5 text-xs text-yellow-500">
+          <TriangleAlert className="mt-0.5 size-3 shrink-0" />
+          Not recommended — permanent skips can have unintended consequences down
+          the line.
+        </p>
+      )}
+    </div>
+  );
+}