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

Migrated to ui-shared clients/advanced (#27764)

Browse source 
* migrated to uishared

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

* feedback

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

* fixed SwitchControl

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

* fixed tests

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

* fixed tests

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

---------

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>
Co-authored-by: Agnieszka Gancarczyk <agancarc@redhat.com>
This commit is contained in:
agagancarczyk 2024-03-11 14:01:15 +00:00 committed by GitHub
parent 1e48cce3ae
commit 838d017d14
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 59 additions and 143 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/client_details/tabs/AdvancedTab.ts
View file

@ -10,7 +10,7 @@ export default class AdvancedTab extends PageObject {
'[aria-label="Registered cluster nodes"] [aria-label="Actions"]';
#deleteClusterNodeBtn =
'[aria-label="Registered cluster nodes"] [role="menu"] button';
#nodeHostInput = "#nodeHost";
#nodeHostInput = "node";
#addNodeConfirmBtn = "#add-node-confirm";
#accessTokenSignatureAlgorithmInput = "#accessTokenSignatureAlgorithm";
@ -30,10 +30,11 @@ export default class AdvancedTab extends PageObject {
"#useRefreshTokenForClientCredentialsGrant";
#useLowerCaseBearerTypeSwitch = "#useLowerCaseBearerType";
#oAuthMutualSwitch = "#oAuthMutual-switch";
#oAuthMutualSwitch =
"attributes.tls🍺client🍺certificate🍺bound🍺access🍺tokens";
#keyForCodeExchangeInput = "#keyForCodeExchange";
#pushedAuthorizationRequestRequiredSwitch =
"#pushedAuthorizationRequestRequired";
"attributes.require🍺pushed🍺authorization🍺requests";
#browserFlowInput = "#browserFlow";
#directGrantInput = "#directGrant";
@ -73,7 +74,7 @@ export default class AdvancedTab extends PageObject {
}
fillHost(host: string) {
cy.get(this.#nodeHostInput).type(host);
cy.findByTestId(this.#nodeHostInput).type(host);
return this;
}
@ -173,24 +174,26 @@ export default class AdvancedTab extends PageObject {
}
clickAdvancedSwitches() {
cy.get(this.#oAuthMutualSwitch).parent().click();
cy.get(this.#pushedAuthorizationRequestRequiredSwitch).parent().click();
cy.findByTestId(this.#oAuthMutualSwitch).parent().click();
cy.findByTestId(this.#pushedAuthorizationRequestRequiredSwitch)
.parent()
.click();
return this;
}
checkAdvancedSwitchesOn() {
cy.get(this.#oAuthMutualSwitch).scrollIntoView();
this.assertSwitchStateOn(cy.get(this.#oAuthMutualSwitch));
cy.findByTestId(this.#oAuthMutualSwitch).scrollIntoView();
this.assertSwitchStateOn(cy.findByTestId(this.#oAuthMutualSwitch));
this.assertSwitchStateOn(
cy.get(this.#pushedAuthorizationRequestRequiredSwitch),
cy.findByTestId(this.#pushedAuthorizationRequestRequiredSwitch),
);
return this;
}
checkAdvancedSwitchesOff() {
this.assertSwitchStateOff(cy.get(this.#oAuthMutualSwitch));
this.assertSwitchStateOff(cy.findByTestId(this.#oAuthMutualSwitch));
this.assertSwitchStateOff(
cy.get(this.#pushedAuthorizationRequestRequiredSwitch),
cy.findByTestId(this.#pushedAuthorizationRequestRequiredSwitch),
);
return this;
}

28
js/apps/admin-ui/src/clients/advanced/AddHostDialog.tsx
View file

@ -3,15 +3,13 @@ import {
Button,
ButtonVariant,
Form,
FormGroup,
Modal,
} from "@patternfly/react-core";
import { useForm } from "react-hook-form";
import { FormProvider, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { TextControl } from "ui-shared";
import { adminClient } from "../../admin-client";
import { useAlerts } from "../../components/alert/Alerts";
import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
type FormFields = {
node: string;
@ -31,11 +29,11 @@ export const AddHostDialog = ({
onClose,
}: AddHostDialogProps) => {
const { t } = useTranslation();
const form = useForm<FormFields>();
const {
register,
handleSubmit,
formState: { isDirty, isValid },
} = useForm<FormFields>();
} = form;
const { addAlert, addError } = useAlerts();
async function onSubmit({ node }: FormFields) {
@ -79,15 +77,17 @@ export const AddHostDialog = ({
</Button>,
]}
>
<Form id="add-host-form" onSubmit={handleSubmit(onSubmit)} isHorizontal>
<FormGroup label={t("nodeHost")} fieldId="nodeHost" isRequired>
<KeycloakTextInput
id="nodeHost"
{...register("node", { required: true })}
isRequired
<FormProvider {...form}>
<Form id="add-host-form" onSubmit={handleSubmit(onSubmit)} isHorizontal>
<TextControl
name="node"
label={t("nodeHost")}
rules={{
required: t("required"),
}}
/>
</FormGroup>
</Form>
</Form>
</FormProvider>
</Modal>
);
};

146
js/apps/admin-ui/src/clients/advanced/AdvancedSettings.tsx
View file

@ -6,15 +6,13 @@ import {
Select,
SelectOption,
SelectVariant,
Switch,
} from "@patternfly/react-core";
import { useState } from "react";
import { Controller, useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { FormAccess } from "../../components/form/FormAccess";
import { HelpItem } from "ui-shared";
import { DefaultSwitchControl } from "../../components/SwitchControl";
import { adminClient } from "../../admin-client";
import { KeyValueInput } from "../../components/key-value-form/KeyValueInput";
import { MultiLineInput } from "../../components/multi-line-input/MultiLineInput";
@ -99,7 +97,6 @@ export const AdvancedSettings = ({
defaultValue={realm?.accessTokenLifespan}
units={["minute", "day", "hour"]}
/>
<TokenLifespan
id="clientSessionIdle"
name={convertAttributeNameToForm(
@ -108,7 +105,6 @@ export const AdvancedSettings = ({
defaultValue={realm?.clientSessionIdleTimeout}
units={["minute", "day", "hour"]}
/>
<TokenLifespan
id="clientSessionMax"
name={convertAttributeNameToForm(
@ -117,7 +113,6 @@ export const AdvancedSettings = ({
defaultValue={realm?.clientSessionMaxLifespan}
units={["minute", "day", "hour"]}
/>
<TokenLifespan
id="clientOfflineSessionIdle"
name={convertAttributeNameToForm(
@ -126,66 +121,23 @@ export const AdvancedSettings = ({
defaultValue={realm?.offlineSessionIdleTimeout}
units={["minute", "day", "hour"]}
/>
<FormGroup
<DefaultSwitchControl
name={convertAttributeNameToForm<FormFields>(
"attributes.tls.client.certificate.bound.access.tokens",
)}
label={t("oAuthMutual")}
fieldId="oAuthMutual"
hasNoPaddingTop
labelIcon={
<HelpItem
helpText={t("oAuthMutualHelp")}
fieldLabelId="oAuthMutual"
/>
}
>
<Controller
name={convertAttributeNameToForm<FormFields>(
"attributes.tls.client.certificate.bound.access.tokens",
)}
defaultValue={false}
control={control}
render={({ field }) => (
<Switch
id="oAuthMutual-switch"
label={t("on")}
labelOff={t("off")}
isChecked={field.value === "true"}
onChange={(value) => field.onChange("" + value)}
aria-label={t("oAuthMutual")}
/>
)}
/>
</FormGroup>
labelIcon={t("oAuthMutualHelp")}
stringify
/>
{isDPoPEnabled && (
<FormGroup
<DefaultSwitchControl
name={convertAttributeNameToForm<FormFields>(
"attributes.dpop.bound.access.tokens",
)}
label={t("oAuthDPoP")}
fieldId="oAuthDPoP"
hasNoPaddingTop
labelIcon={
<HelpItem
helpText={t("oAuthDPoPHelp")}
fieldLabelId="oAuthDPoP"
/>
}
>
<Controller
name={convertAttributeNameToForm<FormFields>(
"attributes.dpop.bound.access.tokens",
)}
defaultValue={false}
control={control}
render={({ field }) => (
<Switch
id="oAuthDPoP-switch"
label={t("on")}
labelOff={t("off")}
isChecked={field.value === "true"}
onChange={(value) => field.onChange("" + value)}
aria-label={t("oAuthDPoP")}
/>
)}
/>
</FormGroup>
labelIcon={t("oAuthDPoPHelp")}
stringify
/>
)}
<FormGroup
label={t("keyForCodeExchange")}
@ -225,62 +177,22 @@ export const AdvancedSettings = ({
)}
/>
</FormGroup>
<FormGroup
<DefaultSwitchControl
name={convertAttributeNameToForm<FormFields>(
"attributes.require.pushed.authorization.requests",
)}
label={t("pushedAuthorizationRequestRequired")}
fieldId="pushedAuthorizationRequestRequired"
labelIcon={
<HelpItem
helpText={t("pushedAuthorizationRequestRequiredHelp")}
fieldLabelId="pushedAuthorizationRequestRequired"
/>
}
>
<Controller
name={convertAttributeNameToForm<FormFields>(
"attributes.require.pushed.authorization.requests",
)}
defaultValue="false"
control={control}
render={({ field }) => (
<Switch
id="pushedAuthorizationRequestRequired"
label={t("on")}
labelOff={t("off")}
isChecked={field.value === "true"}
onChange={(value) => field.onChange(value.toString())}
aria-label={t("pushedAuthorizationRequestRequired")}
/>
)}
/>
</FormGroup>
<FormGroup
labelIcon={t("pushedAuthorizationRequestRequiredHelp")}
stringify
/>
<DefaultSwitchControl
name={convertAttributeNameToForm<FormFields>(
"attributes.client.use.lightweight.access.token.enabled",
)}
label={t("lightweightAccessToken")}
fieldId="lightweightAccessToken"
labelIcon={
<HelpItem
helpText={t("lightweightAccessTokenHelp")}
fieldLabelId="lightweightAccessToken"
/>
}
>
<Controller
name={convertAttributeNameToForm<FormFields>(
"attributes.client.use.lightweight.access.token.enabled",
)}
defaultValue="false"
control={control}
render={({ field }) => (
<Switch
id="lightweightAccessToken"
label={t("on")}
labelOff={t("off")}
isChecked={field.value === "true"}
onChange={(value) => field.onChange(value.toString())}
aria-label={t("lightweightAccessToken")}
/>
)}
/>
</FormGroup>
labelIcon={t("lightweightAccessTokenHelp")}
stringify
/>
<FormGroup
label={t("acrToLoAMapping")}
fieldId="acrToLoAMapping"

3
js/libs/ui-shared/src/controls/SwitchControl.tsx
View file

@ -28,7 +28,8 @@ export const SwitchControl = <
>(
props: SwitchControlProps<T, P>,
) => {
const defaultValue = props.defaultValue ?? (false as PathValue<T, P>);
const fallbackValue = props.stringify ? "false" : false;
const defaultValue = props.defaultValue ?? (fallbackValue as PathValue<T, P>);
const { control } = useFormContext();
return (
<FormLabel