From aeeb88e548f260b2d4c71a5d7ed69d35d6ba50fc Mon Sep 17 00:00:00 2001 From: Spencer Murray Date: Tue, 30 Apr 2024 16:42:20 -0400 Subject: [PATCH] Refactor for better readability --- .../CoverageOnboarding/CircleCI/CircleCI.tsx | 228 ++++++++++-------- .../GitHubActions/GitHubActions.tsx | 225 +++++++++-------- .../CoverageOnboarding/OtherCI/OtherCI.tsx | 211 +++++++++------- 3 files changed, 380 insertions(+), 284 deletions(-) diff --git a/src/pages/RepoPage/CoverageOnboarding/CircleCI/CircleCI.tsx b/src/pages/RepoPage/CoverageOnboarding/CircleCI/CircleCI.tsx index 0dd9d652df..0de9ba59d9 100644 --- a/src/pages/RepoPage/CoverageOnboarding/CircleCI/CircleCI.tsx +++ b/src/pages/RepoPage/CoverageOnboarding/CircleCI/CircleCI.tsx @@ -38,110 +38,142 @@ function CircleCI() { enabled: showOrgToken, }) - const uploadToken = orgUploadToken ?? data?.repository?.uploadToken + const uploadToken = orgUploadToken ?? data?.repository?.uploadToken ?? '' const tokenCopy = orgUploadToken ? 'global' : 'repository' return (
- - - - Step 1: add {tokenCopy} token to{' '} - - environment variables - - - - -

- Environment variables in CircleCI can be found in project settings. -

-
- 
-              

-                CODECOV_TOKEN
-              

-              
-
- 
-              
{uploadToken}

-              
-
-
- - - - - - Step 2: add Codecov orb to CircleCI{' '} - - config.yml - - - - -

- Add the following to your .circleci/config.yaml and push changes to - repository. -

-
- 
{orbsString}
- -
- - - - - - - Step 3: merge to main or your preferred feature branch - - - -

- Once merged to your default branch, subsequent pull requests will - have Codecov checks and comments. Additionally, you’ll find your - repo coverage dashboard here. If you have merged try reloading the - page. -

- - - - -

- - How was your setup experience? - {' '} - Let us know in{' '} - - this issue - -

- - + + + +
) } export default CircleCI + +interface Step1Props { + tokenCopy: string + uploadToken: string + providerName: string +} + +function Step1({ tokenCopy, uploadToken, providerName }: Step1Props) { + return ( + + + + Step 1: add {tokenCopy} token to{' '} + + environment variables + + + + +

+ Environment variables in CircleCI can be found in project settings. +

+
+ 
+            

+              CODECOV_TOKEN
+            

+            
+
+ 
+            
{uploadToken}

+            
+
+
+ + + ) +} + +interface Step2Props { + defaultBranch: string +} + +function Step2({ defaultBranch }: Step2Props) { + return ( + + + + Step 2: add Codecov orb to CircleCI{' '} + + config.yml + + + + +

+ Add the following to your .circleci/config.yaml and push changes to + repository. +

+
+ 
{orbsString}
+ +
+ + + + ) +} + +function Step3() { + return ( + + + + Step 3: merge to main or your preferred feature branch + + + +

+ Once merged to your default branch, subsequent pull requests will have + Codecov checks and comments. Additionally, you’ll find your repo + coverage dashboard here. If you have merged try reloading the page. +

+ + + ) +} + +function FeedbackCTA() { + return ( + + +

+ How was your setup experience?{' '} + Let us know in{' '} + + this issue + +

+ + + ) +} diff --git a/src/pages/RepoPage/CoverageOnboarding/GitHubActions/GitHubActions.tsx b/src/pages/RepoPage/CoverageOnboarding/GitHubActions/GitHubActions.tsx index 44db9644d5..4191d7be5d 100644 --- a/src/pages/RepoPage/CoverageOnboarding/GitHubActions/GitHubActions.tsx +++ b/src/pages/RepoPage/CoverageOnboarding/GitHubActions/GitHubActions.tsx @@ -27,7 +27,7 @@ function GitHubActions() { enabled: showOrgToken, }) - const uploadToken = orgUploadToken ?? data?.repository?.uploadToken + const uploadToken = orgUploadToken ?? data?.repository?.uploadToken ?? '' const tokenCopy = orgUploadToken ? 'global' : 'repository' const actionString = `- name: Upload coverage reports to Codecov uses: codecov/codecov-action@v4.0.1 @@ -41,104 +41,135 @@ function GitHubActions() { return (
- - - - Step 1: add {tokenCopy} token as{' '} - - repository secret - - - - -

- Admin required to access repo settings > secrets and variable - > actions -

-
- {/* We have plans to make this a component. Too much copy pasta */} - 
-              

-                CODECOV_TOKEN
-              

-              
-
- 
-              
{uploadToken}

-              
-
-
- - - - - - Step 2: add Codecov to your{' '} - - GitHub Actions workflow yaml file - - - - -

- After tests run, this will upload your coverage report to Codecov: -

- -
- 
{actionString}
- -
- - - - - - - Step 3: merge to main or your preferred feature branch - - - -

- Once merged to your default branch, subsequent pull requests will - have Codecov checks and comments. Additionally, you’ll find your - repo coverage dashboard here. If you have merged try reloading the - page. -

- - - - -

- - How was your setup experience? - {' '} - Let us know in{' '} - - this issue - -

- - + + + +
) } +interface Step1Props { + tokenCopy: string + uploadToken: string +} + +function Step1({ tokenCopy, uploadToken }: Step1Props) { + return ( + + + + Step 1: add {tokenCopy} token as{' '} + + repository secret + + + + +

+ Admin required to access repo settings > secrets and variable > + actions +

+
+ {/* We have plans to make this a component. Too much copy pasta */} + 
+            

+              CODECOV_TOKEN
+            

+            
+
+ 
+            
{uploadToken}

+            
+
+
+ + + ) +} + +interface Step2Props { + defaultBranch: string + actionString: string +} + +function Step2({ defaultBranch, actionString }: Step2Props) { + return ( + + + + Step 2: add Codecov to your{' '} + + GitHub Actions workflow yaml file + + + + +

+ After tests run, this will upload your coverage report to Codecov: +

+ +
+ 
{actionString}
+ +
+ + + + ) +} + +function Step3() { + return ( + + + + Step 3: merge to main or your preferred feature branch + + + +

+ Once merged to your default branch, subsequent pull requests will have + Codecov checks and comments. Additionally, you’ll find your repo + coverage dashboard here. If you have merged try reloading the page. +

+ + + ) +} + +function FeedbackCTA() { + return ( + + +

+ How was your setup experience?{' '} + Let us know in{' '} + + this issue + +

+ + + ) +} + export default GitHubActions diff --git a/src/pages/RepoPage/CoverageOnboarding/OtherCI/OtherCI.tsx b/src/pages/RepoPage/CoverageOnboarding/OtherCI/OtherCI.tsx index cc0913b804..f6124ac687 100644 --- a/src/pages/RepoPage/CoverageOnboarding/OtherCI/OtherCI.tsx +++ b/src/pages/RepoPage/CoverageOnboarding/OtherCI/OtherCI.tsx @@ -29,7 +29,7 @@ function OtherCI() { enabled: showOrgToken, }) - const uploadToken = orgUploadToken ?? data?.repository?.uploadToken + const uploadToken = orgUploadToken ?? data?.repository?.uploadToken ?? '' const tokenCopy = orgUploadToken ? 'global' : 'repository' const uploadCommand = `codecovcli upload-process -t ${uploadToken}${ @@ -38,96 +38,129 @@ function OtherCI() { return (
- - - - Step 1: add {tokenCopy} token as a secret to your CI Provider - - - -
- 
-              

-                CODECOV_TOKEN
-              

-              
-
- 
-              
{uploadToken}

-              
-
-
- - - - - - Step 2: add Codecov{' '} - - uploader to your CI workflow - - - - - - - - - - - Step 3: upload coverage to Codecov via CLI after your tests have run - - - - 
-            
{uploadCommand}

-            
-
- - - - - - - Step 4: merge to main or your preferred feature branch - - - -

- Once merged to your default branch, subsequent pull requests will - have Codecov checks and comments. Additionally, you’ll find your - repo coverage dashboard here. If you have merged try reloading the - page. -

- - - - -

- - How was your setup experience? - {' '} - Let us know in{' '} - - this issue - -

- - + + + + +
) } export default OtherCI + +interface Step1Props { + tokenCopy: string + uploadToken: string +} + +function Step1({ tokenCopy, uploadToken }: Step1Props) { + return ( + + + + Step 1: add {tokenCopy} token as a secret to your CI Provider + + + +
+ 
+            

+              CODECOV_TOKEN
+            

+            
+
+ 
+            
{uploadToken}

+            
+
+
+ + + ) +} + +function Step2() { + return ( + + + + Step 2: add Codecov{' '} + + uploader to your CI workflow + + + + + + + + ) +} + +interface Step3Props { + uploadCommand: string +} + +function Step3({ uploadCommand }: Step3Props) { + return ( + + + + Step 3: upload coverage to Codecov via CLI after your tests have run + + + + 
+          
{uploadCommand}

+          
+
+ + + + ) +} + +function Step4() { + return ( + + + + Step 4: merge to main or your preferred feature branch + + + +

+ Once merged to your default branch, subsequent pull requests will have + Codecov checks and comments. Additionally, you’ll find your repo + coverage dashboard here. If you have merged try reloading the page. +

+ + + ) +} + +function FeedbackCTA() { + return ( + + +

+ How was your setup experience?{' '} + Let us know in{' '} + + this issue + +

+ + + ) +}