ref(ts): Replace organization:header hook w/ proper component hook (#62859)

static/app/types/hooks.tsx

@@ -114,6 +114,10 @@ type CronsBillingBannerProps = {
   organization: Organization;
 };
 
+type OrganizationHeaderProps = {
+  organization: Organization;
+};
+
 type ProductSelectionAvailabilityProps = Pick<
   ProductSelectionProps,
   'lazyLoader' | 'skipLazyLoader' | 'platform' | 'withBottomMargin'
@@ -175,6 +179,7 @@ export type ComponentHooks = {
   'component:member-list-header': () => React.ComponentType<MemberListHeaderProps>;
   'component:monitor-status-toggle': () => React.ComponentType<StatusToggleButtonProps>;
   'component:org-stats-banner': () => React.ComponentType<DashboardHeadersProps>;
+  'component:organization-header': React.ComponentType<OrganizationHeaderProps>;
   'component:product-selection-availability': () => React.ComponentType<ProductSelectionAvailabilityProps>;
   'component:product-unavailable-cta': () => React.ComponentType<ProductUnavailableCTAProps>;
   'component:profiling-am1-or-mmx-upgrade': () => React.ComponentType<ProfilingAM1OrMMXUpgradeProps>;

static/app/views/organizationContextContainer.tsx

@@ -7,6 +7,7 @@ import {fetchOrganizationDetails} from 'sentry/actionCreators/organization';
 import {openSudo} from 'sentry/actionCreators/sudoModal';
 import {Client} from 'sentry/api';
 import {Alert} from 'sentry/components/alert';
+import HookOrDefault from 'sentry/components/hookOrDefault';
 import LoadingError from 'sentry/components/loadingError';
 import LoadingTriangle from 'sentry/components/loadingTriangle';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
@@ -52,6 +53,10 @@ type State = {
   hooks?: React.ReactNode[];
 };
 
+const OrganizationHeader = HookOrDefault({
+  hookName: 'component:organization-header',
+});
+
 function getOrganizationSlug(props: Props) {
   return (
     props.params.orgId ||
@@ -311,6 +316,7 @@ class OrganizationContextContainer extends Component<Props, State> {
         <OrganizationContext.Provider value={this.state.organization}>
           <div className="app">
             {this.state.hooks}
+            <OrganizationHeader organization={this.state.organization} />
             {this.renderSidebar()}
             {this.props.children}
           </div>