Merge pull request #1224 from flatcar/dependabot/npm_and_yarn/frontend/npm-dependencies-c9cce97946

build(deps): bump the npm-dependencies group in /frontend with 14 updates

Author: ervcz

frontend/package-lock.json

@@ -44,7 +44,7 @@
     "@mui/system": "^7.1.0",
     "@mui/utils": "^7.1.0",
     "@reduxjs/toolkit": "^2.9.0",
-    "@types/node": "^24.6.2",
+    "@types/node": "^24.7.2",
     "@types/react-color": "^3.0.13",
     "@types/semver": "^7.7.1",
     "cross-env": "^10.1.0",
@@ -53,7 +53,7 @@
     "eventemitter3": "^5.0.1",
     "formik": "^2.4.6",
     "formik-mui": "^4.0.0",
-    "i18next": "^25.5.3",
+    "i18next": "^25.6.0",
     "i18next-browser-languagedetector": "^8.0.4",
     "jwt-decode": "^4.0.0",
     "moment-timezone": "^0.6.0",
@@ -63,10 +63,10 @@
     "react-dom": "19.2.0",
     "react-i18next": "^16.0.0",
     "react-redux": "^9.2.0",
-    "react-router": "^7.9.3",
-    "react-window": "^2.2.0",
+    "react-router": "^7.9.4",
+    "react-window": "^2.2.1",
     "recharts": "^3.2.1",
-    "semver": "^7.7.1",
+    "semver": "^7.7.3",
     "underscore": "^1.13.7",
     "yup": "^1.7.1"
   },
@@ -75,26 +75,26 @@
     "@iconify/icons-mdi": "^1.2.48",
     "@iconify/react": "^6.0.2",
     "@iconify/tools": "^4.1.4",
-    "@playwright/test": "1.55.1",
+    "@playwright/test": "1.56.0",
     "@storybook/addon-docs": "^9.1.10",
     "@storybook/addon-links": "^9.1.10",
     "@storybook/react-vite": "^9.1.10",
     "@storybook/test-runner": "^0.24.0-next.2",
     "@testing-library/react": "^16.3.0",
     "@types/pg": "^8.15.5",
-    "@types/react": "19.2.0",
-    "@types/react-dom": "19.2.0",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.1",
     "@types/react-router-dom": "^5.3.3",
     "@types/underscore": "^1.13.0",
-    "@typescript-eslint/eslint-plugin": "^8.45.0",
-    "@typescript-eslint/parser": "^8.45.0",
+    "@typescript-eslint/eslint-plugin": "^8.46.0",
+    "@typescript-eslint/parser": "^8.46.0",
     "@vitejs/plugin-react": "^5.0.4",
     "@vitest/coverage-istanbul": "^3.1.4",
     "eslint": "^9.37.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-react-hooks": "^6.1.1",
+    "eslint-plugin-react-hooks": "^7.0.0",
     "eslint-plugin-react-refresh": "^0.4.23",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-storybook": "^9.1.10",
@@ -104,13 +104,13 @@
     "husky": "^9.1.7",
     "i18next-parser": "^9.3.0",
     "jsdom": "^27.0.0",
-    "lint-staged": "^16.2.3",
+    "lint-staged": "^16.2.4",
     "pg": "^8.14.1",
-    "playwright": "1.55.1",
+    "playwright": "1.56.0",
     "prettier": "^3.6.2",
     "storybook": "^9.0.14",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.45.0",
+    "typescript-eslint": "^8.46.0",
     "vite": "^7.1.9",
     "vitest": "^3.2.3"
   },

frontend/package.json

@@ -12,15 +12,15 @@ export default {
   },
 } as Meta;
 
