mirror of
https://github.com/keycloak/keycloak.git
synced 2026-04-26 00:30:35 -04:00
3cba5a34a9
* refactor(admin-ui): replace use-react-router-breadcrumbs with React Router native useMatches Replace the third-party `use-react-router-breadcrumbs` package with React Router v6's built-in `useMatches()` hook for breadcrumb rendering. Since the Admin UI already uses `createHashRouter` (data router API), `useMatches()` is available and provides access to route `handle` data at each matched route level. Changes: - Move `breadcrumb` property from route objects into `handle` across all 89 route definitions, making it accessible via `useMatches()` - Update `AppRouteObjectHandle` type to include the optional `breadcrumb` property - Remove `breadcrumb` from `AppRouteObject` interface (no longer a top-level route property) - Rewrite `PageBreadCrumbs` component to use `useMatches()` instead of `useBreadcrumbs()` from the third-party library - Remove `use-react-router-breadcrumbs` dependency from package.json - Update pnpm-lock.yaml Closes #19309 Signed-off-by: Pierluigi Lenoci <pierluigi.lenoci@gmail.com> Signed-off-by: Alexander Schwartz <alexander.schwartz@ibm.com> Co-authored-by: Alexander Schwartz <alexander.schwartz@ibm.com> |
||
|---|---|---|
| .. | ||
| maven-resources | ||
| maven-resources-community/theme/keycloak.v2/admin/messages | ||
| public | ||
| src | ||
| test | ||
| .gitignore | ||
| CONTRIBUTING.md | ||
| package.json | ||
| playwright.config.ts | ||
| pom.xml | ||
| README.md | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
Keycloak Admin UI
This project is the next generation of the Keycloak Admin UI. It is written with React and PatternFly 4 and uses Vite.
Features
Contains all the "pages" from the admin-ui as re-usable components, all the functions to save and the side menu to use in your own build of the admin-ui
Install
npm i @keycloak/keycloak-admin-ui
Usage
To use these pages you'll need to add KeycloakProvider in your component hierarchy to setup what client, realm and url to use.
import { KeycloakProvider } from "@keycloak/keycloak-ui-shared";
//...
<KeycloakProvider environment={{
authServerUrl: "http://localhost:8080",
realm: "master",
clientId: "security-admin-console"
}}>
{/* rest of you application */}
</KeycloakProvider>
Translation
For the translation we use react-i18next you can set it up as described on their website.
If you want to use the translations that are provided then you need to add i18next-fetch-backend to your project and add:
backend: {
loadPath: `http://localhost:8180/resources/master/admin/{{lng}}`,
parse: (data: string) => {
const messages = JSON.parse(data);
return Object.fromEntries(
messages.map(({ key, value }) => [key, value])
);
},
},
to the i18next config object.
Building
To build a library instead of an app you need to add the LIB=true environment variable.
LIB=true pnpm run build