ref(ui): Fix typescript 4.8 clone element errors (#38677)

static/app/components/clipboard.tsx

@@ -96,7 +96,7 @@ function Clipboard({
     return null;
   }
 
-  return cloneElement(children, {ref: handleMount});
+  return cloneElement<any>(children, {ref: handleMount});
 }
 
 export default Clipboard;

static/app/components/tagDeprecated.tsx

@@ -44,7 +44,7 @@ const Tag = styled(
     <div {...props}>
       {icon && (
         <IconWrapper>
-          {isValidElement(icon) && cloneElement(icon, {size: 'xs'})}
+          {isValidElement(icon) && cloneElement<any>(icon, {size: 'xs'})}
         </IconWrapper>
       )}
       {children}

static/app/utils/useHoverOverlay.tsx

@@ -241,7 +241,7 @@ function useHoverOverlay(
         };
 
         // Basic DOM nodes can be cloned and have more props applied.
-        return cloneElement(triggerChildren, {...props, style: triggerStyle});
+        return cloneElement<any>(triggerChildren, {...props, style: triggerStyle});
       }
 
       const ourContainerProps = {

static/app/views/alerts/index.tsx

@@ -12,7 +12,7 @@ function AlertsContainer({children}: Props) {
 
   const content =
     children && isValidElement(children)
-      ? cloneElement(children, {
+      ? cloneElement<any>(children, {
           organization,
           hasMetricAlerts,
         })

static/app/views/alerts/rules/issue/details/index.tsx

@@ -20,7 +20,7 @@ function RuleDetailsContainer({children, params}: Props) {
   }
 
   return children && isValidElement(children)
-    ? cloneElement(children, {
+    ? cloneElement<any>(children, {
         organization,
         project: projects[0],
       })

static/app/views/dashboardsV2/detail.tsx

@@ -648,7 +648,7 @@ class DashboardDetail extends Component<Props, State> {
     const {modifiedDashboard} = this.state;
 
     return isValidElement(children)
-      ? cloneElement(children, {
+      ? cloneElement<any>(children, {
           dashboard: modifiedDashboard ?? dashboard,
           onSave: this.isEditing ? this.onUpdateWidget : this.handleUpdateWidgetList,
         })

static/app/views/organizationStats/teamInsights/index.tsx

@@ -15,7 +15,7 @@ function TeamInsightsContainer({children, organization}: Props) {
     <Feature organization={organization} features={['team-insights']}>
       <NoProjectMessage organization={organization}>
         {children && isValidElement(children)
-          ? cloneElement(children, {
+          ? cloneElement<any>(children, {
               organization,
             })
           : (children as React.ReactChild)}

static/app/views/settings/organizationTeams/teamDetails.tsx

@@ -136,7 +136,7 @@ function TeamDetails({children, ...props}: Props) {
                 <NavTabs underlined>{navigationTabs}</NavTabs>
 
                 {isValidElement(children) &&
-                  cloneElement(children, {
+                  cloneElement<any>(children, {
                     team,
                     onTeamChange: () => onTeamChange(team),
                   })}

static/app/views/settings/project/projectSettingsLayout.tsx

@@ -35,7 +35,7 @@ function ProjectSettingsLayout({
             )}
           >
             {children && isValidElement(children)
-              ? cloneElement(children, {organization, project})
+              ? cloneElement<any>(children, {organization, project})
               : children}
           </SettingsLayout>
         </AppStoreConnectContext.Provider>

static/app/views/settings/projectAlerts/index.tsx

@@ -15,7 +15,7 @@ const ProjectAlerts = ({children, organization}: Props) => (
     {({hasAccess}) => (
       <Fragment>
         {isValidElement(children) &&
-          cloneElement(children, {
+          cloneElement<any>(children, {
             organization,
             canEditRule: hasAccess,
           })}