Scrum 112 make current dashboard view more clear by Madoka-Matsuzaki · Pull Request #42 · debatecore/granda-front

Madoka-Matsuzaki · 2026-06-06T20:45:37Z

Overview

This PR addresses the tournament overview dashboard updates as requested, cleanly split into two individual commits corresponding to PR 1 and PR 2 requirements.

Implemented Changes

1. Pull Request 1 Component: Overview Welcome Screen (No Plan Scenario)

Implemented a check for planExists to conditionally render the layout.
When planExists is false, it displays a welcoming overview screen encouraging users to generate a plan, using localizations for the dynamic text.

2. Pull Request 2 Component: Updated Placeholder Panels (Plan Exists Scenario)

Refactored the dashboard view when a plan exists to show exactly 4 informative panels based on the provided specifications:
- Team leaderboard (to be implemented)
- Upcoming debates (to be implemented)
- Event log (to be implemented)
- Tournament rules (to be implemented)
Removed the purely arbitrary filler text (Fictional content!, etc.).
Removed the loading animation (animate-pulse) from these placeholder panels to match the new requirements.

Testing

Verified both scenarios (with and without a plan created) to ensure the layout switches dynamically and correctly.

…ation (PR 2)

Mateusz-Dobrzynski

Internationalize strings instead of hard-coding them.
Change the link color.
Change tournament ID for tournament name in the welcome message.
Fix the logic responsible for changing overview depending on whether the plan exists or not. Create an e2e test testing that logic.
Bump the version number.

Mateusz-Dobrzynski · 2026-06-08T09:18:14Z

+      <div className="flex items-center justify-center min-h-[calc(100vh-5rem)] p-4">
+        <div className="max-w-md w-full rounded border border-stone-700 bg-stone-800/50 p-8 text-center flex flex-col gap-4 shadow-xl">
+          <h1 className="text-2xl font-logo text-stone-100">
+            Welcome to {path}!


Don't you think providing a tournament name instead of an ID would be more user-friendly?

Mateusz-Dobrzynski · 2026-06-08T09:19:14Z

+            To get started, go to{" "}
+            <Link 
+              href={`/${locale}/t/${path}/ladder`} 
+              className="text-amber-500 hover:text-amber-400 underline font-medium"


Also, out of all colors, why is this link amber? This color is not used anywhere across the app. Please change the color to white.

Mateusz-Dobrzynski · 2026-06-08T09:20:56Z

+  let planExists = false; 
+  try {
+    const res = await fetch(`http://localhost:2023/tournaments/${path}/plan`, {
+      cache: "no-store", 
+    });
+    if (res.ok) {
+      planExists = true; 
+    }
+  } catch (error) {
+    console.error("Failed to fetch tournament plan:", error);
+    planExists = false; 
+  }


This piece of logic does not work. The initial welcome view is always presented, even if the plan already exists.

Madoka-Matsuzaki · 2026-06-10T08:24:23Z

Hi Mateusz, thanks for the review. I have resolved all the points requested:

Internationalize strings: Done. Moved hard-coded strings to en.json under overview.
Link color: Done. Changed the amber link to white (text-stone-100).
Tournament ID to name: Done. Fixed it to properly display the full_name.
Fix overview logic & create E2E test: Done. Fixed the logic and added tournament-overview.test.ts using the team's pattern.
Bump version number: Done. Bumped the version to 0.3.14 (merged with latest master).

All CI checks are green now. Please take another look!

Mateusz-Dobrzynski

Ensure tests pass.
Create rich text internationalization.
Use existing functions instead of repeating code.

Mateusz-Dobrzynski · 2026-06-10T08:32:22Z

+          <p className="text-stone-400 text-sm leading-relaxed">
+            {t("get_started_1")}{" "}
+            <Link
+              href={`/${locale}/t/${path}/ladder`}
+              className="text-stone-100 hover:text-stone-300 underline font-medium"
+            >
+              Tournament Ladder
+            </Link>{" "}
+            {t("get_started_2")}
+          </p>


This fragment has an incomplete and technically incorrect internationalization. "Tournament Ladder" is still hard-coded. If you need to internationalize JSX elements, you need to use rich text. You should not split it into get_started_1 and get_started_2.

Mateusz-Dobrzynski · 2026-06-10T08:37:51Z

+    await page.getByRole("link", { name: "Tournament Ladder" }).click();
+    await page.waitForURL(/ladder/);
+
+    await page
+      .getByRole("spinbutton", { name: "Group phase rounds" })
+      .fill("2");
+    await page.getByRole("spinbutton", { name: "Groups count" }).fill("2");
+    await page.locator("#total_teams").fill("8");
+    await page
+      .getByRole("spinbutton", { name: "Total teams Advancing teams" })
+      .fill("4");
+    await page.getByRole("button", { name: "Plan tournament" }).click();
+
+    await expect(
+      page.getByRole("heading", { name: "Tournament Ladder" }),
+    ).toBeVisible();


