Fix SendouQ preview buttons showing

app/features/sendouq/components/GroupCard.tsx

@@ -92,6 +92,9 @@ export function GroupCard({
 		? resolveFutureMatchModes(ownGroup, group)
 		: null;
 
+	// while previewing the queue the viewer has no group of their own to act with
+	const actionToShow = ownGroup ? action : undefined;
+
 	return (
 		<GroupCardContainer
 			groupId={group.id}
@@ -214,27 +217,32 @@ export function GroupCard({
 				{group.skillDifference ? (
 					<GroupSkillDifference skillDifference={group.skillDifference} />
 				) : null}
-				{action || suggestable || trail ? (
+				{actionToShow || suggestable || trail ? (
 					<div className="stack xs items-center">
 						<div className="stack sm horizontal items-center justify-center">
-							{action ? (
+							{actionToShow ? (
 								<ActionButton
 									schema={lookingSchema}
 									action={
-										action === "MATCH_UP_RECHALLENGE" ? "MATCH_UP" : action
+										actionToShow === "MATCH_UP_RECHALLENGE"
+											? "MATCH_UP"
+											: actionToShow
 									}
 									fields={{ targetGroupId: group.id }}
 									size="small"
-									variant={action === "UNLIKE" ? "destructive" : undefined}
+									variant={
+										actionToShow === "UNLIKE" ? "destructive" : undefined
+									}
 									testId="group-card-action-button"
 								>
-									{action === "MATCH_UP" || action === "MATCH_UP_RECHALLENGE"
+									{actionToShow === "MATCH_UP" ||
+									actionToShow === "MATCH_UP_RECHALLENGE"
 										? t("q:looking.groups.actions.startMatch")
-										: action === "LIKE" && !group.members
+										: actionToShow === "LIKE" && !group.members
 											? t("q:looking.groups.actions.challenge")
-											: action === "LIKE"
+											: actionToShow === "LIKE"
 												? t("q:looking.groups.actions.invite")
-												: action === "GROUP_UP"
+												: actionToShow === "GROUP_UP"
 													? t("q:looking.groups.actions.groupUp")
 													: t("q:looking.groups.actions.undo")}
 								</ActionButton>

e2e/pages/sendouq/sendouq-looking-page.ts

@@ -1,5 +1,8 @@
 import type { Page } from "@playwright/test";
-import { SENDOUQ_LOOKING_PAGE } from "~/utils/urls";
+import {
+	SENDOUQ_LOOKING_PAGE,
+	SENDOUQ_LOOKING_PREVIEW_PAGE,
+} from "~/utils/urls";
 import { navigate, submit } from "../../helpers/playwright";
 import { GroupCard } from "./group-card";
 
@@ -12,6 +15,7 @@ export class SendouQLookingPage {
 		this.locators = {
 			groupCards: page.getByTestId("sendouq-group-card"),
 			undoButtons: page.getByRole("button", { name: "Undo" }),
+			actionButtons: page.getByTestId("group-card-action-button"),
 			suggestButtons: page.getByTestId("group-card-suggest-button"),
 		};
 	}
@@ -20,6 +24,11 @@ export class SendouQLookingPage {
 		await navigate({ page: this.page, url: SENDOUQ_LOOKING_PAGE });
 	}
 
+	/** Opens the supporter only view of the queue, without being in it. */
+	async gotoPreview() {
+		await navigate({ page: this.page, url: SENDOUQ_LOOKING_PREVIEW_PAGE });
+	}
+
 	/** The own group's card, always the first one on the page. */
 	get ownGroupCard() {
 		return this.groupCard(0);

e2e/sendouq.spec.ts

@@ -192,6 +192,46 @@ test.describe("SendouQ", () => {
 		await isNotVisible(looking.locators.suggestButtons);
 	});
 
+	test("Previewing the queue shows the groups without any way to act on them", async ({
+		page,
+		factories,
+	}) => {
+		const supporter = await factories.UserFactory.create(null, {
+			patronTier: 2,
+		});
+		const [soloQueuer] = await factories.UserFactory.createMany(1);
+		const fullGroupMembers =
+			await factories.UserFactory.createMany(FULL_GROUP_SIZE);
+		await factories.SQGroupFactory.create({ memberUserIds: [soloQueuer.id] });
+		await factories.SQGroupFactory.create({
+			memberUserIds: fullGroupMembers.map((member) => member.id),
+		});
+
+		await impersonate(page, supporter.id);
+
+		const looking = new SendouQLookingPage(page);
+		await looking.gotoPreview();
+
+		await expect(looking.locators.groupCards).toHaveCount(2);
+		// without a group of their own there is nothing to invite, challenge or suggest with
+		await isNotVisible(looking.locators.actionButtons);
+		await isNotVisible(looking.locators.suggestButtons);
+	});
+
+	test("Previewing the queue is only for supporters", async ({
+		page,
+		factories,
+	}) => {
+		const [user] = await factories.UserFactory.createMany(1);
+
+		await impersonate(page, user.id);
+
+		const looking = new SendouQLookingPage(page);
+		await looking.gotoPreview();
+
+		await expect(page).toHaveURL(SENDOUQ_PAGE);
+	});
+
 	test("Ready check flow - both groups confirm and the match starts", async ({
 		page,
 		factories,