chore: Prepare types for React 19 upgrade

Author: steverydz

static/js/publisher/components/AppPagination/AppPagination.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, ReactNode } from "react";
+import { useState, useEffect } from "react";
 import { Button, Icon, Input, Select } from "@canonical/react-components";
 
 import type {
@@ -19,7 +19,7 @@ function AppPagination<T extends ItemType>({
   keyword,
   items,
   setItemsToShow,
-}: Props<T>): ReactNode {
+}: Props<T>): React.JSX.Element {
   const paginationOptions = [
     {
       label: "25/page",

static/js/publisher/components/Filter/Filter.tsx

@@ -1,15 +1,13 @@
 import { useSearchParams } from "react-router-dom";
 import { RecoilState, useSetRecoilState } from "recoil";
 import { Button, Icon } from "@canonical/react-components";
-import { ReactNode } from "react";
-
 type Props = {
   state: RecoilState<string>;
   label: string;
   placeholder: string;
 };
 
-function Filter({ state, label, placeholder }: Props): ReactNode {
+function Filter({ state, label, placeholder }: Props): React.JSX.Element {
   const [searchParams, setSearchParams] = useSearchParams();
   const setFilter = useSetRecoilState(state);
 

static/js/publisher/components/Logo/Logo.tsx

@@ -1,4 +1,4 @@
-function Logo(): JSX.Element {
+function Logo(): React.JSX.Element {
   return (
     <a href="/" className="p-panel__logo tag-logo">
       <img

static/js/publisher/components/Navigation/Logo.tsx

@@ -1,6 +1,4 @@
-import { ReactNode } from "react";
-
-function Logo(): ReactNode {
+function Logo(): React.JSX.Element {
   return (
     <a href="/" className="p-panel__logo">
       <img

static/js/publisher/components/Navigation/Navigation.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, ReactNode } from "react";
+import { useState, useEffect } from "react";
 import { useRecoilState, useRecoilValue } from "recoil";
 import { useParams, NavLink } from "react-router-dom";
 import { Icon } from "@canonical/react-components";
@@ -16,7 +16,7 @@ function Navigation({
   sectionName,
 }: {
   sectionName: string | null;
-}): ReactNode {
+}): React.JSX.Element {
   const brandStoresList = useRecoilValue(brandStoresState);
   const { id } = useParams();
   const { data: brand } = useBrand(id);

static/js/publisher/components/PrimaryNav/PrimaryNav.tsx

@@ -18,7 +18,7 @@ function PrimaryNav({
 }: {
   collapseNavigation: boolean;
   setCollapseNavigation: (value: boolean) => void;
-}): JSX.Element {
+}): React.JSX.Element {
   const location = useLocation();
   const { data: publisherData } = usePublisher();
   const { data: validationSetsData } = useValidationSets();

static/js/publisher/components/StoreSelector/StoreSelector.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, ReactNode } from "react";
+import { useState, useEffect } from "react";
 import { useRecoilValue } from "recoil";
 import { useParams, NavLink } from "react-router-dom";
 
@@ -10,7 +10,7 @@ type Props = {
   nativeNavLink?: boolean;
 };
 
-function StoreSelector({ nativeNavLink }: Props): ReactNode {
+function StoreSelector({ nativeNavLink }: Props): React.JSX.Element {
   const { id } = useParams();
   const brandStoresList = useRecoilValue(brandStoresState);
   const [showStoreSelector, setShowStoreSelector] = useState<boolean>(false);

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

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

static/js/publisher/pages/AccountDetails/AccountDetails.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, SyntheticEvent, ReactNode } from "react";
+import { useState, useEffect, SyntheticEvent } from "react";
 import { useRecoilValue } from "recoil";
 import {
   Row,
@@ -13,7 +13,7 @@ import Navigation from "../../components/Navigation";
 
 import { publisherState } from "../../state/publisherState";
 
-function AccountDetails(): ReactNode {
+function AccountDetails(): React.JSX.Element {
   const [subscriptionPreferencesChanged, setSubscriptionPreferencesChanged] =
     useState(false);
   const [subscribeToNewsletter, setSubscribeToNewsletter] = useState(false);

static/js/publisher/pages/Build/Build.tsx

@@ -7,7 +7,7 @@ import SectionNav from "../../components/SectionNav";
 
 import { setPageTitle } from "../../utils";
 
-function Build(): JSX.Element {
+function Build(): React.JSX.Element {
   const { buildId, snapId } = useParams();
   const { data, isFetched, isLoading, isFetching } = useQuery({
     queryKey: ["build", snapId, buildId],