Skip to content

Commit 200c45c

Browse files
calvin-codecovcalvin-codecov
authored
feat(codecov): Add TA onboarding steps for steps 4,5,6 (#96599)
Closes https://linear.app/getsentry/issue/CCMRG-1437/onboarding-step-4 Closes https://linear.app/getsentry/issue/CCMRG-1438/onboarding-step-5 Closes https://linear.app/getsentry/issue/CCMRG-1439/onboarding-step-6 Figma file: https://www.figma.com/design/mSyCX0wCk7e2yItQfiMhaa/GH-1247_MergePlan?node-id=1-2&t=pUq7qhgXR70GkbJr-1 - Added new steps that are used for steps 4, 5, and 6. None currently have the step 6 label but depending on how many steps came before, the ViewResultsInsightsStep may be used for 6. - Added "Step" suffix to all of the step component names - Changed a couple instances of `space` to the new schema with theme
1 parent b8b13da commit 200c45c

11 files changed

+197
-33
lines changed

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

Lines changed: 33 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,19 @@ import {useCallback, useState} from 'react';
22
import {useSearchParams} from 'react-router-dom';
33
import styled from '@emotion/styled';
44

5+
import {Link} from 'sentry/components/core/link';
56
import RadioGroup from 'sentry/components/forms/controls/radioGroup';
6-
import {t} from 'sentry/locale';
7-
import {space} from 'sentry/styles/space';
8-
import {AddScriptToYaml} from 'sentry/views/codecov/tests/onboardingSteps/addScriptToYaml';
9-
import {AddUploadToken} from 'sentry/views/codecov/tests/onboardingSteps/addUploadToken';
10-
import type {UploadPermission} from 'sentry/views/codecov/tests/onboardingSteps/chooseUploadPermission';
11-
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';
14-
import {OutputCoverageFile} from 'sentry/views/codecov/tests/onboardingSteps/outputCoverageFile';
7+
import {t, tct} from 'sentry/locale';
8+
import {AddScriptToYamlStep} from 'sentry/views/codecov/tests/onboardingSteps/addScriptToYamlStep';
9+
import {AddUploadTokenStep} from 'sentry/views/codecov/tests/onboardingSteps/addUploadTokenStep';
10+
import type {UploadPermission} from 'sentry/views/codecov/tests/onboardingSteps/chooseUploadPermissionStep';
11+
import {ChooseUploadPermissionStep} from 'sentry/views/codecov/tests/onboardingSteps/chooseUploadPermissionStep';
12+
import {EditGHAWorkflowStep} from 'sentry/views/codecov/tests/onboardingSteps/editGHAWorkflowStep';
13+
import {InstallPreventCLIStep} from 'sentry/views/codecov/tests/onboardingSteps/installPreventCLIStep';
14+
import {OutputCoverageFileStep} from 'sentry/views/codecov/tests/onboardingSteps/outputCoverageFileStep';
15+
import {RunTestSuiteStep} from 'sentry/views/codecov/tests/onboardingSteps/runTestSuiteStep';
16+
import {UploadFileCLIStep} from 'sentry/views/codecov/tests/onboardingSteps/uploadFileCLIStep';
17+
import {ViewResultsInsightsStep} from 'sentry/views/codecov/tests/onboardingSteps/viewResultsInsightsStep';
1518
import TestPreOnboardingPage from 'sentry/views/codecov/tests/preOnboarding';
1619

1720
type SetupOption = 'githubAction' | 'cli';
@@ -54,17 +57,27 @@ export default function TestsOnboardingPage() {
5457
]}
5558
/>
5659
<StepsContainer>
57-
<OutputCoverageFile step="1" />
60+
<OutputCoverageFileStep step="1" />
5861
{/* TODO coming soon: we will conditionally render this based on CLI vs GHAction and OIDC vs Token for CLI */}
59-
<ChooseUploadPermission
62+
<ChooseUploadPermissionStep
6063
step="2a"
6164
selectedUploadPermission={selectedUploadPermission}
6265
setSelectedUploadPermission={setSelectedUploadPermission}
6366
/>
64-
<AddUploadToken step="2b" />
65-
<AddScriptToYaml step="3" />
66-
<InstallPreventCLI step="3" />
67-
<EditGHAWorkflow step="3" />
67+
<AddUploadTokenStep step="2b" />
68+
<AddScriptToYamlStep step="3" />
69+
<InstallPreventCLIStep step="3" />
70+
<EditGHAWorkflowStep step="3" />
71+
<RunTestSuiteStep step="4" />
72+
<UploadFileCLIStep previousStep="3" step="4" />
73+
<ViewResultsInsightsStep step="5" />
74+
<div>
75+
{tct('To learn more about Test Analytics, please visit [ourDocs].', {
76+
ourDocs: (
77+
<Link to="https://docs.sentry.io/product/test-analytics/">our docs</Link>
78+
),
79+
})}
80+
</div>
6881
</StepsContainer>
6982
</OnboardingContainer>
7083
</LayoutGap>
@@ -73,19 +86,19 @@ export default function TestsOnboardingPage() {
7386

7487
const LayoutGap = styled('div')`
7588
display: grid;
76-
gap: ${space(2)};
89+
gap: ${p => p.theme.space.xl};
7790
`;
7891

7992
const OnboardingContainer = styled('div')`
80-
padding: ${space(1.5)} ${space(4)};
93+
padding: ${p => p.theme.space.lg} ${p => p.theme.space['3xl']};
8194
border: 1px solid ${p => p.theme.border};
8295
border-radius: ${p => p.theme.borderRadius};
8396
max-width: 800px;
8497
`;
8598

8699
const IntroContainer = styled('div')`
87100
border-bottom: 1px solid ${p => p.theme.border};
88-
padding-bottom: ${space(3)};
101+
padding-bottom: ${p => p.theme.space['2xl']};
89102
`;
90103

91104
const GetStartedHeader = styled('h2')`
@@ -102,9 +115,9 @@ const TAValueText = styled('p')`
102115
const SelectOptionHeader = styled('h5')`
103116
font-size: ${p => p.theme.fontSize.xl};
104117
color: ${p => p.theme.tokens.content.primary};
105-
margin-top: ${space(3)};
118+
margin-top: ${p => p.theme.space['2xl']};
106119
`;
107120

108121
const StepsContainer = styled('div')`
109-
padding: ${space(3)} ${space(4)};
122+
padding: ${p => p.theme.space['2xl']} ${p => p.theme.space['3xl']};
110123
`;

‎static/app/views/codecov/tests/onboardingSteps/addScriptToYaml.tsx renamed to ‎static/app/views/codecov/tests/onboardingSteps/addScriptToYamlStep.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {space} from 'sentry/styles/space';
66
import {InlineCodeSnippet} from 'sentry/views/codecov/styles';
77
import {OnboardingStep} from 'sentry/views/codecov/tests/onboardingSteps/onboardingStep';
88

9-
interface OutputCoverageFileProps {
9+
interface AddScriptToYamlStepProps {
1010
step: string;
1111
}
1212

@@ -17,7 +17,7 @@ const SNIPPET = `- name: Upload test results to Codecov
1717
token: \${{ secrets.CODECOV_TOKEN }}
1818
`;
1919

20-
export function AddScriptToYaml({step}: OutputCoverageFileProps) {
20+
export function AddScriptToYamlStep({step}: AddScriptToYamlStepProps) {
2121
const headerText = tct(
2222
'Step [step]: Add the script [actionName] to your CI YAML file',
2323
{

‎static/app/views/codecov/tests/onboardingSteps/addUploadToken.tsx renamed to ‎static/app/views/codecov/tests/onboardingSteps/addUploadTokenStep.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@ import {IconClose} from 'sentry/icons';
99
import {t, tct} from 'sentry/locale';
1010
import {OnboardingStep} from 'sentry/views/codecov/tests/onboardingSteps/onboardingStep';
1111

12-
interface AddUploadTokenProps {
12+
interface AddUploadTokenStepProps {
1313
step: string;
1414
}
1515

1616
// HARDCODED VALUES FOR TESTING
1717
const FULL_TOKEN = '91b57316-b1ff-4884-8d55-92b9936a05a3';
1818
const TRUNCATED_TOKEN = '********05a3';
1919

20-
export function AddUploadToken({step}: AddUploadTokenProps) {
20+
export function AddUploadTokenStep({step}: AddUploadTokenStepProps) {
2121
const [showTokenDetails, setShowTokenDetails] = useState(false);
2222
// this value is only used when showing token details
2323
const [showFullToken, setShowFullToken] = useState(true);

‎static/app/views/codecov/tests/onboardingSteps/chooseUploadPermission.tsx renamed to ‎static/app/views/codecov/tests/onboardingSteps/chooseUploadPermissionStep.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import RadioGroup from 'sentry/components/forms/controls/radioGroup';
33
import {t, tct} from 'sentry/locale';
44
import {OnboardingStep} from 'sentry/views/codecov/tests/onboardingSteps/onboardingStep';
55

6-
interface ChooseUploadPermissionProps {
6+
interface ChooseUploadPermissionStepProps {
77
selectedUploadPermission: UploadPermission;
88
setSelectedUploadPermission: (permission: UploadPermission) => void;
99
step: string;
@@ -37,11 +37,11 @@ const CHOICE_OPTIONS: Array<
3737
],
3838
];
3939

40-
export function ChooseUploadPermission({
40+
export function ChooseUploadPermissionStep({
4141
step,
4242
selectedUploadPermission,
4343
setSelectedUploadPermission,
44-
}: ChooseUploadPermissionProps) {
44+
}: ChooseUploadPermissionStepProps) {
4545
const headerText = tct(`Step [step]: Choose an upload permission`, {step});
4646

4747
const handleRadioChange = (value: UploadPermission) => {

‎static/app/views/codecov/tests/onboardingSteps/editGHAWorkflow.tsx renamed to ‎static/app/views/codecov/tests/onboardingSteps/editGHAWorkflowStep.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {space} from 'sentry/styles/space';
77
import {InlineCodeSnippet} from 'sentry/views/codecov/styles';
88
import {OnboardingStep} from 'sentry/views/codecov/tests/onboardingSteps/onboardingStep';
99

10-
interface EditWorkflowProps {
10+
interface EditGHAWorkflowStepProps {
1111
step: string;
1212
}
1313

@@ -20,7 +20,7 @@ const ACTION_SNIPPET = `- name: Upload test results to Codecov
2020
uses: getsentry/prevent-action
2121
`;
2222

23-
export function EditGHAWorkflow({step}: EditWorkflowProps) {
23+
export function EditGHAWorkflowStep({step}: EditGHAWorkflowStepProps) {
2424
const headerText = tct('Step [step]: Edit your GitHub Action workflow', {
2525
step,
2626
});

‎static/app/views/codecov/tests/onboardingSteps/installPreventCLI.tsx renamed to ‎static/app/views/codecov/tests/onboardingSteps/installPreventCLIStep.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {t, tct} from 'sentry/locale';
1010
import {space} from 'sentry/styles/space';
1111
import {OnboardingStep} from 'sentry/views/codecov/tests/onboardingSteps/onboardingStep';
1212

13-
interface OutputCoverageFileProps {
13+
interface InstallPreventCLIStepProps {
1414
step: string;
1515
}
1616

@@ -21,7 +21,7 @@ type Platform = 'macOS' | 'Linux' | 'Windows';
2121

2222
const SNIPPET = `snippet still tbd`;
2323

24-
export function InstallPreventCLI({step}: OutputCoverageFileProps) {
24+
export function InstallPreventCLIStep({step}: InstallPreventCLIStepProps) {
2525
const [method, setMethod] = useState<Method>('pip');
2626
const [selectedPlatform, setSelectedPlatform] = useState<Platform>('macOS');
2727

‎static/app/views/codecov/tests/onboardingSteps/outputCoverageFile.tsx renamed to ‎static/app/views/codecov/tests/onboardingSteps/outputCoverageFileStep.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {t, tct} from 'sentry/locale';
88
import {space} from 'sentry/styles/space';
99
import {OnboardingStep} from 'sentry/views/codecov/tests/onboardingSteps/onboardingStep';
1010

11-
interface OutputCoverageFileProps {
11+
interface OutputCoverageFileStepProps {
1212
step: string;
1313
}
1414

@@ -28,7 +28,7 @@ const GENERATE_FILE_SNIPPETS: Record<Frameworks, string> = {
2828
phpunit: '',
2929
};
3030

31-
export function OutputCoverageFile({step}: OutputCoverageFileProps) {
31+
export function OutputCoverageFileStep({step}: OutputCoverageFileStepProps) {
3232
const headerText = tct('Step [step]: Output a JUnit XML file in your CI', {
3333
step,
3434
});

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import styled from '@emotion/styled';
2+
3+
import testAnalyticsWorkflowLogs from 'sentry-images/features/test-analytics-workflow-logs.svg';
4+
5+
import {t, tct} from 'sentry/locale';
6+
import {OnboardingStep} from 'sentry/views/codecov/tests/onboardingSteps/onboardingStep';
7+
8+
interface RunTestSuiteStepProps {
9+
step: string;
10+
}
11+
12+
export function RunTestSuiteStep({step}: RunTestSuiteStepProps) {
13+
const headerText = tct('Step [step]: Run your test suite', {
14+
step,
15+
});
16+
17+
return (
18+
<OnboardingStep.Container>
19+
<OnboardingStep.Header>{headerText}</OnboardingStep.Header>
20+
<OnboardingStep.Content>
21+
<StyledP>
22+
{t('You can inspect the workflow logs to see if the call to Sentry succeeded.')}
23+
</StyledP>
24+
<StyledImg src={testAnalyticsWorkflowLogs} />
25+
<StyledP>
26+
{t(
27+
'Run your tests as usual. A failed test is needed to view the failed tests report.'
28+
)}
29+
</StyledP>
30+
{/* TODO: add dropdown expansion */}
31+
</OnboardingStep.Content>
32+
</OnboardingStep.Container>
33+
);
34+
}
35+
36+
const StyledImg = styled('img')`
37+
margin-top: ${p => p.theme.space.md};
38+
margin-bottom: ${p => p.theme.space.md};
39+
`;
40+
41+
const StyledP = styled('p')`
42+
margin: 0;
43+
`;

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import styled from '@emotion/styled';
2+
3+
import {CodeSnippet} from 'sentry/components/codeSnippet';
4+
import {t, tct} from 'sentry/locale';
5+
import {OnboardingStep} from 'sentry/views/codecov/tests/onboardingSteps/onboardingStep';
6+
7+
interface UploadFileCLIStepProps {
8+
previousStep: string;
9+
step: string;
10+
}
11+
12+
const SNIPPET = `sentry-prevent-cli do-upload --report-type test_results --file <report_name>.junit.xml`;
13+
14+
export function UploadFileCLIStep({previousStep, step}: UploadFileCLIStepProps) {
15+
const headerText = tct(
16+
'Step [step]: Upload this file to Sentry Prevent using the CLI',
17+
{
18+
step,
19+
}
20+
);
21+
22+
return (
23+
<OnboardingStep.Container>
24+
<OnboardingStep.Header>{headerText}</OnboardingStep.Header>
25+
<OnboardingStep.Content>
26+
<StyledP>
27+
{t(
28+
'The following snippet instructs the CLI to upload this report to Sentry Prevent.'
29+
)}
30+
</StyledP>
31+
<StyledCodeSnippet dark language="bash">
32+
{SNIPPET}
33+
</StyledCodeSnippet>
34+
<StyledP>
35+
{tct(
36+
'Be sure to specify [reportType] as [testResults] and include the file you created in Step [previousStep]. This will not necessarily upload coverage reports to Sentry.',
37+
{
38+
reportType: <PinkText>--report-type</PinkText>,
39+
testResults: <PinkText>test_results</PinkText>,
40+
previousStep,
41+
}
42+
)}
43+
</StyledP>
44+
</OnboardingStep.Content>
45+
</OnboardingStep.Container>
46+
);
47+
}
48+
49+
const StyledP = styled('p')`
50+
margin: 0;
51+
`;
52+
53+
const StyledCodeSnippet = styled(CodeSnippet)`
54+
margin-top: ${p => p.theme.space.md};
55+
margin-bottom: ${p => p.theme.space.md};
56+
`;
57+
58+
const PinkText = styled('span')`
59+
color: ${p => p.theme.pink400};
60+
`;

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import styled from '@emotion/styled';
2+
3+
import {t, tct} from 'sentry/locale';
4+
import {OnboardingStep} from 'sentry/views/codecov/tests/onboardingSteps/onboardingStep';
5+
6+
interface ViewResultsInsightsStepProps {
7+
step: string;
8+
}
9+
10+
export function ViewResultsInsightsStep({step}: ViewResultsInsightsStepProps) {
11+
const headerText = tct('Step [step]: View results and insights', {
12+
step,
13+
});
14+
15+
return (
16+
<OnboardingStep.Container>
17+
<OnboardingStep.Header>{headerText}</OnboardingStep.Header>
18+
<OnboardingStep.Content>
19+
<StyledP>
20+
{t(
21+
"After the test run completion, you'll be able to see the failed tests result in the following areas:"
22+
)}
23+
</StyledP>
24+
<StyledUl>
25+
<li>{t('GitHub pull request comment')}</li>
26+
<li>{t('Failed tests dashboard here')}</li>
27+
</StyledUl>
28+
</OnboardingStep.Content>
29+
</OnboardingStep.Container>
30+
);
31+
}
32+
33+
const StyledP = styled('p')`
34+
margin: 0;
35+
`;
36+
37+
const StyledUl = styled('ul')`
38+
margin: 0;
39+
`;

0 commit comments

Comments
 (0)