ref(js): Convert TitleStar to a FC (#40632)

static/app/components/performance/teamKeyTransaction.tsx

@@ -31,7 +31,7 @@ type Props = {
   organization: Organization;
   project: Project;
   teams: Team[];
-  title: React.ComponentClass<TitleProps>;
+  title: React.ComponentType<TitleProps>;
   transactionName: string;
   initialValue?: number;
 };

static/app/utils/discover/teamKeyTransactionField.tsx

@@ -1,5 +1,3 @@
-import {Component} from 'react';
-
 import Button from 'sentry/components/button';
 import TeamKeyTransaction, {
   TitleProps,
@@ -12,33 +10,32 @@ import {Organization, Project} from 'sentry/types';
 import {defined} from 'sentry/utils';
 import withProjects from 'sentry/utils/withProjects';
 
-class TitleStar extends Component<TitleProps> {
-  render() {
-    const {isOpen, keyedTeams, initialValue, ...props} = this.props;
-    const keyedTeamsCount = keyedTeams?.length ?? initialValue ?? 0;
-    const star = (
-      <IconStar
-        color={keyedTeamsCount ? 'yellow300' : 'gray200'}
-        isSolid={keyedTeamsCount > 0}
-        data-test-id="team-key-transaction-column"
-      />
-    );
-    const button = (
-      <Button
-        {...props}
-        icon={star}
-        borderless
-        size="zero"
-        aria-label={t('Toggle star for team')}
-      />
-    );
+function TitleStar({isOpen, keyedTeams, initialValue, ...props}: TitleProps) {
+  const keyedTeamsCount = keyedTeams?.length ?? initialValue ?? 0;
+  const star = (
+    <IconStar
+      color={keyedTeamsCount ? 'yellow300' : 'gray200'}
+      isSolid={keyedTeamsCount > 0}
+      data-test-id="team-key-transaction-column"
+    />
+  );
+
+  const button = (
+    <Button
+      {...props}
+      icon={star}
+      borderless
+      size="zero"
+      aria-label={t('Toggle star for team')}
+    />
+  );
 
-    if (!isOpen && keyedTeams?.length) {
-      const teamSlugs = keyedTeams.map(({slug}) => slug).join(', ');
-      return <Tooltip title={teamSlugs}>{button}</Tooltip>;
-    }
-    return button;
+  if (!isOpen && keyedTeams?.length) {
+    const teamSlugs = keyedTeams.map(({slug}) => slug).join(', ');
+    return <Tooltip title={teamSlugs}>{button}</Tooltip>;
   }
+
+  return button;
 }
 
 type BaseProps = {