feat(project-creation): convert button to functional component (#49561)

This PR is related to https://github.com/getsentry/sentry/pull/49551
Basically I'm creating a hook to check project creation eligibility and
this is the only class component. I looked into migrating the whole
organizationproject to functional component but that seems like overkill
so for now, I just turn the button into functional component so it's
aligned with the rest of places where project creation eligibility is
being checked.

static/app/views/settings/organizationProjects/createProjectButton.tsx

@@ -0,0 +1,30 @@
+import {Button} from 'sentry/components/button';
+import {canCreateProject} from 'sentry/components/projects/utils';
+import {IconAdd} from 'sentry/icons';
+import {t} from 'sentry/locale';
+import {Organization} from 'sentry/types';
+
+type Props = {
+  organization: Organization;
+};
+
+export default function CreateProjectButton({organization}: Props) {
+  const canCreateProjects = canCreateProject(organization);
+
+  return (
+    <Button
+      priority="primary"
+      size="sm"
+      disabled={!canCreateProjects}
+      title={
+        !canCreateProjects
+          ? t('You do not have permission to create projects')
+          : undefined
+      }
+      to={`/organizations/${organization.slug}/projects/new/`}
+      icon={<IconAdd size="xs" isCircled />}
+    >
+      {t('Create Project')}
+    </Button>
+  );
+}

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

@@ -3,14 +3,11 @@ import {RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
 import {Location} from 'history';
 
-import {Button} from 'sentry/components/button';
 import EmptyMessage from 'sentry/components/emptyMessage';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import Pagination from 'sentry/components/pagination';
 import {Panel, PanelBody, PanelHeader, PanelItem} from 'sentry/components/panels';
 import Placeholder from 'sentry/components/placeholder';
-import {canCreateProject} from 'sentry/components/projects/utils';
-import {IconAdd} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {Organization, Project} from 'sentry/types';
@@ -21,6 +18,7 @@ import withOrganization from 'sentry/utils/withOrganization';
 import AsyncView from 'sentry/views/asyncView';
 import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
 import ProjectListItem from 'sentry/views/settings/components/settingsProjectItem';
+import CreateProjectButton from 'sentry/views/settings/organizationProjects/createProjectButton';
 
 import ProjectStatsGraph from './projectStatsGraph';
 
@@ -81,24 +79,8 @@ class OrganizationProjects extends AsyncView<Props, State> {
   renderBody(): React.ReactNode {
     const {projectList, projectListPageLinks, projectStats} = this.state;
     const {organization} = this.props;
-    const canCreateProjects = canCreateProject(organization);
-
-    const action = (
-      <Button
-        priority="primary"
-        size="sm"
-        disabled={!canCreateProjects}
-        title={
-          !canCreateProjects
-            ? t('You do not have permission to create projects')
-            : undefined
-        }
-        to={`/organizations/${organization.slug}/projects/new/`}
-        icon={<IconAdd size="xs" isCircled />}
-      >
-        {t('Create Project')}
-      </Button>
-    );
+
+    const action = <CreateProjectButton organization={organization} />;
 
     return (
       <Fragment>