Adds routing for and fixes add new/save existing identity providers (#1105)

* fix routing and edit existing provider

* PR review comments
This commit is contained in:
mfrances17 2021-09-02 13:45:17 -04:00 committed by GitHub
parent e58dfc7508
commit 3f061efead
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 35 additions and 22 deletions

View file

@ -34,6 +34,7 @@ import { upperCaseFormatter } from "../util";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog"; import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { ProviderIconMapper } from "./ProviderIconMapper"; import { ProviderIconMapper } from "./ProviderIconMapper";
import { ManageOderDialog } from "./ManageOrderDialog"; import { ManageOderDialog } from "./ManageOrderDialog";
import { toIdentityProviderTab } from "./routes/IdentityProviderTab";
export const IdentityProvidersSection = () => { export const IdentityProvidersSection = () => {
const { t } = useTranslation("identity-providers"); const { t } = useTranslation("identity-providers");
@ -72,9 +73,15 @@ export const IdentityProvidersSection = () => {
const DetailLink = (identityProvider: IdentityProviderRepresentation) => ( const DetailLink = (identityProvider: IdentityProviderRepresentation) => (
<Link <Link
key={identityProvider.providerId} key={identityProvider.providerId}
to={`/${realm}/identity-providers/${identityProvider.providerId}/settings`} to={toIdentityProviderTab({
realm,
providerId: identityProvider.providerId!,
alias: identityProvider.alias!,
})}
> >
{identityProvider.alias} {identityProvider.displayName
? identityProvider.displayName
: identityProvider.alias}
{!identityProvider.enabled && ( {!identityProvider.enabled && (
<Badge <Badge
key={`${identityProvider.providerId}-disabled`} key={`${identityProvider.providerId}-disabled`}

View file

@ -50,7 +50,9 @@ export const AddOpenIdConnect = () => {
providerId: id, providerId: id,
}); });
addAlert(t("createSuccess"), AlertVariant.success); addAlert(t("createSuccess"), AlertVariant.success);
history.push(`/${realm}/identity-providers/${id}/settings`); history.push(
`/${realm}/identity-providers/${id}/${provider.alias}/settings`
);
} catch (error) { } catch (error) {
addError("identity-providers:createError", error); addError("identity-providers:createError", error);
} }

View file

@ -42,7 +42,9 @@ export const AddSamlConnect = () => {
providerId: id, providerId: id,
}); });
addAlert(t("createSuccess"), AlertVariant.success); addAlert(t("createSuccess"), AlertVariant.success);
history.push(`/${realm}/identity-providers/${id}/settings`); history.push(
`/${realm}/identity-providers/${id}/${provider.alias}/settings`
);
} catch (error) { } catch (error) {
addAlert( addAlert(
t("createError", { t("createError", {

View file

@ -20,7 +20,6 @@ import { FormAccess } from "../../components/form-access/FormAccess";
import { ScrollForm } from "../../components/scroll-form/ScrollForm"; import { ScrollForm } from "../../components/scroll-form/ScrollForm";
import { ViewHeader } from "../../components/view-header/ViewHeader"; import { ViewHeader } from "../../components/view-header/ViewHeader";
import { useFetch, useAdminClient } from "../../context/auth/AdminClient"; import { useFetch, useAdminClient } from "../../context/auth/AdminClient";
import { toUpperCase } from "../../util";
import { GeneralSettings } from "./GeneralSettings"; import { GeneralSettings } from "./GeneralSettings";
import { AdvancedSettings } from "./AdvancedSettings"; import { AdvancedSettings } from "./AdvancedSettings";
import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog"; import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
@ -44,11 +43,12 @@ type HeaderProps = {
const Header = ({ onChange, value, save, toggleDeleteDialog }: HeaderProps) => { const Header = ({ onChange, value, save, toggleDeleteDialog }: HeaderProps) => {
const { t } = useTranslation("identity-providers"); const { t } = useTranslation("identity-providers");
const { id } = useParams<{ id: string }>(); const { providerId, alias } =
useParams<{ providerId: string; alias: string }>();
const [toggleDisableDialog, DisableConfirm] = useConfirmDialog({ const [toggleDisableDialog, DisableConfirm] = useConfirmDialog({
titleKey: "identity-providers:disableProvider", titleKey: "identity-providers:disableProvider",
messageKey: t("disableConfirm", { provider: id }), messageKey: t("disableConfirm", { provider: providerId }),
continueButtonLabel: "common:disable", continueButtonLabel: "common:disable",
onConfirm: () => { onConfirm: () => {
onChange(!value); onChange(!value);
@ -60,7 +60,7 @@ const Header = ({ onChange, value, save, toggleDeleteDialog }: HeaderProps) => {
<> <>
<DisableConfirm /> <DisableConfirm />
<ViewHeader <ViewHeader
titleKey={toUpperCase(id)} titleKey={alias}
divider={false} divider={false}
dropdownItems={[ dropdownItems={[
<DropdownItem key="delete" onClick={() => toggleDeleteDialog()}> <DropdownItem key="delete" onClick={() => toggleDeleteDialog()}>
@ -83,7 +83,8 @@ const Header = ({ onChange, value, save, toggleDeleteDialog }: HeaderProps) => {
export const DetailSettings = () => { export const DetailSettings = () => {
const { t } = useTranslation("identity-providers"); const { t } = useTranslation("identity-providers");
const { id } = useParams<{ id: string }>(); const { providerId, alias } =
useParams<{ providerId: string; alias: string }>();
const [provider, setProvider] = useState<IdentityProviderRepresentation>(); const [provider, setProvider] = useState<IdentityProviderRepresentation>();
const form = useForm<IdentityProviderRepresentation>(); const form = useForm<IdentityProviderRepresentation>();
@ -95,7 +96,7 @@ export const DetailSettings = () => {
const { realm } = useRealm(); const { realm } = useRealm();
useFetch( useFetch(
() => adminClient.identityProviders.findOne({ alias: id }), () => adminClient.identityProviders.findOne({ alias: alias }),
(provider) => { (provider) => {
if (provider) { if (provider) {
setProvider(provider); setProvider(provider);
@ -109,8 +110,8 @@ export const DetailSettings = () => {
const p = provider || getValues(); const p = provider || getValues();
try { try {
await adminClient.identityProviders.update( await adminClient.identityProviders.update(
{ alias: id }, { alias },
{ ...p, alias: id, providerId: id } { ...p, alias, providerId }
); );
setProvider(p); setProvider(p);
addAlert(t("updateSuccess"), AlertVariant.success); addAlert(t("updateSuccess"), AlertVariant.success);
@ -121,12 +122,12 @@ export const DetailSettings = () => {
const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({ const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
titleKey: "identity-providers:deleteProvider", titleKey: "identity-providers:deleteProvider",
messageKey: t("identity-providers:deleteConfirm", { provider: id }), messageKey: t("identity-providers:deleteConfirm", { provider: providerId }),
continueButtonLabel: "common:delete", continueButtonLabel: "common:delete",
continueButtonVariant: ButtonVariant.danger, continueButtonVariant: ButtonVariant.danger,
onConfirm: async () => { onConfirm: async () => {
try { try {
await adminClient.identityProviders.del({ alias: id }); await adminClient.identityProviders.del({ alias: alias });
addAlert(t("deletedSuccess"), AlertVariant.success); addAlert(t("deletedSuccess"), AlertVariant.success);
history.push(`/${realm}/identity-providers`); history.push(`/${realm}/identity-providers`);
} catch (error) { } catch (error) {
@ -137,8 +138,8 @@ export const DetailSettings = () => {
const sections = [t("generalSettings"), t("advancedSettings")]; const sections = [t("generalSettings"), t("advancedSettings")];
const isOIDC = id.includes("oidc"); const isOIDC = providerId.includes("oidc");
const isSAML = id.includes("saml"); const isSAML = providerId.includes("saml");
if (isOIDC) { if (isOIDC) {
sections.splice(1, 0, t("oidcSettings")); sections.splice(1, 0, t("oidcSettings"));
@ -181,10 +182,10 @@ export const DetailSettings = () => {
onSubmit={handleSubmit(save)} onSubmit={handleSubmit(save)}
> >
{!isOIDC && !isSAML && ( {!isOIDC && !isSAML && (
<GeneralSettings create={false} id={id} /> <GeneralSettings create={false} id={alias} />
)} )}
{isOIDC && <OIDCGeneralSettings id={id} />} {isOIDC && <OIDCGeneralSettings id={alias} />}
{isSAML && <SamlGeneralSettings id={id} />} {isSAML && <SamlGeneralSettings id={alias} />}
</FormAccess> </FormAccess>
{isOIDC && ( {isOIDC && (
<> <>

View file

@ -7,12 +7,13 @@ export type IdentityProviderTab = "settings";
export type IdentityProviderTabParams = { export type IdentityProviderTabParams = {
realm: string; realm: string;
id: string; providerId?: string;
alias: string;
tab?: IdentityProviderTab; tab?: IdentityProviderTab;
}; };
export const IdentityProviderTabRoute: RouteDef = { export const IdentityProviderTabRoute: RouteDef = {
path: "/:realm/identity-providers/:id/:tab?", path: "/:realm/identity-providers/:providerId/:alias/:tab?",
component: DetailSettings, component: DetailSettings,
access: "manage-identity-providers", access: "manage-identity-providers",
}; };

View file

@ -94,7 +94,7 @@ export const UserIdentityProviderLinks = () => {
<Link <Link
to={toIdentityProviderTab({ to={toIdentityProviderTab({
realm, realm,
id: idp.identityProvider!, alias: idp.identityProvider!,
tab: "settings", tab: "settings",
})} })}
> >