projectSettingsLayout.tsx 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. import {cloneElement, isValidElement} from 'react';
  2. import type {RouteComponentProps} from 'react-router';
  3. import * as AppStoreConnectContext from 'sentry/components/projects/appStoreConnectContext';
  4. import type {Organization} from 'sentry/types/organization';
  5. import type {Project} from 'sentry/types/project';
  6. import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams';
  7. import withOrganization from 'sentry/utils/withOrganization';
  8. import ProjectContext from 'sentry/views/projects/projectContext';
  9. import SettingsLayout from 'sentry/views/settings/components/settingsLayout';
  10. import ProjectSettingsNavigation from 'sentry/views/settings/project/projectSettingsNavigation';
  11. type Props = {
  12. children: React.ReactNode;
  13. organization: Organization;
  14. } & RouteComponentProps<{projectId: string}, {}>;
  15. type InnerProps = Props & {project: Project};
  16. function InnerProjectSettingsLayout({
  17. params,
  18. routes,
  19. project,
  20. organization,
  21. children,
  22. ...props
  23. }: InnerProps) {
  24. // set analytics params for route based analytics
  25. useRouteAnalyticsParams({
  26. project_id: project.id,
  27. project_platform: project.platform,
  28. });
  29. return (
  30. <AppStoreConnectContext.Provider project={project} organization={organization}>
  31. <SettingsLayout
  32. params={params}
  33. routes={routes}
  34. {...props}
  35. renderNavigation={() => <ProjectSettingsNavigation organization={organization} />}
  36. >
  37. {children && isValidElement(children)
  38. ? cloneElement<any>(children, {organization, project})
  39. : children}
  40. </SettingsLayout>
  41. </AppStoreConnectContext.Provider>
  42. );
  43. }
  44. function ProjectSettingsLayout({organization, params, ...props}: Props) {
  45. return (
  46. <ProjectContext projectSlug={params.projectId}>
  47. {({project}) => (
  48. <InnerProjectSettingsLayout {...{params, project, organization, ...props}} />
  49. )}
  50. </ProjectContext>
  51. );
  52. }
  53. export default withOrganization(ProjectSettingsLayout);