Fixes eslint warnings

Author: oharsta

.github/workflows/actions.yml

@@ -31,7 +31,7 @@ jobs:
       - uses: actions/checkout@v6
       - uses: actions/setup-node@v6
         with:
-          node-version: 20
+          node-version: 24.11.0
       - name: Yarn Audit client
         run: yarn audit --level high --groups dependencies
         working-directory: client

.github/workflows/deploy.yml

@@ -76,6 +76,11 @@ jobs:
           server-password: MAVEN_PASSWORD
         if: ${{!( endsWith(steps.versioncheck.outputs.version, '-SNAPSHOT')) }}
 
+      - name: Node
+        uses: actions/setup-node@v6
+        with:
+          node-version: 24.11.0
+
       - name: Deploy with Maven
         run: mvn --batch-mode deploy -DskipTests
         env:

client/build.sh

@@ -2,6 +2,10 @@
 rm -Rf public/bundle*
 rm -Rf target/*
 rm -Rf dist/*
+rm -Rf build/*
 source $NVM_DIR/nvm.sh
 nvm use
-yarn install --force && CI=true yarn test && yarn lint && yarn build
+yarn install --force
+CI=true yarn test
+yarn lint ./src
+yarn build

client/eslint.config.mjs

@@ -1,30 +1,38 @@
 import js from "@eslint/js";
 import globals from "globals";
 import pluginReact from "eslint-plugin-react";
+import react from "eslint-plugin-react";
 import reactHooks from 'eslint-plugin-react-hooks';
-import { defineConfig } from "eslint/config";
+import {defineConfig} from "eslint/config";
 
 export default defineConfig([
-  {
-    files: ["**/*.{js,mjs,cjs,jsx}"],
-    plugins: {
-      js ,
-      'react-hooks': reactHooks
+    {
+        files: ["**/*.{js,mjs,cjs,jsx}"],
+        plugins: {
+            js,
+            'react-hooks': reactHooks,
+            react
+        },
+        extends: ["js/recommended"],
+        languageOptions: {globals: globals.browser},
+        settings: {
+            react: {
+                version: '19.1.1', // or your exact version
+            },
+        },
+
     },
-    extends: ["js/recommended"],
-    languageOptions: { globals: globals.browser }
-  },
-  pluginReact.configs.flat.recommended, // React config first
-  reactHooks.configs.flat.recommended,
-  {
-    rules: {
-      "react/prop-types": "off",
-      "react/no-children-prop": "off",
-      'react-hooks/exhaustive-deps': 'warn',
-      "react/react-in-jsx-scope" : "off",
-      "react-hooks/set-state-in-effect": "warn",
-      "react-hooks/immutability":"off"
+    pluginReact.configs.flat.recommended, // React config first
+    reactHooks.configs.flat.recommended,
+    {
+        rules: {
+            "react/prop-types": "off",
+            "react/no-children-prop": "off",
+            'react-hooks/exhaustive-deps': 'warn',
+            "react/react-in-jsx-scope": "off",
+            "react-hooks/set-state-in-effect": "warn",
+            "react-hooks/immutability": "off"
+        },
     },
-  },
 
 ]);

client/src/locale/en.js

