chore(js): Apply react/function-component-definition (#47099)

.eslintrc.js

@@ -30,6 +30,11 @@ module.exports = {
   },
 
   rules: {
+    'react/function-component-definition': [
+      'error',
+      {namedComponents: 'function-declaration'},
+    ],
+
     'react-hooks/exhaustive-deps': [
       'warn',
       {additionalHooks: ADDITIONAL_HOOKS_TO_CHECK_DEPS_FOR},

static/app/__mocks__/react-date-range.tsx

@@ -22,7 +22,7 @@ type DateRangeInputsProps = {
   range: Range;
 };
 
-const DatePickerInput = ({date, onChange, ...props}: DatePickerInputProps) => {
+function DatePickerInput({date, onChange, ...props}: DatePickerInputProps) {
   return (
     <input
       type="date"
@@ -35,7 +35,7 @@ const DatePickerInput = ({date, onChange, ...props}: DatePickerInputProps) => {
       {...props}
     />
   );
-};
+}
 
 /**
  * Replaces the react-date-range Calendar component with a date input
@@ -45,11 +45,11 @@ const DatePickerInput = ({date, onChange, ...props}: DatePickerInputProps) => {
  * const datePicker = screen.getByTestId('date-picker')
  * fireEvent.change(datePicker, {target: {value: '2022-01-01'}})
  */
-export const Calendar = ({date, onChange}: CalendarProps) => {
+export function Calendar({date, onChange}: CalendarProps) {
   return <DatePickerInput data-test-id="date-picker" date={date} onChange={onChange} />;
-};
+}
 
-const DateRangeInputs = ({range, onChange}: DateRangeInputsProps) => {
+function DateRangeInputs({range, onChange}: DateRangeInputsProps) {
   return (
     <div data-test-id={`date-range-${range.key}`}>
       <DatePickerInput
@@ -68,7 +68,7 @@ const DateRangeInputs = ({range, onChange}: DateRangeInputsProps) => {
       />
     </div>
   );
-};
+}
 
 /**
  * Replaces the react-date-range DateRange component with multiple date inputs
@@ -81,7 +81,7 @@ const DateRangeInputs = ({range, onChange}: DateRangeInputsProps) => {
  * fireEvent.change(datePickerFrom, {target: {value: '2022-01-01'}})
  * fireEvent.change(datePickerTo, {target: {value: '2022-01-02'}})
  */
-export const DateRange = ({ranges, onChange}: DateRangeProps) => {
+export function DateRange({ranges, onChange}: DateRangeProps) {
   return (
     <div data-test-id="date-range-picker">
       {ranges?.map(range => (
@@ -104,4 +104,4 @@ export const DateRange = ({ranges, onChange}: DateRangeProps) => {
       )) ?? null}
     </div>
   );
-};
+}

static/app/components/acl/comingSoon.tsx

@@ -1,10 +1,12 @@
 import {Alert} from 'sentry/components/alert';
 import {t} from 'sentry/locale';
 
-const ComingSoon = () => (
-  <Alert type="info" showIcon>
-    {t('This feature is coming soon!')}
-  </Alert>
-);
+function ComingSoon() {
+  return (
+    <Alert type="info" showIcon>
+      {t('This feature is coming soon!')}
+    </Alert>
+  );
+}
 
 export default ComingSoon;

static/app/components/actions/ignore.tsx

@@ -215,7 +215,7 @@ type IgnoreActionProps = {
   size?: 'xs' | 'sm';
 };
 
-const IgnoreActions = ({
+function IgnoreActions({
   onUpdate,
   disabled,
   shouldConfirm,
@@ -226,7 +226,7 @@ const IgnoreActions = ({
   size = 'xs',
   confirmLabel = t('Ignore'),
   isIgnored = false,
-}: IgnoreActionProps) => {
+}: IgnoreActionProps) {
   if (isIgnored) {
     return (
       <Tooltip title={t('Change status to unresolved')}>
@@ -281,7 +281,7 @@ const IgnoreActions = ({
       />
     </ButtonBar>
   );
-};
+}
 
 export default IgnoreActions;
 

static/app/components/activity/note/body.tsx

@@ -5,12 +5,14 @@ type Props = {
   className?: string;
 };
 
-const NoteBody = ({className, text}: Props) => (
-  <div
-    className={className}
-    data-test-id="activity-note-body"
-    dangerouslySetInnerHTML={{__html: marked(text)}}
-  />
-);
+function NoteBody({className, text}: Props) {
+  return (
+    <div
+      className={className}
+      data-test-id="activity-note-body"
+      dangerouslySetInnerHTML={{__html: marked(text)}}
+    />
+  );
+}
 
 export default NoteBody;

static/app/components/activity/note/header.tsx

@@ -17,7 +17,7 @@ type Props = {
   user?: User;
 };
 
-const NoteHeader = ({authorName, user, onEdit, onDelete}: Props) => {
+function NoteHeader({authorName, user, onEdit, onDelete}: Props) {
   const activeUser = ConfigStore.get('user');
   const canEdit = activeUser && (activeUser.isSuperuser || user?.id === activeUser.id);
 
@@ -48,7 +48,7 @@ const NoteHeader = ({authorName, user, onEdit, onDelete}: Props) => {
       )}
     </div>
   );
-};
+}
 
 const getActionStyle = (p: {theme: Theme}) => `
   padding: 0 7px;

static/app/components/autoComplete.spec.jsx

@@ -35,15 +35,15 @@ describe('AutoComplete', function () {
     autoCompleteState = [];
   });
 
-  const List = ({registerItemCount, itemCount, ...props}) => {
+  function List({registerItemCount, itemCount, ...props}) {
     useEffect(() => void registerItemCount(itemCount), [itemCount, registerItemCount]);
     return <ul {...props} />;
-  };
+  }
 
-  const Item = ({registerVisibleItem, item, index, ...props}) => {
+  function Item({registerVisibleItem, item, index, ...props}) {
     useEffect(() => registerVisibleItem(index, item), [registerVisibleItem, index, item]);
     return <li {...props} />;
-  };
+  }
 
   const createComponent = props => (
     <AutoComplete {...mocks} itemToString={item => item.name} {...props}>

static/app/components/avatar/docIntegrationAvatar.tsx

@@ -6,7 +6,7 @@ type Props = {
   docIntegration?: DocIntegration;
 } & BaseAvatar['props'];
 
-const DocIntegrationAvatar = ({docIntegration, ...props}: Props) => {
+function DocIntegrationAvatar({docIntegration, ...props}: Props) {
   if (!docIntegration?.avatar) {
     return <PluginIcon {...props} pluginId={docIntegration?.slug} />;
   }
@@ -19,6 +19,6 @@ const DocIntegrationAvatar = ({docIntegration, ...props}: Props) => {
       title={docIntegration.name}
     />
   );
-};
+}
 
 export default DocIntegrationAvatar;

static/app/components/avatar/organizationAvatar.tsx

@@ -6,7 +6,7 @@ type Props = {
   organization?: OrganizationSummary;
 } & Omit<BaseAvatar['props'], 'uploadPath' | 'uploadId'>;
 
-const OrganizationAvatar = ({organization, ...props}: Props) => {
+function OrganizationAvatar({organization, ...props}: Props) {
   if (!organization) {
     return null;
   }
@@ -24,6 +24,6 @@ const OrganizationAvatar = ({organization, ...props}: Props) => {
       title={title}
     />
   );
-};
+}
 
 export default OrganizationAvatar;

static/app/components/avatar/projectAvatar.tsx

@@ -7,17 +7,19 @@ type Props = {
   project: AvatarProject;
 } & BaseAvatar['props'];
 
-const ProjectAvatar = ({project, hasTooltip, tooltip, ...props}: Props) => (
-  <Tooltip disabled={!hasTooltip} title={tooltip}>
-    <PlatformList
-      // `platform` is a user selectable option that is performed during the onboarding process. The reason why this
-      // is not the default is because there currently is no way to update it. Fallback to this if project does not
-      // have recent events with a platform.
-      platforms={project?.platform ? [project.platform] : []}
-      {...props}
-      max={1}
-    />
-  </Tooltip>
-);
+function ProjectAvatar({project, hasTooltip, tooltip, ...props}: Props) {
+  return (
+    <Tooltip disabled={!hasTooltip} title={tooltip}>
+      <PlatformList
+        // `platform` is a user selectable option that is performed during the onboarding process. The reason why this
+        // is not the default is because there currently is no way to update it. Fallback to this if project does not
+        // have recent events with a platform.
+        platforms={project?.platform ? [project.platform] : []}
+        {...props}
+        max={1}
+      />
+    </Tooltip>
+  );
+}
 
 export default ProjectAvatar;