-
-
Notifications
You must be signed in to change notification settings - Fork 4k
/
layout.tsx
126 lines (116 loc) · 3.47 KB
/
layout.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import type {ComponentProps} from 'react';
import {Fragment} from 'react';
import styled from '@emotion/styled';
import HookOrDefault from 'sentry/components/hookOrDefault';
import ExternalLink from 'sentry/components/links/externalLink';
import List from 'sentry/components/list';
import ListItem from 'sentry/components/list/listItem';
import {AuthTokenGeneratorProvider} from 'sentry/components/onboarding/gettingStartedDoc/authTokenGenerator';
import type {StepProps} from 'sentry/components/onboarding/gettingStartedDoc/step';
import {Step} from 'sentry/components/onboarding/gettingStartedDoc/step';
import type {NextStep} from 'sentry/components/onboarding/gettingStartedDoc/types';
import {PlatformOptionsControl} from 'sentry/components/onboarding/platformOptionsControl';
import {ProductSelection} from 'sentry/components/onboarding/productSelection';
import {t} from 'sentry/locale';
import {space} from 'sentry/styles/space';
import type {PlatformKey} from 'sentry/types/project';
import useOrganization from 'sentry/utils/useOrganization';
const ProductSelectionAvailabilityHook = HookOrDefault({
hookName: 'component:product-selection-availability',
defaultComponent: ProductSelection,
});
export type LayoutProps = {
projectSlug: string;
steps: StepProps[];
/**
* An introduction displayed before the steps
*/
introduction?: React.ReactNode;
newOrg?: boolean;
nextSteps?: NextStep[];
platformKey?: PlatformKey;
platformOptions?: ComponentProps<typeof PlatformOptionsControl>['platformOptions'];
};
export function Layout({
steps,
platformKey,
newOrg,
nextSteps = [],
platformOptions,
introduction,
projectSlug,
}: LayoutProps) {
const organization = useOrganization();
return (
<AuthTokenGeneratorProvider projectSlug={projectSlug}>
<Wrapper>
<Header>
{introduction && <Introduction>{introduction}</Introduction>}
<ProductSelectionAvailabilityHook
organization={organization}
platform={platformKey}
/>
{platformOptions ? (
<PlatformOptionsControl platformOptions={platformOptions} />
) : null}
</Header>
<Divider withBottomMargin={newOrg} />
<Steps>
{steps.map(step => (
<Step key={step.title ?? step.type} {...step} />
))}
</Steps>
{nextSteps.length > 0 && (
<Fragment>
<Divider />
<h4>{t('Next Steps')}</h4>
<List symbol="bullet">
{nextSteps.map(step => (
<ListItem key={step.name}>
<ExternalLink href={step.link}>{step.name}</ExternalLink>
{': '}
{step.description}
</ListItem>
))}
</List>
</Fragment>
)}
</Wrapper>
</AuthTokenGeneratorProvider>
);
}
const Header = styled('div')`
display: flex;
flex-direction: column;
gap: ${space(2)};
`;
const Divider = styled('hr')<{withBottomMargin?: boolean}>`
height: 1px;
width: 100%;
background: ${p => p.theme.border};
border: none;
${p => p.withBottomMargin && `margin-bottom: ${space(3)}`}
`;
const Steps = styled('div')`
display: flex;
flex-direction: column;
gap: 1.5rem;
`;
const Introduction = styled('div')`
display: flex;
flex-direction: column;
gap: ${space(1)};
`;
const Wrapper = styled('div')`
h4 {
margin-bottom: 0.5em;
}
&& {
p {
margin-bottom: 0;
}
h5 {
margin-bottom: 0;
}
}
`;