Newly-added problems don't show up in the WTI-UI

[clevengr]

Describe the issue:

If the Admin adds a problem to the contest, the new problem doesn't immediately appear in the WTI-UI "Select Problem" dropdown list (which is implemented by the TypeScript class ProblemSelectorComponent defined in file problem-selector.component.ts).

For example, on the Runs page there is a "Filters" pane which includes a dropdown list of the current problems. If a problem gets added by the Admin, that dropdown should immediately reflect the added problem -- but it doesn't.

To Reproduce:

• Start a PC2 Server using --load sumithello.
• Start a PC2 Admin.
• Start a WTI server.
• Open a browser to the PC2 login page (e.g. "http://localhost:8080").
• Login as a team.
• Click the "Select Problem" dropdown in the "Filters" pane on the Runs page. Note that it displays two problems: hello and sumit.
• On the Admin, select the "problems" tab and add a new contest problem.
• On the team browser, again click the "Select Problem" dropdown.

Expected behavior:

The new problem should appear in the list of selectable problems.

Actual behavior:

The new problem does not appear in the dropdown list.

Environment:

PC2 version 9.10.0-7065 (Dec 2024 Public Release)
Windows 11
Chrome Version 131.0.6778.109 (Official Build) (64-bit)

Additional context:

This issue can also be reproduced by clicking on the "Submit Problem" button (on the Runs page) and observing the "Select Problem" dropdown list on that pane before and after the new problem is added; it can also be reproduced by selecting the "Clarifications" menu and making similar before/after observations on the "Select Problem" dropdown on that page. (This makes sense; "Select Problem" is a [single] shared component; it has the same behavior everywhere).

Important note: switching to another page (e.g. "Scoreboard") and back does cause the Select Problem dropdown to show the added problem; the issue is that the problem-selector component isn't being dynamically updated (but switching to another page and back causes a NEW INSTANCE of the problem-selector component to be constructed, and that new instance queries the server and gets the updated problem list).

It appears that the Select Problem component needs to be modified so that it gets notified when the problem set changes; such a change needs to invoke loadProblems() to get the (new) problem list.