Migate Run Validators page to react #10652

danieljames-dj · 2025-01-19T03:40:42Z

This is part of migrating all panel pages to react

gregorbg · 2025-01-20T12:33:29Z

app/controllers/panel_controller.rb

+    validators = params.require(:selectedValidators).split(',').map(&:constantize)
+    apply_fix_when_possible = params.require(:applyFixWhenPossible)
+
+    results_validator = ResultsValidators::CompetitionsResultsValidator.new(
+      validators,
+      check_real_results: true,
+      apply_fixes: apply_fix_when_possible,
+    )
+    results_validator.validate(competition_ids)


As useful as constantize is, you gotta be careful with when and how you use it because it can potentially lead to vulnerabilities. In this context, I'm wondering: Why didn't you use the existing result_validation_form.rb that is also used in the previous running_validators hook?

I didn't use the result_validation_form.rb because it was having too many things. I agree those were good, but I feel that if I forcefully use that model, it may not be so clean. So just took the above two lines from that.

I just now saw couple of validations from the model which are also relevant, I've now implemented those validations in the client side.

I understand the risk of constantize, I now see how the result_validation_form is doing it - I have now changed to a similar logic, so no more use of constantize.

Also, now I think technically result_validation_form.rb is not needed anymore as it was used to support the rails ERB code, and that code is no longer there. So I've removed result_validation_form.rb after making necessary changes.

gregorbg · 2025-01-20T12:35:47Z

app/webpacker/components/Panel/pages/RunValidatorsPage/CompetitionRangeSelector.jsx

