chore: Prepare types for React 19 upgrade

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],

static/js/publisher/pages/Builds/Builds.tsx

@@ -17,7 +17,7 @@ import {
 
 import { setPageTitle } from "../../utils";
 
-function Builds(): JSX.Element {
+function Builds(): React.JSX.Element {
   const { snapId } = useParams();
   const [githubData, setGithubData] = useRecoilState(githubDataState);
   const [loggedIn, setLoggedIn] = useRecoilState(buildLoggedInState);

static/js/publisher/pages/Builds/DisconnectRepoActions.tsx

@@ -15,7 +15,7 @@ type Props = {
 function DisconnectRepoActions({
   setDisconnectModalOpen,
   githubData,
-}: Props): JSX.Element {
+}: Props): React.JSX.Element {
   const { snapId } = useParams();
   const setRepoConnected = useSetRecoilState(buildRepoConnectedState);
   const [disconnecting, setDisconnecting] = useState<boolean>(false);

static/js/publisher/pages/Builds/RepoConnected.tsx

@@ -22,7 +22,7 @@ function RepoConnected({
 }: {
   autoTriggerBuild: boolean;
   setAutoTriggerBuild: Dispatch<SetStateAction<boolean>>;
-}): JSX.Element {
+}): React.JSX.Element {
   const { snapId } = useParams();
   const githubData = useRecoilValue(githubDataState);
   const [disconnectModalOpen, setDisconnectModalOpen] =
@@ -54,7 +54,7 @@ function RepoConnected({
     });
   };
 
-  const formatStatus = (status: string): JSX.Element => {
+  const formatStatus = (status: string): React.JSX.Element => {
     switch (status) {
       case "never_built":
         return <>Never built</>;

static/js/publisher/pages/Builds/RepoNotConnected.tsx

@@ -12,7 +12,7 @@ function RepoNotConnected({
   setAutoTriggerBuild,
 }: {
   setAutoTriggerBuild: Dispatch<SetStateAction<boolean>>;
-}): JSX.Element {
+}): React.JSX.Element {
   const githubData = useRecoilValue<GithubData | null>(githubDataState);
 
   return (

static/js/publisher/pages/Listing/AdditionalInformation/AdditionalInformation.tsx

@@ -25,7 +25,7 @@ function AdditionalInformation({
   getValues,
   setValue,
   watch,
-}: Props): JSX.Element {
+}: Props): React.JSX.Element {
   return (
     <>
       <h2 className="p-heading--4">Additional information</h2>

static/js/publisher/pages/Listing/ContactInformation/ContactFields.tsx

@@ -21,7 +21,7 @@ function ContactFields({
   labelName,
   fieldName,
   getValues,
-}: Props): JSX.Element {
+}: Props): React.JSX.Element {
   const { fields, append, remove } = useFieldArray({
     control,
     name: fieldName,

static/js/publisher/pages/Listing/ContactInformation/ContactInformation.tsx

@@ -25,7 +25,7 @@ function ContactInformation({
   control,
   getFieldState,
   getValues,
-}: Props): JSX.Element {
+}: Props): React.JSX.Element {
   return (
     <>
       <h2 className="p-heading--4">Contact information</h2>

static/js/publisher/pages/Listing/Listing.tsx

@@ -7,7 +7,7 @@ import ListingForm from "./ListingForm";
 
 import { setPageTitle } from "../../utils";
 
-function Listing(): JSX.Element {
+function Listing(): React.JSX.Element {
   const { snapId } = useParams();
   const { data, isLoading, refetch, status } = useQuery({
     queryKey: ["listing"],

static/js/publisher/pages/Listing/ListingDetails/ListingDetails.tsx

@@ -27,7 +27,7 @@ function ListingDetails({
   getValues,
   setValue,
   control,
-}: Props): JSX.Element {
+}: Props): React.JSX.Element {
   const [showSupportedMarkdownSyntax, setShowSupportedMarkdownSyntax] =
     useState<boolean>(false);
 

static/js/publisher/pages/Listing/ListingForm/ListingForm.tsx

@@ -26,7 +26,7 @@ type Props = {
   refetch: () => void;
 };
 
-function ListingForm({ data, refetch }: Props): JSX.Element {
+function ListingForm({ data, refetch }: Props): React.JSX.Element {
   const { snapId } = useParams();
 
   const {

static/js/publisher/pages/Members/InviteModal.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, ReactNode, SetStateAction } from "react";
+import { Dispatch, SetStateAction } from "react";
 import { Modal, Button } from "@canonical/react-components";
 import type { InviteActionData } from "../../types/shared";
 
@@ -16,7 +16,7 @@ function InviteModal({
   setInviteModalOpen,
   updateInvite,
   inviteModalIsSaving,
-}: Props): ReactNode {
+}: Props): React.JSX.Element | null {
   if (!inviteModalOpen || !inviteActionData) {
     return null;
   }

static/js/publisher/pages/Members/InvitesTable.tsx

@@ -1,10 +1,4 @@
-import {
-  useState,
-  useEffect,
-  ReactNode,
-  Dispatch,
-  SetStateAction,
-} from "react";
+import { useState, useEffect, Dispatch, SetStateAction } from "react";
 import { useParams } from "react-router-dom";
 import { format } from "date-fns";
 import { MainTable, Button } from "@canonical/react-components";
@@ -34,7 +28,7 @@ function InvitesTable({
   setShowSuccessNotification,
   setNotificationText,
   setShowErrorNotification,
-}: Props): ReactNode {
+}: Props): React.JSX.Element {
   const [pendingInvites, setPendingInvites] = useState<Invite[]>([]);
   const [expiredInvites, setExpiredInvites] = useState<Invite[]>([]);
   const [revokedInvites, setRevokedInvites] = useState<Invite[]>([]);

static/js/publisher/pages/Members/Members.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, ReactNode, useEffect, useState } from "react";
+import { ChangeEvent, useEffect, useState } from "react";
 import { useParams, Navigate } from "react-router-dom";
 import { useRecoilValue } from "recoil";
 import {
@@ -41,7 +41,7 @@ type Member = {
   current_user: boolean;
 };
 
-function Members(): ReactNode {
+function Members(): React.JSX.Element {
   const brandStoresList = useRecoilValue(brandStoresState);
   const { id } = useParams();
   const {

static/js/publisher/pages/Members/MembersTable.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, ReactNode } from "react";
+import { useState, useEffect } from "react";
 import { MainTable, CheckboxInput } from "@canonical/react-components";
 import ROLES from "./memberRoles";
 
@@ -14,7 +14,7 @@ function MembersTable({
   filteredMembers,
   changedMembers,
   setChangedMembers,
-}: Props): ReactNode {
+}: Props): React.JSX.Element {
   const [members, setMembers] = useState<Member[]>(filteredMembers);
 
   const checkArrayEqual = (array1: Array<string>, array2: Array<string>) => {

static/js/publisher/pages/Metrics/ActiveDeviceAnnotation.tsx

@@ -13,7 +13,11 @@ interface IActiveDeviceAnnotation {
   }>;
 }
 
-function ActiveDeviceAnnotation({ snapId }: { snapId?: string }): JSX.Element {
+function ActiveDeviceAnnotation({
+  snapId,
+}: {
+  snapId?: string;
+}): React.JSX.Element {
   const { data: annotation }: { data: IActiveDeviceAnnotation | undefined } =
     useMetricsAnnotation(snapId);
 

static/js/publisher/pages/Metrics/ActiveDeviceMetrics.tsx

@@ -15,7 +15,7 @@ function ActiveDeviceMetrics({
 }: {
   isEmpty: boolean;
   onDataLoad: (dataLength: number | undefined) => void;
-}): JSX.Element {
+}): React.JSX.Element {
   const { snapId } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
   const { data: latestActiveDevices } = useLatestActiveDevicesMetric(snapId);

static/js/publisher/pages/Metrics/Metrics.tsx

@@ -28,7 +28,7 @@ const EmptyData = () => {
   );
 };
 
-function Metrics(): JSX.Element {
+function Metrics(): React.JSX.Element {
   const { snapId } = useParams();
 
   const [isActiveDeviceMetricEmpty, setIsActiveDeviceMetricEmpty] = useState<

static/js/publisher/pages/Metrics/TerritoryMetrics.tsx

@@ -11,7 +11,7 @@ export const TerritoryMetrics = ({
 }: {
   isEmpty: boolean;
   onDataLoad: (dataLength: number | undefined) => void;
-}): JSX.Element => {
+}): React.JSX.Element => {
   const { snapId } = useParams();
   const {
     status,

static/js/publisher/pages/Model/CreatePolicyForm.tsx

@@ -1,10 +1,4 @@
-import {
-  useState,
-  useEffect,
-  ReactNode,
-  Dispatch,
-  SetStateAction,
-} from "react";
+import { useState, useEffect, Dispatch, SetStateAction } from "react";
 import { useRecoilState, useRecoilValue } from "recoil";
 import { useParams, Link, useNavigate, useLocation } from "react-router-dom";
 import { useMutation, useQueryClient } from "react-query";
@@ -29,7 +23,7 @@ function CreatePolicyForm({
   setShowNotification,
   setShowErrorNotification,
   refetchPolicies,
-}: Props): ReactNode {
+}: Props): React.JSX.Element {
   const { id, model_id } = useParams();
   const brandId = useRecoilValue(brandIdState);
   const navigate = useNavigate();

static/js/publisher/pages/Model/ModelBreadcrumb.tsx

@@ -4,7 +4,7 @@ interface RouteParams {
   id?: string;
   model_id?: string;
 }
-function ModelBreadcrumb(): JSX.Element {
+function ModelBreadcrumb(): React.JSX.Element {
   const { id, model_id } = useParams() as RouteParams;
 
   return (

static/js/publisher/pages/Model/ModelNav.tsx

@@ -1,7 +1,6 @@
-import { ReactNode } from "react";
 import { Link, useParams } from "react-router-dom";
 
-function ModelNav({ sectionName }: { sectionName: string }): ReactNode {
+function ModelNav({ sectionName }: { sectionName: string }): React.JSX.Element {
   const { id, model_id } = useParams();
 
   return (

static/js/publisher/pages/Model/Policies.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, ReactNode } from "react";
+import { useState, useEffect } from "react";
 import {
   Link,
   useParams,
@@ -32,7 +32,7 @@ import { isClosedPanel, setPageTitle } from "../../utils";
 
 import type { Policy, SigningKey } from "../../types/shared";
 
-function Policies(): ReactNode {
+function Policies(): React.JSX.Element {
   const { id, model_id } = useParams();
   const brandId = useRecoilValue(brandIdState);
   const location = useLocation();

static/js/publisher/pages/Model/PoliciesTable.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, SetStateAction, useState, Dispatch } from "react";
+import { SetStateAction, useState, Dispatch } from "react";
 import { useRecoilState, useRecoilValue } from "recoil";
 import { useParams } from "react-router-dom";
 import { format } from "date-fns";
@@ -21,7 +21,7 @@ type Props = {
 function ModelsTable({
   setShowDeletePolicyNotification,
   setShowDeletePolicyErrorNotification,
-}: Props): ReactNode {
+}: Props): React.JSX.Element {
   const { model_id } = useParams();
   const brandId = useRecoilValue(brandIdState);
   const [policiesList, setPoliciesList] = useRecoilState(