Defer breadcrumbs translations on route definitions (#883)
This commit is contained in:
parent
f0412fda25
commit
d8d230557e
4 changed files with 90 additions and 85 deletions
|
@ -74,13 +74,9 @@ export const App = () => {
|
|||
onReset={() => window.location.reload()}
|
||||
>
|
||||
<Switch>
|
||||
{routes(() => {}).map((route, i) => (
|
||||
{routes.map((route, i) => (
|
||||
<Route
|
||||
exact={
|
||||
route.matchOptions?.exact === undefined
|
||||
? true
|
||||
: route.matchOptions.exact
|
||||
}
|
||||
exact={route.matchOptions?.exact ?? true}
|
||||
key={i}
|
||||
path={route.path}
|
||||
component={() => (
|
||||
|
|
|
@ -35,7 +35,7 @@ export const PageNav: React.FunctionComponent = () => {
|
|||
|
||||
type LeftNavProps = { title: string; path: string };
|
||||
const LeftNav = ({ title, path }: LeftNavProps) => {
|
||||
const route = routes(() => {}).find(
|
||||
const route = routes.find(
|
||||
(route) => route.path.replace(/\/:.+?(\?|(?:(?!\/).)*|$)/g, "") === path
|
||||
);
|
||||
if (!route || !hasAccess(route.access)) return <></>;
|
||||
|
|
|
@ -1,6 +1,9 @@
|
|||
import React, { isValidElement } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import useBreadcrumbs, { BreadcrumbData } from "use-react-router-breadcrumbs";
|
||||
import useBreadcrumbs, {
|
||||
BreadcrumbData,
|
||||
BreadcrumbsRoute,
|
||||
} from "use-react-router-breadcrumbs";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import _ from "lodash";
|
||||
import { Breadcrumb, BreadcrumbItem } from "@patternfly/react-core";
|
||||
|
@ -15,8 +18,13 @@ export const PageBreadCrumbs = () => {
|
|||
const elementText = (crumb: BreadcrumbData) =>
|
||||
isValidElement(crumb.breadcrumb) && crumb.breadcrumb.props.children;
|
||||
|
||||
const routesWithCrumbs: BreadcrumbsRoute[] = routes.map((route) => ({
|
||||
...route,
|
||||
breadcrumb: route.breadcrumb?.(t),
|
||||
}));
|
||||
|
||||
const crumbs = _.uniqBy(
|
||||
useBreadcrumbs(routes(t), {
|
||||
useBreadcrumbs(routesWithCrumbs, {
|
||||
excludePaths: ["/", `/${realm}`],
|
||||
}),
|
||||
elementText
|
||||
|
|
|
@ -1,261 +1,262 @@
|
|||
import type { TFunction } from "i18next";
|
||||
import type { BreadcrumbsRoute } from "use-react-router-breadcrumbs";
|
||||
import type { AccessType } from "keycloak-admin/lib/defs/whoAmIRepresentation";
|
||||
|
||||
import type { ComponentType } from "react";
|
||||
import type { MatchOptions } from "use-react-router-breadcrumbs";
|
||||
import { AuthenticationSection } from "./authentication/AuthenticationSection";
|
||||
import { ClientScopeForm } from "./client-scopes/form/ClientScopeForm";
|
||||
import { RoleMappingForm } from "./client-scopes/add/RoleMappingForm";
|
||||
import { ClientScopesSection } from "./client-scopes/ClientScopesSection";
|
||||
import { DashboardSection } from "./dashboard/Dashboard";
|
||||
import { MappingDetails } from "./client-scopes/details/MappingDetails";
|
||||
import { ClientScopeForm } from "./client-scopes/form/ClientScopeForm";
|
||||
import { NewClientForm } from "./clients/add/NewClientForm";
|
||||
import { ClientDetails } from "./clients/ClientDetails";
|
||||
import { ClientsSection } from "./clients/ClientsSection";
|
||||
import { ImportForm } from "./clients/import/ImportForm";
|
||||
import { CreateInitialAccessToken } from "./clients/initial-access/CreateInitialAccessToken";
|
||||
import { DashboardSection } from "./dashboard/Dashboard";
|
||||
import { EventsSection } from "./events/EventsSection";
|
||||
import { GroupsSection } from "./groups/GroupsSection";
|
||||
import { IdentityProvidersSection } from "./identity-providers/IdentityProvidersSection";
|
||||
import { PageNotFoundSection } from "./PageNotFoundSection";
|
||||
import { RealmRolesSection } from "./realm-roles/RealmRolesSection";
|
||||
import {
|
||||
EditProviderCrumb,
|
||||
RealmSettingsSection,
|
||||
} from "./realm-settings/RealmSettingsSection";
|
||||
import { NewRealmForm } from "./realm/add/NewRealmForm";
|
||||
import { SessionsSection } from "./sessions/SessionsSection";
|
||||
import { UserFederationSection } from "./user-federation/UserFederationSection";
|
||||
import { UsersSection } from "./user/UsersSection";
|
||||
import { MappingDetails } from "./client-scopes/details/MappingDetails";
|
||||
import { ClientDetails } from "./clients/ClientDetails";
|
||||
import { UsersTabs } from "./user/UsersTabs";
|
||||
import { UserGroups } from "./user/UserGroups";
|
||||
import { UserFederationKerberosSettings } from "./user-federation/UserFederationKerberosSettings";
|
||||
import { UserFederationLdapSettings } from "./user-federation/UserFederationLdapSettings";
|
||||
import { RoleMappingForm } from "./client-scopes/add/RoleMappingForm";
|
||||
import { RealmRoleTabs } from "./realm-roles/RealmRoleTabs";
|
||||
import { SearchGroups } from "./groups/SearchGroups";
|
||||
import { CreateInitialAccessToken } from "./clients/initial-access/CreateInitialAccessToken";
|
||||
import { LdapMapperDetails } from "./user-federation/ldap/mappers/LdapMapperDetails";
|
||||
import {
|
||||
AddIdentityProvider,
|
||||
IdentityProviderCrumb,
|
||||
} from "./identity-providers/add/AddIdentityProvider";
|
||||
import { AddOpenIdConnect } from "./identity-providers/add/AddOpenIdConnect";
|
||||
import { DetailSettings } from "./identity-providers/add/DetailSettings";
|
||||
import { IdentityProvidersSection } from "./identity-providers/IdentityProvidersSection";
|
||||
import { PageNotFoundSection } from "./PageNotFoundSection";
|
||||
import { RealmRolesSection } from "./realm-roles/RealmRolesSection";
|
||||
import { RealmRoleTabs } from "./realm-roles/RealmRoleTabs";
|
||||
import { AESGeneratedSettings } from "./realm-settings/key-providers/aes-generated/AESGeneratedForm";
|
||||
import { HMACGeneratedSettings } from "./realm-settings/key-providers/hmac-generated/HMACGeneratedForm";
|
||||
import { RSAGeneratedSettings } from "./realm-settings/key-providers/rsa-generated/RSAGeneratedForm";
|
||||
import { ECDSAGeneratedSettings } from "./realm-settings/key-providers/ecdsa-generated/ECDSAGeneratedForm";
|
||||
import { HMACGeneratedSettings } from "./realm-settings/key-providers/hmac-generated/HMACGeneratedForm";
|
||||
import { JavaKeystoreSettings } from "./realm-settings/key-providers/java-keystore/JavaKeystoreForm";
|
||||
import { RSAGeneratedSettings } from "./realm-settings/key-providers/rsa-generated/RSAGeneratedForm";
|
||||
import { RSASettings } from "./realm-settings/key-providers/rsa/RSAForm";
|
||||
import {
|
||||
EditProviderCrumb,
|
||||
RealmSettingsSection,
|
||||
} from "./realm-settings/RealmSettingsSection";
|
||||
import { NewRealmForm } from "./realm/add/NewRealmForm";
|
||||
import { SessionsSection } from "./sessions/SessionsSection";
|
||||
import { LdapMapperDetails } from "./user-federation/ldap/mappers/LdapMapperDetails";
|
||||
import { UserFederationKerberosSettings } from "./user-federation/UserFederationKerberosSettings";
|
||||
import { UserFederationLdapSettings } from "./user-federation/UserFederationLdapSettings";
|
||||
import { UserFederationSection } from "./user-federation/UserFederationSection";
|
||||
import { UserGroups } from "./user/UserGroups";
|
||||
import { UsersSection } from "./user/UsersSection";
|
||||
import { UsersTabs } from "./user/UsersTabs";
|
||||
|
||||
export type RouteDef = BreadcrumbsRoute & {
|
||||
export type RouteDef = {
|
||||
path: string;
|
||||
component: ComponentType;
|
||||
breadcrumb: ((t: TFunction) => string | ComponentType<any>) | null;
|
||||
access: AccessType;
|
||||
component: () => JSX.Element;
|
||||
matchOptions?: MatchOptions;
|
||||
};
|
||||
|
||||
type RoutesFn = (t: TFunction) => RouteDef[];
|
||||
|
||||
export const routes: RoutesFn = (t: TFunction) => [
|
||||
export const routes: RouteDef[] = [
|
||||
{
|
||||
path: "/:realm/add-realm",
|
||||
component: NewRealmForm,
|
||||
breadcrumb: t("realm:createRealm"),
|
||||
breadcrumb: (t) => t("realm:createRealm"),
|
||||
access: "manage-realm",
|
||||
},
|
||||
{
|
||||
path: "/:realm/clients/add-client",
|
||||
component: NewClientForm,
|
||||
breadcrumb: t("clients:createClient"),
|
||||
breadcrumb: (t) => t("clients:createClient"),
|
||||
access: "manage-clients",
|
||||
},
|
||||
{
|
||||
path: "/:realm/clients/import-client",
|
||||
component: ImportForm,
|
||||
breadcrumb: t("clients:importClient"),
|
||||
breadcrumb: (t) => t("clients:importClient"),
|
||||
access: "manage-clients",
|
||||
},
|
||||
{
|
||||
path: "/:realm/clients/:tab?",
|
||||
component: ClientsSection,
|
||||
breadcrumb: t("clients:clientList"),
|
||||
breadcrumb: (t) => t("clients:clientList"),
|
||||
access: "query-clients",
|
||||
},
|
||||
{
|
||||
path: "/:realm/clients/initialAccessToken/create",
|
||||
component: CreateInitialAccessToken,
|
||||
breadcrumb: t("clients:createToken"),
|
||||
breadcrumb: (t) => t("clients:createToken"),
|
||||
access: "manage-clients",
|
||||
},
|
||||
{
|
||||
path: "/:realm/clients/:clientId/roles/add-role",
|
||||
component: RealmRoleTabs,
|
||||
breadcrumb: t("roles:createRole"),
|
||||
breadcrumb: (t) => t("roles:createRole"),
|
||||
access: "manage-realm",
|
||||
},
|
||||
{
|
||||
path: "/:realm/clients/:clientId/roles/:id/:tab?",
|
||||
component: RealmRoleTabs,
|
||||
breadcrumb: t("roles:roleDetails"),
|
||||
breadcrumb: (t) => t("roles:roleDetails"),
|
||||
access: "view-realm",
|
||||
},
|
||||
{
|
||||
path: "/:realm/clients/:clientId/:tab",
|
||||
component: ClientDetails,
|
||||
breadcrumb: t("clients:clientSettings"),
|
||||
breadcrumb: (t) => t("clients:clientSettings"),
|
||||
access: "view-clients",
|
||||
},
|
||||
{
|
||||
path: "/:realm/client-scopes/new",
|
||||
component: ClientScopeForm,
|
||||
breadcrumb: t("client-scopes:createClientScope"),
|
||||
breadcrumb: (t) => t("client-scopes:createClientScope"),
|
||||
access: "manage-clients",
|
||||
},
|
||||
{
|
||||
path: "/:realm/client-scopes/:id/mappers/oidc-role-name-mapper",
|
||||
component: RoleMappingForm,
|
||||
breadcrumb: t("common:mappingDetails"),
|
||||
breadcrumb: (t) => t("common:mappingDetails"),
|
||||
access: "view-clients",
|
||||
},
|
||||
{
|
||||
path: "/:realm/client-scopes/:id/mappers/:mapperId",
|
||||
component: MappingDetails,
|
||||
breadcrumb: t("common:mappingDetails"),
|
||||
breadcrumb: (t) => t("common:mappingDetails"),
|
||||
access: "view-clients",
|
||||
},
|
||||
{
|
||||
path: "/:realm/client-scopes/:id/:type/:tab",
|
||||
component: ClientScopeForm,
|
||||
breadcrumb: t("client-scopes:clientScopeDetails"),
|
||||
breadcrumb: (t) => t("client-scopes:clientScopeDetails"),
|
||||
access: "view-clients",
|
||||
},
|
||||
{
|
||||
path: "/:realm/client-scopes",
|
||||
component: ClientScopesSection,
|
||||
breadcrumb: t("client-scopes:clientScopeList"),
|
||||
breadcrumb: (t) => t("client-scopes:clientScopeList"),
|
||||
access: "view-clients",
|
||||
},
|
||||
{
|
||||
path: "/:realm/roles",
|
||||
component: RealmRolesSection,
|
||||
breadcrumb: t("roles:roleList"),
|
||||
breadcrumb: (t) => t("roles:roleList"),
|
||||
access: "view-realm",
|
||||
},
|
||||
{
|
||||
path: "/:realm/roles/add-role",
|
||||
component: RealmRoleTabs,
|
||||
breadcrumb: t("roles:createRole"),
|
||||
breadcrumb: (t) => t("roles:createRole"),
|
||||
access: "manage-realm",
|
||||
},
|
||||
{
|
||||
path: "/:realm/roles/:id/:tab?",
|
||||
component: RealmRoleTabs,
|
||||
breadcrumb: t("roles:roleDetails"),
|
||||
breadcrumb: (t) => t("roles:roleDetails"),
|
||||
access: "view-realm",
|
||||
},
|
||||
{
|
||||
path: "/:realm/users",
|
||||
component: UsersSection,
|
||||
breadcrumb: t("users:title"),
|
||||
breadcrumb: (t) => t("users:title"),
|
||||
access: "query-users",
|
||||
},
|
||||
{
|
||||
path: "/:realm/users/add-user",
|
||||
component: UsersTabs,
|
||||
breadcrumb: t("users:createUser"),
|
||||
breadcrumb: (t) => t("users:createUser"),
|
||||
access: "manage-users",
|
||||
},
|
||||
{
|
||||
path: "/:realm/users/:id",
|
||||
component: UserGroups,
|
||||
breadcrumb: t("users:userDetails"),
|
||||
breadcrumb: (t) => t("users:userDetails"),
|
||||
access: "manage-users",
|
||||
},
|
||||
{
|
||||
path: "/:realm/users/:id/:tab",
|
||||
component: UsersTabs,
|
||||
breadcrumb: t("users:userDetails"),
|
||||
breadcrumb: (t) => t("users:userDetails"),
|
||||
access: "manage-users",
|
||||
},
|
||||
{
|
||||
path: "/:realm/sessions",
|
||||
component: SessionsSection,
|
||||
breadcrumb: t("sessions:title"),
|
||||
breadcrumb: (t) => t("sessions:title"),
|
||||
access: "view-realm",
|
||||
},
|
||||
{
|
||||
path: "/:realm/events/:tab?",
|
||||
component: EventsSection,
|
||||
breadcrumb: t("events:title"),
|
||||
breadcrumb: (t) => t("events:title"),
|
||||
access: "view-events",
|
||||
},
|
||||
{
|
||||
path: "/:realm/realm-settings/:tab?",
|
||||
component: RealmSettingsSection,
|
||||
breadcrumb: t("realmSettings"),
|
||||
breadcrumb: (t) => t("realmSettings"),
|
||||
access: "view-realm",
|
||||
},
|
||||
{
|
||||
path: "/:realm/realm-settings/keys/:id?/aes-generated/settings",
|
||||
component: AESGeneratedSettings,
|
||||
breadcrumb: EditProviderCrumb,
|
||||
breadcrumb: () => EditProviderCrumb,
|
||||
access: "view-realm",
|
||||
},
|
||||
{
|
||||
path: "/:realm/realm-settings/keys/:id?/ecdsa-generated/settings",
|
||||
component: ECDSAGeneratedSettings,
|
||||
breadcrumb: EditProviderCrumb,
|
||||
breadcrumb: () => EditProviderCrumb,
|
||||
access: "view-realm",
|
||||
},
|
||||
{
|
||||
path: "/:realm/realm-settings/keys/:id?/hmac-generated/settings",
|
||||
component: HMACGeneratedSettings,
|
||||
breadcrumb: EditProviderCrumb,
|
||||
breadcrumb: () => EditProviderCrumb,
|
||||
access: "view-realm",
|
||||
},
|
||||
{
|
||||
path: "/:realm/realm-settings/keys/:id?/java-keystore/settings",
|
||||
component: JavaKeystoreSettings,
|
||||
breadcrumb: EditProviderCrumb,
|
||||
breadcrumb: () => EditProviderCrumb,
|
||||
access: "view-realm",
|
||||
},
|
||||
{
|
||||
path: "/:realm/realm-settings/keys/:id?/rsa-generated/settings",
|
||||
component: RSAGeneratedSettings,
|
||||
breadcrumb: EditProviderCrumb,
|
||||
breadcrumb: () => EditProviderCrumb,
|
||||
access: "view-realm",
|
||||
},
|
||||
{
|
||||
path: "/:realm/realm-settings/keys/:id?/rsa/settings",
|
||||
component: RSASettings,
|
||||
breadcrumb: EditProviderCrumb,
|
||||
breadcrumb: () => EditProviderCrumb,
|
||||
access: "view-realm",
|
||||
},
|
||||
{
|
||||
path: "/:realm/authentication",
|
||||
component: AuthenticationSection,
|
||||
breadcrumb: t("authentication"),
|
||||
breadcrumb: (t) => t("authentication"),
|
||||
access: "view-realm",
|
||||
},
|
||||
{
|
||||
path: "/:realm/identity-providers",
|
||||
component: IdentityProvidersSection,
|
||||
breadcrumb: t("identityProviders"),
|
||||
breadcrumb: (t) => t("identityProviders"),
|
||||
access: "view-identity-providers",
|
||||
},
|
||||
{
|
||||
path: "/:realm/identity-providers/oidc",
|
||||
component: AddOpenIdConnect,
|
||||
breadcrumb: t("identity-providers:addOpenIdProvider"),
|
||||
breadcrumb: (t) => t("identity-providers:addOpenIdProvider"),
|
||||
access: "manage-identity-providers",
|
||||
},
|
||||
{
|
||||
path: "/:realm/identity-providers/keycloak-oidc",
|
||||
component: AddOpenIdConnect,
|
||||
breadcrumb: t("identity-providers:addKeycloakOpenIdProvider"),
|
||||
breadcrumb: (t) => t("identity-providers:addKeycloakOpenIdProvider"),
|
||||
access: "manage-identity-providers",
|
||||
},
|
||||
{
|
||||
path: "/:realm/identity-providers/:id",
|
||||
component: AddIdentityProvider,
|
||||
breadcrumb: IdentityProviderCrumb,
|
||||
breadcrumb: () => IdentityProviderCrumb,
|
||||
access: "manage-identity-providers",
|
||||
},
|
||||
{
|
||||
|
@ -267,7 +268,7 @@ export const routes: RoutesFn = (t: TFunction) => [
|
|||
{
|
||||
path: "/:realm/user-federation",
|
||||
component: UserFederationSection,
|
||||
breadcrumb: t("userFederation"),
|
||||
breadcrumb: (t) => t("userFederation"),
|
||||
access: "view-realm",
|
||||
},
|
||||
{
|
||||
|
@ -279,13 +280,13 @@ export const routes: RoutesFn = (t: TFunction) => [
|
|||
{
|
||||
path: "/:realm/user-federation/kerberos/:id",
|
||||
component: UserFederationKerberosSettings,
|
||||
breadcrumb: t("common:settings"),
|
||||
breadcrumb: (t) => t("common:settings"),
|
||||
access: "view-realm",
|
||||
},
|
||||
{
|
||||
path: "/:realm/user-federation/kerberos/new",
|
||||
component: UserFederationKerberosSettings,
|
||||
breadcrumb: t("common:settings"),
|
||||
breadcrumb: (t) => t("common:settings"),
|
||||
access: "view-realm",
|
||||
},
|
||||
{
|
||||
|
@ -297,46 +298,46 @@ export const routes: RoutesFn = (t: TFunction) => [
|
|||
{
|
||||
path: "/:realm/user-federation/ldap/new",
|
||||
component: UserFederationLdapSettings,
|
||||
breadcrumb: t("user-federation:addOneLdap"),
|
||||
breadcrumb: (t) => t("user-federation:addOneLdap"),
|
||||
access: "view-realm",
|
||||
},
|
||||
{
|
||||
path: "/:realm/user-federation/ldap/:id/:tab?",
|
||||
component: UserFederationLdapSettings,
|
||||
breadcrumb: t("common:settings"),
|
||||
breadcrumb: (t) => t("common:settings"),
|
||||
access: "view-realm",
|
||||
},
|
||||
{
|
||||
path: "/:realm/user-federation/ldap/:id/:tab/:mapperId",
|
||||
component: LdapMapperDetails,
|
||||
breadcrumb: t("common:mappingDetails"),
|
||||
breadcrumb: (t) => t("common:mappingDetails"),
|
||||
access: "view-realm",
|
||||
},
|
||||
{
|
||||
path: "/:realm/",
|
||||
component: DashboardSection,
|
||||
breadcrumb: t("common:home"),
|
||||
breadcrumb: (t) => t("common:home"),
|
||||
access: "anyone",
|
||||
},
|
||||
{
|
||||
path: "/:realm/groups/search",
|
||||
component: SearchGroups,
|
||||
breadcrumb: t("groups:searchGroups"),
|
||||
breadcrumb: (t) => t("groups:searchGroups"),
|
||||
access: "query-groups",
|
||||
},
|
||||
{
|
||||
path: "/:realm/groups",
|
||||
component: GroupsSection,
|
||||
breadcrumb: null,
|
||||
access: "query-groups",
|
||||
matchOptions: {
|
||||
exact: false,
|
||||
},
|
||||
access: "query-groups",
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
component: DashboardSection,
|
||||
breadcrumb: t("common:home"),
|
||||
breadcrumb: (t) => t("common:home"),
|
||||
access: "anyone",
|
||||
},
|
||||
{
|
||||
|
|
Loading…
Reference in a new issue