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:
parent
e58dfc7508
commit
3f061efead
6 changed files with 35 additions and 22 deletions
|
@ -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`}
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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", {
|
||||||
|
|
|
@ -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 && (
|
||||||
<>
|
<>
|
||||||
|
|
|
@ -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",
|
||||||
};
|
};
|
||||||
|
|
|
@ -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",
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
|
|
Loading…
Reference in a new issue