[WIP] upgrade packages

package.json

@@ -3,68 +3,71 @@
   "version": "6.3.0",
   "private": true,
   "type": "module",
+  "license": {
+    "type": "AGPL-3.0",
+    "url": "https://github.com/glific/glific-frontend?tab=AGPL-3.0-1-ov-file#readme"
+  },
   "dependencies": {
-    "@apollo/client": "^3.11.8",
+    "@apollo/client": "^3.13.1",
     "@apollo/link-context": "^2.0.0-beta.3",
     "@apollo/link-error": "^2.0.0-beta.3",
-    "@appsignal/javascript": "^1.3.31",
+    "@appsignal/javascript": "^1.5.0",
     "@appsignal/plugin-breadcrumbs-network": "^1.1.22",
     "@appsignal/plugin-path-decorator": "^1.0.16",
-    "@appsignal/plugin-window-events": "^1.0.22",
-    "@appsignal/react": "^1.0.26",
-    "@date-io/dayjs": "^3.0.0",
+    "@appsignal/plugin-window-events": "^1.0.24",
+    "@appsignal/react": "^1.0.29",
+    "@date-io/dayjs": "^3.2.0",
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@glific/flow-editor": "^1.26.3-21",
-    "@lexical/react": "^0.17.1",
-    "@mui/icons-material": "^6.1.1",
-    "@mui/material": "^6.1.1",
-    "@mui/x-date-pickers": "^7.18.0",
-    "@nyaruka/temba-components": "^0.108.1",
-    "@stripe/react-stripe-js": "^2.8.0",
-    "@stripe/stripe-js": "^4.5.0",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@lexical/react": "^0.24.0",
+    "@mui/icons-material": "^6.4.5",
+    "@mui/material": "^6.4.5",
+    "@mui/x-date-pickers": "^7.27.0",
+    "@nyaruka/temba-components": "^0.118.6",
+    "@stripe/react-stripe-js": "^3.1.1",
+    "@stripe/stripe-js": "^5.6.0",
+    "@vitejs/plugin-react": "^4.3.4",
     "apollo-absinthe-upload-link": "^1.7.0",
     "apollo-link-token-refresh": "^0.7.0",
-    "axios": "^1.7.7",
+    "axios": "^1.7.9",
     "buffer": "^6.0.3",
     "dayjs": "^1.11.13",
     "emoji-mart": "^5.6.0",
     "formik": "^2.4.6",
-    "graphql": "^16.9.0",
-    "graphql-ws": "^5.16.0",
-    "i18next": "^23.15.1",
-    "i18next-browser-languagedetector": "^8.0.0",
-    "interweave": "^13.1.0",
-    "interweave-autolink": "^5.1.1",
-    "lexical": "^0.17.1",
-    "lexical-beautiful-mentions": "^0.1.41",
-    "pino": "^9.4.0",
+    "graphql": "^16.10.0",
+    "graphql-ws": "^6.0.4",
+    "i18next": "^24.2.2",
+    "i18next-browser-languagedetector": "^8.0.3",
+    "interweave": "^13.1.1",
+    "interweave-autolink": "^5.1.2",
+    "lexical": "^0.24.0",
+    "lexical-beautiful-mentions": "^0.1.47",
+    "pino": "^9.6.0",
     "pino-logflare": "^0.4.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-draggable": "^4.4.6",
     "react-google-recaptcha-v3": "^1.10.1",
-    "react-i18next": "^15.0.2",
+    "react-i18next": "^15.4.1",
     "react-image": "^4.1.0",
     "react-media-recorder": "^1.7.1",
     "react-phone-input-2": "^2.15.1",
     "react-player": "^2.16.0",
-    "react-resize-detector": "^11.0.1",
-    "react-router-dom": "^6.26.2",
+    "react-resize-detector": "^12.0.2",
+    "react-router": "^7.2.0",
     "react-tiny-link": "^3.6.1",
     "react-viewer": "^3.2.2",
-    "rollup-plugin-polyfill-node": "^0.13.0",
     "stream-browserify": "^3.0.0",
     "util": "^0.12.5",
-    "uuid": "^10.0.0",
-    "vite": "^5.4.8",
+    "uuid": "^11.0.5",
+    "vite": "^6.1.0",
     "vite-plugin-checker": "^0.8.0",
-    "vite-plugin-svgr": "^4.2.0",
-    "vite-tsconfig-paths": "^5.0.1",
-    "yup": "^1.4.0"
+    "vite-plugin-svgr": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.4",
+    "yup": "^1.6.1"
   },
   "scripts": {
     "setup": "yarn install --force && yarn run floweditor",
@@ -99,33 +102,34 @@
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^16.0.1",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/emoji-mart": "^3.0.14",
-    "@types/node": "^22.7.2",
-    "@types/react": "^18.3.9",
-    "@types/react-dom": "^18.3.0",
+    "@types/node": "^22.13.5",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
     "@types/react-google-recaptcha": "^2.1.9",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
-    "@types/react-test-renderer": "^18.3.0",
+    "@types/react-test-renderer": "^19.0.0",
     "@types/uuid": "^10.0.0",
-    "@vitest/coverage-istanbul": "^2.1.1",
-    "@vitest/ui": "^2.1.1",
+    "@vitest/coverage-istanbul": "^3.0.6",
+    "@vitest/ui": "^3.0.6",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.30.0",
-    "eslint-plugin-jsx-a11y": "^6.10.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.36.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "i18next-parser": "^9.0.2",
-    "jsdom": "^25.0.1",
-    "prettier": "^3.3.3",
-    "react-test-renderer": "^18.3.1",
-    "typescript": "^5.6.2",
-    "vitest": "^2.1.1",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "i18next-parser": "^9.3.0",
+    "jsdom": "^26.0.0",
+    "prettier": "^3.5.1",
+    "react-test-renderer": "^19.0.0",
+    "typescript": "^5.7.3",
+    "vite-plugin-node-polyfills": "^0.23.0",
+    "vitest": "^3.0.7",
     "yarn-upgrade-all": "^0.7.4"
   }
 }

