Ensure referrer link is shown while navigating

Fixes: #27622
Signed-off-by: Hynek Mlnarik <hmlnarik@redhat.com>

js/apps/account-ui/src/environment.ts

@@ -34,6 +34,10 @@ export type Environment = {
   locale: string;
   /** Feature flags */
   features: Feature;
+  /** Client id of the application to add back link */
+  referrer?: string;
+  /** URI to the referrer application in the back link */
+  referrer_uri?: string;
 };
 
 // Detect the current realm from the URL.
@@ -78,18 +82,26 @@ export { environment };
 function getInjectedEnvironment(): Record<string, string | number | boolean> {
   const element = document.getElementById("environment");
 
-  // If the element cannot be found, return an empty record.
-  if (!element?.textContent) {
-    return {};
-  }
+  let env = {} as Record<string, string | number | boolean>;
 
   // Attempt to parse the contents as JSON and return its value.
   try {
-    return JSON.parse(element.textContent);
+    // If the element cannot be found, return an empty record.
+    if (element?.textContent) {
+      env = JSON.parse(element.textContent);
+    }
   } catch (error) {
     console.error("Unable to parse environment variables.");
   }
 
+  const searchParams = new URLSearchParams(location.search);
+  if (searchParams.has("referrer_uri")) {
+    env["referrer_uri"] = searchParams.get("referrer_uri")!;
+  }
+  if (searchParams.has("referrer")) {
+    env["referrer"] = searchParams.get("referrer")!;
+  }
+
   // Otherwise, return an empty record.
-  return {};
+  return env;
 }

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

@@ -13,22 +13,22 @@ 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();
-  const searchParams = new URLSearchParams(location.search);
 
-  return searchParams.has("referrer_uri") ? (
+  return environment.referrer_uri ? (
     <Button
       data-testid="referrer-link"
       component="a"
-      href={searchParams.get("referrer_uri")!.replace("_hash_", "#")}
+      href={environment.referrer_uri!.replace("_hash_", "#")}
       variant="link"
       icon={<ExternalLinkSquareAltIcon />}
       iconPosition="right"
       isInline
     >
-      {t("backTo", { app: searchParams.get("referrer") })}
+      {t("backTo", { app: environment.referrer })}
     </Button>
   ) : null;
 };

js/apps/account-ui/test/login.ts

@@ -7,8 +7,11 @@ export const login = async (
   username: string,
   password: string,
   realm = DEFAULT_REALM,
+  queryParams?: Record<string, string>,
 ) => {
-  const rootPath = getRootPath(realm);
+  const rootPath =
+    getRootPath(realm) +
+    (queryParams ? "?" + new URLSearchParams(queryParams) : "");
 
   await page.goto(rootPath);
   await page.getByLabel("Username").fill(username);

js/apps/account-ui/test/referrer.spec.ts

@@ -0,0 +1,53 @@
+import { expect, test } from "@playwright/test";
+import { login } from "./login";
+
+test.describe("Signing in with referrer link", () => {
+  // Tests for keycloak account console, section Signing in in Account security
+  test("Should see referrer", async ({ page }) => {
+    const queryParams = {
+      referrer: "my-app",
+      referrer_uri: "http://localhost:3000",
+    };
+    await login(page, "jdoe", "jdoe", "groups", queryParams);
+
+    await expect(page.getByTestId("referrer-link")).toContainText("my-app");
+    await page.getByTestId("accountSecurity").click();
+    await expect(page.getByTestId("account-security/signing-in")).toBeVisible();
+    await expect(page.getByTestId("referrer-link")).toContainText("my-app");
+  });
+
+  // Tests for keycloak account console, section Signing in in Account security
+  test("Should see no referrer", async ({ page }) => {
+    const queryParams = {};
+    await login(page, "jdoe", "jdoe", "groups", queryParams);
+
+    await expect(page.getByTestId("referrer-link")).toBeHidden();
+    await page.getByTestId("accountSecurity").click();
+    await expect(page.getByTestId("account-security/signing-in")).toBeVisible();
+    await expect(page.getByTestId("referrer-link")).toBeHidden();
+  });
+
+  test("Should see no referrer after relogin", async ({ page }) => {
+    const queryParams = {
+      referrer: "my-app",
+      referrer_uri: "http://localhost:3000",
+    };
+    await login(page, "jdoe", "jdoe", "groups", queryParams);
+
+    await expect(page.getByTestId("referrer-link")).toContainText("my-app");
+    await page.getByTestId("accountSecurity").click();
+    await expect(page.getByTestId("account-security/signing-in")).toBeVisible();
+    await expect(page.getByTestId("referrer-link")).toContainText("my-app");
+
+    await page.getByTestId("options").click();
+    await page.getByRole("menuitem", { name: "Sign out" }).click();
+
+    const queryParamsNoReferrer = {};
+    await login(page, "jdoe", "jdoe", "groups", queryParamsNoReferrer);
+
+    await expect(page.getByTestId("referrer-link")).toBeHidden();
+    await page.getByTestId("accountSecurity").click();
+    await expect(page.getByTestId("account-security/signing-in")).toBeVisible();
+    await expect(page.getByTestId("referrer-link")).toBeHidden();
+  });
+});