+class APIMock extends API {
+  static getInstancesCount(): Promise<number> {
+    return new Promise(resolve => resolve(20));
+  }
+}
+
 const Template: StoryFn<ApplicationItemProps> = (
   args: JSX.IntrinsicAttributes & ApplicationItemProps
 ) => {
-  class APIMock extends API {
-    static getInstancesCount(): Promise<number> {
-      return new Promise(resolve => resolve(20));
-    }
-  }
-
   return (
     <APIContext.Provider value={APIMock}>
       <MemoryRouter>

frontend/src/components/Applications/ApplicationItem.stories.tsx

@@ -9,15 +9,15 @@ export default {
   title: 'applications/ApplicationList',
 } as Meta;
 
+class APIMock extends API {
+  static getInstancesCount(): Promise<number> {
+    return new Promise(resolve => resolve(20));
+  }
+}
+
 const Template: StoryFn<ApplicationListPureProps> = (
   args: JSX.IntrinsicAttributes & ApplicationListPureProps
 ) => {
-  class APIMock extends API {
-    static getInstancesCount(): Promise<number> {
-      return new Promise(resolve => resolve(20));
-    }
-  }
-
   return (
     <APIContext.Provider value={APIMock}>
       <MemoryRouter>

frontend/src/components/Applications/ApplicationList.stories.tsx

@@ -44,16 +44,16 @@ const statusTimelineData = {
   '2021-11-08T10:35:28.823161+01:00': { '1': {}, '2': {}, '3': {}, '6': {}, '7': {} },
 };
 
+class GroupChartsStoreMock extends GroupChartsStore {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  async getGroupStatusCountTimeline(_appID: string, _groupID: string, _duration: string) {
+    return statusTimelineData;
+  }
+}
+
 const Template: StoryFn<StatusCountTimelineProps> = (
   args: JSX.IntrinsicAttributes & StatusCountTimelineProps
 ) => {
-  class GroupChartsStoreMock extends GroupChartsStore {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    async getGroupStatusCountTimeline(_appID: string, _groupID: string, _duration: string) {
-      return statusTimelineData;
-    }
-  }
-
   const ChartStoreContext = groupChartStoreContext();
 
   return (

frontend/src/components/Groups/GroupCharts/StatusCountTimeline.stories.tsx

@@ -37,9 +37,6 @@ export interface TimelineChartProps {
 
 export default function TimelineChart(props: TimelineChartProps) {
   const { width = 500, height = 400, interpolation = 'monotone' } = props;
-  let ticks: {
-    [key: string]: string;
-  } = {};
 
   function getTickValues() {
     const DAY = 24 * 60;
@@ -55,8 +52,7 @@ export default function TimelineChart(props: TimelineChartProps) {
     // We remove 1 element since that's "0 hours"
     const dimension = props.data.length - 1;
 
-    // Reset the ticks for the chart
-    ticks = {};
+    const ticks: Record<string, string> = {};
 
     if (lengthMinutes === 7 * DAY) {
       tickCount = 7;
@@ -118,6 +114,8 @@ export default function TimelineChart(props: TimelineChartProps) {
     return ticks;
   }
 
+  const ticks = getTickValues();
+
   return (
     <AreaChart
       width={width}
@@ -138,7 +136,7 @@ export default function TimelineChart(props: TimelineChartProps) {
         type="number"
         interval={0}
         domain={[0, 'dataMax']}
-        ticks={Object.keys(getTickValues())}
+        ticks={Object.keys(ticks)}
         tickFormatter={(index: string) => {
           return ticks[index];
         }}

frontend/src/components/Groups/GroupCharts/TimelineChart.tsx

@@ -37,14 +37,14 @@ const versionCountTimeline = {
   '2021-11-08T10:35:28.827204+01:00': { '0.0.0': 61, '2191.5.0': 152 },
 };
 
-const Template: StoryFn<VersionCountTimelineProps> = args => {
-  class GroupChartsStoreMock extends GroupChartsStore {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    async getGroupVersionCountTimeline(_appID: string, _groupID: string, _duration: string) {
-      return versionCountTimeline;
-    }
+class GroupChartsStoreMock extends GroupChartsStore {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  async getGroupVersionCountTimeline(_appID: string, _groupID: string, _duration: string) {
+    return versionCountTimeline;
   }
+}
 
+const Template: StoryFn<VersionCountTimelineProps> = args => {
   const ChartStoreContext = groupChartStoreContext();
 
   return (

frontend/src/components/Groups/GroupCharts/VersionCountTimeline.stories.tsx

@@ -41,20 +41,17 @@ function ProgressDoughnut(props: ProgressDoughnutProps) {
   const pieSize = width > height ? height : width;
   const radius = pieSize * 0.45;
 
-  let totalFilled = 0;
-  let valuesSum = 0;
-  const dataSet: RechartsPieData[] = data.map(({ value, color, description }, i) => {
-    // Ensure that the minimum value displayed is 0.5 if the original value
-    // is 0, or 1.5 otherwise. This ensures the user is able to see the bits
-    // related to this value in the charts.
-    const percentageValue = Math.max(value * 100, value === 0 ? 0.5 : 1.5);
-
-    totalFilled += percentageValue;
-    valuesSum += value * 100;
+  // Ensure that the minimum value displayed is 0.5 if the original value
+  // is 0, or 1.5 otherwise. This ensures the user is able to see the bits
+  // related to this value in the charts.
+  const percentageValue = (value: number) => Math.max(value * 100, value === 0 ? 0.5 : 1.5);
 
+  const totalFilled = data.reduce((acc, { value }) => acc + percentageValue(value), 0);
+  const valuesSum = data.reduce((acc, { value }) => acc + value * 100, 0);
+  const dataSet: RechartsPieData[] = data.map(({ value, color, description }, i) => {
     return {
       x: i,
-      y: percentageValue,
+      y: percentageValue(value),
       color: color,
       description: description,
     };

frontend/src/components/Instances/Charts.tsx

@@ -17,6 +17,10 @@ function GroupLayout() {
   const [updateGroupModalVisible, setUpdateGroupModalVisible] = React.useState(false);
   const { t } = useTranslation();
 
+  function onChange() {
+    setApplications(applicationsStore().getCachedApplications() || []);
+  }
+
   React.useEffect(() => {
     if (!appID) {
       return;
@@ -28,10 +32,6 @@ function GroupLayout() {
     };
   }, [appID]);
 
-  function onChange() {
-    setApplications(applicationsStore().getCachedApplications() || []);
-  }
-
   function openUpdateGroupModal() {
     setUpdateGroupModalVisible(true);
   }