Convert more links to use new routes (#933)

* Convert more links to use new routes

* convert server info dropdown

* Fix link with render prop
This commit is contained in:
Jon Koops 2021-08-10 15:07:59 +02:00 committed by GitHub
parent fe740c0c21
commit d2ca2bf247
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 60 additions and 29 deletions

View file

@ -14,13 +14,16 @@ import {
import { HelpIcon } from "@patternfly/react-icons";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link, useHistory } from "react-router-dom";
import { Link } from "react-router-dom";
import { HelpHeader, useHelp } from "./components/help-enabler/HelpHeader";
import { useAdminClient } from "./context/auth/AdminClient";
import { useRealm } from "./context/realm-context/RealmContext";
import { useWhoAmI } from "./context/whoami/WhoAmI";
import { toDashboard } from "./dashboard/routes/Dashboard";
import environment from "./environment";
export const Header = () => {
const { realm } = useRealm();
const adminClient = useAdminClient();
const { t } = useTranslation();
@ -57,14 +60,15 @@ export const Header = () => {
};
const ServerInfoDropdownItem = () => {
const { realm } = useRealm();
const { t } = useTranslation();
const history = useHistory();
return (
<DropdownItem
key="server info"
onClick={() => {
history.push("/master/");
}}
component={Link}
// @ts-ignore
to={toDashboard({ realm })}
>
{t("realmInfo")}
</DropdownItem>
@ -182,7 +186,7 @@ export const Header = () => {
<PageHeader
showNavToggle
logo={
<Link to="/">
<Link to={toDashboard({ realm })}>
<Brand
src={environment.resourceUrl + "/logo.svg"}
id="masthead-logo"

View file

@ -1,6 +1,6 @@
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link, useRouteMatch } from "react-router-dom";
import { Link } from "react-router-dom";
import {
AlertVariant,
Button,
@ -32,11 +32,11 @@ import { ChangeTypeDialog } from "./ChangeTypeDialog";
import { toNewClientScope } from "./routes/NewClientScope";
import "./client-scope.css";
import { toClientScope } from "./routes/ClientScope";
export const ClientScopesSection = () => {
const { realm } = useRealm();
const { t } = useTranslation("client-scopes");
const { url } = useRouteMatch();
const adminClient = useAdminClient();
const { addAlert, addError } = useAlerts();
@ -124,15 +124,17 @@ export const ClientScopesSection = () => {
</>
);
const ClientScopeDetailLink = (
clientScope: ClientScopeDefaultOptionalType
) => (
const ClientScopeDetailLink = ({
id,
type,
name,
}: ClientScopeDefaultOptionalType) => (
<>
<Link
key={clientScope.id}
to={`${url}/${clientScope.id}/${clientScope.type}/settings`}
key={id}
to={toClientScope({ realm, id: id!, type, tab: "settings" })}
>
{clientScope.name}
{name}
</Link>
</>
);

View file

@ -20,6 +20,7 @@ import { AddMapperDialog } from "../add/MapperDialog";
import { useAdminClient } from "../../context/auth/AdminClient";
import { KeycloakDataTable } from "../../components/table-toolbar/KeycloakDataTable";
import { useRealm } from "../../context/realm-context/RealmContext";
import { toMapper } from "../routes/Mapper";
type MapperListProps = {
clientScope: ClientScopeRepresentation;
@ -97,9 +98,11 @@ export const MapperList = ({ clientScope, refresh }: MapperListProps) => {
.sort((a, b) => a.priority - b.priority)
);
const MapperLink = (mapper: Row) => (
const MapperLink = ({ id, name }: Row) => (
<>
<Link to={`${url}/${mapper.id}`}>{mapper.name}</Link>
<Link to={toMapper({ realm, id: clientScope.id!, mapperId: id! })}>
{name}
</Link>
</>
);

View file

@ -3,11 +3,13 @@ import { generatePath } from "react-router-dom";
import type { RouteDef } from "../../route-config";
import { ClientScopeForm } from "../form/ClientScopeForm";
export type ClientScopeTab = "settings" | "mappers" | "scope";
export type ClientScopeParams = {
realm: string;
id: string;
type: string;
tab: string;
tab: ClientScopeTab;
};
export const ClientScopeRoute: RouteDef = {

View file

@ -23,6 +23,8 @@ import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable
import { ViewHeader } from "../components/view-header/ViewHeader";
import { useAdminClient } from "../context/auth/AdminClient";
import { useRealm } from "../context/realm-context/RealmContext";
import { toRealmSettings } from "../realm-settings/routes/RealmSettings";
import { toUser } from "../user/routes/User";
import { AdminEvents } from "./AdminEvents";
import "./events-section.css";
@ -78,7 +80,7 @@ export const EventsSection = () => {
<>
<Link
key={`link-${event.time}-${event.type}`}
to={`/${realm}/users/${event.userId}/details`}
to={toUser({ realm, id: event.userId!, tab: "settings" })}
>
{event.userId}
</Link>
@ -108,7 +110,7 @@ export const EventsSection = () => {
<Trans i18nKey="events:eventExplain">
If you want to configure user events, Admin events or Event
listeners, please enter
<Link to={`/${realm}/realm-settings/events`}>
<Link to={toRealmSettings({ realm, tab: "events" })}>
{t("eventConfig")}
</Link>
page realm settings to configure.

View file

@ -25,6 +25,7 @@ import { useSubGroups } from "./SubGroupsContext";
import { MemberModal } from "./MembersModal";
import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
import { GroupPath } from "../components/group/GroupPath";
import { toUser } from "../user/routes/User";
type MembersOf = UserRepresentation & {
membership: GroupRepresentation[];
@ -99,7 +100,7 @@ export const Members = () => {
const UserDetailLink = (user: MembersOf) => (
<>
<Link key={user.id} to={`/${realm}/users/${user.id}/settings`}>
<Link key={user.id} to={toUser({ realm, id: user.id!, tab: "settings" })}>
{user.username}
</Link>
</>

View file

@ -15,6 +15,7 @@ import type RealmRepresentation from "keycloak-admin/lib/defs/realmRepresentatio
import { HelpItem } from "../components/help-enabler/HelpItem";
import "./RealmRolesSection.css";
import { toRealmRole } from "./routes/RealmRole";
type myRealmRepresentation = RealmRepresentation & {
defaultRole?: {
@ -39,9 +40,10 @@ type RoleLinkProps = {
};
const RoleLink: FunctionComponent<RoleLinkProps> = ({ children, role }) => {
const { url } = useRouteMatch();
const { realm } = useRealm();
return (
<Link key={role.id} to={`${url}/${role.id}/details`}>
<Link key={role.id} to={toRealmRole({ realm, id: role.id! })}>
{children}
</Link>
);

View file

@ -3,10 +3,16 @@ import { generatePath } from "react-router-dom";
import type { RouteDef } from "../../route-config";
import { RealmRoleTabs } from "../RealmRoleTabs";
export type RealmRoleTab =
| "details"
| "AssociatedRoles"
| "attributes"
| "users-in-role";
export type RealmRoleParams = {
realm: string;
id: string;
tab?: string;
tab?: RealmRoleTab;
};
export const RealmRoleRoute: RouteDef = {

View file

@ -16,7 +16,7 @@ import type UserRepresentation from "keycloak-admin/lib/defs/userRepresentation"
import React, { useEffect, useState } from "react";
import { Controller, FormProvider, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
import { Link, useHistory } from "react-router-dom";
import { useAlerts } from "../components/alert/Alerts";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { KeycloakTabs } from "../components/keycloak-tabs/KeycloakTabs";
@ -34,6 +34,7 @@ import { KeysListTab } from "./KeysListTab";
import { KeysProvidersTab } from "./KeysProvidersTab";
import { RealmSettingsLoginTab } from "./LoginTab";
import { PartialImportDialog } from "./PartialImport";
import { toRealmSettings } from "./routes/RealmSettings";
import { SecurityDefences } from "./security-defences/SecurityDefences";
import { RealmSettingsSessionsTab } from "./SessionsTab";
import { RealmSettingsThemesTab } from "./ThemesTab";
@ -53,9 +54,13 @@ export const EditProviderCrumb = () => {
return (
<>
<Breadcrumb>
<BreadcrumbItem to={`#/${realm}/realm-settings/keys`}>
{t("keys")}
</BreadcrumbItem>
<BreadcrumbItem
render={(props) => (
<Link {...props} to={toRealmSettings({ realm, tab: "keys" })}>
{t("keys")}
</Link>
)}
/>
<BreadcrumbItem>{t("providers")}</BreadcrumbItem>
<BreadcrumbItem isActive>{t("editProvider")}</BreadcrumbItem>
</Breadcrumb>

View file

@ -24,6 +24,7 @@ import { ViewHeader } from "../components/view-header/ViewHeader";
import { useAdminClient, useFetch } from "../context/auth/AdminClient";
import { useRealm } from "../context/realm-context/RealmContext";
import { emptyFormatter } from "../util";
import { toUser } from "./routes/User";
import { SearchUser } from "./SearchUser";
import "./user-section.css";
@ -68,7 +69,10 @@ export const UsersSection = () => {
const UserDetailLink = (user: UserRepresentation) => (
<>
<Link key={user.username} to={`${url}/${user.id}/settings`}>
<Link
key={user.username}
to={toUser({ realm: realmName, id: user.id!, tab: "settings" })}
>
{user.username}
</Link>
</>

View file

@ -8,7 +8,7 @@ export type UserTab = "settings" | "groups" | "consents";
export type UserParams = {
realm: string;
id: string;
tab: string;
tab: UserTab;
};
export const UserRoute: RouteDef = {