75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
import {
|
|
KeycloakMasthead,
|
|
KeycloakProvider,
|
|
Translations,
|
|
TranslationsProvider,
|
|
} from "keycloak-masthead";
|
|
import { useMemo } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useHref } from "react-router-dom";
|
|
import { useEnvironment } from "./KeycloakContext";
|
|
import { joinPath } from "../utils/joinPath";
|
|
import { ExternalLinkSquareAltIcon } from "@patternfly/react-icons";
|
|
import { Button } from "@patternfly/react-core";
|
|
|
|
import style from "./header.module.css";
|
|
import { environment } from "../environment";
|
|
|
|
const ReferrerLink = () => {
|
|
const { t } = useTranslation();
|
|
|
|
return environment.referrer_uri ? (
|
|
<Button
|
|
data-testid="referrer-link"
|
|
component="a"
|
|
href={environment.referrer_uri!.replace("_hash_", "#")}
|
|
variant="link"
|
|
icon={<ExternalLinkSquareAltIcon />}
|
|
iconPosition="right"
|
|
isInline
|
|
>
|
|
{t("backTo", { app: environment.referrer })}
|
|
</Button>
|
|
) : null;
|
|
};
|
|
|
|
export const Header = () => {
|
|
const { environment, keycloak } = useEnvironment();
|
|
const { t } = useTranslation();
|
|
|
|
const brandImage = environment.logo || "d4science-logo.png";
|
|
const logoUrl = environment.logoUrl ? environment.logoUrl : "/";
|
|
const internalLogoHref = useHref(logoUrl);
|
|
|
|
// User can indicate that he wants an internal URL by starting it with "/"
|
|
const indexHref = logoUrl.startsWith("/") ? internalLogoHref : logoUrl;
|
|
const translations = useMemo<Translations>(
|
|
() => ({
|
|
avatar: t("avatar"),
|
|
fullName: t("fullName"),
|
|
manageAccount: t("manageAccount"),
|
|
signOut: t("signOut"),
|
|
unknownUser: t("unknownUser"),
|
|
}),
|
|
[t],
|
|
);
|
|
|
|
return (
|
|
<TranslationsProvider translations={translations}>
|
|
<KeycloakProvider keycloak={keycloak}>
|
|
<KeycloakMasthead
|
|
features={{ hasManageAccount: false }}
|
|
showNavToggle
|
|
brand={{
|
|
href: indexHref,
|
|
src: joinPath(environment.resourceUrl, brandImage),
|
|
alt: t("logo"),
|
|
className: style.brand,
|
|
}}
|
|
toolbarItems={[<ReferrerLink key="link" />]}
|
|
/>
|
|
</KeycloakProvider>
|
|
</TranslationsProvider>
|
|
);
|
|
};
|