From c797f1f62fbfdcf34748ac56497d720facd5f411 Mon Sep 17 00:00:00 2001
From: agagancarczyk <agagancarczyk@gmail.com>
Date: Mon, 17 Oct 2022 14:09:50 +0100
Subject: [PATCH] Added alphabetically listing the policies (#3556)

---
 .../src/clients/authorization/NewPolicyDialog.tsx     | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/apps/admin-ui/src/clients/authorization/NewPolicyDialog.tsx b/apps/admin-ui/src/clients/authorization/NewPolicyDialog.tsx
index 2f958a3c87..f0b4dcc34f 100644
--- a/apps/admin-ui/src/clients/authorization/NewPolicyDialog.tsx
+++ b/apps/admin-ui/src/clients/authorization/NewPolicyDialog.tsx
@@ -17,6 +17,8 @@ import {
 
 import type PolicyProviderRepresentation from "@keycloak/keycloak-admin-client/lib/defs/policyProviderRepresentation";
 import { isValidComponentType } from "./policy/PolicyDetails";
+import { useMemo } from "react";
+import useLocaleSort, { mapByKey } from "../../utils/useLocaleSort";
 
 type NewPolicyDialogProps = {
   policyProviders?: PolicyProviderRepresentation[];
@@ -30,6 +32,13 @@ export const NewPolicyDialog = ({
   toggleDialog,
 }: NewPolicyDialogProps) => {
   const { t } = useTranslation("clients");
+  const localeSort = useLocaleSort();
+
+  const sortedPolicies = useMemo(
+    () =>
+      policyProviders ? localeSort(policyProviders, mapByKey("name")) : [],
+    [policyProviders]
+  );
 
   return (
     <Modal
@@ -52,7 +61,7 @@ export const NewPolicyDialog = ({
           </Tr>
         </Thead>
         <Tbody>
-          {policyProviders?.map((provider) => (
+          {sortedPolicies.map((provider) => (
             <Tr
               key={provider.type}
               data-testid={provider.type}