import styled from '@emotion/styled';
import Footer from 'sentry/components/footer';
import HookOrDefault from 'sentry/components/hookOrDefault';
import Nav from 'sentry/components/nav';
import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
import Sidebar from 'sentry/components/sidebar';
import type {Organization} from 'sentry/types/organization';
import useRouteAnalyticsHookSetup from 'sentry/utils/routeAnalytics/useRouteAnalyticsHookSetup';
import useDevToolbar from 'sentry/utils/useDevToolbar';
import {useIsSentryEmployee} from 'sentry/utils/useIsSentryEmployee';
import useOrganization from 'sentry/utils/useOrganization';
import OrganizationContainer from 'sentry/views/organizationContainer';
import Body from './body';
interface Props {
children: React.ReactNode;
}
const OrganizationHeader = HookOrDefault({
hookName: 'component:organization-header',
});
function DevToolInit() {
const isEmployee = useIsSentryEmployee();
const organization = useOrganization();
const showDevToolbar = organization.features.includes('devtoolbar');
useDevToolbar({enabled: showDevToolbar && isEmployee});
return null;
}
function OrganizationLayout({children}: Props) {
useRouteAnalyticsHookSetup();
// XXX(epurkhiser): The OrganizationContainer is responsible for ensuring the
// oganization is loaded before rendering children. Organization may not be
// loaded yet when this first renders.
const organization = useOrganization({allowNull: true});
const hasNavigationV2 = organization?.features.includes('navigation-sidebar-v2');
const App = hasNavigationV2 ? AppLayout : LegacyAppLayout;
return (
{children}
);
}
interface LayoutProps extends Props {
organization: Organization | null;
}
function AppLayout({children, organization}: LayoutProps) {
return (
{/* The `#main` selector is used to make the app content `inert` when an overlay is active */}
{organization && }
{organization && }
{children}
);
}
function LegacyAppLayout({children, organization}: LayoutProps) {
return (