This is duplicate code. There is a function planTournament in e2eUtils which does that for you. Please use it instead.

Mateusz-Dobrzynski · 2026-06-10T09:01:11Z

+    // THEN
+    await expect(
+      page.getByRole("link", { name: "Tournament Ladder" }),
+    ).toBeVisible();
+  },


This line is failing, perhaps the locator is wrong. Also, link leading to Tournament Ladder should always be visible. If anything, you could click this button and ensure the tournament creation form can be found there.

…tps://github.com/debatecore/granda-front into SCRUM-112-make-current-dashboard-view-more-clear

Mateusz-Dobrzynski

Both tests are still failing. Have you run them to see if they pass? Please examine the errors and ensure the tests pass.

Error: locator.click: Error: strict mode violation: getByRole('link', { name: 'Tournament Ladder' }) resolved to 2 elements:
    1) <a aria-disabled="false" href="/en/t/019eb33c-47ac-7ae3-aaf4-b7eae444c044/ladder" class="flex flex-row items-center gap-2 rounded border border-transparent px-2 py-1 text-stone-200 hover:border-stone-700 hover:bg-stone-700/25 focus:border-stone-700 focus:bg-stone-700/25  ">…</a> aka getByRole('link', { name: 'Tournament Ladder' }).first()
    2) <a href="/en/t/019eb33c-47ac-7ae3-aaf4-b7eae444c044/ladder" class="text-stone-100 hover:text-stone-300 underline font-medium">Tournament Ladder</a> aka getByRole('link', { name: 'Tournament Ladder' }).nth(1)

Call log:
  - waiting for getByRole('link', { name: 'Tournament Ladder' })

Madoka-Matsuzaki · 2026-06-11T09:27:33Z

Thanks for the log. The strict mode violation was due to overlapping link text with the sidebar. I fixed it by using .nth(1).

My Mac (ARM64) hit a Docker platform error (no matching manifest for linux/arm64/v8), so I cannot run tests locally.

The code is pushed. Please check the GitHub CI result.

Mateusz-Dobrzynski · 2026-06-11T11:19:46Z

+            <p className="font-logo">Team leaderboard (to be implemented)</p>
+            <p className="text-sm text-stone-400">
+              The leaderboard will be presented here.
+            </p>
          </div>
+
          <div className="rounded border border-stone-700 h-64 bg-stone-700/25 flex flex-col gap-4 p-4">
-            <p className="font-logo">Visual-only content!</p>
-            <div className="animate-pulse w-full h-full bg-stone-500/25 rounded"></div>
+            <p className="font-logo">Upcoming debates (to be implemented)</p>
+            <p className="text-sm text-stone-400">
+              Information about debates starting soon will be presented here.
+            </p>
          </div>
+
          <div className="rounded border border-stone-700 h-64 bg-stone-700/25 flex flex-col gap-4 p-4">
-            <p className="font-logo">Overflowing content!</p>
-            <div className="animate-pulse w-full h-full bg-stone-500/25 rounded"></div>
+            <p className="font-logo">Event log (to be implemented)</p>
+            <p className="text-sm text-stone-400">
+              Most recent actions performed by the app users will be reported
+              here.
+            </p>
          </div>
+
          <div className="rounded border border-stone-700 h-64 bg-stone-700/25 flex flex-col gap-4 p-4">
-            <p className="font-logo">Scrollable content!</p>
-            <div className="animate-pulse w-full h-full bg-stone-500/25 rounded"></div>
+            <p className="font-logo">Tournament rules (to be implemented)</p>
+            <p className="text-sm text-stone-400">
+              Rules of the tournament will be presented here.
+            </p>


This segment is still not internationalized. Please correct it.

Mateusz-Dobrzynski · 2026-06-11T11:20:39Z

Please remove comments other that GIVEN/WHEN/THEN from this file.

Mateusz-Dobrzynski · 2026-06-11T11:21:06Z

