Updated the test ldap settings with second button (#1275)

Co-authored-by: Jon Koops <jonkoops@gmail.com>

src/client-scopes/add/MapperDialog.test.tsx

@@ -1,13 +1,18 @@
 /**
  * @jest-environment jsdom
  */
-import { Button } from "@patternfly/react-core";
-import { fireEvent, render, screen } from "@testing-library/react";
-import type { ServerInfoRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/serverInfoRepesentation";
 import React, { useState } from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Button } from "@patternfly/react-core";
+
+import type { ServerInfoRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/serverInfoRepesentation";
+import type WhoAmIRepresentation from "@keycloak/keycloak-admin-client/lib/defs/whoAmIRepresentation";
 import { ServerInfoContext } from "../../context/server-info/ServerInfoProvider";
 import serverInfo from "../../context/server-info/__tests__/mock.json";
 import { AddMapperDialog, AddMapperDialogModalProps } from "./MapperDialog";
+import { WhoAmI, WhoAmIContext } from "../../context/whoami/WhoAmI";
+
+import whoami from "../../context/whoami/__tests__/mock-whoami.json";
 
 describe("MapperDialog", () => {
   const Test = (args: AddMapperDialogModalProps) => {
@@ -17,12 +22,21 @@ describe("MapperDialog", () => {
       <ServerInfoContext.Provider
         value={serverInfo as unknown as ServerInfoRepresentation}
       >
-        <AddMapperDialog
+        <WhoAmIContext.Provider
-          {...args}
+          value={{
-          open={open}
+            refresh: () => {},
-          toggleDialog={() => setOpen(!open)}
+            whoAmI: new WhoAmI(whoami as WhoAmIRepresentation),
-        />
+          }}
-        <Button onClick={() => setOpen(true)}>{!open ? "Show" : "Hide"}</Button>
+        >
+          <AddMapperDialog
+            {...args}
+            open={open}
+            toggleDialog={() => setOpen(!open)}
+          />
+          <Button onClick={() => setOpen(true)}>
+            {!open ? "Show" : "Hide"}
+          </Button>
+        </WhoAmIContext.Provider>
       </ServerInfoContext.Provider>
     );
   };
@@ -59,7 +73,7 @@ describe("MapperDialog", () => {
     render(<Test protocol={protocol} onConfirm={onConfirm} />);
 
     fireEvent.click(screen.getByText("Show"));
-    fireEvent.click(screen.getByLabelText("User Realm Role"));
+    fireEvent.click(screen.getByLabelText("Allowed Web Origins"));
 
     expect(onConfirm).toBeCalledWith(
       serverInfo.protocolMapperTypes[protocol][0]

src/client-scopes/add/MapperDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import {
   Button,
   ButtonVariant,
@@ -11,6 +11,7 @@ import {
   ModalVariant,
   Text,
   TextContent,
+  TextVariants,
 } from "@patternfly/react-core";
 import {
   Table,
@@ -23,6 +24,7 @@ import type ProtocolMapperRepresentation from "@keycloak/keycloak-admin-client/l
 import type { ProtocolMapperTypeRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/serverInfoRepesentation";
 
 import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
+import { useWhoAmI } from "../../context/whoami/WhoAmI";
 import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";
 
 export type AddMapperDialogModalProps = {
@@ -42,21 +44,28 @@ export const AddMapperDialog = (props: AddMapperDialogProps) => {
   const { t } = useTranslation("client-scopes");
 
   const serverInfo = useServerInfo();
+  const { whoAmI } = useWhoAmI();
   const protocol = props.protocol;
   const protocolMappers = serverInfo.protocolMapperTypes![protocol];
   const builtInMappers = serverInfo.builtinProtocolMappers![protocol];
   const [filter, setFilter] = useState<ProtocolMapperRepresentation[]>([]);
 
-  const allRows = builtInMappers.map((mapper) => {
+  const allRows = useMemo(
-    const mapperType = protocolMappers.filter(
+    () =>
-      (type) => type.id === mapper.protocolMapper
+      builtInMappers
-    )[0];
+        .sort((a, b) => a.name!.localeCompare(b.name!, whoAmI.getLocale()))
-    return {
+        .map((mapper) => {
-      item: mapper,
+          const mapperType = protocolMappers.filter(
-      selected: false,
+            (type) => type.id === mapper.protocolMapper
-      cells: [mapper.name, mapperType.helpText],
+          )[0];
-    };
+          return {
-  });
+            item: mapper,
+            selected: false,
+            cells: [mapper.name, mapperType.helpText],
+          };
+        }),
+    []
+  );
   const [rows, setRows] = useState(allRows);
 
   if (props.filter && props.filter.length !== filter.length) {
@@ -68,12 +77,29 @@ export const AddMapperDialog = (props: AddMapperDialogProps) => {
   const selectedRows = rows
     .filter((row) => row.selected)
     .map((row) => row.item);
+
+  const sortedProtocolMappers = useMemo(
+    () =>
+      protocolMappers.sort((a, b) =>
+        a.name!.localeCompare(b.name!, whoAmI.getLocale())
+      ),
+    [protocolMappers]
+  );
+
   const isBuiltIn = !!props.filter;
 
+  const header = [t("common:name"), t("common:description")];
+
   return (
     <Modal
+      aria-labelledby={t("chooseAMapperType")}
       variant={ModalVariant.medium}
-      title={t("chooseAMapperType")}
+      header={
+        <TextContent>
+          <Text component={TextVariants.h1}>{t("chooseAMapperType")}</Text>
+          <Text>{t("predefinedMappingDescription")}</Text>
+        </TextContent>
+      }
       isOpen={props.open}
       onClose={props.toggleDialog}
       actions={
@@ -105,9 +131,6 @@ export const AddMapperDialog = (props: AddMapperDialogProps) => {
           : []
       }
     >
-      <TextContent>
-        <Text>{t("predefinedMappingDescription")}</Text>
-      </TextContent>
       {!isBuiltIn && (
         <DataList
           onSelectDataListItem={(id) => {
@@ -118,7 +141,18 @@ export const AddMapperDialog = (props: AddMapperDialogProps) => {
           aria-label={t("chooseAMapperType")}
           isCompact
         >
-          {protocolMappers.map((mapper) => (
+          <DataListItem aria-labelledby="headerName" id="header">
+            <DataListItemRow>
+              <DataListItemCells
+                dataListCells={header.map((name) => (
+                  <DataListCell style={{ fontWeight: 700 }} key={name}>
+                    {name}
+                  </DataListCell>
+                ))}
+              />
+            </DataListItemRow>
+          </DataListItem>
+          {sortedProtocolMappers.map((mapper) => (
             <DataListItem
               aria-label={mapper.name}
               key={mapper.id}
@@ -143,7 +177,7 @@ export const AddMapperDialog = (props: AddMapperDialogProps) => {
       {isBuiltIn && rows.length > 0 && (
         <Table
           variant={TableVariant.compact}
-          cells={[t("common:name"), t("common:description")]}
+          cells={header}
           onSelect={(_, isSelected, rowIndex) => {
             rows[rowIndex].selected = isSelected;
             setRows([...rows]);

src/common-messages.ts

@@ -49,6 +49,7 @@ export default {
     enableHelpMode: "Enable help mode",
     learnMore: "Learn more",
     test: "Test",
+    testConnection: "Test connection",
     name: "Name",
     role: "Role",
     description: "Description",

src/realm-settings/AddUserEmailModal.tsx

@@ -50,7 +50,7 @@ export const AddUserEmailModal = ({
           form="email-form"
           isDisabled={!watchEmailInput}
         >
-          {t("realm-settings:testConnection")}
+          {t("common:testConnection")}
         </Button>,
         <Button
           id="modal-cancel"

src/realm-settings/EmailTab.tsx

@@ -390,7 +390,7 @@ export const RealmSettingsEmailTab = ({
                   !(emailRegexPattern.test(watchFromValue) && watchHostValue)
                 }
               >
-                {t("realm-settings:testConnection")}
+                {t("common:testConnection")}
               </Button>
               <Button variant="link" onClick={reset}>
                 {t("common:revert")}

src/user-federation/ldap/LdapSettingsConnection.tsx

@@ -40,6 +40,19 @@ const testLdapProperties: Array<keyof TestLdapConnectionRepresentation> = [
   "authType",
 ];
 
+type TestTypes = "testConnection" | "testAuthentication";
+
+const convertFormToSettings = (form: UseFormMethods) => {
+  const settings: TestLdapConnectionRepresentation = {};
+
+  testLdapProperties.forEach((key) => {
+    const value = _.get(form.getValues(), `config.${key}`);
+    settings[key] = Array.isArray(value) ? value[0] : "";
+  });
+
+  return settings;
+};
+
 export const LdapSettingsConnection = ({
   form,
   showSectionHeading = false,
@@ -52,17 +65,12 @@ export const LdapSettingsConnection = ({
   const { realm } = useRealm();
   const { addAlert, addError } = useAlerts();
 
-  const testLdap = async () => {
+  const testLdap = async (testType: TestTypes) => {
     try {
-      const settings: TestLdapConnectionRepresentation = {};
+      const settings = convertFormToSettings(form);
-
-      testLdapProperties.forEach((key) => {
-        const value = _.get(form.getValues(), `config.${key}`);
-        settings[key] = _.isArray(value) ? value[0] : "";
-      });
       await adminClient.realms.testLDAPConnection(
         { realm },
-        { ...settings, action: "testConnection" }
+        { ...settings, action: testType }
       );
       addAlert(t("testSuccess"), AlertVariant.success);
     } catch (error) {
@@ -235,6 +243,15 @@ export const LdapSettingsConnection = ({
             ref={form.register}
           />
         </FormGroup>
+        <FormGroup fieldId="kc-test-button">
+          <Button
+            variant="secondary"
+            id="kc-connection-test-button"
+            onClick={() => testLdap("testConnection")}
+          >
+            {t("common:testConnection")}
+          </Button>
+        </FormGroup>
         <FormGroup
           label={t("bindType")}
           labelIcon={
@@ -337,9 +354,9 @@ export const LdapSettingsConnection = ({
           <Button
             variant="secondary"
             id="kc-test-button"
-            onClick={() => testLdap()}
+            onClick={() => testLdap("testAuthentication")}
           >
-            {t("common:test")}
+            {t("testAuthentication")}
           </Button>
         </FormGroup>
       </FormAccess>

src/user-federation/messages.ts

@@ -90,6 +90,7 @@ export default {
     saveError: "User federation provider could not be saved: {{error}}",
     createSuccess: "User federation provider successfully created",
     createError: "User federation provider could not be created: {{error}}",
+    testAuthentication: "Test authentication",
     testSuccess: "Successfully connected to LDAP",
     testError:
       "Error when trying to connect to LDAP. See server.log for details. {{error}}",