Skip to content

Commit

Permalink
Refactor for better readability
Browse files Browse the repository at this point in the history
  • Loading branch information
@spalmurray-codecov
spalmurray-codecov committed Apr 30, 2024
1 parent fb14b47 commit aeeb88e
Show file tree
Hide file tree
Showing 3 changed files with 380 additions and 284 deletions.
228 changes: 130 additions & 98 deletions src/pages/RepoPage/CoverageOnboarding/CircleCI/CircleCI.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div className="flex flex-col gap-6">
<Card>
<Card.Header>
<Card.Title size="base">
Step 1: add {tokenCopy} token to{' '}
<A
hook="circleCIEnvVarsLink"
isExternal
to={{
pageName: 'circleCIEnvVars',
options: { provider: providerName },
}}
>
environment variables
</A>
</Card.Title>
</Card.Header>
<Card.Content className="flex flex-col gap-4">
<p>
Environment variables in CircleCI can be found in project settings.
</p>
<div className="flex gap-4">
<pre className="flex basis-1/3 items-center justify-between gap-2 rounded-md border border-ds-gray-secondary bg-ds-gray-primary p-4 font-mono">
<div
className="w-0 flex-1 overflow-hidden"
data-testid="token-key"
>
CODECOV_TOKEN
</div>
<CopyClipboard string="CODECOV_TOKEN" />
</pre>
<pre className="flex basis-2/3 items-center justify-between gap-2 rounded-md border border-ds-gray-secondary bg-ds-gray-primary p-4 font-mono">
<div className="w-0 flex-1 overflow-hidden">{uploadToken}</div>
<CopyClipboard string={uploadToken ?? ''} />
</pre>
</div>
</Card.Content>
</Card>
<Card>
<Card.Header>
<Card.Title size="base">
Step 2: add Codecov orb to CircleCI{' '}
<A
hook="circleCIyamlLink"
isExternal
to={{
pageName: 'circleCIyaml',
options: { branch: data?.repository?.defaultBranch },
}}
>
config.yml
</A>
</Card.Title>
</Card.Header>
<Card.Content className="flex flex-col gap-4">
<p>
Add the following to your .circleci/config.yaml and push changes to
repository.
</p>
<div className="flex items-start justify-between overflow-auto whitespace-pre-line rounded-md border border-ds-gray-secondary bg-ds-gray-primary p-4 font-mono">
<pre className="whitespace-pre">{orbsString}</pre>
<CopyClipboard string={orbsString} />
</div>
<ExampleBlurb />
</Card.Content>
</Card>
<Card>
<Card.Header>
<Card.Title size="base">
Step 3: merge to main or your preferred feature branch
</Card.Title>
</Card.Header>
<Card.Content className="flex flex-col gap-4">
<p>
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.
</p>
</Card.Content>
</Card>
<Card>
<Card.Content>
<p>
<span className="font-semibold">
How was your setup experience?
</span>{' '}
Let us know in{' '}
<A
to={{ pageName: 'repoConfigFeedback' }}
isExternal
hook="repo-config-feedback"
>
this issue
</A>
</p>
</Card.Content>
</Card>
<Step1
tokenCopy={tokenCopy}
uploadToken={uploadToken}
providerName={providerName}
/>
<Step2 defaultBranch={data?.repository?.defaultBranch ?? ''} />
<Step3 />
<FeedbackCTA />
</div>
)
}

export default CircleCI

interface Step1Props {
tokenCopy: string
uploadToken: string
providerName: string
}

function Step1({ tokenCopy, uploadToken, providerName }: Step1Props) {
return (
<Card>
<Card.Header>
<Card.Title size="base">
Step 1: add {tokenCopy} token to{' '}
<A
hook="circleCIEnvVarsLink"
isExternal
to={{
pageName: 'circleCIEnvVars',
options: { provider: providerName },
}}
>
environment variables
</A>
</Card.Title>
</Card.Header>
<Card.Content className="flex flex-col gap-4">
<p>
Environment variables in CircleCI can be found in project settings.
</p>
<div className="flex gap-4">
<pre className="flex basis-1/3 items-center justify-between gap-2 rounded-md border border-ds-gray-secondary bg-ds-gray-primary p-4 font-mono">
<div className="w-0 flex-1 overflow-hidden" data-testid="token-key">
CODECOV_TOKEN
</div>
<CopyClipboard string="CODECOV_TOKEN" />
</pre>
<pre className="flex basis-2/3 items-center justify-between gap-2 rounded-md border border-ds-gray-secondary bg-ds-gray-primary p-4 font-mono">
<div className="w-0 flex-1 overflow-hidden">{uploadToken}</div>
<CopyClipboard string={uploadToken ?? ''} />
</pre>
</div>
</Card.Content>
</Card>
)
}

interface Step2Props {
defaultBranch: string
}

function Step2({ defaultBranch }: Step2Props) {
return (
<Card>
<Card.Header>
<Card.Title size="base">
Step 2: add Codecov orb to CircleCI{' '}
<A
hook="circleCIyamlLink"
isExternal
to={{
pageName: 'circleCIyaml',
options: { branch: defaultBranch },
}}
>
config.yml
</A>
</Card.Title>
</Card.Header>
<Card.Content className="flex flex-col gap-4">
<p>
Add the following to your .circleci/config.yaml and push changes to
repository.
</p>
<div className="flex items-start justify-between overflow-auto whitespace-pre-line rounded-md border border-ds-gray-secondary bg-ds-gray-primary p-4 font-mono">
<pre className="whitespace-pre">{orbsString}</pre>
<CopyClipboard string={orbsString} />
</div>
<ExampleBlurb />
</Card.Content>
</Card>
)
}

function Step3() {
return (
<Card>
<Card.Header>
<Card.Title size="base">
Step 3: merge to main or your preferred feature branch
</Card.Title>
</Card.Header>
<Card.Content className="flex flex-col gap-4">
<p>
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.
</p>
</Card.Content>
</Card>
)
}

function FeedbackCTA() {
return (
<Card>
<Card.Content>
<p>
<span className="font-semibold">How was your setup experience?</span>{' '}
Let us know in{' '}
<A
to={{ pageName: 'repoConfigFeedback' }}
isExternal
hook="repo-config-feedback"
>
this issue
</A>
</p>
</Card.Content>
</Card>
)
}
Loading

0 comments on commit aeeb88e

Please sign in to comment.