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

Fixes #31537


(cherry picked from commit 85a0fa389c)

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

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

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

@@ -42,6 +42,7 @@ import {
   useRoutableTab,
 } from "../components/routable-tabs/RoutableTabs";
 import { ViewHeader } from "../components/view-header/ViewHeader";
+import { useAccess } from "../context/access/Access";
 import { useRealm } from "../context/realm-context/RealmContext";
 import { useFetch } from "../utils/useFetch";
 import useIsFeatureEnabled, { Feature } from "../utils/useIsFeatureEnabled";
@@ -71,6 +72,14 @@ export default function RealmRoleTabs() {
 
   const { addAlert, addError } = useAlerts();
 
+  const { hasAccess } = useAccess();
+  const canViewPermissionsTab = hasAccess(
+    "query-clients",
+    "manage-authorization",
+  );
+
+  const [canManageClientRole, setCanManageClientRole] = useState(false);
+
   const [open, setOpen] = useState(false);
   const convert = (role: RoleRepresentation) => {
     const { attributes, ...rest } = role;
@@ -117,6 +126,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;
@@ -375,6 +392,7 @@ export default function RealmRoleTabs() {
               <AttributesForm
                 form={form}
                 save={onSubmit}
+                fineGrainedAccess={canManageClientRole}
                 reset={() =>
                   setValue("attributes", attributes, { shouldDirty: false })
                 }
@@ -389,14 +407,15 @@ export default function RealmRoleTabs() {
               <UsersInRoleTab data-cy="users-in-role-tab" />
             </Tab>
           )}
-          {isFeatureEnabled(Feature.AdminFineGrainedAuthz) && (
-            <Tab
-              title={<TabTitleText>{t("permissions")}</TabTitleText>}
-              {...permissionsTab}
-            >
-              <PermissionsTab id={id} type="roles" />
-            </Tab>
-          )}
+          {isFeatureEnabled(Feature.AdminFineGrainedAuthz) &&
+            canViewPermissionsTab && (
+              <Tab
+                title={<TabTitleText>{t("permissions")}</TabTitleText>}
+                {...permissionsTab}
+              >
+                <PermissionsTab id={id} type="roles" />
+              </Tab>
+            )}
         </RoutableTabs>
       </PageSection>
     </>