From 0a64547efca3095790de36b0923435b09c92d154 Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Wed, 20 May 2026 11:53:11 +0530
Subject: [PATCH] fix(admin): use Radio for single-select role assignment

The org-level and project-level Assign Role dialogs were rendering
Checkbox inputs for what is a single-select field (form schema and
backend both accept only one roleId). This swaps them to Radio.Group +
Radio, dropping the per-item dispatch helper that emulated radio
semantics. API payloads are unchanged.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 web/sdk/admin/components/AssignRole.tsx       | 28 ++++++++-----------
 .../details/projects/members/assign-role.tsx  | 23 ++++++++-------
 2 files changed, 22 insertions(+), 29 deletions(-)

diff --git a/web/sdk/admin/components/AssignRole.tsx b/web/sdk/admin/components/AssignRole.tsx
index 6fdba16d7..6ab1b17cd 100644
--- a/web/sdk/admin/components/AssignRole.tsx
+++ b/web/sdk/admin/components/AssignRole.tsx
@@ -1,9 +1,9 @@
 import {
   Button,
-  Checkbox,
   Dialog,
   Flex,
   Label,
+  Radio,
   Text,
   toastManager,
 } from "@raystack/apsara-v1";
@@ -62,13 +62,6 @@ export const AssignRole = ({
 
   const selectedRoleId = watch("roleId");
 
-  function onCheckedChange(value: boolean | string, roleId?: string) {
-    if (!roleId) return;
-    if (value) {
-      setValue("roleId", roleId, { shouldDirty: true });
-    }
-  }
-
   const onSubmit = async (data: FormData) => {
     try {
       await setMemberRole(
@@ -106,20 +99,21 @@ export const AssignRole = ({
                 Taking this action may result in changes in the role which might
                 lead to changes in access of the user.
               </Text>
-              <div role="group" aria-labelledby="roles-group">
+              <Radio.Group
+                value={selectedRoleId}
+                onValueChange={(value) =>
+                  setValue("roleId", value as string, { shouldDirty: true })
+                }
+              >
                 <Flex direction="column" gap={4}>
                   {roles.map((role) => {
                     const htmlId = `role-${role.id}`;
-                    const checked = selectedRoleId === role.id;
                     return (
                       <Flex gap={3} key={role.id}>
-                        <Checkbox
+                        <Radio
                           id={htmlId}
-                          data-test-id={`role-checkbox-${role.id}`}
-                          checked={checked}
-                          onCheckedChange={(value) =>
-                            onCheckedChange(value, role.id)
-                          }
+                          value={role.id || ""}
+                          data-test-id={`role-radio-${role.id}`}
                         />
                         <Label htmlFor={htmlId}>{role.title}</Label>
                       </Flex>
@@ -129,7 +123,7 @@ export const AssignRole = ({
                     <Text variant="danger">{errors.roleId.message}</Text>
                   )}
                 </Flex>
-              </div>
+              </Radio.Group>
             </Flex>
           </Dialog.Body>
           <Dialog.Footer>
diff --git a/web/sdk/admin/views/organizations/details/projects/members/assign-role.tsx b/web/sdk/admin/views/organizations/details/projects/members/assign-role.tsx
index 459ef4f06..3baaf666a 100644
--- a/web/sdk/admin/views/organizations/details/projects/members/assign-role.tsx
+++ b/web/sdk/admin/views/organizations/details/projects/members/assign-role.tsx
@@ -1,9 +1,9 @@
 import {
   Button,
-  Checkbox,
   Dialog,
   Flex,
   Label,
+  Radio,
   Text,
   toastManager,
 } from "@raystack/apsara-v1";
@@ -106,22 +106,21 @@ export const AssignRole = ({
                 Taking this action may result in changes in the role which might
                 lead to changes in access of the user.
               </Text>
-              <div role="group" aria-labelledby="roles-group">
+              <Radio.Group
+                value={selectedRoleId}
+                onValueChange={(value) =>
+                  setValue("roleId", value as string, { shouldDirty: true })
+                }
+              >
                 <Flex direction="column" gap={4}>
                   {roles.map((role) => {
                     const htmlId = `role-${role.id}`;
-                    const checked = selectedRoleId === role.id;
                     return (
                       <Flex gap={3} key={role.id}>
-                        <Checkbox
+                        <Radio
                           id={htmlId}
-                          data-test-id={`role-checkbox-${role.id}`}
-                          checked={checked}
-                          onCheckedChange={() =>
-                            setValue("roleId", role.id || "", {
-                              shouldDirty: true,
-                            })
-                          }
+                          value={role.id || ""}
+                          data-test-id={`role-radio-${role.id}`}
                         />
                         <Label htmlFor={htmlId}>{role.title}</Label>
                       </Flex>
@@ -131,7 +130,7 @@ export const AssignRole = ({
                     <Text variant="danger">{errors.roleId.message}</Text>
                   )}
                 </Flex>
-              </div>
+              </Radio.Group>
             </Flex>
           </Dialog.Body>
           <Dialog.Footer>