libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases Packages Activity Actions

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

Browse source 
Co-authored-by: Jon Koops <jonkoops@gmail.com>
This commit is contained in:
Erik Jan de Wit 2021-10-05 12:31:39 +02:00 committed by GitHub
parent fae250f13e
commit 9180b18652
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 106 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/client-scopes/add/MapperDialog.test.tsx
View file

@ -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) => {
@ -16,13 +21,22 @@ describe("MapperDialog", () => {
return (
<ServerInfoContext.Provider
value={serverInfo as unknown as ServerInfoRepresentation}
>
<WhoAmIContext.Provider
value={{
refresh: () => {},
whoAmI: new WhoAmI(whoami as WhoAmIRepresentation),
}}
>
<AddMapperDialog
{...args}
open={open}
toggleDialog={() => setOpen(!open)}
/>
<Button onClick={() => setOpen(true)}>{!open ? "Show" : "Hide"}</Button>
<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]

52
src/client-scopes/add/MapperDialog.tsx
View file

@ -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,12 +44,17 @@ 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(
() =>
builtInMappers
.sort((a, b) => a.name!.localeCompare(b.name!, whoAmI.getLocale()))
.map((mapper) => {
const mapperType = protocolMappers.filter(
(type) => type.id === mapper.protocolMapper
)[0];
@ -56,7 +63,9 @@ export const AddMapperDialog = (props: AddMapperDialogProps) => {
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]);

1
src/common-messages.ts
View file

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

2
src/realm-settings/AddUserEmailModal.tsx
View file

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

2
src/realm-settings/EmailTab.tsx
View file

@ -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")}

37
src/user-federation/ldap/LdapSettingsConnection.tsx
View file

@ -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 = {};
testLdapProperties.forEach((key) => {
const value = _.get(form.getValues(), `config.${key}`);
settings[key] = _.isArray(value) ? value[0] : "";
});
const settings = convertFormToSettings(form);
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>

1
src/user-federation/messages.ts
View file

@ -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}}",