ref: remove redundant fragment return types

Author: JonasBa

static/app/components/actions/confirmableAction.tsx

@@ -1,5 +1,3 @@
-import {Fragment} from 'react';
-
 import Confirm from 'sentry/components/confirm';
 
 type ConfirmProps = React.ComponentProps<typeof Confirm>;
@@ -16,5 +14,5 @@ export default function ConfirmableAction({shouldConfirm, children, ...props}: P
     return <Confirm {...props}>{children as ConfirmProps['children']}</Confirm>;
   }
 
-  return <Fragment>{children as React.ReactNode}</Fragment>;
+  return children;
 }

static/app/components/assistant/guideAnchor.tsx

@@ -1,4 +1,4 @@
-import {Component, Fragment, useEffect, useRef} from 'react';
+import {Component, useEffect, useRef} from 'react';
 import styled from '@emotion/styled';
 import * as Sentry from '@sentry/react';
 
@@ -212,7 +212,7 @@ type WrapperProps = Props & {
  */
 function GuideAnchor({disabled, children, wrapperComponent, ...rest}: WrapperProps) {
   if (disabled) {
-    return <Fragment>{children}</Fragment>;
+    return children;
   }
   return (
     <BaseGuideAnchor wrapperComponent={wrapperComponent} {...rest}>

static/app/components/collapsible.tsx

@@ -35,7 +35,7 @@ function Collapsible({
   const canCollapse = items.length > maxVisibleItems;
 
   if (!canCollapse) {
-    return <Fragment>{children}</Fragment>;
+    return children;
   }
 
   const visibleItems = isCollapsed ? items.slice(0, maxVisibleItems) : items;

static/app/components/highlight.tsx

@@ -22,14 +22,14 @@ type Props = Omit<React.HTMLAttributes<HTMLDivElement>, keyof HighlightProps> &
 function HighlightComponent({className, children, disabled, text}: Props) {
   // There are instances when children is not string in breadcrumbs but not caught by TS
   if (!text || disabled || typeof children !== 'string') {
-    return <Fragment>{children}</Fragment>;
+    return children;
   }
 
   const highlightText = text.toLowerCase();
   const idx = children.toLowerCase().indexOf(highlightText);
 
   if (idx === -1) {
-    return <Fragment>{children}</Fragment>;
+    return children;
   }
 
   return (

static/app/components/modals/debugFileCustomRepository/index.tsx

@@ -35,7 +35,7 @@ type Props = {
 
 const HookedCustomSymbolSources = HookOrDefault({
   hookName: 'component:disabled-custom-symbol-sources',
-  defaultComponent: ({children}) => <Fragment>{children}</Fragment>,
+  defaultComponent: ({children}) => children,
 });
 
 function DebugFileCustomRepository({

static/app/components/modals/featureTourModal.tsx

@@ -1,4 +1,4 @@
-import {Component, Fragment} from 'react';
+import {Component} from 'react';
 import styled from '@emotion/styled';
 
 import type {ModalRenderProps} from 'sentry/actionCreators/modal';
@@ -118,8 +118,7 @@ class FeatureTourModal extends Component<Props, State> {
   };
 
   render() {
-    const {children} = this.props;
-    return <Fragment>{children({showModal: this.handleShow})}</Fragment>;
+    return this.props.children({showModal: this.handleShow});
   }
 }
 

static/app/components/noProjectMessage.tsx

@@ -37,7 +37,7 @@ function NoProjectMessage({
       : !!projects?.some(p => p.isMember && p.hasAccess);
 
   if (hasProjectAccess || !projectsLoaded) {
-    return <Fragment>{children}</Fragment>;
+    return children;
   }
 
   // If the organization has some projects, but the user doesn't have access to

static/app/components/organizations/pageFilters/container.tsx

@@ -1,4 +1,4 @@
-import {Fragment, useEffect, useLayoutEffect, useRef, useState} from 'react';
+import {useEffect, useLayoutEffect, useRef, useState} from 'react';
 import isEqual from 'lodash/isEqual';
 
 import type {InitializeUrlStateParams} from 'sentry/actionCreators/pageFilters';
@@ -203,7 +203,7 @@ function PageFiltersContainer({
     );
   }
 
-  return <Fragment>{children}</Fragment>;
+  return children;
 }
 
 export default PageFiltersContainer;

static/app/components/replays/header/feedbackButton.tsx

@@ -1,11 +1,9 @@
-import {Fragment} from 'react';
-
 import {FeatureFeedback} from 'sentry/components/featureFeedback';
 import HookOrDefault from 'sentry/components/hookOrDefault';
 
 const FeedbackButtonHook = HookOrDefault({
   hookName: 'component:replay-feedback-button',
-  defaultComponent: ({children}) => <Fragment>{children}</Fragment>,
+  defaultComponent: ({children}) => children,
 });
 
 function FeedbackButton() {

static/app/components/sidebar/sidebarItem.tsx

@@ -26,7 +26,7 @@ import {SIDEBAR_NAVIGATION_SOURCE} from './utils';
 
 const LabelHook = HookOrDefault({
   hookName: 'sidebar:item-label',
-  defaultComponent: ({children}) => <Fragment>{children}</Fragment>,
+  defaultComponent: ({children}) => children,
 });
 
 const tooltipDisabledProps = {

static/app/components/teamRoleUtils.tsx

@@ -1,11 +1,9 @@
-import {Fragment} from 'react';
-
 import HookOrDefault from 'sentry/components/hookOrDefault';
 import {t} from 'sentry/locale';
 
 const LabelHook = HookOrDefault({
   hookName: 'sidebar:item-label',
-  defaultComponent: ({children}) => <Fragment>{children}</Fragment>,
+  defaultComponent: ({children}) => children,
 });
 
 export function TeamRoleColumnLabel() {

static/app/utils/measurements/measurements.tsx

@@ -1,5 +1,3 @@
-import {Fragment} from 'react';
-
 import type {MobileVital, WebVital} from 'sentry/utils/fields';
 import {
   MOBILE_VITAL_DETAILS,
@@ -47,7 +45,7 @@ type Props = {
 
 function Measurements({children}: Props) {
   const measurements = getMeasurements();
-  return <Fragment>{children({measurements})}</Fragment>;
+  return children({measurements});
 }
 
 export default Measurements;

static/app/utils/performance/contexts/genericQueryBatcher.tsx

@@ -1,5 +1,5 @@
 import type {Ref} from 'react';
-import {createContext, Fragment, useEffect, useRef} from 'react';
+import {createContext, useEffect, useRef} from 'react';
 import identity from 'lodash/identity';
 
 import type {Client} from 'sentry/api';
@@ -237,7 +237,7 @@ export function QueryBatchNode(props: {
   try {
     batchContext = _useGenericQueryBatcher();
   } catch (_) {
-    return <Fragment>{children({})}</Fragment>;
+    return children({});
   }
 
   function batchRequest(

static/app/utils/performanceForSentry/index.tsx

@@ -1,5 +1,5 @@
 import type {ProfilerOnRenderCallback, ReactNode} from 'react';
-import {Fragment, Profiler, useEffect, useRef} from 'react';
+import {Profiler, useEffect, useRef} from 'react';
 import type {MeasurementUnit, Span, TransactionEvent} from '@sentry/core';
 import {browserPerformanceTimeOrigin, timestampInSeconds} from '@sentry/core';
 import * as Sentry from '@sentry/react';
@@ -229,12 +229,12 @@ export function VisuallyCompleteWithData({
   }, [_hasData, disabled, id]);
 
   if (disabled) {
-    return <Fragment>{children}</Fragment>;
+    return children;
   }
 
   return (
     <Profiler id={id} onRender={onRenderCallback}>
-      <Fragment>{children}</Fragment>
+      {children}
     </Profiler>
   );
 }

static/app/utils/teams.tsx

@@ -1,5 +1,3 @@
-import {Fragment} from 'react';
-
 import {useTeams} from 'sentry/utils/useTeams';
 
 type RenderProps = ReturnType<typeof useTeams>;
@@ -16,7 +14,7 @@ type Props = Parameters<typeof useTeams>[0] & {
 function Teams({children, ...props}: Props) {
   const renderProps = useTeams(props);
 
-  return <Fragment>{children(renderProps)}</Fragment>;
+  return children(renderProps);
 }
 
 export default Teams;

static/app/views/alerts/rules/metric/onDemandThresholdChecker.tsx

@@ -1,5 +1,3 @@
-import {Fragment} from 'react';
-
 import type {Project} from 'sentry/types/project';
 import {useApiQuery} from 'sentry/utils/queryClient';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -35,5 +33,5 @@ export function OnDemandThresholdChecker({
   const isOnDemandLimitReached =
     data === undefined ? undefined : data.totalOnDemandAlertSpecs >= data.maxAllowed;
 
-  return <Fragment>{children({isOnDemandLimitReached})}</Fragment>;
+  return children({isOnDemandLimitReached});
 }

static/app/views/dashboards/index.tsx

@@ -1,5 +1,3 @@
-import {Fragment} from 'react';
-
 import type {Client} from 'sentry/api';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import NotFound from 'sentry/components/errors/notFound';
@@ -24,7 +22,7 @@ function DashboardsV2Container(props: Props) {
   const {organization, children} = props;
 
   if (organization.features.includes('dashboards-edit')) {
-    return <Fragment>{children}</Fragment>;
+    return children;
   }
 
   return (

static/app/views/insights/agentMonitoring/components/headSortCell.tsx

@@ -1,4 +1,4 @@
-import {Fragment, memo} from 'react';
+import {memo} from 'react';
 
 import type {GridColumnHeader} from 'sentry/components/gridEditable';
 import SortLink from 'sentry/components/gridEditable/sortLink';
@@ -58,7 +58,7 @@ export const HeadSortCell = memo(function HeadCell({
             sortField === column.key ? (sortOrder === 'asc' ? 'desc' : 'asc') : 'desc',
         },
       })}
-      title={<Fragment>{children}</Fragment>}
+      title={children}
     />
   );
 });

static/app/views/insights/crons/components/cronsLandingPanel.tsx

@@ -1,4 +1,4 @@
-import {Fragment, useEffect} from 'react';
+import {useEffect} from 'react';
 import styled from '@emotion/styled';
 
 import {Button} from 'sentry/components/core/button';
@@ -128,7 +128,7 @@ export function CronsLandingPanel() {
 
   const OnboardingPanelHook = HookOrDefault({
     hookName: 'component:crons-onboarding-panel',
-    defaultComponent: ({children}) => <Fragment>{children}</Fragment>,
+    defaultComponent: ({children}) => children,
   });
 
   useEffect(() => {

static/app/views/performance/landing/widgets/components/queryHandler.tsx

@@ -23,7 +23,7 @@ export function QueryHandler<T extends WidgetDataConstraint>(
   const children = props.children ?? <Fragment />;
 
   if (!props.queries.length) {
-    return <Fragment>{children}</Fragment>;
+    return children;
   }
 
   return (

static/app/views/replays/list.tsx

@@ -1,4 +1,3 @@
-import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
 import HookOrDefault from 'sentry/components/hookOrDefault';
@@ -15,7 +14,7 @@ import ReplayTabs from 'sentry/views/replays/tabs';
 
 const ReplayListPageHeaderHook = HookOrDefault({
   hookName: 'component:replay-list-page-header',
-  defaultComponent: ({children}) => <Fragment>{children}</Fragment>,
+  defaultComponent: ({children}) => children,
 });
 
 function ReplaysListContainer() {

static/app/views/replays/list/replayOnboardingPanel.tsx

@@ -36,12 +36,12 @@ type Breakpoints = {
 
 const OnboardingCTAHook = HookOrDefault({
   hookName: 'component:replay-onboarding-cta',
-  defaultComponent: ({children}) => <Fragment>{children}</Fragment>,
+  defaultComponent: ({children}) => children,
 });
 
 const OnboardingAlertHook = HookOrDefault({
   hookName: 'component:replay-onboarding-alert',
-  defaultComponent: ({children}) => <Fragment>{children}</Fragment>,
+  defaultComponent: ({children}) => children,
 });
 
 export default function ReplayOnboardingPanel() {

static/app/views/settings/components/settingsNavItem.tsx

@@ -1,5 +1,4 @@
 import type {ReactElement} from 'react';
-import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
 import {Badge} from 'sentry/components/core/badge';
@@ -21,7 +20,7 @@ type Props = {
 
 const LabelHook = HookOrDefault({
   hookName: 'sidebar:item-label',
-  defaultComponent: ({children}) => <Fragment>{children}</Fragment>,
+  defaultComponent: ({children}) => children,
 });
 
 function SettingsNavBadge({badge}: {badge: string | number | null | ReactElement}) {

static/app/views/settings/components/settingsNavItemDeprecated.tsx

@@ -1,5 +1,4 @@
 import type {ReactElement} from 'react';
-import {Fragment} from 'react';
 import {NavLink as RouterNavLink} from 'react-router-dom';
 import styled from '@emotion/styled';
 import type {LocationDescriptor} from 'history';
@@ -23,7 +22,7 @@ type Props = {
 
 const LabelHook = HookOrDefault({
   hookName: 'sidebar:item-label',
-  defaultComponent: ({children}) => <Fragment>{children}</Fragment>,
+  defaultComponent: ({children}) => children,
 });
 
 function SettingsNavItemDeprecated({badge, label, index, id, to, ...props}: Props) {

static/app/views/settings/organizationMembers/organizationMemberDetail.tsx

@@ -57,7 +57,7 @@ const TWO_FACTOR_REQUIRED = t(
 
 const DisabledMemberTooltip = HookOrDefault({
   hookName: 'component:disabled-member-tooltip',
-  defaultComponent: ({children}) => <Fragment>{children}</Fragment>,
+  defaultComponent: ({children}) => children,
 });
 
 function MemberStatus({

static/app/views/settings/organizationMembers/organizationMemberRow.tsx

@@ -36,7 +36,7 @@ type State = {
 
 const DisabledMemberTooltip = HookOrDefault({
   hookName: 'component:disabled-member-tooltip',
-  defaultComponent: ({children}) => <Fragment>{children}</Fragment>,
+  defaultComponent: ({children}) => children,
 });
 
 export default class OrganizationMemberRow extends PureComponent<Props, State> {

static/gsApp/components/features/planFeature.tsx

@@ -1,5 +1,3 @@
-import {Fragment} from 'react';
-
 import type {Organization} from 'sentry/types/organization';
 import {descopeFeatureName} from 'sentry/utils';
 
@@ -115,7 +113,7 @@ function PlanFeature({subscription, features, organization, children}: Props) {
       ? billingConfig.id
       : null;
 
-  return <Fragment>{children({plan: requiredPlan ?? null, tierChange})}</Fragment>;
+  return children({plan: requiredPlan ?? null, tierChange});
 }
 
 export default withSubscription(PlanFeature, {noLoader: true});

static/gsApp/components/replayOnboardingAlert.tsx

@@ -1,5 +1,4 @@
 import type {ReactNode} from 'react';
-import {Fragment} from 'react';
 
 import withSubscription from 'getsentry/components/withSubscription';
 import type {Subscription} from 'getsentry/types';
@@ -17,7 +16,7 @@ function ReplayOnboardingAlert({children, subscription}: Props) {
     return null;
   }
 
-  return <Fragment>{children}</Fragment>;
+  return children;
 }
 
 export default withSubscription(ReplayOnboardingAlert, {noLoader: true});