Let create/edit client role w/ fine-grained auth. (#32249)

Fixes #31537

Signed-off-by: Stan Silvert <ssilvert@redhat.com>

js/apps/admin-ui/src/clients/routes/NewRole.tsx

@@ -12,7 +12,7 @@ export const NewRoleRoute: AppRouteObject = {
   element: <CreateClientRole />,
   breadcrumb: (t) => t("createRole"),
   handle: {
-    access: "manage-clients",
+    access: "query-clients",
   },
 };
 

js/apps/admin-ui/src/components/role-form/RoleForm.tsx

@@ -50,6 +50,7 @@ export const RoleForm = ({
           onSubmit={handleSubmit(onSubmit)}
           role={role}
           className="pf-v5-u-mt-lg"
+          fineGrainedAccess={true} // We would never want to show this form in read-only mode
         >
           <TextControl
             name="name"

js/apps/admin-ui/src/realm-roles/RealmRoleTabs.tsx

@@ -80,6 +80,8 @@ export default function RealmRoleTabs() {
     "manage-authorization",
   );
 
+  const [canManageClientRole, setCanManageClientRole] = useState(false);
+
   const [open, setOpen] = useState(false);
   const convert = (role: RoleRepresentation) => {
     const { attributes, ...rest } = role;
@@ -116,6 +118,14 @@ export default function RealmRoleTabs() {
     [key],
   );
 
+  useFetch(
+    async () => adminClient.clients.findOne({ id: clientId }),
+    (client) => {
+      if (clientId) setCanManageClientRole(client?.access?.manage as boolean);
+    },
+    [],
+  );
+
   const onSubmit: SubmitHandler<AttributeForm> = async (formValues) => {
     try {
       const { attributes, ...rest } = formValues;
@@ -312,6 +322,7 @@ export default function RealmRoleTabs() {
                 <AttributesForm
                   form={form}
                   save={onSubmit}
+                  fineGrainedAccess={canManageClientRole}
                   reset={() =>
                     setValue("attributes", attributes, { shouldDirty: false })
                   }