Deploy beta to production

src/App.tsx

@@ -21,6 +21,7 @@ import CompetitionPerson from './pages/Competition/Person';
 import CompetitionPersonalBests from './pages/Competition/Person/PersonalBests';
 import { PsychSheetEvent } from './pages/Competition/PsychSheet/PsychSheetEvent';
 import CompetitionRemote from './pages/Competition/Remote';
+import CompetitionRemoteWebhooks from './pages/Competition/Remote/Webhooks';
 import CompetitionResults from './pages/Competition/Results';
 import {
   CompetitionActivity,
@@ -152,10 +153,12 @@ const Navigation = () => {
 
           <Route path="admin" element={<CompetitionAdmin />} />
           <Route path="admin/remote" element={<CompetitionRemote />} />
+          <Route path="admin/webhooks" element={<CompetitionRemoteWebhooks />} />
           <Route path="admin/scramblers" element={<CompetitionScramblerSchedule />} />
           <Route path="admin/stats" element={<CompetitionStats />} />
           <Route path="admin/sum-of-ranks" element={<CompetitionSumOfRanks />} />
           <Route path="remote" element={<CompetitionRedirect to="admin/remote" />} />
+          <Route path="webhooks" element={<CompetitionRedirect to="admin/webhooks" />} />
           <Route path="scramblers" element={<CompetitionRedirect to="admin/scramblers" />} />
           <Route path="stream" element={<CompetitionStreamSchedule />} />
           <Route path="information" element={<CompetitionInformation />} />

src/containers/CompetitionRound/CompetitionRound.test.tsx

@@ -57,6 +57,10 @@ jest.mock('react-i18next', () => ({
         return `Round ${options?.roundNumber}`;
       }
 
+      if (key === 'common.activityCodeToName.group') {
+        return `Group ${options?.groupNumber}`;
+      }
+
       return key;
     },
   }),
@@ -89,7 +93,15 @@ const linkedRoundsCompetition = {
           cutoff: null,
           timeLimit: null,
           advancementCondition: null,
-          results: [],
+          results: [
+            {
+              personId: 1,
+              ranking: 1,
+              attempts: [],
+              best: 1000,
+              average: 1200,
+            },
+          ],
         },
         {
           id: '333-r3',
@@ -195,9 +207,29 @@ describe('CompetitionRoundContainer', () => {
   it('links to results for the selected round', () => {
     renderRound('333-r2');
 
-    expect(screen.getByText('See Results')).toHaveAttribute(
-      'href',
-      '/competitions/TestComp2026/results/333-r2',
+    const resultsLink = screen.getByText('See Results');
+
+    expect(resultsLink).toHaveAttribute('href', '/competitions/TestComp2026/results/333-r2');
+    expect(screen.getByText('Group 1').compareDocumentPosition(resultsLink)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING,
     );
   });
+
+  it('uses shared button spacing for the back link', () => {
+    renderRound('333-r2');
+
+    expect(screen.getByText('Back To Events')).toHaveClass('btn', 'btn-block');
+  });
+
+  it('shows when the selected round has results', () => {
+    renderRound('333-r2');
+
+    expect(screen.getByText('See Results')).toHaveClass('btn-green');
+  });
+
+  it('shows a neutral results link when the selected round has no results yet', () => {
+    renderRound('333-r3');
+
+    expect(screen.getByText('See Results')).toHaveClass('btn-light');
+  });
 });

src/containers/CompetitionRound/CompetitionRound.tsx

@@ -60,6 +60,7 @@ export function CompetitionRoundContainer({
   const rounds = roundActivies.filter((ra) => toRoundAttemptId(ra.activityCode) === roundId);
   const groups = rounds.flatMap((r) => r.childActivities);
   const uniqueGroupCodes = [...new Set(groups.map((g) => g.activityCode))];
+  const hasResults = (round?.results.length ?? 0) > 0;
 
   return (
     <Container>
@@ -79,14 +80,6 @@ export function CompetitionRoundContainer({
             </p>
           )}
           {round && <CutoffTimeLimitPanel round={round} />}
-          {round && (
-            <LinkButton
-              to={`/competitions/${competitionId}/results/${roundId}`}
-              title={t('competition.results.seeResults')}
-              variant="light"
-              LinkComponent={LinkComponent}
-            />
-          )}
         </div>
       </div>
       <ul className="flex flex-col space-y-2 p-2">
@@ -111,12 +104,22 @@ export function CompetitionRoundContainer({
           );
         })}
       </ul>
+      {round && (
+        <div className="space-y-2 p-2">
+          <LinkButton
+            to={`/competitions/${competitionId}/results/${roundId}`}
+            title={t('competition.results.seeResults')}
+            variant={hasResults ? 'green' : 'light'}
+            LinkComponent={LinkComponent}
+          />
+        </div>
+      )}
       <div className="p-2">
-        <LinkComponent
+        <LinkButton
           to={`/competitions/${competitionId}/events/`}
-          className="my-1 flex w-full flex-row rounded-md border border-primary bg-primary p-2 px-1 hover-transition hover:bg-primary-strong group dark:text-gray-100">
-          {t('competition.groups.backToEvents')}
-        </LinkComponent>
+          title={t('competition.groups.backToEvents')}
+          LinkComponent={LinkComponent}
+        />
       </div>
     </Container>
   );

src/containers/MyCompetitions/MyCompetitions.query.ts

@@ -25,12 +25,18 @@ export const useMyCompetitionsQuery = (userId?: number, options: { enabled?: boo
         return undefined;
       }
 
-      const upcoming_competitions = JSON.parse(
-        getLocalStorage('my.upcoming_competitions') || '[]',
-      ) as ApiCompetition[];
-      const ongoing_competitions = JSON.parse(
-        getLocalStorage('my.ongoing_competitions') || '[]',
-      ) as ApiCompetition[];
+      const rawUpcomingCompetitions = getLocalStorage('my.upcoming_competitions');
+      const rawOngoingCompetitions = getLocalStorage('my.ongoing_competitions');
+      if (!rawUpcomingCompetitions && !rawOngoingCompetitions) {
+        return undefined;
+      }
+
+      const upcoming_competitions = JSON.parse(rawUpcomingCompetitions || '[]') as ApiCompetition[];
+      const ongoing_competitions = JSON.parse(rawOngoingCompetitions || '[]') as ApiCompetition[];
+
+      if (!upcoming_competitions.length && !ongoing_competitions.length) {
+        return undefined;
+      }
 
       return { user: user, upcoming_competitions, ongoing_competitions };
     },

src/hooks/useNotifyCompRemoteWebhooks/index.ts

@@ -0,0 +1 @@
+export { useNotifyCompRemoteWebhooks } from './useNotifyCompRemoteWebhooks';

src/hooks/useNotifyCompRemoteWebhooks/useNotifyCompRemoteWebhooks.test.tsx

@@ -0,0 +1,224 @@
+import { MockedProvider, MockedResponse } from '@apollo/client/testing';
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { PropsWithChildren } from 'react';
+import {
+  CreateRemoteWebhookDocument,
+  DeleteRemoteWebhookDocument,
+  RemoteWebhooksDocument,
+  TestEditingRemoteWebhookDocument,
+  TestRemoteWebhookDocument,
+  UpdateRemoteWebhookDocument,
+} from '@/lib/notifyCompRemoteGraphql';
+import { useNotifyCompRemoteWebhooks } from './useNotifyCompRemoteWebhooks';
+
+const competitionId = 'ExampleComp2026';
+
+const webhooksMock = (webhooks: unknown[]): MockedResponse => ({
+  request: {
+    query: RemoteWebhooksDocument,
+    variables: { competitionId },
+  },
+  result: {
+    data: {
+      competition: {
+        __typename: 'Competition',
+        id: competitionId,
+        webhooks,
+      },
+    },
+  },
+});
+
+const createWrapper = (mocks: MockedResponse[]) =>
+  function MockedApolloWrapper({ children }: PropsWithChildren) {
+    return <MockedProvider mocks={mocks}>{children}</MockedProvider>;
+  };
+
+describe('useNotifyCompRemoteWebhooks', () => {
+  it('loads competition webhooks', async () => {
+    const { result } = renderHook(() => useNotifyCompRemoteWebhooks({ competitionId }), {
+      wrapper: createWrapper([
+        webhooksMock([
+          {
+            __typename: 'Webhook',
+            id: 1,
+            method: 'POST',
+            url: 'https://example.com/notify',
+          },
+        ]),
+      ]),
+    });
+
+    await waitFor(() => {
+      expect(result.current.webhooks).toHaveLength(1);
+    });
+
+    expect(result.current.webhooks[0]).toMatchObject({
+      method: 'POST',
+      url: 'https://example.com/notify',
+    });
+  });
+
+  it('creates, updates, and deletes webhooks with NotifyComp variables', async () => {
+    const createVariables = {
+      competitionId,
+      webhook: {
+        method: 'POST' as const,
+        url: 'https://example.com/created',
+      },
+    };
+    const updateVariables = {
+      id: 4,
+      webhook: {
+        method: 'GET' as const,
+        url: 'https://example.com/updated',
+      },
+    };
+
+    const { result } = renderHook(() => useNotifyCompRemoteWebhooks({ competitionId }), {
+      wrapper: createWrapper([
+        webhooksMock([]),
+        {
+          request: {
+            query: CreateRemoteWebhookDocument,
+            variables: createVariables,
+          },
+          result: {
+            data: {
+              createWebhook: {
+                __typename: 'Webhook',
+                id: 4,
+                ...createVariables.webhook,
+              },
+            },
+          },
+        },
+        webhooksMock([
+          {
+            __typename: 'Webhook',
+            id: 4,
+            ...createVariables.webhook,
+          },
+        ]),
+        {
+          request: {
+            query: UpdateRemoteWebhookDocument,
+            variables: updateVariables,
+          },
+          result: {
+            data: {
+              updateWebhook: {
+                __typename: 'Webhook',
+                id: 4,
+                ...updateVariables.webhook,
+              },
+            },
+          },
+        },
+        webhooksMock([
+          {
+            __typename: 'Webhook',
+            id: 4,
+            ...updateVariables.webhook,
+          },
+        ]),
+        {
+          request: {
+            query: DeleteRemoteWebhookDocument,
+            variables: { id: 4 },
+          },
+          result: {
+            data: {
+              deleteWebhook: null,
+            },
+          },
+        },
+        webhooksMock([]),
+      ]),
+    });
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    await act(async () => {
+      await result.current.saveWebhook(createVariables.webhook);
+    });
+    await act(async () => {
+      await result.current.saveWebhook(updateVariables.webhook, 4);
+    });
+    await act(async () => {
+      await result.current.removeWebhook(4);
+    });
+
+    expect(result.current.error).toBeNull();
+  });
+
+  it('tests saved and unsaved webhook settings', async () => {
+    const webhook = {
+      method: 'PUT' as const,
+      url: 'https://example.com/test',
+    };
+    const { result } = renderHook(() => useNotifyCompRemoteWebhooks({ competitionId }), {
+      wrapper: createWrapper([
+        webhooksMock([]),
+        {
+          request: {
+            query: TestRemoteWebhookDocument,
+            variables: { id: 8 },
+          },
+          result: {
+            data: {
+              testWebhook: {
+                __typename: 'WebhookResponse',
+                body: 'ok',
+                status: 200,
+                statusText: 'OK',
+                url: webhook.url,
+              },
+            },
+          },
+        },
+        {
+          request: {
+            query: TestEditingRemoteWebhookDocument,
+            variables: { competitionId, webhook },
+          },
+          result: {
+            data: {
+              testEditingWebhook: {
+                __typename: 'WebhookResponse',
+                body: 'failed',
+                status: 500,
+                statusText: 'Server Error',
+                url: webhook.url,
+              },
+            },
+          },
+        },
+      ]),
+    });
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    await act(async () => {
+      await result.current.testSavedWebhook(8);
+    });
+
+    expect(result.current.testResult).toMatchObject({
+      status: 200,
+      statusText: 'OK',
+    });
+
+    await act(async () => {
+      await result.current.testWebhookSettings(webhook);
+    });
+
+    expect(result.current.testResult).toMatchObject({
+      status: 500,
+      statusText: 'Server Error',
+    });
+  });
+});