From eab11255ba280667004aa81f8aa8eea27b51c977 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Tue, 2 May 2023 11:58:56 +0200
Subject: [PATCH] Add referrer link (#19799)

Closes #19682
---
 .../public/locales/en/translation.json        |  1 +
 js/apps/account-ui/src/root/Root.tsx          | 24 +++++++++++++++++--
 js/libs/keycloak-masthead/src/Masthead.tsx    |  7 ++++--
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/js/apps/account-ui/public/locales/en/translation.json b/js/apps/account-ui/public/locales/en/translation.json
index 58a0c3324d..a8be6644f5 100644
--- a/js/apps/account-ui/public/locales/en/translation.json
+++ b/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...",
diff --git a/js/apps/account-ui/src/root/Root.tsx b/js/apps/account-ui/src/root/Root.tsx
index 692df8418f..f0dd578155 100644
--- a/js/apps/account-ui/src/root/Root.tsx
+++ b/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>
diff --git a/js/libs/keycloak-masthead/src/Masthead.tsx b/js/libs/keycloak-masthead/src/Masthead.tsx
index b686106f94..980f36ff43 100644
--- a/js/libs/keycloak-masthead/src/Masthead.tsx
+++ b/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",