+  const {
+    data: competitionList, isLoading, isError, refetch,
+  } = useQuery({
+    queryKey: ['competitionCountInRange'],


The startDate and endDate need to be included in the queryKey. Otherwise, the query will never be refetched when the dates change, and the old number will persist.

For your basic understanding, you can think of queryKey as a cache key that controls the "cache" of the network traffic, to make sure that the data is only refetched when needed. (The real implementation is a bit more complex than that, but as a rule of thumb the cache comparison works.)

Done, thanks for the info.

gregorbg · 2025-01-20T12:39:21Z

app/webpacker/components/Panel/pages/RunValidatorsPage/api/getCompetitionList.js

+
+export default async function getCompetitionList(startDate, endDate, maxLimit) {
+  const { data } = await fetchJsonOrError(
+    `${apiV0Urls.competitions.listIndex}?start=${startDate}&end=${endDate}&per_page=${maxLimit}`,


Why are you not using the admin_validation_competitions_path URL from the old jQuery form?
Don't get me wrong, I would love it if we can switch to (semi-)public APIs, but I just really want to make sure they return the same results.

One advantage of a custom path would be that you can serialize only the names, and avoid sending (or even loading from the DB) any unnecessary extra data.

I didn't think of the admin_validation_competitions_path actually. But as part of one more cleanup, I actually removed ResultValidationForm, and hence all it's usages which includes admin_validation_competitions_path as well. But I've now created a new API to fetch the count of competitions. Hope that is fine.

gregorbg · 2025-01-20T12:41:19Z

app/webpacker/components/Panel/pages/RunValidatorsPage/CompetitionRangeSelector.jsx

+  useEffect(() => {
+    setRange({ startDate, endDate });
+    if (enableCompetitionListFetch) {
+      refetch();
+    }
+  }, [startDate, endDate, setRange, enableCompetitionListFetch, refetch]);


This hook definitely needs to go. react-query should only be refetched in rare circumstances, but right here is a basic use-case which should be fixed by adjusting the query key as noted in my comment above.

gregorbg · 2025-01-20T12:42:44Z

app/webpacker/components/Panel/pages/RunValidatorsPage/CompetitionRangeSelector.jsx

+            <div>
+              {`The checks will run for ${competitionList.length}${
+                competitionList.length >= MAX_COMPETITIONS_PER_QUERY ? '+' : ''
+              } competitions`}
+            </div>


Do you really need this wrapping div? In case of doubt, a <> fragment should do

Not needed, correct. Removed it. Thanks.

gregorbg · 2025-01-20T12:50:27Z

app/webpacker/components/Panel/pages/RunValidatorsPage/RunValidatorsForm.jsx

+
+  return (
+    <>
+      <Form onSubmit={runValidators}>


Ah! I think what you want are React-Query Mutations: https://tanstack.com/query/latest/docs/framework/react/guides/mutations

(This also explains why you hard-coded enabled: false above, which definitely still is an anti-pattern.)

Ya looks like useMutation is the correct use-case here. I've changed to useMutation now.

gregorbg · 2025-01-20T12:57:19Z

app/webpacker/components/Panel/pages/RunValidatorsPage/RunValidatorsForm.jsx

+            <Form.Field
+              label="Competition ID(s)"
+              control={IdWcaSearch}
+              name="competitionIds"
+              value={selectedCompetitionIds}
+              onChange={setSelectedCompetitionIds}
+              model={SEARCH_MODELS.competition}
+              multiple
+              required
+            />


Indentation looks a little bit off here? Might just be the GitHub diff though.

Yes it was off, fixed it. Thanks for pointing.

gregorbg · 2025-01-20T13:01:10Z

app/webpacker/components/Panel/pages/RunValidatorsPage/RunValidatorsForm.jsx

+          label={`Apply fix when possible (List of validators with automated fix: ${
+            VALIDATORS_WITH_FIX.map(validatorNameReadable).join(', ')
+          })`}


Bit awkward to have such a (potentially) long list as part of the checkbox label. Can you add them as an extra text paragraph below?

SemUI Header as h4 or h5 with only the subheader and no "real" header should do: https://react.semantic-ui.com/elements/header/#content-subheader

gregorbg · 2025-01-20T13:04:29Z

app/webpacker/components/Panel/pages/RunValidatorsPage/ValidationListView.jsx

+          [
+          <a href={competitionUrl(validationData.competition_id)}>
+            {validationData.competition_id}
+          </a>
+          {'] '}


Why do you need the []? Are they absolutely essential for user communication?

The users are WRT, it will look clean if the competition is added at the beginning of the validation info.

gregorbg · 2025-01-20T13:05:18Z

app/webpacker/components/Panel/pages/RunValidatorsPage/ValidationOutput.jsx

+  if (isFetching) return <Loading />;
+  if (isError) return <Errored />;
+
+  if (!isFetching && !isError && !validationOutput) {


At this point, you already know that !isFetching && !isError will always be true. Otherwise, the code would have returned already. So just checking !validationOutput should be enough.

Oh yes, I missed it for some reason. Changed it.

app/webpacker/components/Panel/pages/RunValidatorsPage/CompetitionRangeSelector.jsx

kr-matthews · 2025-01-21T03:26:18Z

app/webpacker/components/Panel/pages/RunValidatorsPage/ValidationListView.jsx

+  return (
+    <>
+      {Object.entries(listByGroup).map(([group, list]) => (
+        <>


I'm pretty sure the console will be warning you that you need a key here.

The console was filled with warnings and errors nowadays, so I'm not looking at it nowadays. Thanks for pointing it, I've made the change.

app/webpacker/components/Panel/pages/RunValidatorsPage/ValidationListView.jsx

danieljames-dj

Thanks for the detailed review, @gregorbg. One of the main change that I did post last commit is that I removed result_validation_form. I'm not sure if you are against it, but just to strengthen my argument, I like to highlight that the reason I felt to remove result_validation_form is because this was a helper model for the rails UI, and the rails UI no longer exists, and everything done inside result_validation_form can now be done in 2-3 lines.

danieljames-dj · 2025-01-20T16:02:31Z

app/controllers/panel_controller.rb

+    validators = params.require(:selectedValidators).split(',').map(&:constantize)
+    apply_fix_when_possible = params.require(:applyFixWhenPossible)
+
+    results_validator = ResultsValidators::CompetitionsResultsValidator.new(
+      validators,
+      check_real_results: true,
+      apply_fixes: apply_fix_when_possible,
+    )
+    results_validator.validate(competition_ids)


I didn't use the result_validation_form.rb because it was having too many things. I agree those were good, but I feel that if I forcefully use that model, it may not be so clean. So just took the above two lines from that.

I just now saw couple of validations from the model which are also relevant, I've now implemented those validations in the client side.

I understand the risk of constantize, I now see how the result_validation_form is doing it - I have now changed to a similar logic, so no more use of constantize.

Also, now I think technically result_validation_form.rb is not needed anymore as it was used to support the rails ERB code, and that code is no longer there. So I've removed result_validation_form.rb after making necessary changes.

danieljames-dj · 2025-01-20T16:37:09Z

app/webpacker/components/Panel/pages/RunValidatorsPage/CompetitionRangeSelector.jsx

+  useEffect(() => {
+    setRange({ startDate, endDate });
+    if (enableCompetitionListFetch) {
+      refetch();
+    }
+  }, [startDate, endDate, setRange, enableCompetitionListFetch, refetch]);


danieljames-dj · 2025-01-20T16:40:55Z

app/webpacker/components/Panel/pages/RunValidatorsPage/CompetitionRangeSelector.jsx

+  const {
+    data: competitionList, isLoading, isError, refetch,
+  } = useQuery({
+    queryKey: ['competitionCountInRange'],


Done, thanks for the info.

danieljames-dj · 2025-01-20T16:42:51Z

app/webpacker/components/Panel/pages/RunValidatorsPage/RunValidatorsForm.jsx

+import runValidatorsForCompetitionsInRange from './api/runValidatorsForCompetitionsInRange';
+import ValidationOutput from './ValidationOutput';
+
+const validatorNameReadable = (validatorName) => validatorName.split('::')[1];


I have changed the logic for the validator name, so this is no longer there.

danieljames-dj · 2025-01-20T16:45:13Z

app/webpacker/components/Panel/pages/RunValidatorsPage/ValidationListView.jsx

+          [
+          <a href={competitionUrl(validationData.competition_id)}>
+            {validationData.competition_id}
+          </a>
+          {'] '}


The users are WRT, it will look clean if the competition is added at the beginning of the validation info.

danieljames-dj · 2025-01-26T13:57:29Z

app/webpacker/components/Panel/pages/RunValidatorsPage/RunValidatorsForm.jsx

+    queryKey: ['competitionCountInRange'],
+    queryFn: runValidatorsForCompetitions,


Ya it was a copy-paste, I forgot to change the key. I've anyway changed to useMutation as you suggested, so no longer relevant.

danieljames-dj · 2025-01-26T13:57:36Z

app/webpacker/components/Panel/pages/RunValidatorsPage/RunValidatorsForm.jsx

+  } = useQuery({
+    queryKey: ['competitionCountInRange'],
+    queryFn: runValidatorsForCompetitions,
+    enabled: false,


danieljames-dj · 2025-01-26T13:58:21Z

app/webpacker/components/Panel/pages/RunValidatorsPage/RunValidatorsForm.jsx

+            <Form.Field
+              label="Competition ID(s)"
+              control={IdWcaSearch}
+              name="competitionIds"
+              value={selectedCompetitionIds}
+              onChange={setSelectedCompetitionIds}
+              model={SEARCH_MODELS.competition}
+              multiple
+              required
+            />


Yes it was off, fixed it. Thanks for pointing.

danieljames-dj · 2025-01-26T14:01:32Z

app/webpacker/components/Panel/pages/RunValidatorsPage/RunValidatorsForm.jsx

+          label={`Apply fix when possible (List of validators with automated fix: ${
+            VALIDATORS_WITH_FIX.map(validatorNameReadable).join(', ')
+          })`}


danieljames-dj · 2025-01-26T14:03:00Z

app/webpacker/components/Panel/pages/RunValidatorsPage/ValidationOutput.jsx

+  if (isFetching) return <Loading />;
+  if (isError) return <Errored />;
+
+  if (!isFetching && !isError && !validationOutput) {


Oh yes, I missed it for some reason. Changed it.

github-actions bot assigned danieljames-dj Jan 19, 2025

danieljames-dj force-pushed the run-validators branch from 900e926 to f0412cb Compare January 19, 2025 03:43

gregorbg requested changes Jan 20, 2025

View reviewed changes

kr-matthews reviewed Jan 21, 2025

View reviewed changes

danieljames-dj commented Jan 26, 2025

View reviewed changes

danieljames-dj added 3 commits January 26, 2025 19:48

Migate Run Validators page to react

7987919

Review changes

55fe397

Review changes

0468c2f

danieljames-dj force-pushed the run-validators branch from 6553fc2 to 0468c2f Compare January 26, 2025 14:18

danieljames-dj added 2 commits January 26, 2025 19:49

Rebase

34a7662

rubocop fix

84f85c7

danieljames-dj mentioned this pull request Jan 28, 2025

Migrate Create newcomers entry page to react #10732

Open

		queryKey: ['competitionCountInRange'],
		queryFn: runValidatorsForCompetitions,

Migate Run Validators page to react #10652

Are you sure you want to change the base?

Migate Run Validators page to react #10652

Conversation

danieljames-dj commented Jan 19, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

danieljames-dj left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment