fix(ui): Various react 18 type changes (#65853)

There's a few places where we're passing objects to ReactNode, most of
them can be casted. Added a few TODOS.

static/app/actionCreators/dashboards.tsx

@@ -27,7 +27,7 @@ export function fetchDashboards(api: Client, orgSlug: string) {
 
     if (errorResponse) {
       const errors = flattenErrors(errorResponse, {});
-      addErrorMessage(errors[Object.keys(errors)[0]]);
+      addErrorMessage(errors[Object.keys(errors)[0]] as string);
     } else {
       addErrorMessage(t('Unable to fetch dashboards'));
     }
@@ -73,7 +73,7 @@ export function createDashboard(
 
     if (errorResponse) {
       const errors = flattenErrors(errorResponse, {});
-      addErrorMessage(errors[Object.keys(errors)[0]]);
+      addErrorMessage(errors[Object.keys(errors)[0]] as string);
     } else {
       addErrorMessage(t('Unable to create dashboard'));
     }
@@ -114,7 +114,7 @@ export function fetchDashboard(
 
     if (errorResponse) {
       const errors = flattenErrors(errorResponse, {});
-      addErrorMessage(errors[Object.keys(errors)[0]]);
+      addErrorMessage(errors[Object.keys(errors)[0]] as string);
     } else {
       addErrorMessage(t('Unable to load dashboard'));
     }
@@ -161,7 +161,7 @@ export function updateDashboard(
 
     if (errorResponse) {
       const errors = flattenErrors(errorResponse, {});
-      addErrorMessage(errors[Object.keys(errors)[0]]);
+      addErrorMessage(errors[Object.keys(errors)[0]] as string);
     } else {
       addErrorMessage(t('Unable to update dashboard'));
     }
@@ -187,7 +187,7 @@ export function deleteDashboard(
 
     if (errorResponse) {
       const errors = flattenErrors(errorResponse, {});
-      addErrorMessage(errors[Object.keys(errors)[0]]);
+      addErrorMessage(errors[Object.keys(errors)[0]] as string);
     } else {
       addErrorMessage(t('Unable to delete dashboard'));
     }

static/app/actionCreators/formSearch.tsx

@@ -27,11 +27,11 @@ const createSearchMap = ({
     ? formGroups.flatMap(formGroup => formGroup.fields)
     : Object.keys(fields).map(fieldName => fields[fieldName]);
 
-  return listOfFields.map(field => ({
+  return listOfFields.map<FormSearchField>(field => ({
     ...other,
     route,
-    title: typeof field !== 'function' ? field.label : undefined,
-    description: typeof field !== 'function' ? field.help : undefined,
+    title: typeof field !== 'function' ? (field.label as string) : undefined,
+    description: typeof field !== 'function' ? (field.help as string) : undefined,
     field,
   }));
 };

static/app/components/acl/access.tsx

@@ -11,7 +11,8 @@ type ChildRenderProps = {
   hasSuperuser: boolean;
 };
 
-type ChildFunction = (props: ChildRenderProps) => JSX.Element;
+// TODO(TS): This should be ReactNode but conflicts between react 17 & 18
+type ChildFunction = (props: ChildRenderProps) => any;
 
 type Props = {
   organization: Organization;

static/app/components/actions/confirmableAction.tsx

@@ -16,5 +16,5 @@ export default function ConfirmableAction({shouldConfirm, children, ...props}: P
     return <Confirm {...props}>{children as ConfirmProps['children']}</Confirm>;
   }
 
-  return <Fragment>{children}</Fragment>;
+  return <Fragment>{children as React.ReactNode}</Fragment>;
 }

static/app/components/compactSelect/control.tsx

@@ -148,7 +148,7 @@ export interface ControlProps
   /**
    * Optional content to display below the menu's header and above the options.
    */
-  menuBody?: React.ReactNode | ((actions: {closeOverlay: () => void}) => React.ReactNode);
+  menuBody?: React.ReactNode | ((actions: {closeOverlay: () => void}) => JSX.Element);
   /**
    * Footer to be rendered at the bottom of the menu.
    */

static/app/components/deprecatedforms/form.tsx

@@ -10,6 +10,7 @@ import {t} from 'sentry/locale';
 
 type FormProps = {
   cancelLabel?: string;
+  children?: React.ReactNode;
   className?: string;
   errorMessage?: React.ReactNode;
   extraButton?: React.ReactNode;
@@ -148,7 +149,8 @@ class Form<
                   </p>
                   <ul>
                     {nonFieldErrors.map((e, i) => (
-                      <li key={i}>{e}</li>
+                      // TODO(TS): Objects cannot be rendered to dom
+                      <li key={i}>{e as any}</li>
                     ))}
                   </ul>
                 </div>

static/app/components/dropdownAutoComplete/row.tsx

@@ -52,7 +52,7 @@ function Row<T extends Item>({
   if (item.groupLabel) {
     return (
       <LabelWithBorder style={style}>
-        {item.label && <GroupLabel>{item.label}</GroupLabel>}
+        {item.label && <GroupLabel>{item.label as string}</GroupLabel>}
       </LabelWithBorder>
     );
   }

static/app/components/dropdownMenu/item.tsx

@@ -215,7 +215,7 @@ function BaseDropdownMenuItem(
       trailingItems={
         isSubmenu ? (
           <Fragment>
-            {trailingItems}
+            {trailingItems as React.ReactNode}
             <IconChevron size="xs" direction="right" aria-hidden="true" />
           </Fragment>
         ) : (

static/app/components/errorBoundary.tsx

@@ -66,7 +66,7 @@ class ErrorBoundary extends Component<Props, State> {
       // Based on https://github.com/getsentry/sentry-javascript/blob/6f4ad562c469f546f1098136b65583309d03487b/packages/react/src/errorboundary.tsx#L75-L85
       const errorBoundaryError = new Error(error.message);
       errorBoundaryError.name = `React ErrorBoundary ${errorBoundaryError.name}`;
-      errorBoundaryError.stack = errorInfo.componentStack;
+      errorBoundaryError.stack = errorInfo.componentStack!;
 
       error.cause = errorBoundaryError;
 

static/app/components/events/contexts/redux/index.tsx

@@ -15,7 +15,8 @@ export function ReduxContext({data}: Props) {
           {
             key: 'value',
             subject: t('Latest State'),
-            value: data,
+            // TODO(TS): Objects cannot be rendered to the dom
+            value: data as any,
           },
         ]}
       />