Merge pull request #1296 from guardian/rjr-bump-eslint-dependencies

Update es-lint dev dependencies to latest versions

client/__tests__/components/payment/cardFlow.test.tsx

@@ -17,7 +17,7 @@ const executePaymentUpdate = jest.fn((_: NewPaymentMethodDetail) =>
 	Promise.resolve(null),
 );
 
-const stripePaymentMethod: PaymentMethod | unknown = {
+const stripePaymentMethod: Partial<PaymentMethod> = {
 	id: 'stripePaymentMethodId',
 	created: 0,
 	card: {

client/components/helpCentre/liveChat/LiveChat.tsx

@@ -16,6 +16,7 @@ let areAgentsAvailable = false;
 
 const initESW = (
 	gslbBaseUrl: string | null,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Salesforce provides this object
 	liveChatAPI: any,
 	targetElement: HTMLElement,
 	identityID: string,

client/components/mma/MMAPage.tsx

@@ -36,6 +36,7 @@ import { DeliveryAddressUpdate } from './delivery/address/DeliveryAddressForm';
 import { Maintenance } from './maintenance/Maintenance';
 import { MMAPageSkeleton } from './MMAPageSkeleton';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Ophan events are diverse (and unguessable?)
 const record = (event: any) => {
 	if (window.guardian?.ophan?.record) {
 		window.guardian.ophan.record(event);

client/components/mma/cancel/stages/ExecuteCancellation.tsx

@@ -110,7 +110,7 @@ const getCancellationSummaryWithReturnButton = (body: ReactNode) => () =>
 
 const getCaseUpdatingCancellationSummary =
 	(
-		caseId: string | '',
+		caseId: string,
 		productType: ProductTypeWithCancellationFlow,
 		cancelledProductDetail: ProductDetail,
 	) =>

client/components/mma/identity/idapi/avatar.ts

@@ -20,6 +20,7 @@ interface AvatarNotFoundError {
 type AvatarError = AvatarValidationError | AvatarNotFoundError;
 
 const isAvatarAPIErrorResponse = (
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we rely on Avatar returning something; we check to see if it is an error response
 	response: any,
 ): response is AvatarAPIErrorResponse => {
 	if (response.message && response.errors) {

client/components/mma/identity/idapi/user.ts

@@ -79,6 +79,7 @@ interface UserAPIErrorResponse {
 const getOrEmpty = (user: IdapiUserDetails) => (path: string) =>
 	get(user, path, '');
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we check input to see if it's a UserAPIErrorResponse object
 const isErrorResponse = (error: any): error is UserAPIErrorResponse => {
 	return error.status && error.status === 'error';
 };

client/components/mma/identity/publicProfile/AvatarSection.tsx

@@ -32,10 +32,12 @@ const imgCss = css({
 	width: '60px',
 });
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're only assuming the argument object is an error object?
 const isEmptyAvatarError = (e: any): boolean => {
 	return e.type && e.type === ErrorTypes.NOT_FOUND;
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're only assuming the argument object is an error object?
 const errorHandler = (e: any) => {
 	if (isEmptyAvatarError(e)) {
 		return;
@@ -136,6 +138,7 @@ export const AvatarSection: FC<AvatarSectionProps> = (props) => {
 		</div>
 	);
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- the argument object might lack a message attribute
 	const getErrorMessage = (error: any) => {
 		let message;
 		if (error.type && error.type === ErrorTypes.VALIDATION) {

client/components/mma/identity/publicProfile/ProfileFormSection.tsx

@@ -12,6 +12,7 @@ import { textSmall } from '../sharedStyles';
 interface ProfileFormSectionProps {
 	user: User;
 	saveUser: (values: User) => Promise<User>;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're only assuming the onError function's argument is an error object?
 	onError: (error: any) => void;
 	onSuccess: (user: User) => void;
 }

client/components/mma/identity/publicProfile/PublicProfile.tsx

@@ -24,6 +24,7 @@ export const PublicProfile = (_: { path?: string }) => {
 
 	const errorRef = createRef<GenericErrorMessageRef>();
 
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're only assuming the argument object is an error object?
 	const handleGeneralError = (e: any) => {
 		setError(true);
 		Sentry.captureException(e);

client/components/mma/identity/settings/Settings.tsx

@@ -32,6 +32,7 @@ export const Settings = (_: { path?: string }) => {
 		}
 	}, [error]);
 
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're only assuming the argument object is an error object?
 	const handleGeneralError = (e: any) => {
 		setError(true);
 		Sentry.captureException(e);

client/components/mma/identity/settings/SettingsFormSection.tsx

@@ -28,6 +28,7 @@ import { aCss, textSmall } from '../sharedStyles';
 interface SettingsFormProps {
 	user: User;
 	saveUser: (values: User) => Promise<User>;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're only assuming the onError function's argument is an error object?
 	onError: (error: any) => void;
 	onSuccess: (input: User, response: User) => void;
 	onDone: () => void;

client/components/mma/identity/useAsyncSource.ts

@@ -8,6 +8,7 @@ enum ActionType {
 
 interface Action {
 	type: ActionType;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're assuming the payload attribute can contain a range of differently typed things?
 	payload?: any;
 }
 
@@ -19,12 +20,15 @@ enum FetchStatus {
 }
 
 interface ApiFetchState {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're assuming the data attribute can contain a range of differently typed things?
 	data: any;
 	error: string | null;
 	status: FetchStatus;
 }
 
 const ActionFetch = (): Action => ({ type: ActionType.FETCH });
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're only assuming the ActionSuccess function's argument can contain a range of differently typed things?
 const ActionSuccess = (payload: any): Action => ({
 	type: ActionType.SUCCESS,
 	payload,
@@ -68,10 +72,14 @@ const reducer = (state: ApiFetchState, action: Action): ApiFetchState => {
 };
 
 export const useAsyncSource = (
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- the array can contain a range of differently typed things? And the promise is un-type-able?
 	getter: (...args: any[]) => Promise<any>,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're only assuming the errorHandler function's argument is an error object?
 	errorHandler?: (e: any) => void,
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- the array can contain a range of differently typed things?
 ): [ApiFetchState, (...args: any[]) => Promise<ApiFetchState>] => {
 	const [state, dispatch] = useReducer(reducer, initialState);
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're only assuming the doFetch function's argument can contain a range of differently typed things?
 	const doFetch = async (...args: any[]) => {
 		dispatch(ActionFetch());
 		try {

client/components/mma/identity/useConsentOptions.ts

@@ -15,6 +15,7 @@ enum ActionType {
 
 interface Action {
 	type: ActionType;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're assuming the payload attribute can contain a range of differently typed things?
 	payload?: any;
 }
 

client/components/mma/paymentUpdate/FieldWrapper.tsx

@@ -126,6 +126,7 @@ export class FieldWrapper extends React.Component<
 	}
 
 	private validateField =
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're assuming the argument object is an event object?
 		(otherOnChange?: (event: any) => void) =>
 		(field: { error: StripeError }) => {
 			if (otherOnChange) {

client/components/mma/paymentUpdate/NewPaymentMethodDetail.tsx

@@ -8,6 +8,7 @@ export interface NewPaymentMethodDetail {
 	readonly name: PaymentUpdateTypeName;
 	readonly apiUrlPart: PaymentUpdateTypeApiUrlPart;
 	readonly detailToPayloadObject: () => object;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're assuming the matchesResponse argument can be anything?
 	readonly matchesResponse: (response: any) => boolean;
 	readonly subHasExpectedPaymentType: (
 		subscription?: Subscription,

client/components/mma/shared/AsyncLoader.tsx

@@ -121,6 +121,7 @@ export class AsyncLoader<
 		trackEvent({
 			eventCategory: 'asyncLoader',
 			eventAction: 'error',
+			// eslint-disable-next-line @typescript-eslint/no-base-to-string -- Error.toString will output a string
 			eventLabel: error ? error.toString() : undefined,
 		});
 		Sentry.captureException(error);

client/components/mma/shared/asyncComponents/DefaultApiResponseHandler.tsx

@@ -14,7 +14,9 @@ export const TextResponseHandler: ResponseProcessor = (
 
 export function handleResponses(
 	response: Response | Response[],
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're assuming the transformResponse attribute's output can be of multiple types
 	transformResponse: (response: Response) => any,
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we don't know the final output of the promise?
 ): Promise<any> {
 	if (hasBadResponse(response)) {
 		throw new Error('Invalid API response');
@@ -37,7 +39,8 @@ function hasBadResponse(responses: Response | Response[]) {
 	return !responses.ok;
 }
 
-function handleSingleResponse(response: Response, transformResponse: any) {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're assuming the transformResponse argument's output can be of multiple types
+function handleSingleResponse(response: Response, transformResponse: (r: Response) => any) {
 	const locationHeader = response.headers.get('Location');
 	if (response.status === 401 && locationHeader && window !== undefined) {
 		window.location.replace(locationHeader);

client/components/mma/shared/asyncComponents/LoadingComponent.tsx

@@ -5,9 +5,11 @@ import {
 import type { ResponseProcessor } from './ResponseProcessor';
 
 export type LoadingProps = {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- assume we don't know the final output of the promise
 	asyncFetch: () => Promise<any>;
 	responseProcessor: ResponseProcessor;
 	LoadingView: () => React.ReactElement;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- assume we don't know the shape of the data argument
 	LoadedView: (data: any) => React.ReactElement;
 	ErrorView: () => React.ReactElement;
 };
@@ -19,6 +21,7 @@ export function LoadingComponent({
 	LoadedView,
 	ErrorView,
 }: LoadingProps) {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- assume we don't know the final output of useAsyncLoader's returned promise
 	const { data, loadingState } = useAsyncLoader<any>(
 		asyncFetch,
 		responseProcessor,

client/components/mma/shared/asyncComponents/ResponseProcessor.tsx

@@ -1,3 +1,4 @@
 export interface ResponseProcessor {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- assume we don't know the final output of the promise
 	(resp: Response | Response[]): Promise<any>;
 }

client/components/shared/SectionContent.tsx

@@ -84,7 +84,7 @@ const divCss = (hasNav: boolean | undefined) => css`
 
 export const SelectedTopicObjectContext = createContext<
 	Dispatch<SetStateAction<string | undefined>>
->(undefined!); // eslint-disable-line @typescript-eslint/no-non-null-assertion -- // TODO: refactor this var to remove need for disabling eslint rule
+>(undefined!);  
 
 export const SectionContent = (props: SectionContentProps) => {
 	const [selectedTopicId, setSelectedTopicId] = useState<string | undefined>(

client/utilities/hooks/useAsyncLoader.ts

@@ -10,6 +10,7 @@ export enum LoadingState {
 }
 
 export function useAsyncLoader<T>(
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- assume we don't know the final output of the promise
 	asyncFetch: () => Promise<any>,
 	responseProcessor: ResponseProcessor,
 ): {
@@ -29,6 +30,7 @@ export function useAsyncLoader<T>(
 		trackEvent({
 			eventCategory: 'asyncLoader',
 			eventAction: 'error',
+			// eslint-disable-next-line @typescript-eslint/no-base-to-string -- Error.toString will output a string
 			eventLabel: error ? error.toString() : undefined,
 		});
 		Sentry.captureException(error);

client/utilities/stripe.ts

@@ -25,6 +25,7 @@ const stripeScriptHasBeenAddedToPage = (): boolean =>
 	!!document.querySelector("script[src^='https://js.stripe.com']");
 
 export const useStripeSDK = (stripeKey: string) => {
+	// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- can we assume StripeSDK has somehow been given a type of any (otherwise I don't understand what the linter is complaining about)?
 	const [stripeObjects, setStripeObjects] = useState<StripeSDK | null>(null);
 
 	useEffect(() => {

package.json

@@ -65,9 +65,9 @@
     "@cypress/webpack-preprocessor": "5.11.1",
     "@emotion/babel-plugin": "11.9.2",
     "@emotion/jest": "11.9.1",
-    "@guardian/eslint-config-typescript": "1.0.11",
-    "@guardian/eslint-plugin-source-foundations": "15.0.0",
-    "@guardian/eslint-plugin-source-react-components": "19.0.0",
+    "@guardian/eslint-config-typescript": "9.0.2",
+    "@guardian/eslint-plugin-source-foundations": "17.0.1",
+    "@guardian/eslint-plugin-source-react-components": "21.0.1",
     "@guardian/node-riffraff-artifact": "0.2.2",
     "@guardian/prettier": "1.0.0",
     "@guardian/tsconfig": "0.1.6",

server/awsIntegration.ts

@@ -46,6 +46,7 @@ export const CloudFormation = new AWS.CloudFormation(standardAwsConfig);
 
 const CloudWatch = new AWS.CloudWatch(standardAwsConfig);
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- assume we don't know the range of possible types for the detail argument?
 export const handleAwsRelatedError = (message: string, detail?: any) => {
 	log.error(message, detail);
 	Sentry.captureMessage(message);
@@ -75,6 +76,7 @@ export const s3FilePromise = <ConfigInterface>(
 
 		if (s3PromiseResult.Body) {
 			try {
+				// eslint-disable-next-line @typescript-eslint/no-base-to-string -- any errors in the returned Body attribute will be handled by the .catch block
 				const parsed = JSON.parse(s3PromiseResult.Body.toString());
 				const missingProperties = fieldNamesToValidate.filter(
 					(field) => !parsed.hasOwnProperty(field),
@@ -115,6 +117,7 @@ export const s3TextFilePromise = (
 			s3PromiseResult.Body &&
 			s3PromiseResult.ContentType === 'text/plain'
 		) {
+			// eslint-disable-next-line @typescript-eslint/no-base-to-string -- we rely on the S3 object to honour its contract
 			return s3PromiseResult.Body.toString();
 		}
 		handleAwsRelatedError(

server/contactUsApi.ts

@@ -56,6 +56,7 @@ export const contactUsFormHandler = async (req: Request, res: Response) => {
 };
 
 const parseAndValidate = async (
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- assume we don't know the range of possible types for the body argument?
 	body: any,
 ): Promise<ContactUsReq | undefined> => {
 	try {
@@ -92,6 +93,7 @@ const validateFileAttachment = (fileName: string, base64String: string) =>
 	validateBase64FileSize(base64String) &&
 	validateImageFileExtension(fileName);
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- assume we don't know the range of possible types for the body argument?
 const validateContactUsFormBody = async (body: any): Promise<boolean> =>
 	body &&
 	body.topic &&
@@ -157,6 +159,7 @@ const validateTopics = (
 	return true;
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- assume we don't know the range of possible types for the body argument?
 const buildContactUsReqBody = (body: any): ContactUsReq => {
 	const attachment =
 		body.attachment?.name && body.attachment?.contents

server/idapiConfig.ts

@@ -6,6 +6,7 @@ export interface IdapiConfig {
 	accessToken: string;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- assume the config argument could be a range of types?
 const isValidConfig = (config: any): config is IdapiConfig =>
 	config.host && config.accessToken;
 

server/middleware/identityMiddleware.ts

@@ -159,6 +159,7 @@ export const authenticateWithOAuth = async (
 const authenticateWithIdapi: (statusCodeOverride?: number) => RequestHandler =
 	(statusCodeOverride?: number) =>
 	(req: Request, res: Response, next: NextFunction) => {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- assume we don't know the range of possible types for the detail argument?
 		const errorHandler = (message: string, detail?: any) => {
 			handleAwsRelatedError(message, detail);
 			res.redirect('/maintenance');

server/middleware/requestMiddleware.ts

@@ -6,6 +6,7 @@ export interface MockableExpressRequest {
 	path: string;
 	get: (name: string) => string | undefined;
 	header: (name: string) => string | undefined;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- assume we don't know the range of possible types for the query attribute?
 	query: any;
 }
 

server/mpapiConfig.ts

@@ -15,6 +15,7 @@ export const getConfig = async (): Promise<IdapiConfig> => {
 	return config;
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- assume the config argument could be a range of types?
 const isValidConfig = (config: any): config is MpapiConfig =>
 	config.host && config.accessToken;
 

server/oktaConfig.ts

@@ -12,6 +12,7 @@ export interface OktaConfig {
 	cookieSecret: string;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- assume the config argument could be a range of types?
 const isValidConfig = (config: any): config is OktaConfig =>
 	typeof config.useOkta === 'boolean' &&
 	config.orgUrl &&

server/reminders/reminderApi.ts

@@ -160,6 +160,7 @@ const createReminder = (
 	});
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- assume we don't know the range of possible types for the body argument?
 const cancelReminder = (body: any) =>
 	fetch(cancelRemindersEndpoint, {
 		method: 'POST',
@@ -169,6 +170,7 @@ const cancelReminder = (body: any) =>
 		body,
 	});
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- assume we don't know the range of possible types for the body argument?
 const reactivateReminder = (body: any) =>
 	fetch(reactivateRemindersEndpoint, {
 		method: 'POST',

server/routes/idapi.ts

@@ -99,6 +99,7 @@ router.delete(
 	}),
 );
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- assume we don't know the range of possible types for the err argument?
 router.use((err: any, _: Request, res: Response, next: NextFunction) => {
 	if (err.code && err.code === 'EBADCSRFTOKEN') {
 		res.sendStatus(403);

server/stripeSetupIntentsHandler.ts

@@ -96,6 +96,7 @@ export const stripeSetupIntentHandler = async (
 								stripeResponse.status
 							} ${
 								stripeResponse.statusText
+								// eslint-disable-next-line @typescript-eslint/no-base-to-string -- we believe this function will not evaluate to '[object Object'
 							} : ${stripeResponse.text()}`,
 						);
 					}

server/util.ts

@@ -30,6 +30,7 @@ export const csrfValidateMiddleware = csrf({
 });
 
 export const handleError = (
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- assume we don't know the range of possible types for the error attribute?
 	error: any,
 	res: ExpressResponse,
 	next: NextFunction,