Add frontend autoformatting and set CI to require formatted code for all languages (#6052)

# Description of Changes
Changes the strategy for autoformatting to reject PRs if they are not
formatted correctly instead of allowing them to merge and then spawning
a new PR to fix the formatting. The old strategy just caused more work
for us because we'd have to manually approve the followup PR and get it
merged, which required 2 reviewers so in practice it rarely got done and
just meant everyone's PRs ended up containing reformatting for unrelated
files, which makes code review unnecessarily difficult. If the PR's code
is not formatted correctly after this PR, a comment will be added
automatically to tell the author how to run the formatter script to fix
their code so it can go in.

This also enables autoformatting for the frontend code, using Prettier.
I've enabled it for pretty much everything in the frontend folder, other
than 3rd party files and files it doesn't make sense for. I also
excluded Markdown because it sounds likely to be more annoying to have
to autoformat the Markdown in the frontend folder but nowhere else. Open
to changing this though if people disagree.

> [!note]
> 
> Advice to reviewers: The first commit contains all of the actual logic
I've introduced (CI changes, Prettier config, etc.)
> The second commit is just the reformatting of the entire frontend
folder.
> The first commit needs proper review, the second one just give it a
spot-check that it's doing what you'd expect.
This commit is contained in:
James Brunton
2026-04-10 17:41:19 +01:00
committed by GitHub
parent 33b2b5827a
commit a3e45bc182
1359 changed files with 57784 additions and 57460 deletions
+31 -27
View File
@@ -1,7 +1,7 @@
import { useState, useEffect } from 'react';
import { isAxiosError } from 'axios';
import apiClient from '@app/services/apiClient';
import type { EndpointAvailabilityDetails } from '@app/types/endpointAvailability';
import { useState, useEffect } from "react";
import { isAxiosError } from "axios";
import apiClient from "@app/services/apiClient";
import type { EndpointAvailabilityDetails } from "@app/types/endpointAvailability";
// Track globally fetched endpoint sets to prevent duplicate fetches across components
const globalFetchedSets = new Set<string>();
@@ -31,12 +31,14 @@ export function useEndpointEnabled(endpoint: string): {
setLoading(true);
setError(null);
const response = await apiClient.get<boolean>(`/api/v1/config/endpoint-enabled?endpoint=${encodeURIComponent(endpoint)}`);
const response = await apiClient.get<boolean>(
`/api/v1/config/endpoint-enabled?endpoint=${encodeURIComponent(endpoint)}`,
);
const isEnabled = response.data;
setEnabled(isEnabled);
} catch (err) {
const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
const errorMessage = err instanceof Error ? err.message : "Unknown error occurred";
setError(errorMessage);
} finally {
setLoading(false);
@@ -71,11 +73,11 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const fetchAllEndpointStatuses = async (force = false) => {
const endpointsKey = [...endpoints].sort().join(',');
const endpointsKey = [...endpoints].sort().join(",");
// Skip if we already fetched these exact endpoints globally
if (!force && globalFetchedSets.has(endpointsKey)) {
console.debug('[useEndpointConfig] Already fetched these endpoints globally, using cache');
console.debug("[useEndpointConfig] Already fetched these endpoints globally, using cache");
const cached = endpoints.reduce(
(acc, endpoint) => {
const cachedDetails = globalEndpointCache[endpoint];
@@ -85,10 +87,10 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
}
return acc;
},
{ status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> }
{ status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> },
);
setEndpointStatus(cached.status);
setEndpointDetails(prev => ({ ...prev, ...cached.details }));
setEndpointDetails((prev) => ({ ...prev, ...cached.details }));
setLoading(false);
return;
}
@@ -104,9 +106,9 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
setError(null);
// Check which endpoints we haven't fetched yet
const newEndpoints = endpoints.filter(ep => !(ep in globalEndpointCache));
const newEndpoints = endpoints.filter((ep) => !(ep in globalEndpointCache));
if (newEndpoints.length === 0) {
console.debug('[useEndpointConfig] All endpoints already in global cache');
console.debug("[useEndpointConfig] All endpoints already in global cache");
const cached = endpoints.reduce(
(acc, endpoint) => {
const cachedDetails = globalEndpointCache[endpoint];
@@ -116,18 +118,20 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
}
return acc;
},
{ status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> }
{ status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> },
);
setEndpointStatus(cached.status);
setEndpointDetails(prev => ({ ...prev, ...cached.details }));
setEndpointDetails((prev) => ({ ...prev, ...cached.details }));
globalFetchedSets.add(endpointsKey);
setLoading(false);
return;
}
// Use batch API for efficiency - only fetch new endpoints
const endpointsParam = newEndpoints.join(',');
const endpointsParam = newEndpoints.join(",");
const response = await apiClient.get<Record<string, EndpointAvailabilityDetails>>(`/api/v1/config/endpoints-availability?endpoints=${encodeURIComponent(endpointsParam)}`);
const response = await apiClient.get<Record<string, EndpointAvailabilityDetails>>(
`/api/v1/config/endpoints-availability?endpoints=${encodeURIComponent(endpointsParam)}`,
);
const statusMap = response.data;
// Update global cache with new results
@@ -149,15 +153,15 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
}
return acc;
},
{ status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> }
{ status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> },
);
setEndpointStatus(fullStatus.status);
setEndpointDetails(prev => ({ ...prev, ...fullStatus.details }));
setEndpointDetails((prev) => ({ ...prev, ...fullStatus.details }));
globalFetchedSets.add(endpointsKey);
} catch (err: unknown) {
// On 401 (auth error), use optimistic fallback instead of disabling
if (isAxiosError(err) && err.response?.status === 401) {
console.warn('[useEndpointConfig] 401 error - using optimistic fallback');
console.warn("[useEndpointConfig] 401 error - using optimistic fallback");
const optimisticStatus = endpoints.reduce(
(acc, endpoint) => {
const optimisticDetails: EndpointAvailabilityDetails = { enabled: true, reason: null };
@@ -166,16 +170,16 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
globalEndpointCache[endpoint] = optimisticDetails;
return acc;
},
{ status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> }
{ status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> },
);
setEndpointStatus(optimisticStatus.status);
setEndpointDetails(prev => ({ ...prev, ...optimisticStatus.details }));
setEndpointDetails((prev) => ({ ...prev, ...optimisticStatus.details }));
setLoading(false);
return;
}
const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
const errorMessage = err instanceof Error ? err.message : "Unknown error occurred";
setError(errorMessage);
console.error('[EndpointConfig] Failed to check multiple endpoints:', err);
console.error("[EndpointConfig] Failed to check multiple endpoints:", err);
// Fallback: assume all endpoints are enabled on error (optimistic)
const optimisticStatus = endpoints.reduce(
@@ -183,12 +187,12 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
const optimisticDetails: EndpointAvailabilityDetails = { enabled: true, reason: null };
acc.status[endpoint] = true;
acc.details[endpoint] = optimisticDetails;
return acc;
return acc;
},
{ status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> }
{ status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> },
);
setEndpointStatus(optimisticStatus.status);
setEndpointDetails(prev => ({ ...prev, ...optimisticStatus.details }));
setEndpointDetails((prev) => ({ ...prev, ...optimisticStatus.details }));
} finally {
setLoading(false);
}
@@ -196,7 +200,7 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
useEffect(() => {
fetchAllEndpointStatuses();
}, [endpoints.join(',')]); // Re-run when endpoints array changes
}, [endpoints.join(",")]); // Re-run when endpoints array changes
return {
endpointStatus,