Allow Client->ClientScopes tab w/ view-clients (#21331)

Fixes #21120

js/apps/admin-ui/src/clients/ClientDetails.tsx

@@ -198,7 +198,6 @@ export default function ClientDetails() {
   const hasManageClients = hasAccess("manage-clients");
   const hasViewClients = hasAccess("view-clients");
   const hasViewUsers = hasAccess("view-users");
-  const hasQueryUsers = hasAccess("query-users");
   const permissionsEnabled =
     isFeatureEnabled(Feature.AdminFineGrainedAuthz) && hasManageAuthorization;
 
@@ -490,7 +489,7 @@ export default function ClientDetails() {
                 isReadOnly={!(hasManageClients || client.access?.configure)}
               />
             </Tab>
-            {!isRealmClient(client) && !client.bearerOnly && hasQueryUsers && (
+            {!isRealmClient(client) && !client.bearerOnly && (
               <Tab
                 id="clientScopes"
                 data-testid="clientScopesTab"

js/apps/admin-ui/src/clients/scopes/ClientScopes.tsx

@@ -133,6 +133,7 @@ export const ClientScopes = ({
 
   const { hasAccess } = useAccess();
   const isManager = hasAccess("manage-clients") || fineGrainedAccess;
+  const isViewer = hasAccess("view-clients") || fineGrainedAccess;
 
   const loader = async (first?: number, max?: number, search?: string) => {
     const defaultClientScopes =
@@ -177,7 +178,7 @@ export const ClientScopes = ({
     const firstNum = Number(first);
     const page = localeSort(rows.filter(filter), mapByKey("name"));
 
-    if (isManager) {
+    if (isViewer) {
       page.unshift({
         id: DEDICATED_ROW,
         name: t("dedicatedScopeName", { clientName }),

js/apps/admin-ui/src/clients/scopes/EvaluateScopes.tsx

@@ -35,6 +35,7 @@ import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
 import { prettyPrintJSON } from "../../util";
 import { useFetch } from "../../utils/useFetch";
 import { GeneratedCodeTab } from "./GeneratedCodeTab";
+import { useAccess } from "../../context/access/Access";
 
 import "./evaluate.css";
 
@@ -144,6 +145,9 @@ export const EvaluateScopes = ({ clientId, protocol }: EvaluateScopesProps) => {
 
   const form = useForm();
 
+  const { hasAccess } = useAccess();
+  const hasViewUsers = hasAccess("view-users");
+
   useFetch(
     () => adminClient.clients.listOptionalClientScopes({ id: clientId }),
     (optionalClientScopes) => setSelectableScopes(optionalClientScopes),
@@ -273,16 +277,18 @@ export const EvaluateScopes = ({ clientId, protocol }: EvaluateScopesProps) => {
               </SplitItem>
             </Split>
           </FormGroup>
-          <FormProvider {...form}>
-            <UserSelect
-              name="user"
-              label="users"
-              helpText={t("clients-help:user")}
-              defaultValue=""
-              variant={SelectVariant.typeahead}
-              isRequired
-            />
-          </FormProvider>
+          {hasViewUsers && (
+            <FormProvider {...form}>
+              <UserSelect
+                name="user"
+                label="users"
+                helpText={t("clients-help:user")}
+                defaultValue=""
+                variant={SelectVariant.typeahead}
+                isRequired
+              />
+            </FormProvider>
+          )}
         </Form>
       </PageSection>