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

Use display name instead of alias if set (#2622)

Browse source
This commit is contained in:
Erik Jan de Wit 2022-05-12 10:07:02 +02:00 committed by GitHub
parent 960da1b849
commit 18c610d12e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 152 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

293
src/identity-providers/add/DetailSettings.tsx
View file

@ -1,7 +1,13 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { Link, useHistory, useParams } from "react-router-dom"; import { Link, useHistory, useParams } from "react-router-dom";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Controller, FormProvider, useForm } from "react-hook-form"; import {
Controller,
FormProvider,
useForm,
useFormContext,
useWatch,
} from "react-hook-form";
import { import {
ActionGroup, ActionGroup,
AlertVariant, AlertVariant,
@ -68,9 +74,16 @@ const Header = ({ onChange, value, save, toggleDeleteDialog }: HeaderProps) => {
const { t } = useTranslation("identity-providers"); const { t } = useTranslation("identity-providers");
const { alias } = useParams<{ alias: string }>(); const { alias } = useParams<{ alias: string }>();
const { control } = useFormContext();
const displayName = useWatch({
name: "displayName",
control,
defaultValue: alias,
});
const [toggleDisableDialog, DisableConfirm] = useConfirmDialog({ const [toggleDisableDialog, DisableConfirm] = useConfirmDialog({
titleKey: "identity-providers:disableProvider", titleKey: "identity-providers:disableProvider",
messageKey: t("disableConfirm", { provider: alias }), messageKey: t("disableConfirm", { provider: displayName }),
continueButtonLabel: "common:disable", continueButtonLabel: "common:disable",
onConfirm: () => { onConfirm: () => {
onChange(!value); onChange(!value);
@ -82,7 +95,7 @@ const Header = ({ onChange, value, save, toggleDeleteDialog }: HeaderProps) => {
<> <>
<DisableConfirm /> <DisableConfirm />
<ViewHeader <ViewHeader
titleKey={toUpperCase(alias)} titleKey={toUpperCase(displayName)}
divider={false} divider={false}
dropdownItems={[ dropdownItems={[
<DropdownItem key="delete" onClick={() => toggleDeleteDialog()}> <DropdownItem key="delete" onClick={() => toggleDeleteDialog()}>
@ -265,7 +278,7 @@ export default function DetailSettings() {
} }
return ( return (
<> <FormProvider {...form}>
<DeleteConfirm /> <DeleteConfirm />
<DeleteMapperConfirm /> <DeleteMapperConfirm />
<Controller <Controller
@ -283,155 +296,153 @@ export default function DetailSettings() {
/> />
<PageSection variant="light" className="pf-u-p-0"> <PageSection variant="light" className="pf-u-p-0">
<FormProvider {...form}> <KeycloakTabs isBox>
<KeycloakTabs isBox> <Tab
<Tab id="settings"
id="settings" eventKey="settings"
eventKey="settings" title={<TabTitleText>{t("common:settings")}</TabTitleText>}
title={<TabTitleText>{t("common:settings")}</TabTitleText>} >
> <ScrollForm className="pf-u-px-lg" sections={sections}>
<ScrollForm className="pf-u-px-lg" sections={sections}> <FormAccess
role="manage-identity-providers"
isHorizontal
onSubmit={handleSubmit(save)}
>
{!isOIDC && !isSAML && (
<GeneralSettings create={false} id={alias} />
)}
{isOIDC && <OIDCGeneralSettings id={alias} />}
{isSAML && <SamlGeneralSettings id={alias} />}
</FormAccess>
{isOIDC && (
<>
<DiscoverySettings readOnly={false} />
<Form isHorizontal className="pf-u-py-lg">
<Divider />
<OIDCAuthentication create={false} />
</Form>
<ExtendedNonDiscoverySettings />
</>
)}
{isSAML && <DescriptorSettings readOnly={false} />}
{isSAML && (
<FormAccess <FormAccess
role="manage-identity-providers" role="manage-identity-providers"
isHorizontal isHorizontal
onSubmit={handleSubmit(save)} onSubmit={handleSubmit(save)}
> >
{!isOIDC && !isSAML && ( <ReqAuthnConstraints />
<GeneralSettings create={false} id={alias} />
)}
{isOIDC && <OIDCGeneralSettings id={alias} />}
{isSAML && <SamlGeneralSettings id={alias} />}
</FormAccess> </FormAccess>
{isOIDC && ( )}
<> <FormAccess
<DiscoverySettings readOnly={false} /> role="manage-identity-providers"
<Form isHorizontal className="pf-u-py-lg"> isHorizontal
<Divider /> onSubmit={handleSubmit(save)}
<OIDCAuthentication create={false} /> >
</Form> <AdvancedSettings isOIDC={isOIDC!} isSAML={isSAML!} />
<ExtendedNonDiscoverySettings />
</>
)}
{isSAML && <DescriptorSettings readOnly={false} />}
{isSAML && (
<FormAccess
role="manage-identity-providers"
isHorizontal
onSubmit={handleSubmit(save)}
>
<ReqAuthnConstraints />
</FormAccess>
)}
<FormAccess
role="manage-identity-providers"
isHorizontal
onSubmit={handleSubmit(save)}
>
<AdvancedSettings isOIDC={isOIDC!} isSAML={isSAML!} />
<ActionGroup className="keycloak__form_actions"> <ActionGroup className="keycloak__form_actions">
<Button data-testid={"save"} type="submit"> <Button data-testid={"save"} type="submit">
{t("common:save")} {t("common:save")}
</Button> </Button>
<Button <Button
data-testid={"revert"} data-testid={"revert"}
variant="link" variant="link"
onClick={() => { onClick={() => {
reset(); reset();
}} }}
> >
{t("common:revert")} {t("common:revert")}
</Button> </Button>
</ActionGroup> </ActionGroup>
</FormAccess> </FormAccess>
</ScrollForm> </ScrollForm>
</Tab> </Tab>
<Tab <Tab
id="mappers" id="mappers"
data-testid="mappers-tab" data-testid="mappers-tab"
eventKey="mappers" eventKey="mappers"
title={<TabTitleText>{t("common:mappers")}</TabTitleText>} title={<TabTitleText>{t("common:mappers")}</TabTitleText>}
> >
<KeycloakDataTable <KeycloakDataTable
emptyState={ emptyState={
<ListEmptyState <ListEmptyState
message={t("identity-providers:noMappers")} message={t("identity-providers:noMappers")}
instructions={t("identity-providers:noMappersInstructions")} instructions={t("identity-providers:noMappersInstructions")}
primaryActionText={t("identity-providers:addMapper")} primaryActionText={t("identity-providers:addMapper")}
onPrimaryAction={() => onPrimaryAction={() =>
history.push( history.push(
toIdentityProviderAddMapper({ toIdentityProviderAddMapper({
realm,
alias: alias!,
providerId: provider.providerId!,
tab: "mappers",
})
)
}
/>
}
loader={loader}
key={key}
ariaLabelKey="identity-providers:mappersList"
searchPlaceholderKey="identity-providers:searchForMapper"
toolbarItem={
<ToolbarItem>
<Button
id="add-mapper-button"
component={(props) => (
<Link
{...props}
to={toIdentityProviderAddMapper({
realm, realm,
alias: alias!, alias: alias!,
providerId: provider.providerId!, providerId: provider.providerId!,
tab: "mappers", tab: "mappers",
}) })}
) />
} )}
/> data-testid="addMapper"
} >
loader={loader} {t("addMapper")}
key={key} </Button>
ariaLabelKey="identity-providers:mappersList" </ToolbarItem>
searchPlaceholderKey="identity-providers:searchForMapper" }
toolbarItem={ columns={[
<ToolbarItem> {
<Button name: "name",
id="add-mapper-button" displayKey: "common:name",
component={(props) => ( cellRenderer: MapperLink,
<Link },
{...props} {
to={toIdentityProviderAddMapper({ name: "category",
realm, displayKey: "common:category",
alias: alias!, },
providerId: provider.providerId!, {
tab: "mappers", name: "type",
})} displayKey: "common:type",
/> },
)} ]}
data-testid="addMapper" actions={[
> {
{t("addMapper")} title: t("common:delete"),
</Button> onRowClick: (mapper) => {
</ToolbarItem> setSelectedMapper(mapper);
} toggleDeleteMapperDialog();
columns={[
{
name: "name",
displayKey: "common:name",
cellRenderer: MapperLink,
}, },
{ },
name: "category", ]}
displayKey: "common:category", />
}, </Tab>
{ <Tab
name: "type", id="permissions"
displayKey: "common:type", data-testid="permissionsTab"
}, eventKey="permissions"
]} title={<TabTitleText>{t("common:permissions")}</TabTitleText>}
actions={[ >
{ <PermissionsTab id={alias} type="identityProviders" />
title: t("common:delete"), </Tab>
onRowClick: (mapper) => { </KeycloakTabs>
setSelectedMapper(mapper);
toggleDeleteMapperDialog();
},
},
]}
/>
</Tab>
<Tab
id="permissions"
data-testid="permissionsTab"
eventKey="permissions"
title={<TabTitleText>{t("common:permissions")}</TabTitleText>}
>
<PermissionsTab id={alias} type="identityProviders" />
</Tab>
</KeycloakTabs>
</FormProvider>
</PageSection> </PageSection>
</> </FormProvider>
); );
} }