Add referrer link (#19799)

Closes #19682

js/apps/account-ui/public/locales/en/translation.json

@@ -11,6 +11,7 @@
   "applicationsIntroMessage": "Track and manage your app permission to access your account",
   "applicationType": "Application type",
   "avatar": "Avatar",
+  "backTo": "Back to {{app}}",
   "basic-authentication": "Basic authentication",
   "cancel": "Cancel",
   "choose": "Choose...",

js/apps/account-ui/src/root/Root.tsx

@@ -1,4 +1,4 @@
-import { Page, Spinner } from "@patternfly/react-core";
+import { Button, Page, Spinner } from "@patternfly/react-core";
 import {
   KeycloakMasthead,
   Translations,
@@ -13,11 +13,31 @@ import { environment } from "../environment";
 import { keycloak } from "../keycloak";
 import { joinPath } from "../utils/joinPath";
 import { PageNav } from "./PageNav";
+import { ExternalLinkSquareAltIcon } from "@patternfly/react-icons";
 
 import style from "./Root.module.css";
 
+const ReferrerLink = () => {
+  const { t } = useTranslation();
+  const searchParams = new URLSearchParams(location.search);
+
+  return searchParams.has("referrer_uri") ? (
+    <Button
+      component="a"
+      href={searchParams.get("referrer_uri")!.replace("_hash_", "#")}
+      variant="link"
+      icon={<ExternalLinkSquareAltIcon />}
+      iconPosition="right"
+      isInline
+    >
+      {t("backTo", { app: searchParams.get("referrer") })}
+    </Button>
+  ) : null;
+};
+
 export const Root = () => {
   const { t } = useTranslation();
+
   const translations = useMemo<Translations>(
     () => ({
       avatar: t("avatar"),
@@ -41,7 +61,7 @@ export const Root = () => {
               alt: t("logo"),
               className: style.brand,
             }}
-            dropdownItems={[]}
+            toolbarItems={[<ReferrerLink key="link" />]}
             keycloak={keycloak}
           />
         </TranslationsProvider>

js/libs/keycloak-masthead/src/Masthead.tsx

@@ -32,7 +32,8 @@ type KeycloakMastheadProps = PageHeaderProps & {
   };
   keycloak?: Keycloak;
   kebabDropdownItems?: ReactNode[];
-  dropdownItems: ReactNode[];
+  dropdownItems?: ReactNode[];
+  toolbarItems?: ReactNode[];
 };
 
 const KeycloakMasthead = ({
@@ -45,7 +46,8 @@ const KeycloakMasthead = ({
   } = {},
   keycloak,
   kebabDropdownItems,
-  dropdownItems,
+  dropdownItems = [],
+  toolbarItems,
   ...rest
 }: KeycloakMastheadProps) => {
   const { t } = useTranslation();
@@ -94,6 +96,7 @@ const KeycloakMasthead = ({
                 ]}
               />
             </PageHeaderToolsItem>
+            <PageHeaderToolsItem>{toolbarItems}</PageHeaderToolsItem>
             <PageHeaderToolsItem
               visibility={{
                 default: "hidden",