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

Replace 'useHistory' with React Router v6 APIs (#3115)

Browse source
This commit is contained in:
Jon Koops 2022-08-16 15:09:14 +02:00 committed by GitHub
parent 9a3aa33079
commit 7c9449b42b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
61 changed files with 279 additions and 243 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/PageNav.tsx
View file

@ -1,5 +1,6 @@
import { FormEvent, FunctionComponent } from "react";
import { NavLink, useHistory, useRouteMatch } from "react-router-dom";
import { NavLink, useRouteMatch } from "react-router-dom";
import { useLocation, useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import {
Nav,
@ -20,8 +21,8 @@ export const PageNav: FunctionComponent = () => {
const { t } = useTranslation("common");
const { hasAccess, hasSomeAccess } = useAccess();
const { realm } = useRealm();
const history = useHistory();
const location = useLocation();
const navigate = useNavigate();
type SelectedItem = {
groupId: number | string;
@ -31,7 +32,7 @@ export const PageNav: FunctionComponent = () => {
};
const onSelect = (item: SelectedItem) => {
history.push(item.to);
navigate(item.to);
item.event.preventDefault();
};
@ -52,7 +53,7 @@ export const PageNav: FunctionComponent = () => {
}
//remove "/realm-name" from the start of the path
const activeItem = history.location.pathname.substring(realm.length + 1);
const activeItem = location.pathname.substring(realm.length + 1);
return (
<li>
<NavLink

7
src/authentication/FlowDetails.tsx
View file

@ -1,5 +1,6 @@
import { useState } from "react";
import { useHistory, useParams } from "react-router-dom";
import { useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { Trans, useTranslation } from "react-i18next";
import {
DataList,
@ -59,7 +60,7 @@ export default function FlowDetails() {
const { realm } = useRealm();
const { addAlert, addError } = useAlerts();
const { id, usedBy, builtIn } = useParams<FlowParams>();
const history = useHistory();
const navigate = useNavigate();
const [key, setKey] = useState(0);
const refresh = () => setKey(new Date().getTime());
@ -222,7 +223,7 @@ export default function FlowDetails() {
await adminClient.authenticationManagement.deleteFlow({
flowId: flow!.id!,
});
history.push(toAuthentication({ realm }));
navigate(toAuthentication({ realm }));
addAlert(t("deleteFlowSuccess"), AlertVariant.success);
} catch (error) {
addError("authentication:deleteFlowError", error);

7
src/authentication/form/CreateFlow.tsx
View file

@ -1,4 +1,5 @@
import { Link, useHistory } from "react-router-dom";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import { FormProvider, useForm } from "react-hook-form";
import {
@ -21,7 +22,7 @@ import { toAuthentication } from "../routes/Authentication";
export default function CreateFlow() {
const { t } = useTranslation("authentication");
const history = useHistory();
const navigate = useNavigate();
const { realm } = useRealm();
const form = useForm<AuthenticationFlowRepresentation>({
defaultValues: { builtIn: false, topLevel: true },
@ -37,7 +38,7 @@ export default function CreateFlow() {
flow
);
addAlert(t("flowCreatedSuccess"), AlertVariant.success);
history.push(
navigate(
toFlow({
realm,
id: id!,

7
src/client-scopes/details/MappingDetails.tsx
View file

@ -1,5 +1,6 @@
import { useState } from "react";
import { Link, useHistory, useParams, useRouteMatch } from "react-router-dom";
import { Link, useParams, useRouteMatch } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import { FormProvider, useForm } from "react-hook-form";
import {
@ -45,7 +46,7 @@ export default function MappingDetails() {
protocolMapper?: string;
}>();
const history = useHistory();
const navigate = useNavigate();
const { realm } = useRealm();
const serverInfo = useServerInfo();
const isGuid = /^[{]?[0-9a-fA-F]{8}-([0-9a-fA-F]{4}-){3}[0-9a-fA-F]{12}[}]?$/;
@ -142,7 +143,7 @@ export default function MappingDetails() {
});
}
addAlert(t("common:mappingDeletedSuccess"), AlertVariant.success);
history.push(toDetails());
navigate(toDetails());
} catch (error) {
addError("common:mappingDeletedError", error);
}

6
src/client-scopes/form/ClientScopeForm.tsx
View file

@ -1,5 +1,6 @@
import { useState } from "react";
import { useHistory, useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import {
AlertVariant,
@ -40,6 +41,7 @@ export default function ClientScopeForm() {
const [clientScope, setClientScope] =
useState<ClientScopeDefaultOptionalType>();
const history = useHistory();
const navigate = useNavigate();
const { realm } = useRealm();
const { adminClient } = useAdminClient();
@ -97,7 +99,7 @@ export default function ClientScopeForm() {
{ ...clientScopes, id: scope.id },
clientScopes.type
);
history.push(
navigate(
toClientScope({
realm,
id: scope.id!,
@ -166,7 +168,7 @@ export default function ClientScopeForm() {
): Promise<void> => {
if (!Array.isArray(mappers)) {
const mapper = mappers as ProtocolMapperTypeRepresentation;
history.push(
navigate(
toMapper({
realm,
id: clientScope!.id!,

4
src/clients/ClientDetails.tsx
View file

@ -17,6 +17,7 @@ import { useMemo, useState } from "react";
import { Controller, FormProvider, useForm, useWatch } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useHistory, useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useAlerts } from "../components/alert/Alerts";
import {
ConfirmDialogModal,
@ -197,6 +198,7 @@ export default function ClientDetails() {
const hasViewUsers = hasAccess("view-users");
const history = useHistory();
const navigate = useNavigate();
const [downloadDialogOpen, toggleDownloadDialogOpen] = useToggle();
const [changeAuthenticatorOpen, toggleChangeAuthenticatorOpen] = useToggle();
@ -227,7 +229,7 @@ export default function ClientDetails() {
try {
await adminClient.clients.del({ id: clientId });
addAlert(t("clientDeletedSuccess"), AlertVariant.success);
history.push(toClients({ realm }));
navigate(toClients({ realm }));
} catch (error) {
addError("clients:clientDeleteError", error);
}

10
src/clients/add/NewClientForm.tsx
View file

@ -10,7 +10,7 @@ import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/
import { useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useAlerts } from "../../components/alert/Alerts";
import { ViewHeader } from "../../components/view-header/ViewHeader";
import { useAdminClient } from "../../context/auth/AdminClient";
@ -25,7 +25,7 @@ export default function NewClientForm() {
const { t } = useTranslation("clients");
const { realm } = useRealm();
const { adminClient } = useAdminClient();
const history = useHistory();
const navigate = useNavigate();
const [showCapabilityConfig, setShowCapabilityConfig] = useState(false);
const [client, setClient] = useState<ClientRepresentation>({
@ -52,9 +52,7 @@ export default function NewClientForm() {
clientId: client.clientId?.trim(),
});
addAlert(t("createSuccess"), AlertVariant.success);
history.push(
toClient({ realm, clientId: newClient.id, tab: "settings" })
);
navigate(toClient({ realm, clientId: newClient.id, tab: "settings" }));
} catch (error) {
addError("clients:createError", error);
}
@ -138,7 +136,7 @@ export default function NewClientForm() {
<PageSection variant="light">
<FormProvider {...methods}>
<Wizard
onClose={() => history.push(toClients({ realm }))}
onClose={() => navigate(toClients({ realm }))}
navAriaLabel={`${title} steps`}
mainAriaLabel={`${title} content`}
steps={[

6
src/clients/authorization/EmptyPermissionsState.tsx
View file

@ -1,4 +1,4 @@
import { useHistory } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import {
EmptyState,
@ -27,7 +27,7 @@ const EmptyButton = ({
}: EmptyButtonProps) => {
const { t } = useTranslation("clients");
const { realm } = useRealm();
const history = useHistory();
const navigate = useNavigate();
return (
<Button
data-testid={`create-${permissionType}`}
@ -37,7 +37,7 @@ const EmptyButton = ({
variant="secondary"
onClick={() =>
!disabled &&
history.push(toNewPermission({ realm, id: clientId, permissionType }))
navigate(toNewPermission({ realm, id: clientId, permissionType }))
}
>
{t(`create${toUpperCase(permissionType)}BasedPermission`)}

9
src/clients/authorization/PermissionDetails.tsx
View file

@ -1,5 +1,6 @@
import { useState } from "react";
import { Link, useHistory, useParams } from "react-router-dom";
import { Link, useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import { Controller, FormProvider, useForm, useWatch } from "react-hook-form";
import {
@ -46,7 +47,7 @@ export default function PermissionDetails() {
});
const { register, control, reset, errors, handleSubmit } = form;
const history = useHistory();
const navigate = useNavigate();
const { id, realm, permissionType, permissionId, selectedId } = useParams<
NewPermissionParams & PermissionDetailsParams
>();
@ -116,7 +117,7 @@ export default function PermissionDetails() {
{ id, type: permissionType },
permission
);
history.push(
navigate(
toPermissionDetails({
realm,
id,
@ -149,7 +150,7 @@ export default function PermissionDetails() {
permissionId: permissionId,
});
addAlert(t("permissionDeletedSuccess"), AlertVariant.success);
history.push(
navigate(
toAuthorizationTab({ realm, clientId: id, tab: "permissions" })
);
} catch (error) {

9
src/clients/authorization/Permissions.tsx
View file

@ -1,5 +1,6 @@
import { useState } from "react";
import { Link, useHistory } from "react-router-dom";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import {
AlertVariant,
@ -52,7 +53,7 @@ type ExpandablePolicyRepresentation = PolicyRepresentation & {
export const AuthorizationPermissions = ({ clientId }: PermissionsProps) => {
const { t } = useTranslation("clients");
const history = useHistory();
const navigate = useNavigate();
const { adminClient } = useAdminClient();
const { addAlert, addError } = useAlerts();
const { realm } = useRealm();
@ -216,7 +217,7 @@ export const AuthorizationPermissions = ({ clientId }: PermissionsProps) => {
isDisabled={disabledCreate?.resources}
component="button"
onClick={() =>
history.push(
navigate(
toNewPermission({
realm,
id: clientId,
@ -233,7 +234,7 @@ export const AuthorizationPermissions = ({ clientId }: PermissionsProps) => {
isDisabled={disabledCreate?.scopes}
component="button"
onClick={() =>
history.push(
navigate(
toNewPermission({
realm,
id: clientId,

9
src/clients/authorization/Policies.tsx
View file

@ -1,5 +1,6 @@
import { useState } from "react";
import { Link, useHistory } from "react-router-dom";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import {
Alert,
@ -52,7 +53,7 @@ export const AuthorizationPolicies = ({ clientId }: PoliciesProps) => {
const { adminClient } = useAdminClient();
const { addAlert, addError } = useAlerts();
const { realm } = useRealm();
const history = useHistory();
const navigate = useNavigate();
const [policies, setPolicies] = useState<ExpandablePolicyRepresentation[]>();
const [selectedPolicy, setSelectedPolicy] =
@ -172,7 +173,7 @@ export const AuthorizationPolicies = ({ clientId }: PoliciesProps) => {
<NewPolicyDialog
policyProviders={policyProviders}
onSelect={(p) =>
history.push(
navigate(
toCreatePolicy({ id: clientId, realm, policyType: p.type! })
)
}
@ -319,7 +320,7 @@ export const AuthorizationPolicies = ({ clientId }: PoliciesProps) => {
(p) => p.type !== "aggregate"
)}
onSelect={(p) =>
history.push(
navigate(
toCreatePolicy({ id: clientId, realm, policyType: p.type! })
)
}

11
src/clients/authorization/ResourceDetails.tsx
View file

@ -1,5 +1,6 @@
import { useState } from "react";
import { Link, useHistory, useParams } from "react-router-dom";
import { Link, useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { Controller, FormProvider, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import {
@ -57,7 +58,7 @@ export default function ResourceDetails() {
const { register, errors, control, setValue, handleSubmit } = form;
const { id, resourceId, realm } = useParams<ResourceDetailsParams>();
const history = useHistory();
const navigate = useNavigate();
const setupForm = (resource: ResourceRepresentation = {}) => {
convertToFormValues(resource, setValue);
@ -100,7 +101,7 @@ export default function ResourceDetails() {
{ id },
resource
);
history.push(toResourceDetails({ realm, id, resourceId: result._id! }));
navigate(toResourceDetails({ realm, id, resourceId: result._id! }));
}
addAlert(
t((resourceId ? "update" : "create") + "ResourceSuccess"),
@ -143,9 +144,7 @@ export default function ResourceDetails() {
resourceId: resourceId!,
});
addAlert(t("resourceDeletedSuccess"), AlertVariant.success);
history.push(
toAuthorizationTab({ realm, clientId: id, tab: "resources" })
);
navigate(toAuthorizationTab({ realm, clientId: id, tab: "resources" }));
} catch (error) {
addError("clients:resourceDeletedError", error);
}

13
src/clients/authorization/ScopeDetails.tsx
View file

@ -1,5 +1,6 @@
import { useState } from "react";
import { Link, useHistory, useParams } from "react-router-dom";
import { Link, useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import {
@ -28,7 +29,7 @@ import { DeleteScopeDialog } from "./DeleteScopeDialog";
export default function ScopeDetails() {
const { t } = useTranslation("clients");
const { id, scopeId, realm } = useParams<ScopeDetailsParams>();
const history = useHistory();
const navigate = useNavigate();
const { adminClient } = useAdminClient();
const { addAlert, addError } = useAlerts();
@ -81,9 +82,7 @@ export default function ScopeDetails() {
iconUri: scope.iconUri,
}
);
history.push(
toAuthorizationTab({ realm, clientId: id, tab: "scopes" })
);
navigate(toAuthorizationTab({ realm, clientId: id, tab: "scopes" }));
}
addAlert(
t((scopeId ? "update" : "create") + "ScopeSuccess"),
@ -102,9 +101,7 @@ export default function ScopeDetails() {
toggleDialog={toggleDeleteDialog}
selectedScope={scope}
refresh={() =>
history.push(
toAuthorizationTab({ realm, clientId: id, tab: "scopes" })
)
navigate(toAuthorizationTab({ realm, clientId: id, tab: "scopes" }))
}
/>
<ViewHeader

9
src/clients/authorization/Scopes.tsx
View file

@ -1,5 +1,6 @@
import { useState } from "react";
import { Link, useHistory } from "react-router-dom";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import {
Button,
@ -46,7 +47,7 @@ export type ExpandableScopeRepresentation = ScopeRepresentation & {
export const AuthorizationScopes = ({ clientId }: ScopesProps) => {
const { t } = useTranslation("clients");
const history = useHistory();
const navigate = useNavigate();
const { adminClient } = useAdminClient();
const { realm } = useRealm();
@ -291,9 +292,7 @@ export const AuthorizationScopes = ({ clientId }: ScopesProps) => {
<ListEmptyState
message={t("emptyAuthorizationScopes")}
instructions={t("emptyAuthorizationInstructions")}
onPrimaryAction={() =>
history.push(toNewScope({ id: clientId, realm }))
}
onPrimaryAction={() => navigate(toNewScope({ id: clientId, realm }))}
primaryActionText={t("createAuthorizationScope")}
/>
)}

11
src/clients/authorization/policy/PolicyDetails.tsx
View file

@ -1,5 +1,6 @@
import { FunctionComponent, useState } from "react";
import { Link, useHistory, useParams } from "react-router-dom";
import { Link, useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import { FormProvider, useForm } from "react-hook-form";
import {
@ -62,7 +63,7 @@ export const isValidComponentType = (value: string) => value in COMPONENTS;
export default function PolicyDetails() {
const { t } = useTranslation("clients");
const { id, realm, policyId, policyType } = useParams<PolicyDetailsParams>();
const history = useHistory();
const navigate = useNavigate();
const form = useForm({ shouldUnregister: false });
const { reset, handleSubmit } = form;
@ -123,7 +124,7 @@ export default function PolicyDetails() {
{ id, type: policyType },
policy
);
history.push(
navigate(
toPolicyDetails({
realm,
id,
@ -152,9 +153,7 @@ export default function PolicyDetails() {
policyId,
});
addAlert(t("policyDeletedSuccess"), AlertVariant.success);
history.push(
toAuthorizationTab({ realm, clientId: id, tab: "policies" })
);
navigate(toAuthorizationTab({ realm, clientId: id, tab: "policies" }));
} catch (error) {
addError("clients:policyDeletedError", error);
}

9
src/clients/import/ImportForm.tsx
View file

@ -1,5 +1,6 @@
import { useState } from "react";
import { Link, useHistory } from "react-router-dom";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import { FormProvider, useForm } from "react-hook-form";
import {
@ -35,7 +36,7 @@ const isXml = (text: string) => text.startsWith("<");
export default function ImportForm() {
const { t } = useTranslation("clients");
const history = useHistory();
const navigate = useNavigate();
const { adminClient } = useAdminClient();
const { realm } = useRealm();
const form = useForm<ClientRepresentation>({ shouldUnregister: false });
@ -89,9 +90,7 @@ export default function ImportForm() {
...convertFormValuesToObject(client),
});
addAlert(t("clientImportSuccess"), AlertVariant.success);
history.push(
toClient({ realm, clientId: newClient.id, tab: "settings" })
);
navigate(toClient({ realm, clientId: newClient.id, tab: "settings" }));
} catch (error) {
addError("clients:clientImportError", error);
}

7
src/clients/initial-access/CreateInitialAccessToken.tsx
View file

@ -15,7 +15,8 @@ import { FormAccess } from "../../components/form-access/FormAccess";
import { ViewHeader } from "../../components/view-header/ViewHeader";
import { HelpItem } from "../../components/help-enabler/HelpItem";
import { TimeSelector } from "../../components/time-selector/TimeSelector";
import { Link, useHistory } from "react-router-dom";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useRealm } from "../../context/realm-context/RealmContext";
import { useAdminClient } from "../../context/auth/AdminClient";
import { useAlerts } from "../../components/alert/Alerts";
@ -34,7 +35,7 @@ export default function CreateInitialAccessToken() {
const { realm } = useRealm();
const { addAlert, addError } = useAlerts();
const history = useHistory();
const navigate = useNavigate();
const [token, setToken] = useState("");
const save = async (clientToken: ClientInitialAccessPresentation) => {
@ -57,7 +58,7 @@ export default function CreateInitialAccessToken() {
toggleDialog={() => {
setToken("");
addAlert(t("tokenSaveSuccess"), AlertVariant.success);
history.push(toClients({ realm, tab: "initial-access-token" }));
navigate(toClients({ realm, tab: "initial-access-token" }));
}}
/>
)}

7
src/clients/initial-access/InitialAccessTokenList.tsx
View file

@ -3,7 +3,8 @@ import { wrappable } from "@patternfly/react-table";
import type ClientInitialAccessPresentation from "@keycloak/keycloak-admin-client/lib/defs/clientInitialAccessPresentation";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link, useHistory } from "react-router-dom";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useAlerts } from "../../components/alert/Alerts";
import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";
@ -21,7 +22,7 @@ export const InitialAccessTokenList = () => {
const { realm } = useRealm();
const formatDate = useFormatDate();
const history = useHistory();
const navigate = useNavigate();
const [token, setToken] = useState<ClientInitialAccessPresentation>();
@ -114,7 +115,7 @@ export const InitialAccessTokenList = () => {
instructions={t("noTokensInstructions")}
primaryActionText={t("common:create")}
onPrimaryAction={() =>
history.push(toCreateInitialAccessToken({ realm }))
navigate(toCreateInitialAccessToken({ realm }))
}
/>
}

4
src/clients/scopes/DedicatedScopes.tsx
View file

@ -1,5 +1,6 @@
import { useState } from "react";
import { useHistory, useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import {
AlertVariant,
@ -31,6 +32,7 @@ import { DedicatedScope } from "./DecicatedScope";
export default function DedicatedScopes() {
const { t } = useTranslation("clients");
const history = useHistory();
const navigate = useNavigate();
const { realm, clientId } = useParams<DedicatedScopeDetailsParams>();
const { adminClient } = useAdminClient();
@ -55,7 +57,7 @@ export default function DedicatedScopes() {
): Promise<void> => {
if (!Array.isArray(mappers)) {
const mapper = mappers as ProtocolMapperTypeRepresentation;
history.push(
navigate(
toMapper({
realm,
id: client.id!,

17
src/components/bread-crumb/GroupBreadCrumbs.tsx
View file

@ -1,5 +1,6 @@
import { useEffect } from "react";
import { Link, useHistory, useLocation } from "react-router-dom";
import { Link } from "react-router-dom";
import { useLocation } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import { Breadcrumb, BreadcrumbItem } from "@patternfly/react-core";
@ -10,17 +11,15 @@ export const GroupBreadCrumbs = () => {
const { t } = useTranslation();
const { clear, remove, subGroups } = useSubGroups();
const { realm } = useRealm();
const history = useHistory();
const location = useLocation();
useEffect(() => {
return history.listen(({ pathname }) => {
if (!pathname.includes("/groups") || pathname.endsWith("/groups")) {
clear();
}
});
}, [history]);
const { pathname } = location;
if (!pathname.includes("/groups") || pathname.endsWith("/groups")) {
clear();
}
}, [location]);
return subGroups.length !== 0 ? (
<Breadcrumb>

7
src/components/keycloak-card/KeycloakCard.tsx
View file

@ -13,7 +13,8 @@ import {
FlexItem,
} from "@patternfly/react-core";
import "./keycloak-card.css";
import { useHistory, useRouteMatch } from "react-router-dom";
import { useRouteMatch } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
export type KeycloakCardProps = {
id: string;
@ -37,7 +38,7 @@ export const KeycloakCard = ({
}: KeycloakCardProps) => {
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const history = useHistory();
const navigate = useNavigate();
const { url } = useRouteMatch();
const onDropdownToggle = () => {
@ -49,7 +50,7 @@ export const KeycloakCard = ({
};
const openSettings = () => {
history.push(`${url}/${providerId}/${id}`);
navigate(`${url}/${providerId}/${id}`);
};
return (

9
src/components/keycloak-tabs/KeycloakTabs.tsx
View file

@ -1,5 +1,6 @@
import { Children, isValidElement, useState } from "react";
import { useHistory, useRouteMatch } from "react-router-dom";
import { useRouteMatch } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { TabProps, Tabs, TabsProps } from "@patternfly/react-core";
import { useFormContext } from "react-hook-form";
import { useConfirmDialog } from "../confirm-dialog/ConfirmDialog";
@ -29,7 +30,7 @@ export const KeycloakTabs = ({
}: KeycloakTabsProps) => {
const match = useRouteMatch();
const params = match.params as { [index: string]: string };
const history = useHistory();
const navigate = useNavigate();
const form = useFormContext() as
| ReturnType<typeof useFormContext>
| undefined;
@ -50,7 +51,7 @@ export const KeycloakTabs = ({
continueButtonLabel: "common:leave",
onConfirm: () => {
form?.reset();
history.push(createUrl(path, { ...params, [paramName]: key as string }));
navigate(createUrl(path, { ...params, [paramName]: key as string }));
},
});
@ -70,7 +71,7 @@ export const KeycloakTabs = ({
setKey(key as string);
toggleChangeTabDialog();
} else {
history.push(
navigate(
createUrl(path, { ...params, [paramName]: key as string })
);
}

7
src/components/permission-tab/PermissionTab.tsx
View file

@ -1,5 +1,6 @@
import { useState } from "react";
import { Link, useHistory } from "react-router-dom";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { Trans, useTranslation } from "react-i18next";
import {
Card,
@ -45,7 +46,7 @@ type PermissionsTabProps = {
export const PermissionsTab = ({ id, type }: PermissionsTabProps) => {
const { t } = useTranslation("common");
const history = useHistory();
const navigate = useNavigate();
const { adminClient } = useAdminClient();
const { realm } = useRealm();
const [realmId, setRealmId] = useState("");
@ -219,7 +220,7 @@ export const PermissionsTab = ({ id, type }: PermissionsTabProps) => {
{
title: t("common:edit"),
onClick() {
history.push(
navigate(
toPermissionDetails({
realm,
id: realmId,

8
src/components/realm-selector/RealmSelector.tsx
View file

@ -13,7 +13,7 @@ import {
import { CheckIcon } from "@patternfly/react-icons";
import { Fragment, ReactElement, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useRealm } from "../../context/realm-context/RealmContext";
import { useRealms } from "../../context/RealmsContext";
@ -31,7 +31,7 @@ export const RealmSelector = () => {
const { whoAmI } = useWhoAmI();
const [open, setOpen] = useState(false);
const [search, setSearch] = useState("");
const history = useHistory();
const navigate = useNavigate();
const { t } = useTranslation("common");
const recentUsed = new RecentUsed();
const all = recentUsed.used
@ -70,7 +70,7 @@ export const RealmSelector = () => {
component="div"
isBlock
onClick={() => {
history.push(toAddRealm({ realm }));
navigate(toAddRealm({ realm }));
setOpen(!open);
}}
>
@ -80,7 +80,7 @@ export const RealmSelector = () => {
const selectRealm = (realm: string) => {
setOpen(!open);
history.push(toDashboard({ realm }));
navigate(toDashboard({ realm }));
};
const dropdownItems = realms.map((r) => (

7
src/groups/GroupTable.tsx
View file

@ -1,5 +1,6 @@
import { useState } from "react";
import { Link, useHistory, useLocation } from "react-router-dom";
import { Link, useLocation } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import { cellWidth } from "@patternfly/react-table";
@ -37,7 +38,7 @@ export const GroupTable = ({ toggleView }: GroupTableProps) => {
const [key, setKey] = useState(0);
const refresh = () => setKey(new Date().getTime());
const history = useHistory();
const navigate = useNavigate();
const location = useLocation();
const id = getLastId(location.pathname);
@ -63,7 +64,7 @@ export const GroupTable = ({ toggleView }: GroupTableProps) => {
}
if (!groupsData) {
history.push(toGroups({ realm }));
navigate(toGroups({ realm }));
}
return groupsData || [];

7
src/groups/GroupsSection.tsx
View file

@ -1,5 +1,6 @@
import { useState } from "react";
import { Link, useHistory, useLocation } from "react-router-dom";
import { Link, useLocation } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import {
DropdownItem,
@ -46,7 +47,7 @@ export default function GroupsSection() {
const [rename, setRename] = useState<string>();
const [viewType, setViewType] = useState<ViewType>(ViewType.Table);
const history = useHistory();
const navigate = useNavigate();
const location = useLocation();
const id = getLastId(location.pathname);
@ -144,7 +145,7 @@ export default function GroupsSection() {
key="deleteGroup"
onClick={async () => {
await deleteGroup({ id });
history.push(toGroups({ realm }));
navigate(toGroups({ realm }));
}}
>
{t("deleteGroup")}

7
src/groups/components/GroupTree.tsx
View file

@ -1,5 +1,6 @@
import { useState } from "react";
import { useHistory, useLocation } from "react-router-dom";
import { useLocation } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import {
Dropdown,
@ -32,7 +33,7 @@ const GroupTreeContextMenu = ({
const { t } = useTranslation("groups");
const location = useLocation();
const history = useHistory();
const navigate = useNavigate();
const [isOpen, toggleOpen] = useToggle();
const [createOpen, toggleCreateOpen] = useToggle();
@ -71,7 +72,7 @@ const GroupTreeContextMenu = ({
</DropdownItem>,
<DropdownItem
key="edit"
onClick={() => history.push(`${location.pathname}/${group.id}`)}
onClick={() => navigate(`${location.pathname}/${group.id}`)}
>
{t("common:edit")}
</DropdownItem>,

7
src/identity-providers/IdentityProvidersSection.tsx
View file

@ -1,5 +1,6 @@
import { Fragment, useState } from "react";
import { Link, useHistory } from "react-router-dom";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import { sortBy, groupBy } from "lodash-es";
import {
@ -46,7 +47,7 @@ export default function IdentityProvidersSection() {
"groupName"
);
const { realm } = useRealm();
const history = useHistory();
const navigate = useNavigate();
const [key, setKey] = useState(0);
const refresh = () => setKey(key + 1);
@ -98,7 +99,7 @@ export default function IdentityProvidersSection() {
);
const navigateToCreate = (providerId: string) =>
history.push(
navigate(
toIdentityProviderCreate({
realm,
providerId,

7
src/identity-providers/add/AddIdentityProvider.tsx
View file

@ -1,4 +1,5 @@
import { Link, useHistory, useParams } from "react-router-dom";
import { Link, useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import { FormProvider, useForm } from "react-hook-form";
import {
@ -31,7 +32,7 @@ export default function AddIdentityProvider() {
const { adminClient } = useAdminClient();
const { addAlert, addError } = useAlerts();
const history = useHistory();
const navigate = useNavigate();
const { realm } = useRealm();
const save = async (provider: IdentityProviderRepresentation) => {
@ -42,7 +43,7 @@ export default function AddIdentityProvider() {
alias: providerId,
});
addAlert(t("createSuccess"), AlertVariant.success);
history.push(
navigate(
toIdentityProvider({
realm,
providerId: providerId!,

9
src/identity-providers/add/AddMapper.tsx
View file

@ -1,5 +1,6 @@
import { useState } from "react";
import { Link, useHistory, useParams } from "react-router-dom";
import { Link, useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import { FormProvider, useForm } from "react-hook-form";
import {
@ -52,7 +53,7 @@ export default function AddMapper() {
});
const { handleSubmit, register, errors } = form;
const { addAlert, addError } = useAlerts();
const history = useHistory();
const navigate = useNavigate();
const localeSort = useLocaleSort();
const { realm } = useRealm();
@ -105,7 +106,7 @@ export default function AddMapper() {
});
addAlert(t("mapperCreateSuccess"), AlertVariant.success);
history.push(
navigate(
toIdentityProviderEditMapper({
realm,
alias,
@ -133,7 +134,7 @@ export default function AddMapper() {
id: id!,
});
addAlert(t("deleteMapperSuccess"), AlertVariant.success);
history.push(
navigate(
toIdentityProvider({ providerId, alias, tab: "mappers", realm })
);
} catch (error) {

7
src/identity-providers/add/AddOpenIdConnect.tsx
View file

@ -1,4 +1,5 @@
import { Link, useHistory, useRouteMatch } from "react-router-dom";
import { Link, useRouteMatch } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import { FormProvider, useForm } from "react-hook-form";
import {
@ -26,7 +27,7 @@ type DiscoveryIdentity = IdentityProviderRepresentation & {
export default function AddOpenIdConnect() {
const { t } = useTranslation("identity-providers");
const history = useHistory();
const navigate = useNavigate();
const { url } = useRouteMatch();
const isKeycloak = url.endsWith("keycloak-oidc");
const id = `${isKeycloak ? "keycloak-" : ""}oidc`;
@ -51,7 +52,7 @@ export default function AddOpenIdConnect() {
providerId: id,
});
addAlert(t("createSuccess"), AlertVariant.success);
history.push(
navigate(
toIdentityProvider({
realm,
providerId: id,

7
src/identity-providers/add/AddSamlConnect.tsx
View file

@ -1,4 +1,5 @@
import { Link, useHistory } from "react-router-dom";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import { FormProvider, useForm } from "react-hook-form";
import {
@ -25,7 +26,7 @@ type DiscoveryIdentityProvider = IdentityProviderRepresentation & {
export default function AddSamlConnect() {
const { t } = useTranslation("identity-providers");
const history = useHistory();
const navigate = useNavigate();
const id = "saml";
const form = useForm<DiscoveryIdentityProvider>({
@ -48,7 +49,7 @@ export default function AddSamlConnect() {
providerId: id,
});
addAlert(t("createSuccess"), AlertVariant.success);
history.push(
navigate(
toIdentityProvider({
realm,
providerId: id,

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

@ -1,5 +1,6 @@
import { useState } from "react";
import { Link, useHistory, useParams } from "react-router-dom";
import { Link, useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import {
Controller,
@ -128,7 +129,7 @@ export default function DetailSettings() {
const { adminClient } = useAdminClient();
const { addAlert, addError } = useAlerts();
const history = useHistory();
const navigate = useNavigate();
const { realm } = useRealm();
const [key, setKey] = useState(0);
const refresh = () => setKey(key + 1);
@ -203,7 +204,7 @@ export default function DetailSettings() {
try {
await adminClient.identityProviders.del({ alias: alias });
addAlert(t("deletedSuccess"), AlertVariant.success);
history.push(toIdentityProviders({ realm }));
navigate(toIdentityProviders({ realm }));
} catch (error) {
addError("identity-providers:deleteErrorError", error);
}
@ -225,7 +226,7 @@ export default function DetailSettings() {
});
addAlert(t("deleteMapperSuccess"), AlertVariant.success);
refresh();
history.push(
navigate(
toIdentityProvider({ providerId, alias, tab: "mappers", realm })
);
} catch (error) {
@ -382,7 +383,7 @@ export default function DetailSettings() {
instructions={t("identity-providers:noMappersInstructions")}
primaryActionText={t("identity-providers:addMapper")}
onPrimaryAction={() =>
history.push(
navigate(
toIdentityProviderAddMapper({
realm,
alias: alias!,

7
src/realm-roles/AssociatedRolesTab.tsx
View file

@ -1,5 +1,6 @@
import { useState } from "react";
import { useHistory, useParams, useRouteMatch } from "react-router-dom";
import { useParams, useRouteMatch } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import {
AlertVariant,
@ -48,7 +49,7 @@ export const AssociatedRolesTab = ({
}: AssociatedRolesTabProps) => {
const { t } = useTranslation("roles");
const history = useHistory();
const navigate = useNavigate();
const { addAlert, addError } = useAlerts();
const { id, realm } = useParams<RealmRoleParams>();
@ -126,7 +127,7 @@ export const AssociatedRolesTab = ({
tab,
})
: undefined;
if (to) history.push(to);
if (to) navigate(to);
};
const AliasRenderer = ({ id, name, clientRole, containerId }: Role) => {

6
src/realm-roles/RealmRoleForm.tsx
View file

@ -13,7 +13,7 @@ import type { AttributeForm } from "../components/key-value-form/AttributeForm";
import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
import { KeycloakTextArea } from "../components/keycloak-text-area/KeycloakTextArea";
import { useRealm } from "../context/realm-context/RealmContext";
import { useHistory } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
export type RealmRoleFormProps = {
form: UseFormMethods<AttributeForm>;
@ -29,7 +29,7 @@ export const RealmRoleForm = ({
reset,
}: RealmRoleFormProps) => {
const { t } = useTranslation("roles");
const history = useHistory();
const navigate = useNavigate();
const { realm: realmName } = useRealm();
return (
@ -101,7 +101,7 @@ export const RealmRoleForm = ({
<Button
data-testid="cancel"
onClick={() =>
editMode ? reset() : history.push(`/${realmName}/roles`)
editMode ? reset() : navigate(`/${realmName}/roles`)
}
variant="link"
>

13
src/realm-roles/RealmRoleTabs.tsx
View file

@ -1,5 +1,6 @@
import { useState } from "react";
import { useHistory, useParams, useRouteMatch } from "react-router-dom";
import { useParams, useRouteMatch } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import {
AlertVariant,
ButtonVariant,
@ -47,7 +48,7 @@ export default function RealmRoleTabs() {
mode: "onChange",
});
const { setValue, getValues, trigger, reset } = form;
const history = useHistory();
const navigate = useNavigate();
const { adminClient } = useAdminClient();
const [role, setRole] = useState<AttributeForm>();
@ -170,7 +171,7 @@ export default function RealmRoleTabs() {
}
setRole(convert(createdRole));
history.push(
navigate(
url.substr(0, url.lastIndexOf("/") + 1) + createdRole.id + "/details"
);
}
@ -198,7 +199,7 @@ export default function RealmRoleTabs() {
});
}
addAlert(t("roleDeletedSuccess"), AlertVariant.success);
history.push(url.substr(0, url.indexOf("/roles") + "/roles".length));
navigate(url.substr(0, url.indexOf("/roles") + "/roles".length));
} catch (error) {
addError("roles:roleDeleteError", error);
}
@ -264,7 +265,7 @@ export default function RealmRoleTabs() {
t("compositesRemovedAlertDescription")
);
const loc = url.replace(/\/AssociatedRoles/g, "/details");
history.push(loc);
navigate(loc);
refresh();
} catch (error) {
addError("roles:roleDeleteError", error);
@ -291,7 +292,7 @@ export default function RealmRoleTabs() {
id,
tab: "associated-roles",
});
history.push(to);
navigate(to);
};
const addComposites = async (composites: RoleRepresentation[]) => {

7
src/realm-roles/RolesList.tsx
View file

@ -1,5 +1,6 @@
import { FunctionComponent, useState } from "react";
import { Link, useHistory, useRouteMatch } from "react-router-dom";
import { Link, useRouteMatch } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import { AlertVariant, Button, ButtonVariant } from "@patternfly/react-core";
@ -55,7 +56,7 @@ export const RolesList = ({
isReadOnly,
}: RolesListProps) => {
const { t } = useTranslation(messageBundle);
const history = useHistory();
const navigate = useNavigate();
const { adminClient } = useAdminClient();
const { addAlert, addError } = useAlerts();
const { url } = useRouteMatch();
@ -115,7 +116,7 @@ export const RolesList = ({
},
});
const goToCreate = () => history.push(`${url}/add-role`);
const goToCreate = () => navigate(`${url}/add-role`);
if (!realm) {
return <KeycloakSpinner />;

13
src/realm-roles/UsersInRoleTab.tsx
View file

@ -2,7 +2,8 @@ import { Button, PageSection, Popover } from "@patternfly/react-core";
import { QuestionCircleIcon } from "@patternfly/react-icons";
import { useTranslation } from "react-i18next";
import { useHistory, useParams } from "react-router-dom";
import { useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useHelp } from "../components/help-enabler/HelpHeader";
import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
@ -12,7 +13,7 @@ import { emptyFormatter, upperCaseFormatter } from "../util";
import type { ClientRoleParams } from "./routes/ClientRole";
export const UsersInRoleTab = () => {
const history = useHistory();
const navigate = useNavigate();
const { realm } = useRealm();
const { t } = useTranslation("roles");
@ -62,7 +63,7 @@ export const UsersInRoleTab = () => {
<Button
className="kc-groups-link"
variant="link"
onClick={() => history.push(`/${realm}/groups`)}
onClick={() => navigate(`/${realm}/groups`)}
>
{t("common:groups")}
</Button>
@ -70,7 +71,7 @@ export const UsersInRoleTab = () => {
<Button
className="kc-users-link"
variant="link"
onClick={() => history.push(`/${realm}/users`)}
onClick={() => navigate(`/${realm}/users`)}
>
{t("users")}.
</Button>
@ -99,7 +100,7 @@ export const UsersInRoleTab = () => {
<Button
className="kc-groups-link-empty-state"
variant="link"
onClick={() => history.push(`/${realm}/groups`)}
onClick={() => navigate(`/${realm}/groups`)}
>
{t("common:groups")}
</Button>
@ -107,7 +108,7 @@ export const UsersInRoleTab = () => {
<Button
className="kc-users-link-empty-state"
variant="link"
onClick={() => history.push(`/${realm}/users`)}
onClick={() => navigate(`/${realm}/users`)}
>
{t("users")}
</Button>

11
src/realm-settings/ClientProfileForm.tsx
View file

@ -23,7 +23,8 @@ import { useTranslation } from "react-i18next";
import { useForm } from "react-hook-form";
import { FormAccess } from "../components/form-access/FormAccess";
import { ViewHeader } from "../components/view-header/ViewHeader";
import { Link, useHistory, useParams } from "react-router-dom";
import { Link, useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useAlerts } from "../components/alert/Alerts";
import { useAdminClient, useFetch } from "../context/auth/AdminClient";
import type ClientProfileRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientProfileRepresentation";
@ -49,7 +50,7 @@ const defaultValues: ClientProfileForm = {
export default function ClientProfileForm() {
const { t } = useTranslation("realm-settings");
const history = useHistory();
const navigate = useNavigate();
const {
handleSubmit,
setValue,
@ -109,7 +110,7 @@ export default function ClientProfileForm() {
AlertVariant.success
);
history.push(toClientProfile({ realm, profileName: form.name }));
navigate(toClientProfile({ realm, profileName: form.name }));
} catch (error) {
addError(
editMode
@ -162,7 +163,7 @@ export default function ClientProfileForm() {
globalProfiles,
});
addAlert(t("deleteExecutorSuccess"), AlertVariant.success);
history.push(toClientProfile({ realm, profileName }));
navigate(toClientProfile({ realm, profileName }));
} catch (error) {
addError(t("deleteExecutorError"), error);
}
@ -177,7 +178,7 @@ export default function ClientProfileForm() {
globalProfiles,
});
addAlert(t("deleteClientSuccess"), AlertVariant.success);
history.push(toClientPolicies({ realm, tab: "profiles" }));
navigate(toClientPolicies({ realm, tab: "profiles" }));
} catch (error) {
addError(t("deleteClientError"), error);
}

7
src/realm-settings/ExecutorForm.tsx
View file

@ -16,7 +16,8 @@ import { useAlerts } from "../components/alert/Alerts";
import { useServerInfo } from "../context/server-info/ServerInfoProvider";
import { Controller, FormProvider, useForm } from "react-hook-form";
import { HelpItem } from "../components/help-enabler/HelpItem";
import { Link, useHistory, useParams } from "react-router-dom";
import { Link, useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useAdminClient, useFetch } from "../context/auth/AdminClient";
import type ComponentTypeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentTypeRepresentation";
import type { ConfigPropertyRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/authenticatorConfigInfoRepresentation";
@ -37,7 +38,7 @@ const defaultValues: ExecutorForm = {
export default function ExecutorForm() {
const { t } = useTranslation("realm-settings");
const history = useHistory();
const navigate = useNavigate();
const { realm, profileName } = useParams<ClientProfileParams>();
const { executorName } = useParams<ExecutorParams>();
const { addAlert, addError } = useAlerts();
@ -124,7 +125,7 @@ export default function ExecutorForm() {
AlertVariant.success
);
history.push(toClientProfile({ realm, profileName }));
navigate(toClientProfile({ realm, profileName }));
} catch (error) {
addError(
editMode

7
src/realm-settings/NewAttributeSettings.tsx
View file

@ -8,7 +8,8 @@ import {
} from "@patternfly/react-core";
import { FormProvider, useForm, useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { Link, useHistory, useParams } from "react-router-dom";
import { Link, useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { ScrollForm } from "../components/scroll-form/ScrollForm";
import type UserProfileConfig from "@keycloak/keycloak-admin-client/lib/defs/userProfileConfig";
import { AttributeGeneralSettings } from "./user-profile/attribute/AttributeGeneralSettings";
@ -102,7 +103,7 @@ export default function NewAttributeSettings() {
const { adminClient } = useAdminClient();
const form = useForm<UserProfileConfig>({ shouldUnregister: false });
const { t } = useTranslation("realm-settings");
const history = useHistory();
const navigate = useNavigate();
const { addAlert, addError } = useAlerts();
const [config, setConfig] = useState<UserProfileConfig | null>(null);
const editMode = attributeName ? true : false;
@ -208,7 +209,7 @@ export default function NewAttributeSettings() {
realm,
});
history.push(toUserProfile({ realm, tab: "attributes" }));
navigate(toUserProfile({ realm, tab: "attributes" }));
addAlert(
t("realm-settings:createAttributeSuccess"),

9
src/realm-settings/NewClientPolicyCondition.tsx
View file

@ -20,7 +20,8 @@ import type ClientPolicyRepresentation from "@keycloak/keycloak-admin-client/lib
import { camelCase } from "lodash-es";
import { useAdminClient, useFetch } from "../context/auth/AdminClient";
import { useAlerts } from "../components/alert/Alerts";
import { useHistory, useParams } from "react-router";
import { useParams } from "react-router";
import { useNavigate } from "react-router-dom-v5-compat";
import type ComponentTypeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentTypeRepresentation";
import { useRealm } from "../context/realm-context/RealmContext";
import type { ConfigPropertyRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/authenticatorConfigInfoRepresentation";
@ -41,7 +42,7 @@ type ConfigProperty = ConfigPropertyRepresentation & {
export default function NewClientPolicyCondition() {
const { t } = useTranslation("realm-settings");
const { addAlert, addError } = useAlerts();
const history = useHistory();
const navigate = useNavigate();
const { realm } = useRealm();
const [openConditionType, setOpenConditionType] = useState(false);
@ -162,7 +163,7 @@ export default function NewClientPolicyCondition() {
policies: updatedPolicies,
});
setPolicies(updatedPolicies);
history.push(toEditClientPolicy({ realm, policyName }));
navigate(toEditClientPolicy({ realm, policyName }));
addAlert(
conditionName
? t("realm-settings:updateClientConditionSuccess")
@ -267,7 +268,7 @@ export default function NewClientPolicyCondition() {
variant="link"
data-testid="addCondition-cancelBtn"
onClick={() =>
history.push(toEditClientPolicy({ realm, policyName }))
navigate(toEditClientPolicy({ realm, policyName }))
}
>
{t("common:cancel")}

25
src/realm-settings/NewClientPolicyForm.tsx
View file

@ -23,7 +23,8 @@ import { useTranslation } from "react-i18next";
import { Controller, useForm } from "react-hook-form";
import { FormAccess } from "../components/form-access/FormAccess";
import { ViewHeader } from "../components/view-header/ViewHeader";
import { Link, useHistory, useParams } from "react-router-dom";
import { Link, useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useRealm } from "../context/realm-context/RealmContext";
import { useAlerts } from "../components/alert/Alerts";
import { useAdminClient, useFetch } from "../context/auth/AdminClient";
@ -97,7 +98,7 @@ export default function NewClientPolicyForm() {
const { policyName } = useParams<EditClientPolicyParams>();
const history = useHistory();
const navigate = useNavigate();
const form = useForm<ClientPolicyRepresentation>({ mode: "onChange" });
const { handleSubmit } = form;
@ -259,9 +260,7 @@ export default function NewClientPolicyForm() {
: t("realm-settings:createClientPolicySuccess"),
AlertVariant.success
);
history.push(
toEditClientPolicy({ realm, policyName: createdForm.name! })
);
navigate(toEditClientPolicy({ realm, policyName: createdForm.name! }));
setShowAddConditionsAndProfilesForm(true);
} catch (error) {
addError("realm-settings:createClientPolicyError", error);
@ -285,7 +284,7 @@ export default function NewClientPolicyForm() {
policies: updatedPolicies,
});
addAlert(t("deleteClientPolicySuccess"), AlertVariant.success);
history.push(
navigate(
toClientPolicies({
realm,
tab: "policies",
@ -313,7 +312,7 @@ export default function NewClientPolicyForm() {
policies: policies,
});
addAlert(t("deleteConditionSuccess"), AlertVariant.success);
history.push(
navigate(
toEditClientPolicy({ realm, policyName: formValues.name! })
);
} catch (error) {
@ -329,7 +328,7 @@ export default function NewClientPolicyForm() {
policies: updatedPolicies,
});
addAlert(t("deleteClientSuccess"), AlertVariant.success);
history.push(
navigate(
toClientPolicies({
realm,
tab: "policies",
@ -358,9 +357,7 @@ export default function NewClientPolicyForm() {
policies: policies,
});
addAlert(t("deleteClientPolicyProfileSuccess"), AlertVariant.success);
history.push(
toEditClientPolicy({ realm, policyName: formValues.name! })
);
navigate(toEditClientPolicy({ realm, policyName: formValues.name! }));
} catch (error) {
addError(t("deleteClientPolicyProfileError"), error);
}
@ -374,7 +371,7 @@ export default function NewClientPolicyForm() {
policies: updatedPolicies,
});
addAlert(t("deleteClientSuccess"), AlertVariant.success);
history.push(
navigate(
toClientPolicies({
realm,
tab: "policies",
@ -422,7 +419,7 @@ export default function NewClientPolicyForm() {
policies: newPolicies,
});
setPolicies(newPolicies);
history.push(toEditClientPolicy({ realm, policyName: formValues.name! }));
navigate(toEditClientPolicy({ realm, policyName: formValues.name! }));
addAlert(
t("realm-settings:addClientProfileSuccess"),
AlertVariant.success
@ -506,7 +503,7 @@ export default function NewClientPolicyForm() {
onClick={() =>
showAddConditionsAndProfilesForm || policyName
? reset()
: history.push(
: navigate(
toClientPolicies({
realm,
tab: "policies",

9
src/realm-settings/PoliciesTab.tsx
View file

@ -19,7 +19,8 @@ import { useTranslation } from "react-i18next";
import { useAdminClient, useFetch } from "../context/auth/AdminClient";
import { prettyPrintJSON } from "../util";
import { CodeEditor, Language } from "@patternfly/react-code-editor";
import { Link, useHistory } from "react-router-dom";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import type ClientPolicyRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientPolicyRepresentation";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { useAlerts } from "../components/alert/Alerts";
@ -38,7 +39,7 @@ export const PoliciesTab = () => {
const { adminClient } = useAdminClient();
const { addAlert, addError } = useAlerts();
const { realm } = useRealm();
const history = useHistory();
const navigate = useNavigate();
const [show, setShow] = useState(false);
const [policies, setPolicies] = useState<ClientPolicyRepresentation[]>();
const [selectedPolicy, setSelectedPolicy] =
@ -81,7 +82,7 @@ export const PoliciesTab = () => {
await adminClient.clientPolicies.updatePolicy({
policies: updatedPolicies,
});
history.push(toClientPolicies({ realm, tab: "policies" }));
navigate(toClientPolicies({ realm, tab: "policies" }));
addAlert(
t("realm-settings:updateClientPolicySuccess"),
AlertVariant.success
@ -234,7 +235,7 @@ export const PoliciesTab = () => {
message={t("realm-settings:noClientPolicies")}
instructions={t("realm-settings:noClientPoliciesInstructions")}
primaryActionText={t("realm-settings:createClientPolicy")}
onPrimaryAction={() => history.push(toAddClientPolicy({ realm }))}
onPrimaryAction={() => navigate(toAddClientPolicy({ realm }))}
/>
}
ariaLabelKey="realm-settings:clientPolicies"

8
src/realm-settings/RealmSettingsTabs.tsx
View file

@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { Controller, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import {
@ -74,7 +75,7 @@ const RealmSettingsHeader = ({
const { adminClient } = useAdminClient();
const { refresh: refreshRealms } = useRealms();
const { addAlert, addError } = useAlerts();
const history = useHistory();
const navigate = useNavigate();
const [partialImportOpen, setPartialImportOpen] = useState(false);
const [partialExportOpen, setPartialExportOpen] = useState(false);
@ -98,7 +99,7 @@ const RealmSettingsHeader = ({
await adminClient.realms.del({ realm: realmName });
addAlert(t("deletedSuccess"), AlertVariant.success);
await refreshRealms();
history.push(toDashboard({ realm: environment.masterRealm }));
navigate(toDashboard({ realm: environment.masterRealm }));
refresh();
} catch (error) {
addError("realm-settings:deleteError", error);
@ -174,6 +175,7 @@ export const RealmSettingsTabs = ({
const { realm: realmName } = useRealm();
const { refresh: refreshRealms } = useRealms();
const history = useHistory();
const navigate = useNavigate();
const isFeatureEnabled = useIsFeatureEnabled();
const { control, setValue, getValues } = useForm({
@ -225,7 +227,7 @@ export const RealmSettingsTabs = ({
const isRealmRenamed = realmName !== (r.realm || realm.realm);
if (isRealmRenamed) {
await refreshRealms();
history.push(toRealmSettings({ realm: r.realm!, tab: "general" }));
navigate(toRealmSettings({ realm: r.realm!, tab: "general" }));
}
refresh();
};

6
src/realm-settings/keys/KeysListTab.tsx
View file

@ -1,5 +1,5 @@
import { useState } from "react";
import { useHistory } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import {
Button,
@ -80,7 +80,7 @@ const SelectFilter = ({ onFilter }: SelectFilterProps) => {
export const KeysListTab = ({ realmComponents }: KeysListTabProps) => {
const { t } = useTranslation("realm-settings");
const history = useHistory();
const navigate = useNavigate();
const [publicKey, setPublicKey] = useState("");
const [certificate, setCertificate] = useState("");
@ -235,7 +235,7 @@ export const KeysListTab = ({ realmComponents }: KeysListTabProps) => {
instructions={t("noKeysDescription")}
primaryActionText={t("addProvider")}
onPrimaryAction={() =>
history.push(toKeysTab({ realm, tab: "providers" }))
navigate(toKeysTab({ realm, tab: "providers" }))
}
/>
}

7
src/realm-settings/user-profile/AttributesGroupForm.tsx
View file

@ -10,7 +10,8 @@ import {
import { useEffect, useMemo } from "react";
import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { Link, useHistory, useParams } from "react-router-dom";
import { Link, useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { KeyValueInput } from "../../components/key-value-form/KeyValueInput";
import { FormAccess } from "../../components/form-access/FormAccess";
import { HelpItem } from "../../components/help-enabler/HelpItem";
@ -57,7 +58,7 @@ export default function AttributesGroupForm() {
const { t } = useTranslation();
const { realm } = useRealm();
const { config, save } = useUserProfile();
const history = useHistory();
const navigate = useNavigate();
const params = useParams<Partial<EditAttributesGroupParams>>();
const form = useForm<FormFields>({ defaultValues, shouldUnregister: false });
@ -99,7 +100,7 @@ export default function AttributesGroupForm() {
const success = await save({ ...config, groups });
if (success) {
history.push(toUserProfile({ realm, tab: "attributes-group" }));
navigate(toUserProfile({ realm, tab: "attributes-group" }));
}
};

9
src/realm-settings/user-profile/AttributesGroupTab.tsx
View file

@ -7,7 +7,8 @@ import {
} from "@patternfly/react-core";
import { useEffect, useState } from "react";
import { Trans, useTranslation } from "react-i18next";
import { Link, useHistory } from "react-router-dom";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";
import { KeycloakDataTable } from "../../components/table-toolbar/KeycloakDataTable";
@ -19,7 +20,7 @@ import { useUserProfile } from "./UserProfileContext";
export const AttributesGroupTab = () => {
const { config, save } = useUserProfile();
const { t } = useTranslation("attributes-group");
const history = useHistory();
const navigate = useNavigate();
const { realm } = useRealm();
const [key, setKey] = useState(0);
const [groupToDelete, setGroupToDelete] = useState<UserProfileGroup>();
@ -109,9 +110,7 @@ export const AttributesGroupTab = () => {
message={t("emptyStateMessage")}
instructions={t("emptyStateInstructions")}
primaryActionText={t("createGroupText")}
onPrimaryAction={() =>
history.push(toNewAttributesGroup({ realm }))
}
onPrimaryAction={() => navigate(toNewAttributesGroup({ realm }))}
/>
}
/>

7
src/realm-settings/user-profile/AttributesTab.tsx
View file

@ -15,7 +15,8 @@ import { FilterIcon } from "@patternfly/react-icons";
import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
import { DraggableTable } from "../../authentication/components/DraggableTable";
import { Link, useHistory } from "react-router-dom";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { toAddAttribute } from "../routes/AddAttribute";
import { useRealm } from "../../context/realm-context/RealmContext";
import { useUserProfile } from "./UserProfileContext";
@ -32,7 +33,7 @@ export const AttributesTab = () => {
const { config, save } = useUserProfile();
const { realm: realmName } = useRealm();
const { t } = useTranslation("realm-settings");
const history = useHistory();
const navigate = useNavigate();
const [filter, setFilter] = useState("allGroups");
const [isFilterTypeDropdownOpen, toggleIsFilterTypeDropdownOpen] =
useToggle();
@ -174,7 +175,7 @@ export const AttributesTab = () => {
{
title: t("common:edit"),
onClick: (_key, _idx, component) => {
history.push(
navigate(
toAttribute({
realm: realmName,
attributeName: component.name,

8
src/realm/add/NewRealmForm.tsx
View file

@ -1,5 +1,5 @@
import { useState } from "react";
import { useHistory } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import { Controller, useForm } from "react-hook-form";
import {
@ -24,7 +24,7 @@ import { convertFormValuesToObject, convertToFormValues } from "../../util";
export default function NewRealmForm() {
const { t } = useTranslation("realm");
const history = useHistory();
const navigate = useNavigate();
const { refresh, whoAmI } = useWhoAmI();
const { refresh: refreshRealms } = useRealms();
const { adminClient } = useAdminClient();
@ -55,7 +55,7 @@ export default function NewRealmForm() {
refresh();
await refreshRealms();
history.push(toDashboard({ realm: fields.realm }));
navigate(toDashboard({ realm: fields.realm }));
} catch (error) {
addError("realm:saveRealmError", error);
}
@ -113,7 +113,7 @@ export default function NewRealmForm() {
<Button variant="primary" type="submit">
{t("common:create")}
</Button>
<Button variant="link" onClick={() => history.goBack()}>
<Button variant="link" onClick={() => navigate(-1)}>
{t("common:cancel")}
</Button>
</ActionGroup>

9
src/user-federation/UserFederationKerberosSettings.tsx
View file

@ -15,14 +15,15 @@ import { FormProvider, useForm } from "react-hook-form";
import { useAdminClient, useFetch } from "../context/auth/AdminClient";
import { useAlerts } from "../components/alert/Alerts";
import { useTranslation } from "react-i18next";
import { useHistory, useParams } from "react-router-dom";
import { useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { Header } from "./shared/Header";
import { toUserFederation } from "./routes/UserFederation";
export default function UserFederationKerberosSettings() {
const { t } = useTranslation("user-federation");
const form = useForm<ComponentRepresentation>({ mode: "onChange" });
const history = useHistory();
const navigate = useNavigate();
const { adminClient } = useAdminClient();
const { realm } = useRealm();
@ -54,7 +55,7 @@ export default function UserFederationKerberosSettings() {
try {
if (!id) {
await adminClient.components.create(component);
history.push(`/${realm}/user-federation`);
navigate(`/${realm}/user-federation`);
} else {
await adminClient.components.update({ id }, component);
}
@ -87,7 +88,7 @@ export default function UserFederationKerberosSettings() {
</Button>
<Button
variant="link"
onClick={() => history.push(toUserFederation({ realm }))}
onClick={() => navigate(toUserFederation({ realm }))}
data-testid="kerberos-cancel"
>
{t("common:cancel")}

11
src/user-federation/UserFederationLdapSettings.tsx
View file

@ -24,7 +24,8 @@ import { FormProvider, useForm, useFormContext } from "react-hook-form";
import { useAdminClient, useFetch } from "../context/auth/AdminClient";
import { useAlerts } from "../components/alert/Alerts";
import { useTranslation } from "react-i18next";
import { useHistory, useParams } from "react-router-dom";
import { useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { ScrollForm } from "../components/scroll-form/ScrollForm";
import { KeycloakTabs } from "../components/keycloak-tabs/KeycloakTabs";
@ -47,7 +48,7 @@ const AddLdapFormContent = ({
const { t } = useTranslation("user-federation");
const form = useFormContext();
const { id } = useParams<{ id: string }>();
const history = useHistory();
const navigate = useNavigate();
const { realm } = useRealm();
@ -94,7 +95,7 @@ const AddLdapFormContent = ({
</Button>
<Button
variant="link"
onClick={() => history.push(toUserFederation({ realm }))}
onClick={() => navigate(toUserFederation({ realm }))}
data-testid="ldap-cancel"
>
{t("common:cancel")}
@ -108,7 +109,7 @@ const AddLdapFormContent = ({
export default function UserFederationLdapSettings() {
const { t } = useTranslation("user-federation");
const form = useForm<ComponentRepresentation>({ mode: "onChange" });
const history = useHistory();
const navigate = useNavigate();
const { adminClient } = useAdminClient();
const { realm } = useRealm();
@ -167,7 +168,7 @@ export default function UserFederationLdapSettings() {
try {
if (!id) {
await adminClient.components.create(component);
history.push(toUserFederation({ realm }));
navigate(toUserFederation({ realm }));
} else {
await adminClient.components.update({ id }, component);
}

8
src/user-federation/UserFederationSection.tsx
View file

@ -17,7 +17,7 @@ import { DatabaseIcon } from "@patternfly/react-icons";
import type ComponentRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentRepresentation";
import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useAlerts } from "../components/alert/Alerts";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { ManagePriorityDialog } from "./ManagePriorityDialog";
@ -42,7 +42,7 @@ export default function UserFederationSection() {
const [key, setKey] = useState(0);
const refresh = () => setKey(new Date().getTime());
const history = useHistory();
const navigate = useNavigate();
const [manageDisplayDialog, setManageDisplayDialog] = useState(false);
@ -72,7 +72,7 @@ export default function UserFederationSection() {
<DropdownItem
key={p.id}
onClick={() =>
history.push(toProvider({ realm, providerId: p.id!, id: "new" }))
navigate(toProvider({ realm, providerId: p.id!, id: "new" }))
}
>
{p.id.toUpperCase() == "LDAP"
@ -200,7 +200,7 @@ export default function UserFederationSection() {
role="button"
isHoverable
onClick={() =>
history.push(toProvider({ realm, providerId: p.id! }))
navigate(toProvider({ realm, providerId: p.id! }))
}
data-testid={`${p.id}-card`}
>

7
src/user-federation/custom/CustomProviderSettings.tsx
View file

@ -1,5 +1,6 @@
import { useState } from "react";
import { Link, useHistory, useParams } from "react-router-dom";
import { Link, useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import { FormProvider, useForm } from "react-hook-form";
import {
@ -29,7 +30,7 @@ import "./custom-provider-settings.css";
export default function CustomProviderSettings() {
const { t } = useTranslation("user-federation");
const { id, providerId } = useParams<ProviderRouteParams>();
const history = useHistory();
const navigate = useNavigate();
const form = useForm<ComponentRepresentation>({
mode: "onChange",
});
@ -88,7 +89,7 @@ export default function CustomProviderSettings() {
try {
if (!id) {
await adminClient.components.create(saveComponent);
history.push(toUserFederation({ realm: realmName }));
navigate(toUserFederation({ realm: realmName }));
} else {
await adminClient.components.update({ id }, saveComponent);
}

13
src/user-federation/ldap/mappers/LdapMapperDetails.tsx
View file

@ -17,7 +17,8 @@ import { convertFormValuesToObject, convertToFormValues } from "../../../util";
import type ComponentRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentRepresentation";
import { useAdminClient, useFetch } from "../../../context/auth/AdminClient";
import { ViewHeader } from "../../../components/view-header/ViewHeader";
import { useHistory, useParams } from "react-router-dom";
import { useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { Controller, FormProvider, useForm, useWatch } from "react-hook-form";
import { useAlerts } from "../../../components/alert/Alerts";
import { useTranslation } from "react-i18next";
@ -39,7 +40,7 @@ export default function LdapMapperDetails() {
const { adminClient } = useAdminClient();
const { id, mapperId } = useParams<{ id: string; mapperId: string }>();
const history = useHistory();
const navigate = useNavigate();
const { realm } = useRealm();
const { t } = useTranslation("user-federation");
const { addAlert, addError } = useAlerts();
@ -92,7 +93,7 @@ export default function LdapMapperDetails() {
try {
if (mapperId === "new") {
await adminClient.components.create(map);
history.push(
navigate(
toUserFederationLdap({ realm, id: mapper.parentId!, tab: "mappers" })
);
} else {
@ -128,7 +129,7 @@ export default function LdapMapperDetails() {
id: mapping!.id!,
});
addAlert(t("common:mappingDeletedSuccess"), AlertVariant.success);
history.push(toUserFederationLdap({ id, realm, tab: "mappers" }));
navigate(toUserFederationLdap({ id, realm, tab: "mappers" }));
} catch (error) {
addError("common:mappingDeletedError", error);
}
@ -306,8 +307,8 @@ export default function LdapMapperDetails() {
variant="link"
onClick={() =>
isNew
? history.goBack()
: history.push(
? navigate(-1)
: navigate(
`/${realm}/user-federation/ldap/${
mapping!.parentId
}/mappers`

9
src/user-federation/ldap/mappers/LdapMapperList.tsx
View file

@ -1,5 +1,6 @@
import { useState } from "react";
import { Link, useHistory, useParams, useRouteMatch } from "react-router-dom";
import { Link, useParams, useRouteMatch } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import {
AlertVariant,
@ -17,7 +18,7 @@ import { useConfirmDialog } from "../../../components/confirm-dialog/ConfirmDial
import useLocaleSort, { mapByKey } from "../../../utils/useLocaleSort";
export const LdapMapperList = () => {
const history = useHistory();
const navigate = useNavigate();
const { t } = useTranslation("user-federation");
const { adminClient } = useAdminClient();
const { addAlert, addError } = useAlerts();
@ -97,7 +98,7 @@ export const LdapMapperList = () => {
<Button
data-testid="add-mapper-btn"
variant="primary"
onClick={() => history.push(`${url}/new`)}
onClick={() => navigate(`${url}/new`)}
>
{t("common:addMapper")}
</Button>
@ -126,7 +127,7 @@ export const LdapMapperList = () => {
message={t("common:emptyMappers")}
instructions={t("common:emptyMappersInstructions")}
primaryActionText={t("common:emptyPrimaryAction")}
onPrimaryAction={() => history.push(`${url}/new`)}
onPrimaryAction={() => navigate(`${url}/new`)}
/>
}
/>

7
src/user-federation/shared/Header.tsx
View file

@ -1,5 +1,6 @@
import { ReactElement } from "react";
import { useHistory, useParams } from "react-router-dom";
import { useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useTranslation } from "react-i18next";
import {
AlertVariant,
@ -31,7 +32,7 @@ export const Header = ({
}: HeaderProps) => {
const { t } = useTranslation("user-federation");
const { id } = useParams<ProviderRouteParams>();
const history = useHistory();
const navigate = useNavigate();
const { adminClient } = useAdminClient();
const { addAlert, addError } = useAlerts();
@ -58,7 +59,7 @@ export const Header = ({
try {
await adminClient.components.del({ id: id! });
addAlert(t("userFedDeletedSuccess"), AlertVariant.success);
history.replace(toUserFederation({ realm }));
navigate(toUserFederation({ realm }), { replace: true });
} catch (error) {
addError("user-federation:userFedDeleteError", error);
}

7
src/user/SearchUser.tsx
View file

@ -10,7 +10,8 @@ import {
} from "@patternfly/react-core";
import { SearchIcon } from "@patternfly/react-icons";
import { useForm } from "react-hook-form";
import { useHistory, useRouteMatch } from "react-router-dom";
import { useRouteMatch } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
@ -22,9 +23,9 @@ export const SearchUser = ({ onSearch }: SearchUserProps) => {
const { t } = useTranslation("users");
const { register, handleSubmit } = useForm<{ search: string }>();
const { url } = useRouteMatch();
const history = useHistory();
const navigate = useNavigate();
const goToCreate = () => history.push(`${url}/add-user`);
const goToCreate = () => navigate(`${url}/add-user`);
return (
<EmptyState>

6
src/user/UserForm.tsx
View file

@ -13,7 +13,7 @@ import {
} from "@patternfly/react-core";
import { useTranslation } from "react-i18next";
import { Controller, useFormContext } from "react-hook-form";
import { useHistory } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { FormAccess } from "../components/form-access/FormAccess";
import type UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation";
@ -58,7 +58,7 @@ export const UserForm = ({
isRequiredUserActionsDropdownOpen,
setRequiredUserActionsDropdownOpen,
] = useState(false);
const history = useHistory();
const navigate = useNavigate();
const { adminClient } = useAdminClient();
const { addAlert, addError } = useAlerts();
@ -432,7 +432,7 @@ export const UserForm = ({
<Button
data-testid="cancel-create-user"
onClick={() =>
user?.id ? reset(user) : history.push(`/${realmName}/users`)
user?.id ? reset(user) : navigate(`/${realmName}/users`)
}
variant="link"
>

4
src/user/UsersSection.tsx
View file

@ -32,6 +32,7 @@ import type UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/us
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link, useHistory } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { useAlerts } from "../components/alert/Alerts";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
@ -64,6 +65,7 @@ export default function UsersSection() {
const { addAlert, addError } = useAlerts();
const { realm: realmName } = useRealm();
const history = useHistory();
const navigate = useNavigate();
const [userStorage, setUserStorage] = useState<ComponentRepresentation[]>();
const [searchUser, setSearchUser] = useState<string>();
const [realm, setRealm] = useState<RealmRepresentation | undefined>();
@ -222,7 +224,7 @@ export default function UsersSection() {
);
};
const goToCreate = () => history.push(toAddUser({ realm: realmName }));
const goToCreate = () => navigate(toAddUser({ realm: realmName }));
if (!userStorage) {
return <KeycloakSpinner />;

9
src/user/UsersTabs.tsx
View file

@ -16,7 +16,8 @@ import { ViewHeader } from "../components/view-header/ViewHeader";
import { BruteForced, UserForm } from "./UserForm";
import { useAlerts } from "../components/alert/Alerts";
import { useAdminClient, useFetch } from "../context/auth/AdminClient";
import { useHistory, useParams } from "react-router-dom";
import { useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom-v5-compat";
import { KeycloakTabs } from "../components/keycloak-tabs/KeycloakTabs";
import { UserGroups } from "./UserGroups";
import { UserConsents } from "./UserConsents";
@ -35,7 +36,7 @@ import { KeycloakSpinner } from "../components/keycloak-spinner/KeycloakSpinner"
const UsersTabs = () => {
const { t } = useTranslation("users");
const { addAlert, addError } = useAlerts();
const history = useHistory();
const navigate = useNavigate();
const { realm } = useRealm();
const { hasAccess } = useAccess();
@ -100,7 +101,7 @@ const UsersTabs = () => {
});
addAlert(t("userCreated"), AlertVariant.success);
history.push(toUser({ id: createdUser.id, realm, tab: "settings" }));
navigate(toUser({ id: createdUser.id, realm, tab: "settings" }));
}
} catch (error) {
addError("users:userCreateError", error);
@ -116,7 +117,7 @@ const UsersTabs = () => {
try {
await adminClient.users.del({ id });
addAlert(t("userDeletedSuccess"), AlertVariant.success);
history.push(toUsers({ realm }));
navigate(toUsers({ realm }));
} catch (error) {
addError("users:userDeletedError", error);
}