From 62683a29d245eccb6f9a318928c5b4001fc31122 Mon Sep 17 00:00:00 2001 From: Aditya Choudhari <aditya.choudhari@wandb.com> Date: Fri, 24 Jan 2025 11:00:20 -0800 Subject: [PATCH] fix: Change approval requirement UI to use checkbox --- .../ApprovalAndGovernance.tsx | 39 ++++++++----------- 1 file changed, 16 insertions(+), 23 deletions(-) diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/environment-policy-drawer/ApprovalAndGovernance.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/environment-policy-drawer/ApprovalAndGovernance.tsx index 664e50def..026554077 100644 --- a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/environment-policy-drawer/ApprovalAndGovernance.tsx +++ b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/environment-policy-drawer/ApprovalAndGovernance.tsx @@ -2,16 +2,10 @@ import type * as SCHEMA from "@ctrlplane/db/schema"; import React from "react"; import { IconLoader2 } from "@tabler/icons-react"; +import { Checkbox } from "@ctrlplane/ui/checkbox"; import { Input } from "@ctrlplane/ui/input"; import { Label } from "@ctrlplane/ui/label"; import { RadioGroup, RadioGroupItem } from "@ctrlplane/ui/radio-group"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@ctrlplane/ui/select"; import { api } from "~/trpc/react"; import { useInvalidatePolicy } from "./useInvalidatePolicy"; @@ -56,23 +50,22 @@ export const ApprovalAndGovernance: React.FC<ApprovalAndGovernanceProps> = ({ </span> </div> - <div className="w-32"> - <Select - value={environmentPolicy.approvalRequirement} - onValueChange={(value: "manual" | "automatic") => + <div className="flex items-center gap-2"> + <Checkbox + id="approvalRequirement" + checked={environmentPolicy.approvalRequirement === "manual"} + onCheckedChange={(value) => { updatePolicy - .mutateAsync({ id, data: { approvalRequirement: value } }) - .then(invalidatePolicy) - } - > - <SelectTrigger> - <SelectValue /> - </SelectTrigger> - <SelectContent> - <SelectItem value="manual">Manual</SelectItem> - <SelectItem value="automatic">Automatic</SelectItem> - </SelectContent> - </Select> + .mutateAsync({ + id, + data: { approvalRequirement: value ? "manual" : "automatic" }, + }) + .then(invalidatePolicy); + }} + /> + <label htmlFor="approvalRequirement" className="text-sm"> + Is approval required? + </label> </div> </div>