Keycloak

1
import {
2
  KeycloakMasthead,
3
  KeycloakProvider,
4
  Translations,
5
  TranslationsProvider,
6
} from "keycloak-masthead";
7
import { useMemo } from "react";
8
import { useTranslation } from "react-i18next";
9
import { useHref } from "react-router-dom";
10
import { useEnvironment } from "./KeycloakContext";
11
import { joinPath } from "../utils/joinPath";
12
import { ExternalLinkSquareAltIcon } from "@patternfly/react-icons";
13
import { Button } from "@patternfly/react-core";
14

15
import style from "./header.module.css";
16

17
const ReferrerLink = () => {
18
  const { t } = useTranslation();
19
  const searchParams = new URLSearchParams(location.search);
20

21
  return searchParams.has("referrer_uri") ? (
22
    <Button
23
      data-testid="referrer-link"
24
      component="a"
25
      href={searchParams.get("referrer_uri")!.replace("_hash_", "#")}
26
      variant="link"
27
      icon={<ExternalLinkSquareAltIcon />}
28
      iconPosition="right"
29
      isInline
30
    >
31
      {t("backTo", { app: searchParams.get("referrer") })}
32
    </Button>
33
  ) : null;
34
};
35

36
export const Header = () => {
37
  const { environment, keycloak } = useEnvironment();
38
  const { t } = useTranslation();
39

40
  const brandImage = environment.logo || "logo.svg";
41
  const logoUrl = environment.logoUrl ? environment.logoUrl : "/";
42
  const internalLogoHref = useHref(logoUrl);
43

44
  // User can indicate that he wants an internal URL by starting it with "/"
45
  const indexHref = logoUrl.startsWith("/") ? internalLogoHref : logoUrl;
46
  const translations = useMemo<Translations>(
47
    () => ({
48
      avatar: t("avatar"),
49
      fullName: t("fullName"),
50
      manageAccount: t("manageAccount"),
51
      signOut: t("signOut"),
52
      unknownUser: t("unknownUser"),
53
    }),
54
    [t],
55
  );
56

57
  return (
58
    <TranslationsProvider translations={translations}>
59
      <KeycloakProvider keycloak={keycloak}>
60
        <KeycloakMasthead
61
          features={{ hasManageAccount: false }}
62
          showNavToggle
63
          brand={{
64
            href: indexHref,
65
            src: joinPath(environment.resourceUrl, brandImage),
66
            alt: t("logo"),
67
            className: style.brand,
68
          }}
69
          toolbarItems={[<ReferrerLink key="link" />]}
70
        />
71
      </KeycloakProvider>
72
    </TranslationsProvider>
73
  );
74
};
75