+  "should present the 4 informative placeholder panels after a tournament plan is created",
+  async ({ page }) => {


This test is still failing:

Error: locator.click: Error: strict mode violation: getByRole('link', { name: 'Tournament Ladder' }) resolved to 2 elements: 1) <a aria-disabled="false" href="/en/t/019eb667-b294-7642-8703-90ce26ed8d29/ladder" class="flex flex-row items-center gap-2 rounded border border-transparent px-2 py-1 text-stone-200 hover:border-stone-700 hover:bg-stone-700/25 focus:border-stone-700 focus:bg-stone-700/25 ">…</a> aka getByRole('link', { name: 'Tournament Ladder' }).first() 2) <a href="/en/t/019eb667-b294-7642-8703-90ce26ed8d29/ladder" class="text-stone-100 hover:text-stone-300 underline font-medium">Tournament Ladder</a> aka getByRole('link', { name: 'Tournament Ladder' }).nth(1) Call log: - waiting for getByRole('link', { name: 'Tournament Ladder' })

Mateusz-Dobrzynski · 2026-06-11T11:21:54Z

Also, @Madoka-Matsuzaki, please pull instead of force-pushing my fix away.

…tps://github.com/debatecore/granda-front into SCRUM-112-make-current-dashboard-view-more-clear

Madoka-Matsuzaki · 2026-06-11T13:27:23Z

Thank you for review again and again. I did my best. Please check it.
If it doesn't work, can you check them in person tomorrow?
I'm sorry since I'm pretty beginner for this test. I do not want to stress you to correct me.

Madoka-Matsuzaki added 2 commits June 6, 2026 22:27

feat: implement overview welcome screen when no plan exists (PR 1)

9f956fd

feat: update placeholder panels with informative text and remove anim…

d66240d

…ation (PR 2)

Madoka-Matsuzaki requested a review from Mateusz-Dobrzynski June 6, 2026 20:45

Mateusz-Dobrzynski requested changes Jun 8, 2026

View reviewed changes

Madoka-Matsuzaki added 3 commits June 10, 2026 10:04

refactor: address review comments, add e2e test and bump version

06adf05

merge: resolve conflicts with master and bump version to 0.3.14

2942702

style: format code with prettier

b701d41

fix: use ghcr in testcontainers

8c898a0

Mateusz-Dobrzynski requested changes Jun 10, 2026

View reviewed changes

Madoka-Matsuzaki added 2 commits June 10, 2026 13:16

refactor: address mateusz's feedback on e2e tests and i18n

b0fc92e

Merge branch 'SCRUM-112-make-current-dashboard-view-more-clear' of ht…

8aab456

…tps://github.com/debatecore/granda-front into SCRUM-112-make-current-dashboard-view-more-clear

Mateusz-Dobrzynski requested changes Jun 10, 2026

View reviewed changes

test: fix strict mode violation using .nth(1) for ladder link

effbda4

Madoka-Matsuzaki force-pushed the SCRUM-112-make-current-dashboard-view-more-clear branch from fb6d9a1 to effbda4 Compare June 11, 2026 09:26

test: fix fixtured tournament creation

599144a

Mateusz-Dobrzynski requested changes Jun 11, 2026

View reviewed changes

Madoka-Matsuzaki added 3 commits June 11, 2026 15:10

refactor: i18n for placeholders and clean up test comments

b22e044

Merge branch 'SCRUM-112-make-current-dashboard-view-more-clear' of ht…

d32ec88

…tps://github.com/debatecore/granda-front into SCRUM-112-make-current-dashboard-view-more-clear

refactor: fix strict mode violation in both tests and complete i18n

f1a6e81

Mateusz-Dobrzynski approved these changes Jun 11, 2026

View reviewed changes

Mateusz-Dobrzynski merged commit 75be5f5 into master Jun 11, 2026
2 checks passed

Mateusz-Dobrzynski deleted the SCRUM-112-make-current-dashboard-view-more-clear branch June 11, 2026 18:11

		"should present the 4 informative placeholder panels after a tournament plan is created",
		async ({ page }) => {

Uh oh!

Conversation

Madoka-Matsuzaki commented Jun 6, 2026

Overview

Implemented Changes

1. Pull Request 1 Component: Overview Welcome Screen (No Plan Scenario)

2. Pull Request 2 Component: Updated Placeholder Panels (Plan Exists Scenario)

Testing

Uh oh!

Mateusz-Dobrzynski left a comment • edited by Madoka-Matsuzaki Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Madoka-Matsuzaki commented Jun 10, 2026

Uh oh!

Mateusz-Dobrzynski left a comment • edited by Madoka-Matsuzaki Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Mateusz-Dobrzynski left a comment

Choose a reason for hiding this comment

Uh oh!

Madoka-Matsuzaki commented Jun 11, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Mateusz-Dobrzynski commented Jun 11, 2026

Uh oh!

Madoka-Matsuzaki commented Jun 11, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Mateusz-Dobrzynski left a comment •

edited by Madoka-Matsuzaki

Loading

Mateusz-Dobrzynski left a comment •

edited by Madoka-Matsuzaki

Loading