chore: Upgrade to React 19 (#5220)

Author: steverydz

package.json

@@ -46,8 +46,8 @@
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.14",
     "@types/randomstring": "1.3.0",
-    "@types/react": "18.3.18",
-    "@types/react-dom": "18.3.5",
+    "@types/react": "19.1.8",
+    "@types/react-dom": "19.1.6",
     "@types/react-redux": "7.1.34",
     "@types/react-router-dom": "5.3.3",
     "@types/topojson-client": "3.1.5",
@@ -80,10 +80,10 @@
     "prop-types": "15.8.1",
     "randomstring": "1.3.0",
     "raven-js": "3.27.2",
-    "react": "18.3.1",
+    "react": "19.1.0",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
-    "react-dom": "18.3.1",
+    "react-dom": "19.1.0",
     "react-hook-form": "7.54.2",
     "react-joyride": "3.0.0-7",
     "react-query": "3.39.3",
@@ -134,8 +134,6 @@
     "ts-jest": "29.2.5"
   },
   "resolutions": {
-    "@types/react": "18.3.18",
-    "@types/react-dom": "18.3.5",
     "lodash": "4.17.21"
   }
 }

static/js/publisher/components/SectionNav/SectionNav.tsx

@@ -1,6 +1,8 @@
 import { Link } from "react-router-dom";
 import { Tabs } from "@canonical/react-components";
 
+import type { ElementType } from "react";
+
 type Props = {
   activeTab: string;
   snapName: string | undefined;
@@ -15,37 +17,37 @@ function SectionNav({ activeTab, snapName }: Props): React.JSX.Element {
           label: "Listing",
           active: activeTab === "listing" || !activeTab,
           to: `/${snapName}/listing`,
-          component: Link,
+          component: Link as ElementType,
         },
         {
           label: "Builds",
           active: activeTab === "builds",
           to: `/${snapName}/builds`,
-          component: Link,
+          component: Link as ElementType,
         },
         {
           label: "Releases",
           active: activeTab === "releases",
           to: `/${snapName}/releases`,
-          component: Link,
+          component: Link as ElementType,
         },
         {
           label: "Metrics",
           active: activeTab === "metrics",
           to: `/${snapName}/metrics`,
-          component: Link,
+          component: Link as ElementType,
         },
         {
           label: "Publicise",
           active: activeTab === "publicise",
           to: `/${snapName}/publicise`,
-          component: Link,
+          component: Link as ElementType,
         },
         {
           label: "Settings",
           active: activeTab === "settings",
           to: `/${snapName}/settings`,
-          component: Link,
+          component: Link as ElementType,
         },
       ]}
     />

static/js/publisher/components/Tour/Tour.tsx

@@ -10,7 +10,7 @@ type Props = {
   steps: {
     target: string;
     title: string;
-    content: React.JSX.Element;
+    content: React.ReactNode;
     disableBeacon?: boolean;
   }[];
 };

static/js/publisher/pages/Releases/components/releasesTable/droppableRow.tsx

@@ -193,17 +193,19 @@ const ReleasesTableDroppableRow = (props: {
           {versionCountString}
         </small>
       </div>
-      <div className="p-releases-table__row--container" ref={drop}>
-        <ReleasesTableChannelRow
-          risk={risk}
-          branch={branch}
-          // @ts-ignore
-          revisions={revisions}
-          isOverParent={isOver}
-          draggedItem={item}
-          canDrop={canDrop}
-        />
-      </div>
+      {drop(
+        <div className="p-releases-table__row--container">
+          <ReleasesTableChannelRow
+            risk={risk}
+            branch={branch}
+            // @ts-ignore
+            revisions={revisions}
+            isOverParent={isOver}
+            draggedItem={item}
+            canDrop={canDrop}
+          />
+        </div>,
+      )}
     </>
   );
 };

static/js/store/components/Banner/Banner.tsx

@@ -4,8 +4,8 @@ import { SearchInput } from "../SearchInput";
 import type { RefObject } from "react";
 
 type Props = {
-  searchRef: RefObject<HTMLInputElement>;
-  searchSummaryRef?: RefObject<HTMLDivElement>;
+  searchRef: RefObject<HTMLInputElement | null>;
+  searchSummaryRef?: RefObject<HTMLDivElement | null>;
 };
 
 function Banner({ searchRef, searchSummaryRef }: Props): React.JSX.Element {

static/js/store/components/PackageList/PackageList.tsx

@@ -23,8 +23,8 @@ function PackageList({
 }: {
   data?: Packages;
   isFetching: boolean;
-  searchRef: RefObject<HTMLInputElement>;
-  searchSummaryRef: RefObject<HTMLDivElement>;
+  searchRef: RefObject<HTMLInputElement | null>;
+  searchSummaryRef: RefObject<HTMLDivElement | null>;
 }): React.JSX.Element {
   const [searchParams, setSearchParams] = useSearchParams();
 

static/js/store/components/SearchInput/SearchInput.tsx

@@ -4,8 +4,8 @@ import { useSearchParams } from "react-router-dom";
 import type { RefObject } from "react";
 
 type Props = {
-  searchRef: RefObject<HTMLInputElement>;
-  searchSummaryRef?: RefObject<HTMLDivElement>;
+  searchRef: RefObject<HTMLInputElement | null>;
+  searchSummaryRef?: RefObject<HTMLDivElement | null>;
 };
 
 export const SearchInput = ({

static/js/store/pages/Store/__tests__/Store.test.tsx

@@ -6,6 +6,9 @@ import "@testing-library/jest-dom";
 
 import Store from "../Store";
 
+// Necessary to prevent FormData type error in some tests
+global.FormData = jest.fn();
+
 global.fetch = jest.fn(() => {
   return Promise.resolve({
     json: () => {