Mappers are now sorted (#2700)

public/resources/en/dynamic.json

@@ -1,6 +1,7 @@
 {
   "addMultivaluedLabel": "Add {{fieldLabel}}",
   "selectARole": "Select a role",
+  "selectGroup": "Select group",
   "usermodel": {
     "prop": {
       "label": "Property",

src/identity-providers/add/AddMapper.tsx

@@ -35,6 +35,7 @@ import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinn
 import type { AttributeForm } from "../../components/key-value-form/AttributeForm";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
+import useLocaleSort, { mapByKey } from "../../utils/useLocaleSort";
 
 export type IdPMapperRepresentationWithAttributes =
   IdentityProviderMapperRepresentation & AttributeForm;
@@ -52,6 +53,7 @@ export default function AddMapper() {
   const { handleSubmit, register, errors } = form;
   const { addAlert, addError } = useAlerts();
   const history = useHistory();
+  const localeSort = useLocaleSort();
 
   const { realm } = useRealm();
   const adminClient = useAdminClient();
@@ -60,11 +62,10 @@ export default function AddMapper() {
   const { id } = useParams<IdentityProviderEditMapperParams>();
 
   const [mapperTypes, setMapperTypes] =
-    useState<Record<string, IdentityProviderMapperTypeRepresentation>>();
-  const [mapperType, setMapperType] = useState<string>();
+    useState<IdentityProviderMapperTypeRepresentation[]>();
 
   const [currentMapper, setCurrentMapper] =
-    useState<IdentityProviderMapperRepresentation>();
+    useState<IdentityProviderMapperTypeRepresentation>();
 
   const save = async (idpMapper: IdentityProviderMapperRepresentation) => {
     const mapper = convertFormValuesToObject(
@@ -148,15 +149,17 @@ export default function AddMapper() {
         adminClient.identityProviders.findMapperTypes({ alias }),
       ]),
     ([mapper, mapperTypes]) => {
+      const mappers = localeSort(Object.values(mapperTypes), mapByKey("name"));
       if (mapper) {
-        setCurrentMapper(mapper);
+        setCurrentMapper(
+          mappers.find(({ id }) => id === mapper.identityProviderMapper)
+        );
         setupForm(mapper);
-        setMapperType(mapper.identityProviderMapper!);
       } else {
-        setMapperType(Object.keys(mapperTypes)[0]);
+        setCurrentMapper(mappers[0]);
       }
 
-      setMapperTypes(mapperTypes);
+      setMapperTypes(mappers);
     },
     []
   );
@@ -167,7 +170,7 @@ export default function AddMapper() {
     form.setValue("config.claims", JSON.parse(mapper.config.claims));
   };
 
-  if (!mapperTypes) {
+  if (!mapperTypes || !currentMapper) {
     return <KeycloakSpinner />;
   }
 
@@ -216,7 +219,7 @@ export default function AddMapper() {
             <KeycloakTextInput
               ref={register()}
               type="text"
-              value={currentMapper?.id}
+              value={currentMapper.id}
               datatest-id="name-input"
               id="kc-name"
               name="name"
@@ -227,20 +230,21 @@ export default function AddMapper() {
             />
           </FormGroup>
         )}
-        <AddMapperForm
-          form={form}
-          id={id}
-          mapperTypes={mapperTypes}
-          updateMapperType={setMapperType}
-          mapperType={mapperType!}
-        />
-        <FormProvider {...form}>
-          {mapperType && mapperTypes[mapperType].properties && (
-            <DynamicComponents
-              properties={mapperTypes[mapperType].properties!}
+        {currentMapper.properties && (
+          <>
+            <AddMapperForm
+              form={form}
+              id={id}
+              mapperTypes={mapperTypes}
+              updateMapperType={setCurrentMapper}
+              mapperType={currentMapper}
             />
-          )}
-        </FormProvider>
+            <FormProvider {...form}>
+              <DynamicComponents properties={currentMapper.properties!} />
+            </FormProvider>{" "}
+          </>
+        )}
+
         <ActionGroup>
           <Button
             data-testid="new-mapper-save-button"

src/identity-providers/add/AddMapperForm.tsx

@@ -9,17 +9,19 @@ import {
   ValidatedOptions,
 } from "@patternfly/react-core";
 
+import type { IdentityProviderMapperTypeRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/identityProviderMapperTypeRepresentation";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 import type IdentityProviderMapperRepresentation from "@keycloak/keycloak-admin-client/lib/defs/identityProviderMapperRepresentation";
 import type { IdPMapperRepresentationWithAttributes } from "./AddMapper";
-import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 type AddMapperFormProps = {
-  mapperTypes: Record<string, IdentityProviderMapperRepresentation>;
-  mapperType: string;
+  mapperTypes: IdentityProviderMapperRepresentation[];
+  mapperType: IdentityProviderMapperTypeRepresentation;
   id: string;
-  updateMapperType: (mapperType: string) => void;
+  updateMapperType: (
+    mapperType: IdentityProviderMapperTypeRepresentation
+  ) => void;
   form: UseFormMethods<IdPMapperRepresentationWithAttributes>;
 };
 
@@ -38,10 +40,6 @@ export const AddMapperForm = ({
 
   const syncModes = ["inherit", "import", "legacy", "force"];
   const [syncModeOpen, setSyncModeOpen] = useState(false);
-  const serverInfo = useServerInfo();
-  const mapper = serverInfo.componentTypes?.[
-    "org.keycloak.broker.provider.IdentityProviderMapper"
-  ].find((p) => p.id === mapperType);
 
   return (
     <>
@@ -121,7 +119,7 @@ export const AddMapperForm = ({
         label={t("mapperType")}
         labelIcon={
           <HelpItem
-            helpText={mapper?.helpText}
+            helpText={mapperType.helpText}
             fieldLabelId="identity-providers:mapperType"
           />
         }
@@ -129,7 +127,7 @@ export const AddMapperForm = ({
       >
         <Controller
           name="identityProviderMapper"
-          defaultValue={Object.keys(mapperTypes)[0]}
+          defaultValue={mapperTypes[0].id}
           control={control}
           render={({ onChange, value }) => (
             <Select
@@ -139,25 +137,23 @@ export const AddMapperForm = ({
               required
               onToggle={() => setMapperTypeOpen(!mapperTypeOpen)}
               onSelect={(_, value) => {
-                updateMapperType(value.toString());
-                onChange(value.toString());
+                const mapperType =
+                  value as IdentityProviderMapperTypeRepresentation;
+                updateMapperType(mapperType);
+                onChange(mapperType.id);
                 setMapperTypeOpen(false);
               }}
-              selections={
-                Object.values(mapperTypes).find(
-                  (item) => item.id?.toLowerCase() === value
-                )?.name
-              }
+              selections={mapperType.name}
               variant={SelectVariant.single}
-              aria-label={t("syncMode")}
+              aria-label={t("mapperType")}
               isOpen={mapperTypeOpen}
             >
-              {Object.values(mapperTypes).map((option) => (
+              {mapperTypes.map((option) => (
                 <SelectOption
                   selected={option === value}
                   datatest-id={option.id}
                   key={option.name}
-                  value={option.id}
+                  value={option}
                 >
                   {option.name}
                 </SelectOption>