Migate Run Validators page to react

app/controllers/admin_controller.rb

@@ -33,10 +33,6 @@ def new_results
     @results_validator.validate(@competition.id)
   end
 
-  def check_results
-    with_results_validator
-  end
-
   def check_competition_results
     with_results_validator do
       @competition = competition_from_params
@@ -72,12 +68,6 @@ def with_results_validator
     yield if block_given?
   end
 
-  def do_check_results
-    running_validators do
-      render :check_results
-    end
-  end
-
   def do_check_competition_results
     running_validators do
       uniq_id = @result_validation.competitions.first

app/controllers/panel_controller.rb

@@ -50,6 +50,45 @@ def generate_db_token
     }
   end
 
+  private def validators_for_competition_ids(competition_ids)
+    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)
+    render json: {
+      has_results: results_validator.has_results?,
+      validators: results_validator.validators,
+      infos: results_validator.infos,
+      errors: results_validator.errors,
+      warnings: results_validator.warnings,
+    }
+  end
+
+  private def competition_ids_in_range(range)
+    start_date = range[:startDate]
+    end_date = range[:endDate]
+    ResultValidationForm.competitions_between(start_date, end_date)
+                        .order(:start_date)
+                        .ids
+  end
+
+  def validators_for_competition_list
+    competition_ids = params.require(:competitionIds).split(',')
+    validators_for_competition_ids(competition_ids)
+  end
+
+  def validators_for_competitions_in_range
+    range = JSON.parse(params.require(:competitionRange)).transform_keys(&:to_sym)
+    competition_ids = competition_ids_in_range(range)
+
+    validators_for_competition_ids(competition_ids)
+  end
+
   def panel_page
     panel_page_id = params.require(:id)
     panel_with_panel_page = current_user.panels_with_access&.find { |panel| User.panel_list[panel][:pages].include?(panel_page_id) }

app/views/admin/check_competition_results.html.erb

@@ -5,8 +5,9 @@
     Check existing results for the competition.
   </p>
 
-  <%= render "validator_form", backend_url: competition_admin_run_validators_path %>
-  <%= render "results_submission/check_results_panel", results_validator: @results_validator %>
+  <%= react_component("Panel/pages/RunValidatorsPage/RunValidatorsForm", {
+    competitionIds: [@competition.id],
+  }) %>
 
   <%= render "results_submission/results_preview_panel", results_validator: @results_validator %>
 <% end %>

app/webpacker/components/Panel/PanelPages.jsx

@@ -5,7 +5,6 @@ import {
   subordinateUpcomingCompetitionsUrl,
   generateDbTokenUrl,
   serverStatusPageUrl,
-  runValidatorsUrl,
   createNewComersUrl,
   checkRecordsUrl,
   computeAuxiliaryDataUrl,
@@ -39,6 +38,7 @@ import DownloadVoters from './pages/DownloadVoters';
 import ApprovePictures from './pages/ApprovePictures';
 import EditPersonRequestsPage from './pages/EditPersonRequestsPage';
 import AnonymizationScriptPage from './pages/AnonymizationScriptPage';
+import RunValidatorsForm from './pages/RunValidatorsPage/RunValidatorsForm';
 
 const DELEGATE_HANDBOOK_LINK = 'https://documents.worldcubeassociation.org/edudoc/delegate-handbook/delegate-handbook.pdf';
 
@@ -165,7 +165,7 @@ export default {
   },
   [PANEL_PAGES.runValidators]: {
     name: 'Run Validators',
-    link: runValidatorsUrl,
+    component: RunValidatorsForm,
   },
   [PANEL_PAGES.createNewComers]: {
     name: 'Create New Comers',

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

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react';
+import { Form } from 'semantic-ui-react';
+import { QueryClient, useQuery } from '@tanstack/react-query';
+import UtcDatePicker from '../../../wca/UtcDatePicker';
+import getCompetitionList from './api/getCompetitionList';
+import Loading from '../../../Requests/Loading';
+import Errored from '../../../Requests/Errored';
+
+const RUN_VALIDATORS_QUERY_CLIENT = new QueryClient();
+const MAX_COMPETITIONS_PER_QUERY = 50;
+
+export default function CompetitionRangeSelector({ range, setRange }) {
+  const [startDate, setStartDate] = useState(range?.startDate);
+  const [endDate, setEndDate] = useState(range?.endDate);
+
+  const enableCompetitionListFetch = Boolean(startDate && endDate);
+
+  const {
+    data: competitionList, isLoading, isError, refetch,
+  } = useQuery({
+    queryKey: ['competitionCountInRange'],
+    queryFn: () => getCompetitionList(startDate, endDate, MAX_COMPETITIONS_PER_QUERY),
+    enabled: enableCompetitionListFetch,
+  }, RUN_VALIDATORS_QUERY_CLIENT);
+
+  useEffect(() => {
+    setRange({ startDate, endDate });
+    if (enableCompetitionListFetch) {
+      refetch();
+    }
+  }, [startDate, endDate, setRange, enableCompetitionListFetch, refetch]);
+
+  return (
+    <>
+      <Form.Field
+        label="Start Date"
+        control={UtcDatePicker}
+        showYearDropdown
+        dateFormatOverride="yyyy-MM-dd"
+        dropdownMode="select"
+        isoDate={startDate}
+        onChange={setStartDate}
+      />
+      <Form.Field
+        label="End Date"
+        control={UtcDatePicker}
+        showYearDropdown
+        dateFormatOverride="yyyy-MM-dd"
+        dropdownMode="select"
+        isoDate={endDate}
+        onChange={setEndDate}
+      />
+      {enableCompetitionListFetch && (
+        <>
+          {isLoading && (<Loading />)}
+          {isError && <Errored />}
+          {!isLoading && !isError && (
+            <div>
+              {`The checks will run for ${competitionList.length}${
+                competitionList.length >= MAX_COMPETITIONS_PER_QUERY ? '+' : ''
+              } competitions`}
+            </div>
+          )}
+        </>
+      )}
+    </>
+  );
+}