Merge pull request #1374 from ral-facilities/renovate/major-typescrip…

…t-eslint-monorepo

Update typescript-eslint monorepo to v7 (major)

.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
     'react-app',
     'plugin:react/recommended',
     'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/stylistic',
     'prettier',
     'plugin:cypress/recommended',
   ],

package.json

@@ -4,7 +4,9 @@
   "private": true,
   "resolutions": {
     "@types/react": "17.0.38",
-    "@types/react-dom": "17.0.11"
+    "@types/react-dom": "17.0.11",
+    "@typescript-eslint/eslint-plugin": "7.0.2",
+    "@typescript-eslint/parser": "7.0.2"
   },
   "dependencies": {
     "@emotion/react": "11.11.1",
@@ -111,8 +113,8 @@
     "@types/react-redux": "7.1.20",
     "@types/react-router": "5.1.12",
     "@types/redux-mock-store": "1.0.2",
-    "@typescript-eslint/eslint-plugin": "5.62.0",
-    "@typescript-eslint/parser": "5.62.0",
+    "@typescript-eslint/eslint-plugin": "7.0.2",
+    "@typescript-eslint/parser": "7.0.2",
     "axios-mock-adapter": "1.22.0",
     "concurrently": "8.2.0",
     "cors": "2.8.5",

src/adminPage/adminPage.component.tsx

@@ -21,12 +21,8 @@ export interface AdminPageProps {
 export const getPluginRoutes = (
   plugins: PluginConfig[],
   admin?: boolean
-): {
-  [plugin: string]: string[];
-} => {
-  const pluginRoutes: {
-    [plugin: string]: string[];
-  } = {};
+): Record<string, string[]> => {
+  const pluginRoutes: Record<string, string[]> = {};
 
   plugins.forEach((p) => {
     const isAdmin = admin ? p.admin : !p.admin;
@@ -49,7 +45,7 @@ const AdminPage = (props: AdminPageProps): ReactElement => {
 
   const [tabValue, setTabValue] = React.useState<'maintenance' | 'download'>(
     // allows direct access to a tab when another tab is the default
-    (Object.keys(adminRoutes) as Array<keyof typeof adminRoutes>).find(
+    (Object.keys(adminRoutes) as (keyof typeof adminRoutes)[]).find(
       (key) => adminRoutes[key] === location.pathname
     ) ??
       props.adminPageDefaultTab ??

src/helpPage/helpPage.component.tsx

@@ -66,6 +66,9 @@ export const TableOfContents = (
   // highest level of h that's valid is 2 (as there should only be 1 h1 per page)
   let currLevel = 2;
   let tocHtml = '';
+
+  // ignore the for-of loop rule as NodeList is not iterable
+  // eslint-disable-next-line @typescript-eslint/prefer-for-of
   for (let i = 0; i < helpLinks.length; i++) {
     const h = helpLinks[i];
     // the "h level" is the second character of the header tag i.e. h1 is hLevel 1

src/mainAppBar/mainAppBar.component.tsx

@@ -95,9 +95,9 @@ export const MainAppBar = (
           setLogo(props.plugins[0].logoDarkMode ?? ScigatewayLogo);
           set = true;
         } else {
-          for (let i = 0; i < props.plugins.length; i++) {
-            if (document.getElementById(props.plugins[i].plugin) !== null) {
-              setLogo(props.plugins[i].logoDarkMode ?? ScigatewayLogo);
+          for (const p of props.plugins) {
+            if (document.getElementById(p.plugin) !== null) {
+              setLogo(p.logoDarkMode ?? ScigatewayLogo);
               set = true;
               break;
             }

src/preloader/preloader.component.tsx

@@ -19,9 +19,7 @@ interface PreloaderProps {
 
 type PreloaderCombinedProps = PreloaderStateProps & PreloaderProps;
 
-interface SpinnerStyle {
-  [id: string]: string | number;
-}
+type SpinnerStyle = Record<string, string | number>;
 const spinnerStyle = (index: number): SpinnerStyle => {
   const size = innerRadius + index * 2 * (border + spacing);
 

src/state/actions/loadMicroFrontends.tsx

@@ -23,7 +23,7 @@ const loadReactApp = async (name: string) => {
   return (window as any)[name];
 };
 
-export const singleSpaPluginRoutes: { [name: string]: string[] } = {};
+export const singleSpaPluginRoutes: Record<string, string[]> = {};
 
 async function loadApp(name: string, appURL: string) {
   await runScript(appURL);

src/state/reducers/createReducer.tsx

@@ -5,10 +5,7 @@ interface Action {
   payload?: any;
 }
 
-function createReducer(
-  initialState: any,
-  handlers: { [id: string]: any }
-): any {
+function createReducer(initialState: any, handlers: Record<string, any>): any {
   return function reducer(state: any = initialState, action: Action) {
     if (action && Object.prototype.hasOwnProperty.call(handlers, action.type)) {
       return handlers[action.type](state, action.payload);

src/state/scigateway.types.tsx

@@ -68,17 +68,13 @@ export interface AddNotificationsPayload {
   notifications: NotificationPayload[];
 }
 
-export interface AppStrings {
-  [id: string]: string;
-}
+export type AppStrings = Record<string, string>;
 
 export interface ConfigureStringsPayload {
   res: ApplicationStrings;
 }
 
-export interface ApplicationStrings {
-  [section: string]: AppStrings;
-}
+export type ApplicationStrings = Record<string, AppStrings>;
 
 export interface FeatureSwitchesPayload {
   switches: FeatureSwitches;
@@ -141,9 +137,7 @@ export interface PluginConfig {
   helpSteps?: { target: string; content: string }[];
 }
 
-export interface GroupedPlugins {
-  [section: string]: PluginConfig[];
-}
+export type GroupedPlugins = Record<string, PluginConfig[]>;
 
 export interface LoginPayload {
   username: string;