Fix bugs caught by sonar

AuroraLS3 · AuroraLS3 · commit f88aaa942396 · 2025-08-12T20:00:04.000+03:00
diff --git a/Plan/react/dashboard/src/components/cards/server/graphs/CurrentPlayerbaseCard.jsx b/Plan/react/dashboard/src/components/cards/server/graphs/CurrentPlayerbaseCard.jsx
@@ -16,7 +16,7 @@ export const CurrentPlayerbaseCardWithData = ({data, title}) => {
             <Card.Header>
                 <h6 className="col-text" style={{width: '100%'}}>
                     <Fa icon={faUsers}
-                        className="col-players-activity-index"/> {t(title ? title : 'html.label.currentPlayerbase')}
+                        className="col-players-activity-index"/> {t(title || 'html.label.currentPlayerbase')}
                 </h6>
             </Card.Header>
             <GroupVisualizer groups={data.activity_pie_series} name={t('html.label.players')}/>
diff --git a/Plan/react/dashboard/src/components/graphs/ServerPie.jsx b/Plan/react/dashboard/src/components/graphs/ServerPie.jsx
@@ -51,7 +51,7 @@ const ServerPie = ({colors, series}) => {
             },
             tooltip: {
                 formatter: function () {
-                    return '<b>' + this.point.name + ':</b> ' + formatTimeAmount(this.y) + ' (' + this.percentage.toFixed(2) + '%)';
+                    return '<b>' + this.point.name + ':</b> ' + formatTimeAmount(timePreferences, this.y) + ' (' + this.percentage.toFixed(2) + '%)';
                 }
             },
             series: [pieSeries]
diff --git a/Plan/react/dashboard/src/components/table/KillsTable.jsx b/Plan/react/dashboard/src/components/table/KillsTable.jsx
@@ -108,7 +108,7 @@ export const SimpleKillsTable = ({kills}) => {
         <Scrollable>
             <table className={"table mb-0"}>
                 <tbody>
-                {kills.length ? kills.map((kill, i) => <KillRow key={i} kill={kill}/>) :
+                {kills.length ? kills.map(kill => <KillRow key={JSON.stringify(kill)} kill={kill}/>) :
                     <tr>
                         <td>{t('html.generic.none')}</td>
                         <td>-</td>
diff --git a/Plan/react/dashboard/src/components/theme/ColorBox.jsx b/Plan/react/dashboard/src/components/theme/ColorBox.jsx
@@ -1,10 +1,10 @@
 import React from "react";
-import {getContrastColor} from '../../util/colors';
 import {Col} from 'react-bootstrap';
 import {HoverTrigger, useHoverContext} from "../../hooks/interaction/hoverHook.jsx";
 import {useColorEditContext} from "../../hooks/context/colorEditContextHook.jsx";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faPencil, faTrash} from "@fortawesome/free-solid-svg-icons";
+import {getContrastColor} from "../../util/Color.js";
 
 const Contents = ({name, color}) => {
     const cssColor = color.startsWith('var(') ? color : `var(--color-${name})`;
@@ -13,7 +13,7 @@ const Contents = ({name, color}) => {
     if (name.includes('percent') && name.includes('white')) {
         contrastColor = 'var(--color-night-black)'
     }
-    const {hovered} = useHoverContext();
+    const hovered = useHoverContext();
     const {editColor, deleting, deleteColor} = useColorEditContext();
 
     return (
diff --git a/Plan/react/dashboard/src/components/theme/ColorEditForm.jsx b/Plan/react/dashboard/src/components/theme/ColorEditForm.jsx
@@ -1,21 +1,19 @@
-import React, {forwardRef, useEffect, useRef, useState} from 'react';
+import React, {forwardRef, useEffect, useRef} from 'react';
 import {Col, InputGroup, Row} from "react-bootstrap";
 import {useColorEditContext} from "../../hooks/context/colorEditContextHook.jsx";
 import {useTranslation} from "react-i18next";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {getContrastColor} from "../../util/colors.js";
 import {faCheck, faExclamationTriangle, faPalette, faPlus, faTrash} from "@fortawesome/free-solid-svg-icons";
 import ActionButton from "../input/ActionButton.jsx";
 import DangerButton from "../input/button/DangerButton.jsx";
 import SecondaryActionButton from "../input/button/SecondaryActionButton.jsx";
 import Chrome from "@uiw/react-color-chrome";
 import {GithubPlacement} from '@uiw/react-color-github';
 import Wheel from "@uiw/react-color-wheel";
-import {getColorArrayConverter, getColorConverter} from "../../util/Color.js";
+import {getColorArrayConverter, getColorConverter, getContrastColor} from "../../util/Color.js";
 
 
 const ColorInput = forwardRef(({color, contrastColor, invalid, onChange}, ref) => {
-    const [focused, setFocused] = useState(true);
     const onChangeText = event => {
         onChange(event.target.value);
     }
@@ -43,8 +41,6 @@ const ColorInput = forwardRef(({color, contrastColor, invalid, onChange}, ref) =
                    value={color}
                    aria-invalid={invalid}
                    onChange={onChangeText}
-                   onFocus={() => setFocused(true)}
-                   onBlur={() => setFocused(false)}
             />
             <Row className={"color-selector p-0"}
                  style={{
diff --git a/Plan/react/dashboard/src/components/theme/ExampleSection.jsx b/Plan/react/dashboard/src/components/theme/ExampleSection.jsx
@@ -22,7 +22,7 @@ import {TableUseCase} from "./usecase/TableUseCases.jsx";
 import {formatLabel} from "./UseCase.jsx";
 
 const findExample = (path, examples) => {
-    if (!path || !path.length) return undefined;
+    if (!path?.length) return undefined;
     const found = examples[path];
     if (found) return found;
     return findExample(path.split('.').slice(0, -1).join('.'), examples);
diff --git a/Plan/react/dashboard/src/components/theme/ThemeOption.jsx b/Plan/react/dashboard/src/components/theme/ThemeOption.jsx
@@ -1,6 +1,6 @@
 import React, {useEffect, useRef} from 'react';
-import {ThemeContextProvider, useTheme} from "../../hooks/themeHook.jsx";
-import {getLocallyStoredThemes, ThemeStorageContextProvider} from "../../hooks/context/themeContextHook.jsx";
+import {getLocallyStoredThemes, ThemeContextProvider, useTheme} from "../../hooks/themeHook.jsx";
+import {ThemeStorageContextProvider} from "../../hooks/context/themeContextHook.jsx";
 import {ThemeStyleCss} from "./ThemeStyleCss.jsx";
 import {Card, Col} from "react-bootstrap";
 import logo from "../../Flaticon_circle.png";
diff --git a/Plan/react/dashboard/src/components/theme/ThemeStyleCss.jsx b/Plan/react/dashboard/src/components/theme/ThemeStyleCss.jsx
@@ -1,6 +1,6 @@
 import {addToObject, flattenObject} from '../../util/mutator';
-import {getContrastColor, nameToCssVariable} from '../../util/colors';
-import {getColorConverter} from "../../util/Color.js";
+import {nameToCssVariable} from '../../util/colors';
+import {getColorConverter, getContrastColor} from "../../util/Color.js";
 import {useThemeEditContext} from "../../hooks/context/themeEditContextHook.jsx";
 import {useThemeStorage} from "../../hooks/context/themeContextHook.jsx";
 
diff --git a/Plan/react/dashboard/src/hooks/context/colorEditContextHook.jsx b/Plan/react/dashboard/src/hooks/context/colorEditContextHook.jsx
@@ -1,4 +1,4 @@
-import {createContext, useContext, useState} from "react";
+import {createContext, useContext, useMemo, useState} from "react";
 import {hsvToHex, randomHSVColor} from "../../util/colors.js";
 
 const ColorEditContext = createContext({});
@@ -51,7 +51,8 @@ export const ColorEditContextProvider = ({colors, saveFunction, deleteFunction,
 
     const alreadyExists = previous !== name && !!colors[name];
 
-    return (<ColorEditContext.Provider value={{
+    const sharedState = useMemo(() => {
+        return {
             alreadyExists,
             name,
             color,
@@ -65,7 +66,9 @@ export const ColorEditContextProvider = ({colors, saveFunction, deleteFunction,
             discardEdit,
             editNewColor,
             deleteColor
-        }}>
+        }
+    }, [alreadyExists, name, color, deleting, open]);
+    return (<ColorEditContext.Provider value={sharedState}>
             {children}
         </ColorEditContext.Provider>
     )
diff --git a/Plan/react/dashboard/src/hooks/context/minHeightContextHook.jsx b/Plan/react/dashboard/src/hooks/context/minHeightContextHook.jsx
@@ -1,4 +1,4 @@
-import React, {createContext, useCallback, useContext, useState} from "react";
+import React, {createContext, useCallback, useContext, useMemo, useState} from "react";
 
 const MinHeightContext = createContext();
 
@@ -26,20 +26,22 @@ export const MinHeightProvider = ({children}) => {
         setMinHeightRules(rules => {
             const existingRule = rules[selector];
             const existingHeight = existingRule?.minHeight;
-            const existingNightMode = existingRule?.nightMode;
 
             // Change the height if:
             // - It's taller than existing one
-            // - or if the height of the currently registered one changed (check if nightMode is same)
+            // - or if the height of the currently registered one changed
             const shouldUpdate = !existingHeight || minHeight > existingHeight;
 
             if (!shouldUpdate) return rules;
             return {...rules, [selector]: {minHeight, nightMode, count}};
         });
     }, []);
 
+    const value = useMemo(() => {
+        return {minHeightRules, registerMinHeight, unregisterMinHeight}
+    }, [minHeightRules]);
     return (
-        <MinHeightContext.Provider value={{minHeightRules, registerMinHeight, unregisterMinHeight}}>
+        <MinHeightContext.Provider value={value}>
             <style>
                 {Object.entries(minHeightRules)
                     .map(([selector, opt]) => `.${selector}{min-height:${opt.minHeight}px;}`)
diff --git a/Plan/react/dashboard/src/hooks/context/themeContextHook.jsx b/Plan/react/dashboard/src/hooks/context/themeContextHook.jsx
@@ -1,5 +1,5 @@
 import React, {createContext, useCallback, useContext, useEffect, useMemo, useState} from "react";
-import {useTheme} from "../themeHook.jsx";
+import {getLocallyStoredThemes, useTheme} from "../themeHook.jsx";
 import {fetchTheme} from "../../service/metadataService.js";
 import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
 import {faExclamationTriangle} from "@fortawesome/free-solid-svg-icons";
@@ -8,10 +8,6 @@ import {Trans} from "react-i18next";
 
 const ThemeStorageContext = createContext({});
 
-export const getLocallyStoredThemes = () => {
-    return JSON.parse(window.localStorage.getItem('locally-stored-themes') || '[]');
-}
-
 // Reduce refetching theme inside the theme editor to avoid rate-limit issues.
 const themeCache = {};
 
@@ -77,7 +73,7 @@ export const ThemeStorageContextProvider = ({children}) => {
         window.localStorage.setItem(`locally-stored-themes`, JSON.stringify(locallyStoredThemes));
     }
 
-    const cloneThemeLocally = async (themeToClone, nameAs) => {
+    const cloneThemeLocally = async (themeToClone, name) => {
         let theme;
         if (getLocallyStoredThemes().includes(name)) {
             const found = window.localStorage.getItem(`locally-stored-theme-${name}`);
@@ -103,12 +99,12 @@ export const ThemeStorageContextProvider = ({children}) => {
             theme = response.data;
             themeCache[name] = theme;
         }
-        saveUploadedThemeLocally(nameAs, theme);
+        saveUploadedThemeLocally(name, theme);
         return true;
     }
 
     const reloadTheme = () => {
-        delete themeCache[name];
+        delete themeCache[currentTheme];
         loadTheme(currentTheme);
     }
 
diff --git a/Plan/react/dashboard/src/hooks/context/themeEditContextHook.jsx b/Plan/react/dashboard/src/hooks/context/themeEditContextHook.jsx
@@ -1,5 +1,5 @@
 import React, {createContext, useContext, useMemo, useState} from "react";
-import {getLocallyStoredThemes, useThemeStorage} from "./themeContextHook.jsx";
+import {useThemeStorage} from "./themeContextHook.jsx";
 import {cssVariableToName, nameToCssVariable} from "../../util/colors.js";
 import {flattenObject, recursiveFindAndReplaceValue} from "../../util/mutator.js";
 import {Trans, useTranslation} from "react-i18next";
@@ -8,6 +8,7 @@ import {useAuth} from "../authenticationHook.jsx";
 import {useAlertPopupContext} from "./alertPopupContext.jsx";
 import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
 import {faCheck, faExclamationTriangle} from "@fortawesome/free-solid-svg-icons";
+import {getLocallyStoredThemes} from "../themeHook.jsx";
 
 const ThemeEditContext = createContext({});
 
@@ -287,7 +288,7 @@ export const ThemeEditContextProvider = ({children}) => {
             saveUploadedThemeLocally(name, themeToSave, originalName);
             // Save remotely
             if (authRequired && hasPermission('manage.themes')) {
-                const {data, error} = await saveTheme(name, themeToSave, originalName);
+                const {error} = await saveTheme(name, themeToSave, originalName);
                 if (!error) {
                     deleteThemeLocally(name);
                     addAlert({
diff --git a/Plan/react/dashboard/src/hooks/interaction/graphExtremesContextHook.jsx b/Plan/react/dashboard/src/hooks/interaction/graphExtremesContextHook.jsx
@@ -18,14 +18,13 @@ export const GraphExtremesContextProvider = ({children}) => {
         }, 500);
     }, [setMin, setMax]);
 
-    const extremes = useMemo(() => {
+    const sharedState = useMemo(() => {
         if (min !== undefined && max !== undefined) {
-            return {min, max}
+            return {extremes: {min, max}, onSetExtremes}
         }
-        return undefined;
+        return {onSetExtremes};
     }, [min, max]);
 
-    const sharedState = {extremes, onSetExtremes};
     return (<GraphExtremesContext.Provider value={sharedState}>
             {children}
         </GraphExtremesContext.Provider>
diff --git a/Plan/react/dashboard/src/hooks/interaction/hoverHook.jsx b/Plan/react/dashboard/src/hooks/interaction/hoverHook.jsx
@@ -13,9 +13,9 @@ export const HoverTrigger = ({children}) => {
         setHovered(false);
     }
 
-    return (<HoverContext.Provider value={{hovered}}>
+    return (<HoverContext.Provider value={hovered}>
             <div onFocus={onHoverEnter} onBlur={onHoverLeave} onMouseEnter={onHoverEnter}
-                 onMouseLeave={onHoverLeave}>
+                 onMouseLeave={onHoverLeave} tabIndex={-1}>
                 {children}
             </div>
         </HoverContext.Provider>
diff --git a/Plan/react/dashboard/src/hooks/metadataHook.jsx b/Plan/react/dashboard/src/hooks/metadataHook.jsx
@@ -3,7 +3,8 @@ import {fetchNetworkMetadata, fetchPlanMetadata} from "../service/metadataServic
 
 import terminal from '../Terminal-icon.png'
 import {useAuth} from "./authenticationHook";
-import {getLocallyStoredThemes} from "./context/themeContextHook.jsx";
+
+import {getLocallyStoredThemes} from "./themeHook.jsx";
 
 const MetadataContext = createContext({});
 
diff --git a/Plan/react/dashboard/src/hooks/themeHook.jsx b/Plan/react/dashboard/src/hooks/themeHook.jsx
@@ -122,4 +122,7 @@ export const useTheme = () => {
         toggleColorChooser,
         graphTheming: chartTheming
     };
+}
+export const getLocallyStoredThemes = () => {
+    return JSON.parse(window.localStorage.getItem('locally-stored-themes') || '[]');
 }
diff --git a/Plan/react/dashboard/src/util/Color.js b/Plan/react/dashboard/src/util/Color.js
@@ -11,8 +11,7 @@ import {
     rgbStringToArray,
     rgbToHexString,
     rgbToHsl,
-    rgbToString,
-    withReducedSaturationRgba
+    rgbToString
 } from "./colors.js";
 
 export const getColorConverter = color => {
@@ -47,6 +46,21 @@ export const getColorArrayConverter = (color, type) => {
     }
 }
 
+export const withReducedSaturationRgba = (rgba, reduceSaturationPercentage) => {
+    const saturationReduction = reduceSaturationPercentage || 0.70;
+
+    const [h, s, l] = getColorArrayConverter(rgba, 'rgba').toHslArray();
+    if (isNaN(h)) console.log(rgba, [h, s, l]);
+
+    return 'hsl(' + h * 360 + ',' + s * 100 * saturationReduction + '%,' + l * 95 + '%)';
+}
+export const getContrastColor = (color) => {
+    const converter = getColorConverter(color);
+    if (!converter) return undefined;
+    const luminance = converter.toLuminance();
+    return luminance < 0.5 ? '#ffffff' : '#000000';
+};
+
 export class Color {
     toHex() {
         return rgbToHexString(this.toRgbArray())
@@ -57,6 +71,7 @@ export class Color {
     }
 
     toRgbArray() {
+        return this.toRgbaArray().slice(0, 3);
     }
 
     toRgbaString() {
diff --git a/Plan/react/dashboard/src/util/colors.js b/Plan/react/dashboard/src/util/colors.js
@@ -1,5 +1,3 @@
-import {getColorArrayConverter, getColorConverter} from "./Color.js";
-
 export const nameToCssVariable = name => {
     return `var(--color-${name})`;
 }
@@ -209,15 +207,6 @@ export const withReducedSaturation = (hex, reduceSaturationPercentage) => {
     return 'hsl(' + h * 360 + ',' + s * 100 * saturationReduction + '%,' + l * 95 + '%)';
 }
 
-export const withReducedSaturationRgba = (rgba, reduceSaturationPercentage) => {
-    const saturationReduction = reduceSaturationPercentage ? reduceSaturationPercentage : 0.70;
-
-    const [h, s, l] = getColorArrayConverter(rgba, 'rgba').toHslArray();
-    if (isNaN(h)) console.log(rgba, [h, s, l]);
-
-    return 'hsl(' + h * 360 + ',' + s * 100 * saturationReduction + '%,' + l * 95 + '%)';
-}
-
 export const rgbToString = ([r, g, b]) => {
     return `rgb(${r}, ${g}, ${b})`;
 }
@@ -288,9 +277,3 @@ export const calculateCssColors = (cssSelector) => {
     return colors;
 }
 
-export const getContrastColor = (color) => {
-    const converter = getColorConverter(color);
-    if (!converter) return undefined;
-    const luminance = converter.toLuminance();
-    return luminance < 0.5 ? '#ffffff' : '#000000';
-};
diff --git a/Plan/react/dashboard/src/views/manage/GroupsView.jsx b/Plan/react/dashboard/src/views/manage/GroupsView.jsx
@@ -249,22 +249,17 @@ const DiscardButton = () => {
 
 const AddGroupBody = ({groups, reloadGroupNames}) => {
     const {t} = useTranslation();
-    const [invalid, setInvalid] = useState(false);
     const [value, setValue] = useState(undefined);
     const {addAlert} = useAlertPopupContext();
 
-    const onChange = (event) => {
-        const newValue = event.target.value;
-        setValue(newValue.toLowerCase().replace(" ", "_"));
-        setInvalid(newValue.length > 100);
-    }
-
+    const isInvalid = newValue => newValue.length > 100 || groups.find(group => group.name === newValue);
+    const invalid = isInvalid(value);
     return (
         <Card>
             <CardHeader icon={faPlus} label={t('html.label.managePage.addGroup.header')}/>
             <Card.Body>
                 <TextInput icon={faUserGroup}
-                           isInvalid={newValue => newValue.length > 100}
+                           isInvalid={isInvalid}
                            invalidFeedback={t('html.label.managePage.addGroup.invalidName')}
                            placeholder={t('html.label.managePage.addGroup.name')}
                            value={value}
diff --git a/Plan/react/dashboard/src/views/theme/DeleteThemesView.jsx b/Plan/react/dashboard/src/views/theme/DeleteThemesView.jsx
@@ -5,13 +5,9 @@ import CardHeader from "../../components/cards/CardHeader.jsx";
 import {Card, Col, Row} from "react-bootstrap";
 import ThemeOption from "../../components/theme/ThemeOption.jsx";
 import {ChartLoader} from "../../components/navigation/Loader.jsx";
-import {ThemeContextProvider, useTheme} from "../../hooks/themeHook.jsx";
+import {getLocallyStoredThemes, ThemeContextProvider, useTheme} from "../../hooks/themeHook.jsx";
 import {useTranslation} from "react-i18next";
-import {
-    getLocallyStoredThemes,
-    ThemeStorageContextProvider,
-    useThemeStorage
-} from "../../hooks/context/themeContextHook.jsx";
+import {ThemeStorageContextProvider, useThemeStorage} from "../../hooks/context/themeContextHook.jsx";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import LoadIn from "../../components/animation/LoadIn.jsx";
 import Checkbox from "../../components/input/Checkbox.jsx";

Original file line number	Diff line number	Diff line change
`@@ -51,7 +51,7 @@ const ServerPie = ({colors, series}) => {`
`51`	`51`	`},`
`52`	`52`	`tooltip: {`
`53`	`53`	`formatter: function () {`
`54`		`- return '<b>' + this.point.name + ':</b> ' + formatTimeAmount(this.y) + ' (' + this.percentage.toFixed(2) + '%)';`
	`54`	`+ return '<b>' + this.point.name + ':</b> ' + formatTimeAmount(timePreferences, this.y) + ' (' + this.percentage.toFixed(2) + '%)';`
`55`	`55`	`}`
`56`	`56`	`},`
`57`	`57`	`series: [pieSeries]`