Make sure that the React Router context and useApolloClient return the same ApolloClient instance

.github/workflows/ci.yml

@@ -12,7 +12,7 @@ concurrency:
 
 jobs:
   typescript:
-    name: typescript
+    name: TypeScript check
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v5
@@ -31,7 +31,7 @@ jobs:
       - name: tsc on resulting generated files
         run: yarn run tsc --noEmit
   vitest:
-    name: vitest
+    name: Vitest
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v5
@@ -69,7 +69,7 @@ jobs:
           path: coverage/*
   minitest:
     permissions: write-all
-    name: minitest
+    name: Minitest
     runs-on: ubuntu-latest
     env:
       TEST_DATABASE_URL: postgres://postgres:postgres@localhost/intercode_test
@@ -124,8 +124,78 @@ jobs:
         with:
           name: minitest-coverage
           path: coverage/*
+  minitest-system:
+    permissions: write-all
+    name: Minitest system tests
+    runs-on: ubuntu-latest
+    env:
+      TEST_DATABASE_URL: postgres://postgres:postgres@localhost/intercode_test
+      RAILS_ENV: test
+    services:
+      postgres:
+        image: postgres:18
+        env:
+          POSTGRES_PASSWORD: postgres
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        ports:
+          - 5432:5432
+    steps:
+      - uses: actions/checkout@v5
+      - name: Install libvips42
+        run: sudo apt-get update && sudo apt-get install libvips42
+      - name: Upgrade postgres client utilities
+        run: |
+          sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list'
+          wget -qO- https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo tee /etc/apt/trusted.gpg.d/pgdg.asc &>/dev/null
+          sudo apt-get update
+          sudo apt-get install postgresql-client-18 -y
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          bundler-cache: true
+      - name: Read .node-version
+        id: node-version
+        run: echo "node-version=$(cat .node-version)" >> $GITHUB_OUTPUT
+      - name: install node
+        uses: actions/setup-node@v6
+        with:
+          cache: yarn
+          node-version: ${{ steps.node-version.outputs.node-version }}
+      - name: yarn install
+        run: yarn install
+      - name: build
+        run: yarn run build
+      - name: Database setup
+        run: bundle exec rails db:create db:migrate
+      - name: Run tests
+        run: TERM=xterm-color bundle exec rails test:system
+      - name: Publish Test Report
+        uses: mikepenz/action-junit-report@v6
+        if: always() # always run even if the previous step fails
+        with:
+          check_name: "Minitest System Test Report"
+          report_paths: "test/reports/TEST-*.xml"
+          detailed_summary: true
+          skip_success_summary: true
+      - name: Archive HTML test reports
+        uses: actions/upload-artifact@v5
+        if: always()
+        with:
+          name: minitest-system-reports
+          path: test/html_reports/*
+      - name: Archive coverage report
+        uses: actions/upload-artifact@v5
+        if: always()
+        with:
+          name: minitest-system-coverage
+          path: coverage/*
   docker-build:
     runs-on: ubuntu-latest
+    name: Build containers
     steps:
       - uses: actions/checkout@v5
       - name: Read .node-version
@@ -231,23 +301,30 @@ jobs:
           path: doc-site.tar.gz
   coverage-report:
     runs-on: ubuntu-latest
+    name: Test coverage report
     if: github.actor != 'dependabot[bot]'
     needs:
       - vitest
       - minitest
+      - minitest-system
     steps:
       - name: Download Minitest coverage
         uses: actions/download-artifact@v6
         with:
           name: minitest-coverage
           path: minitest-coverage
+      - name: Download Minitest system test coverage
+        uses: actions/download-artifact@v6
+        with:
+          name: minitest-system-coverage
+          path: minitest-system-coverage
       - name: Download Vitest coverage
         uses: actions/download-artifact@v6
         with:
           name: vitest-coverage
           path: vitest-coverage
       - name: Merge coverage reports
-        run: npx cobertura-merge -o merged-coverage.xml package1=minitest-coverage/coverage.xml package2=vitest-coverage/cobertura-coverage.xml
+        run: npx cobertura-merge -o merged-coverage.xml package1=minitest-coverage/coverage.xml package2=vitest-coverage/cobertura-coverage.xml package3=minitest-system-coverage/coverage.xml
       - name: Generate Coverage Report
         uses: clearlyip/code-coverage-report-action@v6
         id: code_coverage_report_action
@@ -264,11 +341,13 @@ jobs:
           path: code-coverage-results.md
   update-release-draft:
     runs-on: ubuntu-latest
+    name: Update release draft
     if: github.event_name == 'push' && github.event.ref == 'refs/heads/main'
     needs:
       - typescript
       - vitest
       - minitest
+      - minitest-system
       - docker-build
       - doc-site
     outputs:

.rubocop.yml

@@ -1,11 +1,12 @@
 inherit_from: .rubocop_todo.yml
 
-require:
+plugins:
   - rubocop-performance
   - rubocop-rails
   - rubocop-sequel
   - rubocop-factory_bot
   - rubocop-graphql
+  - rubocop-capybara
 
 inherit_gem:
   prettier: rubocop.yml

.rubocop_todo.yml

@@ -175,7 +175,7 @@ Naming/MethodParameterName:
 # ForbiddenPrefixes: is_, has_, have_
 # AllowedMethods: is_a?
 # MethodDefinitionMacros: define_method, define_singleton_method
-Naming/PredicateName:
+Naming/PredicatePrefix:
   Exclude:
     - 'app/models/registration_policy/bucket.rb'
     - 'app/models/run.rb'

Gemfile

@@ -144,6 +144,7 @@ group :development do
   gem "rubocop-factory_bot", require: false
   gem "rubocop-graphql", require: false
   gem "rubocop-rspec", require: false
+  gem "rubocop-capybara", require: false
   gem "prettier", "4.0.4"
   gem "prettier_print"
   gem "syntax_tree"
@@ -171,6 +172,9 @@ group :intercode1_import do
 end
 
 group :test do
+  gem "capybara"
+  gem "cuprite"
+  gem "database_cleaner-active_record"
   gem "minitest-spec-rails"
   gem "minitest-reporters"
   gem "minitest-focus"

Gemfile.lock

@@ -112,6 +112,8 @@ GEM
       uri (>= 0.13.1)
     acts_as_list (0.9.16)
       activerecord (>= 3.0)
+    addressable (2.8.8)
+      public_suffix (>= 2.0.2, < 8.0)
     ahoy_matey (5.4.1)
       activesupport (>= 7.1)
       device_detector (>= 1)
@@ -180,13 +182,29 @@ GEM
       acts_as_list
       cadmus
       rails (>= 5.0.0)
+    capybara (3.40.0)
+      addressable
+      matrix
+      mini_mime (>= 0.1.3)
+      nokogiri (~> 1.11)
+      rack (>= 1.6.0)
+      rack-test (>= 0.6.3)
+      regexp_parser (>= 1.5, < 3.0)
+      xpath (~> 3.2)
     cgi (0.4.2)
     coderay (1.1.3)
     concurrent-ruby (1.3.5)
     connection_pool (2.5.4)
     crass (1.0.6)
     csv (3.3.5)
+    cuprite (0.17)
+      capybara (~> 3.0)
+      ferrum (~> 0.17.0)
     dalli (3.2.8)
+    database_cleaner-active_record (2.2.2)
+      activerecord (>= 5.a)
+      database_cleaner-core (~> 2.0)
+    database_cleaner-core (2.0.1)
     date (3.5.0)
     dead_end (4.0.0)
     debug (1.11.0)
@@ -260,6 +278,12 @@ GEM
       logger
     faraday-net_http (3.4.2)
       net-http (~> 0.5)
+    ferrum (0.17.1)
+      addressable (~> 2.5)
+      base64 (~> 0.2)
+      concurrent-ruby (~> 1.1)
+      webrick (~> 1.7)
+      websocket-driver (~> 0.7)
     ffi (1.17.2-arm64-darwin)
     ffi (1.17.2-x86_64-linux-gnu)
     flamegraph (0.9.5)
@@ -338,6 +362,7 @@ GEM
       net-pop
       net-smtp
     marcel (1.1.0)
+    matrix (0.4.3)
     memory_profiler (1.1.0)
     method_source (1.0.0)
     mini_histogram (0.3.1)
@@ -432,6 +457,7 @@ GEM
     psych (5.2.6)
       date
       stringio
+    public_suffix (7.0.0)
     puma (7.1.0)
       nio4r (~> 2.0)
     pundit (2.5.2)
@@ -527,6 +553,9 @@ GEM
     rubocop-ast (1.48.0)
       parser (>= 3.3.7.2)
       prism (~> 1.4)
+    rubocop-capybara (2.22.1)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.72, >= 1.72.1)
     rubocop-factory_bot (2.28.0)
       lint_roller (~> 1.1)
       rubocop (~> 1.72, >= 1.72.1)
@@ -647,6 +676,8 @@ GEM
     with_advisory_lock (7.0.2)
       activerecord (>= 7.2)
       zeitwerk (>= 2.7)
+    xpath (3.2.0)
+      nokogiri (~> 1.8)
     yard (0.9.37)
     zeitwerk (2.7.3)
 
@@ -672,10 +703,13 @@ DEPENDENCIES
   business_time
   cadmus!
   cadmus_navbar (~> 0.1.0)
+  capybara
   civil_service!
   cloudwatch_scheduler!
   csv
+  cuprite
   dalli
+  database_cleaner-active_record
   dead_end
   debug
   derailed_benchmarks
@@ -732,6 +766,7 @@ DEPENDENCIES
   reverse_markdown
   rollbar
   rubocop (= 1.81.7)
+  rubocop-capybara
   rubocop-factory_bot
   rubocop-graphql
   rubocop-performance

app/javascript/EventsApp/EventPage/EventPageRunCard.tsx

@@ -141,7 +141,7 @@ function EventPageRunCard({
         return response.data?.createMySignup.signup;
       }
     },
-    [event, run, revalidator],
+    [event, run, revalidator, client],
   );
 
   const createSignup = (signupOption: SignupOption) => {

app/javascript/packs/application.tsx

@@ -2,10 +2,7 @@ import 'regenerator-runtime/runtime';
 
 import mountReactComponents from '../mountReactComponents';
 import { StrictMode, use, useMemo } from 'react';
-import AuthenticityTokensManager, {
-  AuthenticityTokensContext,
-  getAuthenticityTokensURL,
-} from 'AuthenticityTokensContext';
+import AuthenticityTokensManager, { getAuthenticityTokensURL } from 'AuthenticityTokensContext';
 import { createBrowserRouter, RouterContextProvider, RouterProvider } from 'react-router';
 import { buildBrowserApolloClient } from 'useIntercodeApolloClient';
 import {
@@ -16,7 +13,6 @@ import {
   sessionContext,
 } from 'AppContexts';
 import { ClientConfigurationQueryData } from 'serverQueries.generated';
-import { ApolloProvider } from '@apollo/client/react';
 import { appRootRoutes } from 'AppRouter';
 
 const manager = new AuthenticityTokensManager(fetch, undefined, getAuthenticityTokensURL());
@@ -76,11 +72,7 @@ function DataModeApplicationEntry({
 
   return (
     <StrictMode>
-      <AuthenticityTokensContext.Provider value={manager}>
-        <ApolloProvider client={client}>
-          <RouterProvider router={router} />
-        </ApolloProvider>
-      </AuthenticityTokensContext.Provider>
+      <RouterProvider router={router} />
     </StrictMode>
   );
 }

app/javascript/root.tsx

@@ -1,22 +1,24 @@
+import { ApolloClient } from '@apollo/client';
 import { ApolloProvider } from '@apollo/client/react';
-import { authenticityTokensManagerContext, clientConfigurationDataContext } from 'AppContexts';
+import { apolloClientContext, authenticityTokensManagerContext, clientConfigurationDataContext } from 'AppContexts';
 import { ProviderStack } from 'AppWrapper';
 import AuthenticityTokensManager, { AuthenticityTokensContext } from 'AuthenticityTokensContext';
 import { ClientConfiguration } from 'graphqlTypes.generated';
-import { StrictMode, useMemo } from 'react';
+import { StrictMode } from 'react';
 import { LoaderFunction, useLoaderData } from 'react-router';
 import { ClientConfigurationQueryData } from 'serverQueries.generated';
-import { buildBrowserApolloClient } from 'useIntercodeApolloClient';
 
 type RootLoaderData = {
   clientConfigurationData: ClientConfigurationQueryData;
   authenticityTokensManager: AuthenticityTokensManager;
+  client: ApolloClient;
 };
 
 export const loader: LoaderFunction = ({ context }) => {
   const clientConfigurationData = context.get(clientConfigurationDataContext);
   const authenticityTokensManager = context.get(authenticityTokensManagerContext);
-  return { clientConfigurationData, authenticityTokensManager } satisfies RootLoaderData;
+  const client = context.get(apolloClientContext);
+  return { clientConfigurationData, client, authenticityTokensManager } satisfies RootLoaderData;
 };
 
 function RootProviderStack({ clientConfiguration }: { clientConfiguration: ClientConfiguration }) {
@@ -31,15 +33,11 @@ function RootProviderStack({ clientConfiguration }: { clientConfiguration: Clien
 
 export default function Root() {
   const loaderData = useLoaderData() as RootLoaderData;
-  const client = useMemo(
-    () => buildBrowserApolloClient(loaderData.authenticityTokensManager),
-    [loaderData.authenticityTokensManager],
-  );
 
   return (
     <StrictMode>
       <AuthenticityTokensContext.Provider value={loaderData.authenticityTokensManager}>
-        <ApolloProvider client={client}>
+        <ApolloProvider client={loaderData.client}>
           <RootProviderStack clientConfiguration={loaderData.clientConfigurationData.clientConfiguration} />
         </ApolloProvider>
       </AuthenticityTokensContext.Provider>

app/models/registration_policy.rb

@@ -142,7 +142,7 @@ def ==(other)
   end
 
   def as_json(*)
-    super.merge(buckets: buckets.as_json(*))
+    super.merge("buckets" => buckets.as_json(*))
   end
 
   def blank?