src/App.test.tsx

@@ -1,4 +1,4 @@
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { MockedProvider } from '@apollo/client/testing';
 import { waitFor, render, screen } from '@testing-library/react';
 import { vi, describe, it } from 'vitest';

src/App.tsx

@@ -1,5 +1,6 @@
 import { startTransition, useState, useEffect, useMemo } from 'react';
-import { Route, Routes, useNavigate } from 'react-router-dom';
+import { useNavigate, Route, Routes } from 'react-router';
+
 import { ApolloProvider } from '@apollo/client';
 import 'i18n/config';
 

src/components/UI/Form/Input/Input.tsx

@@ -27,6 +27,7 @@ export interface InputProps {
   inputLabel?: string | null;
   darkMode?: boolean;
   inputLabelSubtext?: any;
+  autoComplete?: string;
 }
 
 export const Input = ({ textArea = false, disabled = false, inputLabel = null, ...props }: InputProps) => {
@@ -47,6 +48,7 @@ export const Input = ({ textArea = false, disabled = false, inputLabel = null, .
     onChange,
     darkMode,
     inputLabelSubtext,
+    autoComplete = 'off',
   } = props;
 
   let fieldType = type;
@@ -132,6 +134,7 @@ export const Input = ({ textArea = false, disabled = false, inputLabel = null, .
             }}
             endAdornment={endAdornment || fieldEndAdorment}
             notched={false}
+            autoComplete={autoComplete}
           />
           {form && form.errors[field.name] && form.touched[field.name] ? (
             <FormHelperText className={styles.DangerText}>{form.errors[field.name]}</FormHelperText>

src/components/UI/Heading/Heading.test.tsx

@@ -10,8 +10,8 @@ const wrapper = (
 );
 
 const mockedUsedNavigate = vi.fn();
-vi.mock('react-router-dom', async () => ({
-  ...(await vi.importActual('react-router-dom')),
+vi.mock('react-router', async () => ({
+  ...(await vi.importActual('react-router')),
   useNavigate: () => mockedUsedNavigate,
 }));
 

src/components/UI/Heading/Heading.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import HelpIcon from '../HelpIcon/HelpIcon';
 import styles from './Heading.module.css';
 import BackIcon from 'assets/images/icons/BackIconFlow.svg?react';

src/components/UI/ImgFallback/ImgFallback.tsx

@@ -10,7 +10,7 @@ type ImgProps = {
 
 const ImgFallback = ({ src, alt, ...rest }: ImgProps) => {
   const [imgSrc, setImgSrc] = useState<string>(src);
-  const imgRef: any = useRef<HTMLImageElement>();
+  const imgRef = useRef<HTMLImageElement>(null);
 
   useEffect(() => {
     setImgSrc(src);

src/components/UI/Layout/Navigation/SideDrawer/SideDrawer.test.tsx

@@ -1,5 +1,5 @@
 import { MockedProvider } from '@apollo/client/testing';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router';
 import { render, fireEvent, screen, waitFor } from '@testing-library/react';
 
 import SideDrawer from './SideDrawer';

src/components/UI/Layout/Navigation/SideMenus/SideMenus.test.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
 

src/components/UI/Layout/Navigation/SideMenus/SideMenus.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, forwardRef } from 'react';
-import { NavLink, useLocation } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router';
 import {
   ListItemButton,
   ListItemIcon,

src/components/UI/ListIcon/ListIcon.test.tsx

@@ -1,21 +1,9 @@
 import { MemoryRouter } from 'react-router';
 import { render } from '@testing-library/react';
 
-import ChatIcon from 'assets/images/icons/SideDrawer/ChatIcon';
-import FlowIcon from 'assets/images/icons/SideDrawer/FlowIcon';
-import SearchIcon from 'assets/images/icons/SideDrawer/SearchIcon';
-import SpeedSendIcon from 'assets/images/icons/SideDrawer/SpeedSendIcon';
-import TemplateIcon from 'assets/images/icons/SideDrawer/TemplateIcon';
 import { ListIcon } from './ListIcon';
 
 describe('list icon tests', () => {
-  const iconList: { [iconName: string]: (color: { color: any }) => JSX.Element } = {
-    chat: ChatIcon,
-    flow: FlowIcon,
-    search: SearchIcon,
-    'speed-send': SpeedSendIcon,
-    template: TemplateIcon,
-  };
   const createIcon = (type: string) => (
     <MemoryRouter>
       <ListIcon icon={type} />

src/components/UI/Menu/Menu.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen, fireEvent } from '@testing-library/react';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router';
 import Menu from './Menu';
 
 const menuList = [

src/components/UI/Menu/MenuItem/MenuItem.test.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router';
 import { render, screen } from '@testing-library/react';
 import MenuItem from './MenuItem';
 

src/components/UI/Menu/MenuItem/MenuItem.tsx

@@ -1,5 +1,5 @@
 import { MenuItem as MenuItemElement } from '@mui/material';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import styles from './MenuItem.module.css';
 

src/components/errorboundary/ErrorBoundary.tsx

@@ -2,7 +2,7 @@ import { Container } from '@mui/material';
 import { DialogBox } from 'components/UI/DialogBox/DialogBox';
 import setLogs from 'config/logs';
 import { Component } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import styles from './ErrorBoundary.module.css';
 
 function withRouter(NavigateComponent: any) {

src/components/floweditor/FlowEditor.test.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router';
 import { MockedProvider } from '@apollo/client/testing';
 import { render, waitFor, fireEvent, screen } from '@testing-library/react';
 import { vi } from 'vitest';
@@ -29,9 +29,16 @@ import * as Notification from 'common/notification';
 
 window.location = { assign: vi.fn() } as any;
 
-vi.mock('react-router-dom', async () => {
+beforeEach(() => {
+  Object.defineProperty(window, 'location', {
+    writable: true,
+    value: { reload: vi.fn() },
+  });
+});
+
+vi.mock('react-router', async () => {
   return {
-    ...(await vi.importActual<any>('react-router-dom')),
+    ...(await vi.importActual<any>('react-router')),
     useParams: () => ({ uuid: 'b050c652-65b5-4ccf-b62b-1e8b3f328676' }),
   };
 });
@@ -263,7 +270,7 @@ test('reset flow counts', async () => {
   fireEvent.click(getByTestId('ok-button'));
 
   await waitFor(() => {
-    // need to have an assertion after the query ran
+    expect(window.location.reload).toHaveBeenCalled();
   });
 });
 

src/components/floweditor/FlowEditor.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useMutation, useLazyQuery, useQuery } from '@apollo/client';
-import { Navigate, useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, Navigate, useParams } from 'react-router';
 import { Menu, MenuItem, Typography } from '@mui/material';
 import BackIconFlow from 'assets/images/icons/BackIconFlow.svg?react';
 import WarningIcon from 'assets/images/icons/Warning.svg?react';

src/components/simulator/Simulator.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { useApolloClient, useLazyQuery, useSubscription } from '@apollo/client';
 import AttachFileIcon from '@mui/icons-material/AttachFile';
 import { Button, ClickAwayListener } from '@mui/material';
@@ -131,6 +131,7 @@ const Simulator = ({
   const [inputMessage, setInputMessage] = useState('');
   const [simulatedMessages, setSimulatedMessage] = useState<any>();
   const [isOpen, setIsOpen] = useState(false);
+  const nodeRef = useRef<HTMLDivElement>(null!);
 
   const client = useApolloClient();
   // Template listing
@@ -491,8 +492,8 @@ const Simulator = ({
   );
 
   const simulator = (
-    <Draggable>
-      <div data-testid="simulator-container" className={styles.SimContainer}>
+    <Draggable nodeRef={nodeRef}>
+      <div ref={nodeRef} data-testid="simulator-container" className={styles.SimContainer}>
         <div>
           <div id="simulator" className={styles.Simulator}>
             <img src={BackgroundPhoneImage} className={styles.BackgroundImage} draggable="false" />

src/containers/Assistants/Assistants.test.tsx

@@ -7,8 +7,8 @@ import * as Notification from 'common/notification';
 
 const notificationSpy = vi.spyOn(Notification, 'setNotification');
 const mockedUsedNavigate = vi.fn();
-vi.mock('react-router-dom', async () => ({
-  ...(await vi.importActual('react-router-dom')),
+vi.mock('react-router', async () => ({
+  ...(await vi.importActual('react-router')),
   useNavigate: () => mockedUsedNavigate,
 }));
 

src/containers/Auth/Auth.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Formik, Form, Field } from 'formik';
 import { Typography } from '@mui/material';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import { Captcha } from 'components/UI/Form/Captcha/Captcha';