Sort client scope dialogs (#2239)

src/clients/authorization/policy/ClientScope.tsx

@@ -16,6 +16,7 @@ import type ClientScopeRepresentation from "@keycloak/keycloak-admin-client/lib/
 import { useAdminClient, useFetch } from "../../../context/auth/AdminClient";
 import { HelpItem } from "../../../components/help-enabler/HelpItem";
 import { AddScopeDialog } from "../../scopes/AddScopeDialog";
+import { useWhoAmI } from "../../../context/whoami/WhoAmI";
 
 export type RequiredIdValue = {
   id: string;
@@ -34,6 +35,7 @@ export const ClientScope = () => {
   >([]);
 
   const adminClient = useAdminClient();
+  const { whoAmI } = useWhoAmI();
 
   useFetch(
     () => adminClient.clientScopes.find(),
@@ -41,7 +43,11 @@ export const ClientScope = () => {
       setSelectedScopes(
         getValues("clientScopes").map((s) => scopes.find((c) => c.id === s.id)!)
       );
-      setScopes(scopes);
+      setScopes(
+        scopes.sort((a, b) =>
+          a.name!.localeCompare(b.name!, whoAmI.getLocale())
+        )
+      );
     },
     []
   );

src/clients/scopes/ClientScopes.tsx

@@ -34,9 +34,11 @@ import {
 } from "../../client-scopes/details/SearchFilter";
 import { ChangeTypeDropdown } from "../../client-scopes/ChangeTypeDropdown";
 
-import "./client-scopes.css";
 import { toDedicatedScope } from "../routes/DedicatedScopeDetails";
 import { useRealm } from "../../context/realm-context/RealmContext";
+import { useWhoAmI } from "../../context/whoami/WhoAmI";
+
+import "./client-scopes.css";
 
 export type ClientScopesProps = {
   clientId: string;
@@ -58,6 +60,7 @@ export const ClientScopes = ({
 }: ClientScopesProps) => {
   const { t } = useTranslation("clients");
   const adminClient = useAdminClient();
+  const { whoAmI } = useWhoAmI();
   const { addAlert, addError } = useAlerts();
   const { realm } = useRealm();
 
@@ -113,6 +116,7 @@ export const ClientScopes = ({
       clientScopes
         .filter((scope) => !names.includes(scope.name))
         .filter((scope) => scope.protocol === protocol)
+        .sort((a, b) => a.name!.localeCompare(b.name!, whoAmI.getLocale()))
     );
 
     const filter =

src/components/dynamic/MultivaluedScopesComponent.tsx

@@ -16,6 +16,7 @@ import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import type ClientScopeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientScopeRepresentation";
 import { useParams } from "react-router";
 import type { EditClientPolicyConditionParams } from "../../realm-settings/routes/EditCondition";
+import { useWhoAmI } from "../../context/whoami/WhoAmI";
 
 export const MultivaluedScopesComponent = ({
   defaultValue,
@@ -26,6 +27,7 @@ export const MultivaluedScopesComponent = ({
   const { control } = useFormContext();
   const { conditionName } = useParams<EditClientPolicyConditionParams>();
   const adminClient = useAdminClient();
+  const { whoAmI } = useWhoAmI();
   const [open, setOpen] = useState(false);
   const [clientScopes, setClientScopes] = useState<ClientScopeRepresentation[]>(
     []
@@ -65,9 +67,11 @@ export const MultivaluedScopesComponent = ({
             <>
               {open && (
                 <AddScopeDialog
-                  clientScopes={clientScopes.filter(
-                    (scope) => !value.includes(scope.name!)
-                  )}
+                  clientScopes={clientScopes
+                    .filter((scope) => !value.includes(scope.name!))
+                    .sort((a, b) =>
+                      a.name!.localeCompare(b.name!, whoAmI.getLocale())
+                    )}
                   isClientScopesConditionType
                   open={open}
                   toggleDialog={() => setOpen(!open)}