Skip to content

Commit e967020

Browse files
calvin-codecovcalvin-codecov
authored
feat(codecov): Add step 3 steps for TA onboarding (#93726)
Implements all step 3 versions for TA onboarding
1 parent 5423519 commit e967020

File tree

8 files changed

+294
-66
lines changed

8 files changed

+294
-66
lines changed

‎static/app/views/codecov/styles.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import styled from '@emotion/styled';
2+
3+
import {space} from 'sentry/styles/space';
4+
5+
export const InlineCodeSnippet = styled('span')`
6+
background-color: ${p => p.theme.black};
7+
color: ${p => p.theme.white};
8+
font-family: ${p => p.theme.text.familyMono};
9+
font-size: ${p => p.theme.fontSizeSmall};
10+
font-weight: ${p => p.theme.fontWeightNormal};
11+
border-radius: ${p => p.theme.borderRadius};
12+
padding: ${space(0.75)} 10px;
13+
line-height: 1;
14+
position: relative;
15+
top: -2px;
16+
`;

‎static/app/views/codecov/tests/onboarding.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@ import styled from '@emotion/styled';
55
import RadioGroup from 'sentry/components/forms/controls/radioGroup';
66
import {t} from 'sentry/locale';
77
import {space} from 'sentry/styles/space';
8-
import {AddPermissionsBlock} from 'sentry/views/codecov/tests/onboardingSteps/addPermissionsBlock';
8+
import {AddScriptToYaml} from 'sentry/views/codecov/tests/onboardingSteps/addScriptToYaml';
99
import {AddUploadToken} from 'sentry/views/codecov/tests/onboardingSteps/addUploadToken';
1010
import type {UploadPermission} from 'sentry/views/codecov/tests/onboardingSteps/chooseUploadPermission';
1111
import {ChooseUploadPermission} from 'sentry/views/codecov/tests/onboardingSteps/chooseUploadPermission';
12+
import {EditGHAWorkflow} from 'sentry/views/codecov/tests/onboardingSteps/editGHAWorkflow';
13+
import {InstallPreventCLI} from 'sentry/views/codecov/tests/onboardingSteps/installPreventCLI';
1214
import {OutputCoverageFile} from 'sentry/views/codecov/tests/onboardingSteps/outputCoverageFile';
1315
import TestPreOnboardingPage from 'sentry/views/codecov/tests/preOnboarding';
1416

@@ -27,6 +29,8 @@ export default function TestsOnboardingPage() {
2729
const [selectedUploadPermission, setSelectedUploadPermission] =
2830
useState<UploadPermission>('oidc');
2931

32+
// TODO: modify to designate full scenario for GHAction vs CLI
33+
3034
return (
3135
<LayoutGap>
3236
<TestPreOnboardingPage />
@@ -58,7 +62,9 @@ export default function TestsOnboardingPage() {
5862
setSelectedUploadPermission={setSelectedUploadPermission}
5963
/>
6064
<AddUploadToken step="2b" />
61-
<AddPermissionsBlock step="2b" />
65+
<AddScriptToYaml step="3" />
66+
<InstallPreventCLI step="3" />
67+
<EditGHAWorkflow step="3" />
6268
</StepsContainer>
6369
</OnboardingContainer>
6470
</LayoutGap>

‎static/app/views/codecov/tests/onboardingSteps/addPermissionsBlock.tsx

Lines changed: 0 additions & 60 deletions
This file was deleted.

‎static/app/views/codecov/tests/onboardingSteps/addScriptToYaml.tsx

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import styled from '@emotion/styled';
2+
3+
import {CodeSnippet} from 'sentry/components/codeSnippet';
4+
import {t, tct} from 'sentry/locale';
5+
import {space} from 'sentry/styles/space';
6+
import {InlineCodeSnippet} from 'sentry/views/codecov/styles';
7+
import {OnboardingStep} from 'sentry/views/codecov/tests/onboardingSteps/onboardingStep';
8+
9+
interface OutputCoverageFileProps {
10+
step: string;
11+
}
12+
13+
const SNIPPET = `- name: Upload test results to Codecov
14+
if: \${{ !cancelled() }}
15+
uses: codecov/test-results-action@v1
16+
with:
17+
token: \${{ secrets.CODECOV_TOKEN }}
18+
`;
19+
20+
export function AddScriptToYaml({step}: OutputCoverageFileProps) {
21+
const headerText = tct(
22+
'Step [step]: Add the script [actionName] to your CI YAML file',
23+
{
24+
step,
25+
actionName: <InlineCodeSnippet>{t('permissions')}</InlineCodeSnippet>,
26+
}
27+
);
28+
29+
return (
30+
<OnboardingStep.Container>
31+
<OnboardingStep.Header>{headerText}</OnboardingStep.Header>
32+
<OnboardingStep.Content>
33+
<AddScriptsParagraph>
34+
{t('In your CI YAML file, add below scripts to the end of your test run.')}
35+
</AddScriptsParagraph>
36+
<CodeSnippet dark language="yaml">
37+
{SNIPPET}
38+
</CodeSnippet>
39+
<SnippetFollowupParagraph>
40+
{t(
41+
'This action will download the Sentry Prevent CLI, and upload the junit.xml file generated in the previous step to Sentry.'
42+
)}
43+
</SnippetFollowupParagraph>
44+
{/* TODO: add dropdown expansion */}
45+
</OnboardingStep.Content>
46+
</OnboardingStep.Container>
47+
);
48+
}
49+
50+
const AddScriptsParagraph = styled('div')`
51+
margin-bottom: ${space(1)};
52+
`;
53+
54+
const SnippetFollowupParagraph = styled('div')`
55+
margin-top: ${space(1.5)};
56+
`;

‎static/app/views/codecov/tests/onboardingSteps/chooseUploadPermission.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const CHOICE_OPTIONS: Array<
1616
> = [
1717
[
1818
'oidc',
19-
t('Use OpenID Connect(OIDC)'),
19+
t('Use OpenID Connect (OIDC)'),
2020
tct(
2121
'Recommended option, it does not require repo admin privileges to get started. Learn more about [OIDC].',
2222
{

‎static/app/views/codecov/tests/onboardingSteps/editGHAWorkflow.tsx

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import styled from '@emotion/styled';
2+
3+
import {CodeSnippet} from 'sentry/components/codeSnippet';
4+
import Link from 'sentry/components/links/link';
5+
import {t, tct} from 'sentry/locale';
6+
import {space} from 'sentry/styles/space';
7+
import {InlineCodeSnippet} from 'sentry/views/codecov/styles';
8+
import {OnboardingStep} from 'sentry/views/codecov/tests/onboardingSteps/onboardingStep';
9+
10+
interface EditWorkflowProps {
11+
step: string;
12+
}
13+
14+
const PERMISSIONS_SNIPPET = `permissions:
15+
id-token: write
16+
`;
17+
18+
const ACTION_SNIPPET = `- name: Upload test results to Codecov
19+
if: \${{ !cancelled() }}
20+
uses: getsentry/prevent-action
21+
`;
22+
23+
export function EditGHAWorkflow({step}: EditWorkflowProps) {
24+
const headerText = tct('Step [step]: Edit your GitHub Action workflow', {
25+
step,
26+
});
27+
28+
return (
29+
<OnboardingStep.Container>
30+
<OnboardingStep.Header>{headerText}</OnboardingStep.Header>
31+
<OnboardingStep.Content>
32+
<TopParagraph>
33+
<SubHeader>
34+
{tct(
35+
'Add [permissions] block at the top level in your CI YAML file to run Sentry Prevent',
36+
{
37+
permissions: <InlineCodeSnippet>permissions</InlineCodeSnippet>,
38+
}
39+
)}
40+
</SubHeader>
41+
<CodeSnippet dark language="yaml">
42+
{PERMISSIONS_SNIPPET}
43+
</CodeSnippet>
44+
<Paragraph>
45+
{tct(
46+
'Set this permission at the workflow or job level. For better security, define it at the job level as it limits access to only the job that needs the OIDC token. Learn more about [permissionsSettings].',
47+
{
48+
permissionsSettings: <Link to="">{t('permissions settings')}</Link>,
49+
}
50+
)}
51+
</Paragraph>
52+
</TopParagraph>
53+
<SubHeader>
54+
{tct('Add the script [actionName] to your CI YAML file', {
55+
actionName: <InlineCodeSnippet>getsentry/prevent-action</InlineCodeSnippet>,
56+
})}
57+
</SubHeader>
58+
<Paragraph>
59+
{t('In your CI YAML file, add below scripts to the end of your test run.')}
60+
</Paragraph>
61+
<CodeSnippet dark language="yaml">
62+
{ACTION_SNIPPET}
63+
</CodeSnippet>
64+
<Paragraph>
65+
{t(
66+
'This action will download the Sentry Prevent CLI, and upload the junit.xml file generated in the previous step to Sentry.'
67+
)}
68+
</Paragraph>
69+
{/* TODO: add dropdown expansion */}
70+
</OnboardingStep.Content>
71+
</OnboardingStep.Container>
72+
);
73+
}
74+
75+
const SubHeader = styled('div')`
76+
font-size: ${p => p.theme.fontSizeExtraLarge};
77+
font-weight: ${p => p.theme.fontWeightBold};
78+
color: ${p => p.theme.gray300};
79+
margin-bottom: 0;
80+
line-height: 31px;
81+
`;
82+
83+
const TopParagraph = styled('div')`
84+
margin-bottom: ${space(3)};
85+
`;
86+
87+
const Paragraph = styled('div')`
88+
margin: ${space(1)} 0;
89+
`;

‎static/app/views/codecov/tests/onboardingSteps/installPreventCLI.tsx

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import {Fragment, useState} from 'react';
2+
import styled from '@emotion/styled';
3+
4+
import {CodeSnippet} from 'sentry/components/codeSnippet';
5+
import {Select} from 'sentry/components/core/select';
6+
import RadioGroup from 'sentry/components/forms/controls/radioGroup';
7+
import Link from 'sentry/components/links/link';
8+
import {IconOpen} from 'sentry/icons';
9+
import {t, tct} from 'sentry/locale';
10+
import {space} from 'sentry/styles/space';
11+
import {OnboardingStep} from 'sentry/views/codecov/tests/onboardingSteps/onboardingStep';
12+
13+
interface OutputCoverageFileProps {
14+
step: string;
15+
}
16+
17+
type Method = 'pip' | 'binary';
18+
19+
// TODO: confirm these platform choices
20+
type Platform = 'macOS' | 'Linux' | 'Windows';
21+
22+
const SNIPPET = `snippet still tbd`;
23+
24+
export function InstallPreventCLI({step}: OutputCoverageFileProps) {
25+
const [method, setMethod] = useState<Method>('pip');
26+
const [selectedPlatform, setSelectedPlatform] = useState<Platform>('macOS');
27+
28+
const headerText = tct(
29+
'Step [step]: Install the [preventLink] to your CI environment',
30+
{
31+
step,
32+
preventLink: (
33+
<Link to="https://docs.sentry.io/platforms/python/prevent/cli/">
34+
{t('Sentry Prevent CLI')}
35+
</Link>
36+
),
37+
}
38+
);
39+
40+
return (
41+
<OnboardingStep.Container>
42+
<OnboardingStep.Header>{headerText}</OnboardingStep.Header>
43+
<OnboardingStep.Content>
44+
<RadioGroup
45+
label="install method"
46+
value={method}
47+
onChange={setMethod}
48+
choices={[
49+
['pip', t('Using pip (for Python users)')],
50+
['binary', t('Using a Binary')],
51+
]}
52+
/>
53+
{method === 'pip' ? (
54+
<Fragment>
55+
<Paragraph>
56+
{t(
57+
'If you have Python installed already, you can run the script below to install the Sentry Prevent CLI.'
58+
)}
59+
</Paragraph>
60+
<CodeSnippet dark language="bash">
61+
{SNIPPET}
62+
</CodeSnippet>
63+
{CLILink}
64+
</Fragment>
65+
) : null}
66+
{method === 'binary' ? (
67+
<Fragment>
68+
<Paragraph>
69+
{t(
70+
'Select a platform, and following snippet instructs the CLI to upload your reports to Sentry Prevent.'
71+
)}
72+
</Paragraph>
73+
<StyledSelectControl
74+
size="md"
75+
options={[
76+
{label: 'macOS', value: 'macOS'},
77+
{label: 'Linux', value: 'linux'},
78+
{label: 'Windows', value: 'windows'},
79+
]}
80+
value={selectedPlatform}
81+
onChange={(option: {value: Platform}) => setSelectedPlatform(option.value)}
82+
/>
83+
<CodeSnippet dark language="bash">
84+
{SNIPPET}
85+
</CodeSnippet>
86+
{CLILink}
87+
</Fragment>
88+
) : null}
89+
{/* TODO: add dropdown expansion */}
90+
</OnboardingStep.Content>
91+
</OnboardingStep.Container>
92+
);
93+
}
94+
95+
const StyledSelectControl = styled(Select)`
96+
width: 110px;
97+
margin-bottom: ${space(1.5)};
98+
`;
99+
100+
const Paragraph = styled('div')`
101+
margin-top: ${space(2)};
102+
margin-bottom: ${space(1)};
103+
`;
104+
105+
const BottomParagraph = styled('div')`
106+
margin-top: ${space(2)};
107+
`;
108+
109+
const CLILink = (
110+
<BottomParagraph>
111+
{tct('Learn more about the [cliLink].', {
112+
cliLink: (
113+
<Link to="https://docs.sentry.io/platforms/python/prevent/cli/">
114+
{t('Sentry CLI Link')} <IconOpen size="xs" />
115+
</Link>
116+
),
117+
})}
118+
</BottomParagraph>
119+
);

0 commit comments

Comments
 (0)