@@ -247,7 +247,7 @@ const en = {
         requestedAuthnContext: "ACR value",
         requestedAuthnContextPlaceHolder: "Choose a ACR value for user stepup...",
         requestedAuthnContextWarning: "To enforce the selected ACR also on the application(s) {{applications}} associated " +
-            "with the role(s) {{roles}}, additional configuration is needed on the eduID identity provider. " +
+            "with the role(s) {{roles}}, additional configuration is needed on the eduID Identity Provider. " +
             "Please contact <a href=\"mailto:support@surfconext.nl\">support@surfconext.nl</a> to request this change.",
         new: "Invite role manager or inviter",
         newInvitation: "Invite inviter",

client/src/pages/App.jsx

@@ -36,7 +36,6 @@ export const App = () => {
     const {user, impersonator, authenticated, reload} = useAppStore(state => state);
 
     useEffect(() => {
-        setLoading(true);
         csrf().then(token => {
             useAppStore.setState(() => ({csrfToken: token.token}));
             configuration()

client/src/pages/Home.jsx

@@ -10,7 +10,6 @@ import {Users} from "../tabs/Users";
 import {Page} from "../components/Page";
 import {Roles} from "../tabs/Roles";
 import {AUTHORITIES, highestAuthority} from "../utils/UserRole";
-import {Loader} from "@surfnet/sds";
 import {Tokens} from "../tabs/Tokens";
 import {ApplicationUsers} from "../tabs/ApplicationUsers";
 import Applications from "../tabs/Applications";
@@ -19,93 +18,72 @@ import {isEmpty} from "../utils/Utils";
 export const Home = () => {
     const {tab = "roles"} = useParams();
     const [currentTab, setCurrentTab] = useState(tab);
-    const [tabs, setTabs] = useState([]);
     const [winking, setWinking] = useState(false);
-    const [loading, setLoading] = useState(true);
 
     const user = useAppStore((state) => state.user)
     const navigate = useNavigate();
 
+    const tabs = [
+        <Page key="roles"
+              name="roles"
+              label={I18n.t("tabs.roles")}>
+            <Roles/>
+        </Page>,
+        (user && user.superUser) ?
+            <Page key="users"
+                  name="users"
+                  label={I18n.t("tabs.users")}>
+                <Users/>
+            </Page> : null,
+        (user && user.superUser) ?
+            <Page key="applications"
+                  name="applications"
+                  label={I18n.t("tabs.applications")}>
+                <Applications/>
+            </Page> : null,
+        (user && !user.superUser && user.institutionAdmin && user.organizationGUID && !isEmpty(user.applications)) ?
+            <Page key="applicationUsers"
+                  name="applicationUsers"
+                  label={I18n.t("tabs.applicationUsers")}>
+                <ApplicationUsers/>
+            </Page> : null,
+        (user && !user.superUser && user.institutionAdmin && user.organizationGUID && !isEmpty(user.applications)) ?
+            <Page key="applications"
+                  name="applications"
+                  label={I18n.t("tabs.applications")}>
+                <Applications/>
+            </Page> : null,
+        (user && (user.superUser || (user.institutionAdmin && user.organizationGUID))) ?
+            <Page key="tokens"
+                  name="tokens"
+                  label={I18n.t("tabs.tokens")}>
+                <Tokens/>
+            </Page> : null
+    ].filter(t => t !== null);
+
     useEffect(() => {
-        if (user) {
-            if (highestAuthority(user) === AUTHORITIES.INVITER) {
-                navigate("/inviter");
-                return;
-            }
-            useAppStore.setState({
-                breadcrumbPath: [
-                    {path: "/home", value: I18n.t("tabs.home")},
-                    {value: I18n.t(`tabs.${currentTab}`)}
-                ]
-            });
-        }
-        const newTabs = [
-            <Page key="roles"
-                  name="roles"
-                  label={I18n.t("tabs.roles")}
-            >
-                <Roles/>
-            </Page>
-        ];
-        if (user && user.superUser) {
-            newTabs.push(
-                <Page key="users"
-                      name="users"
-                      label={I18n.t("tabs.users")}
-                >
-                    <Users/>
-                </Page>);
-            newTabs.push(
-                <Page key="applications"
-                      name="applications"
-                      label={I18n.t("tabs.applications")}
-                >
-                    <Applications/>
-                </Page>
-            );
-        }
-        if (user && !user.superUser && user.institutionAdmin && user.organizationGUID && !isEmpty(user.applications)) {
-            newTabs.push(
-                <Page key="applicationUsers"
-                      name="applicationUsers"
-                      label={I18n.t("tabs.applicationUsers")}
-                >
-                    <ApplicationUsers/>
-                </Page>);
-            newTabs.push(
-                <Page key="applications"
-                      name="applications"
-                      label={I18n.t("tabs.applications")}
-                >
-                    <Applications/>
-                </Page>
-            );
+        if (highestAuthority(user) === AUTHORITIES.INVITER) {
+            navigate("/inviter");
         }
-        if (user && (user.superUser || (user.institutionAdmin && user.organizationGUID))) {
-            newTabs.push(
-                <Page key="tokens"
-                      name="tokens"
-                      label={I18n.t("tabs.tokens")}>
-                    <Tokens/>
-                </Page>);
-        }
-        setTabs(newTabs);
-        setLoading(false);
-    }, [currentTab, user]);// eslint-disable-line react-hooks/exhaustive-deps
+
+    }, [user]);
 
     const tabChanged = (name) => {
         setCurrentTab(name);
         navigate(`/home/${name}`);
+        useAppStore.setState({
+            breadcrumbPath: [
+                {path: "/home", value: I18n.t("tabs.home")},
+                {value: I18n.t(`tabs.${currentTab}`)}
+            ]
+        });
     }
 
     const winkOwl = () => {
         setWinking(true);
         setTimeout(() => setWinking(false), 850);
     }
 
-    if (loading) {
-        return <Loader/>
-    }
     return (
         <div className="home">
             <div className="mod-home-container">

client/src/pages/InvitationForm.jsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from "react";
+import React, {useEffect, useMemo, useState} from "react";
 import {useLocation, useNavigate} from "react-router-dom";
 import {useAppStore} from "../stores/AppStore";
 import I18n from "../locale/I18n";
@@ -13,7 +13,6 @@ import {
 import UserIcon from "@surfnet/sds/icons/functional-icons/id-2.svg";
 import UpIcon from "@surfnet/sds/icons/functional-icons/arrow-up-2.svg";
 import DownIcon from "@surfnet/sds/icons/functional-icons/arrow-down-2.svg";
-import WarningIcon from "@surfnet/sds/icons/functional-icons/alert-triangle.svg";
 import {
     eduidIdentityProvider,
     newInvitation,
@@ -106,6 +105,37 @@ export const InvitationForm = () => {
         useAppStore.setState({breadcrumbPath: breadcrumbPath});
     }, [user]);// eslint-disable-line react-hooks/exhaustive-deps
 
+    const acrWarning = useMemo(() => {
+            if (isEmpty(invitation.requestedAuthnContext) || isEmpty(eduIDIdP) || isEmpty(selectedRoles)) {
+                return null;
+            }
+            //Filter out the roles that are linked to applications that are not present in the mfaEntities of the eduIDIdp
+            //or where the MFA level does not equal the requestedAuthnContext. If the requestedAuthnContext === TransparentAuthnContext,
+            //then we skip the warning
+            const mfaEntities = eduIDIdP.mfaEntities;
+            const acrValue = acrValues[invitation.requestedAuthnContext];
+            const missingEntities = selectedRoles.reduce((acc, role) => {
+                const missingMfaApps = role.applicationMaps
+                    .filter(app => {
+                        const mfa = mfaEntities.find(mfa => mfa.name === app.entityid);
+                        return isEmpty(mfa) || (mfa.level !== acrValue && mfa.level !== acrValues.TransparentAuthnContext);
+                    });
+                if (!isEmpty(missingMfaApps)) {
+                    acc.applications = acc.applications.concat(missingMfaApps.map(app => app[`name:${I18n.locale}`] || app["name:en"]));
+                    acc.roles.push(role.name)
+                }
+                return acc;
+            }, {applications: [], roles: []})
+            if (isEmpty(missingEntities.roles)) {
+                return null;
+            }
+            const roleNames = splitListSemantically(missingEntities.roles, I18n.t("forms.and"));
+            const applicationNames = splitListSemantically(missingEntities.applications, I18n.t("forms.and"));
+            return DOMPurify.sanitize(I18n.t("invitations.requestedAuthnContextWarning",
+                {roles: roleNames, applications: applicationNames}));
+
+        },
+        [invitation.requestedAuthnContext, eduIDIdP, selectedRoles, acrValues])
 
     const setInitialRole = markedRoles => {
         const urlSearchParams = new URLSearchParams(window.location.search);
@@ -255,37 +285,6 @@ export const InvitationForm = () => {
         }
     }
 
-    const renderACRWarnings = () => {
-        if (isEmpty(invitation.requestedAuthnContext) || isEmpty(eduIDIdP) || isEmpty(selectedRoles)) {
-            return null;
-        }
-        //Filter out the roles that are linked to applications that are not present in the mfaEntities of the eduIDIdp
-        //or where the MFA level does not equal the requestedAuthnContext. If the requestedAuthnContext === TransparentAuthnContext,
-        //then we skip the warning
-        const mfaEntities = eduIDIdP.mfaEntities;
-        const acrValue = acrValues[invitation.requestedAuthnContext];
-        const missingEntities = selectedRoles.reduce((acc, role) => {
-            const missingMfaApps = role.applicationMaps
-                .filter(app => {
-                    const mfa = mfaEntities.find(mfa => mfa.name === app.entityid);
-                    return isEmpty(mfa) || (mfa.level !== acrValue && mfa.level !== acrValues.TransparentAuthnContext);
-                });
-            if (!isEmpty(missingMfaApps)) {
-                acc.applications = acc.applications.concat(missingMfaApps.map(app => app[`name:${I18n.locale}`] || app["name:en"]));
-                acc.roles.push(role.name)
-            }
-            return acc;
-        }, {applications: [], roles: []})
-        if (isEmpty(missingEntities.roles)) {
-            return null;
-        }
-        const roleNames = splitListSemantically(missingEntities.roles, I18n.t("forms.and"));
-        const applicationNames = splitListSemantically(missingEntities.applications, I18n.t("forms.and"));
-        const html = DOMPurify.sanitize(I18n.t("invitations.requestedAuthnContextWarning",
-            {roles: roleNames, applications: applicationNames}));
-        return <p className="warning" dangerouslySetInnerHTML={{__html: html}}/>
-    }
-
     const authorityChanged = option => {
         setInvitation({
             ...invitation,
@@ -478,7 +477,8 @@ export const InvitationForm = () => {
                                     clearable={true}
                                     onChange={requestedAuthnContextChanged}
                                 >
-                                    {renderACRWarnings()}
+                                    {acrWarning &&
+                                        <p className="warning" dangerouslySetInnerHTML={{__html: acrWarning}}/>}
                                 </SelectField>}
 
                             {(invitation.intendedAuthority !== AUTHORITIES.GUEST && !isInviter &&