import { CompilationInfo } from '../components/CompilationInfo';
import CreateYmlFile from '../components/CreateYmlFile';
import { BuildTools } from '../types';
+import { PreambuleYaml } from './PreambuleYaml';
import cFamilyExample from './commands/CFamily';
import dotNetExample from './commands/DotNet';
import gradleExample from './commands/Gradle';
import mavenExample from './commands/Maven';
import othersExample from './commands/Others';
-import { PreambuleYaml } from './PreambuleYaml';
export interface AnalysisCommandProps extends WithAvailableFeaturesProps {
buildTool: BuildTools;
<>
<PreambuleYaml buildTool={buildTool} component={component} />
<CreateYmlFile yamlFileName="bitbucket-pipelines.yml" yamlTemplate={yamlTemplate} />
- {buildTool === BuildTools.CFamily && <CompilationInfo className="abs-width-800" />}
+ {buildTool === BuildTools.CFamily && <CompilationInfo />}
</>
);
}
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+import { BasicSeparator, Title, TutorialStep, TutorialStepList } from 'design-system';
import * as React from 'react';
import { translate } from '../../../helpers/l10n';
import {
} from '../../../types/alm-settings';
import { Component } from '../../../types/types';
import { LoggedInUser } from '../../../types/users';
-import AllSetStep from '../components/AllSetStep';
-import FinishButton from '../components/FinishButton';
+import AllSet from '../components/AllSet';
import GithubCFamilyExampleRepositories from '../components/GithubCFamilyExampleRepositories';
-import Step from '../components/Step';
import YamlFileStep from '../components/YamlFileStep';
import { BuildTools, TutorialModes } from '../types';
import AnalysisCommand from './AnalysisCommand';
mainBranchName,
} = props;
- const [step, setStep] = React.useState<Steps>(Steps.REPOSITORY_VARIABLES);
+ const [done, setDone] = React.useState<boolean>(false);
return (
<>
- <Step
- finished={step > Steps.REPOSITORY_VARIABLES}
- onOpen={() => setStep(Steps.REPOSITORY_VARIABLES)}
- open={step === Steps.REPOSITORY_VARIABLES}
- renderForm={() => (
+ <Title>{translate('onboarding.tutorial.with.bitbucket_ci.title')}</Title>
+
+ <TutorialStepList className="sw-mb-8">
+ <TutorialStep
+ title={translate('onboarding.tutorial.with.bitbucket_pipelines.variables.title')}
+ >
<RepositoryVariables
almBinding={almBinding}
baseUrl={baseUrl}
component={component}
currentUser={currentUser}
- onDone={() => setStep(Steps.YAML)}
projectBinding={projectBinding}
/>
- )}
- stepNumber={Steps.REPOSITORY_VARIABLES}
- stepTitle={translate('onboarding.tutorial.with.bitbucket_pipelines.variables.title')}
- />
- <Step
- finished={step > Steps.YAML}
- onOpen={() => setStep(Steps.YAML)}
- open={step === Steps.YAML}
- renderForm={() => (
- <YamlFileStep>
+ </TutorialStep>
+ <TutorialStep title={translate('onboarding.tutorial.with.bitbucket_pipelines.yaml.title')}>
+ <YamlFileStep setDone={setDone}>
{(buildTool) => (
<>
{buildTool === BuildTools.CFamily && (
<GithubCFamilyExampleRepositories
- className="big-spacer-top"
+ className="sw-my-4 sw-bg-inherit sw-w-abs-600"
ci={TutorialModes.BitbucketPipelines}
/>
)}
component={component}
mainBranchName={mainBranchName}
/>
- <FinishButton onClick={() => setStep(Steps.ALL_SET)} />
</>
)}
</YamlFileStep>
+ </TutorialStep>
+
+ {done && (
+ <>
+ <BasicSeparator className="sw-my-10" />
+ <AllSet alm={AlmKeys.GitLab} willRefreshAutomatically={willRefreshAutomatically} />
+ </>
)}
- stepNumber={Steps.YAML}
- stepTitle={translate('onboarding.tutorial.with.bitbucket_pipelines.yaml.title')}
- />
- <AllSetStep
- alm={almBinding?.alm || AlmKeys.BitbucketCloud}
- open={step === Steps.ALL_SET}
- stepNumber={Steps.ALL_SET}
- willRefreshAutomatically={willRefreshAutomatically}
- />
+ </TutorialStepList>
</>
);
}
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+import {
+ BasicSeparator,
+ ClipboardIconButton,
+ NumberedList,
+ NumberedListItem,
+ StandoutLink,
+} from 'design-system';
import * as React from 'react';
import { FormattedMessage } from 'react-intl';
-import { Button } from '../../../components/controls/buttons';
-import { ClipboardIconButton } from '../../../components/controls/clipboard';
import { translate } from '../../../helpers/l10n';
import { AlmSettingsInstance, ProjectAlmBindingResponse } from '../../../types/alm-settings';
import { Component } from '../../../types/types';
import { LoggedInUser } from '../../../types/users';
+import { InlineSnippet } from '../components/InlineSnippet';
import SentenceWithHighlights from '../components/SentenceWithHighlights';
import TokenStepGenerator from '../components/TokenStepGenerator';
import { buildBitbucketCloudLink } from '../utils';
baseUrl: string;
component: Component;
currentUser: LoggedInUser;
- onDone: () => void;
projectBinding?: ProjectAlmBindingResponse;
}
export default function RepositoryVariables(props: RepositoryVariablesProps) {
const { almBinding, baseUrl, component, currentUser, projectBinding } = props;
return (
- <div className="boxed-group-inner">
- <p className="big-spacer-bottom">
- <FormattedMessage
- defaultMessage={translate('onboarding.tutorial.with.bitbucket_pipelines.variables.intro')}
- id="onboarding.tutorial.with.bitbucket_pipelines.variables.intro"
- values={{
- repository_variables:
- almBinding?.url && projectBinding?.repository ? (
- <a
- href={`${buildBitbucketCloudLink(
- almBinding,
- projectBinding
- )}/admin/addon/admin/pipelines/repository-variables`}
- target="_blank"
- rel="noopener noreferrer"
- >
- {translate('onboarding.tutorial.with.bitbucket_pipelines.variables.intro.link')}
- </a>
- ) : (
- <strong>
- {translate('onboarding.tutorial.with.bitbucket_pipelines.variables.intro.link')}
- </strong>
- ),
- }}
- />
- </p>
- <ol className="list-styled">
- <li>
+ <>
+ <FormattedMessage
+ defaultMessage={translate('onboarding.tutorial.with.bitbucket_pipelines.variables.intro')}
+ id="onboarding.tutorial.with.bitbucket_pipelines.variables.intro"
+ values={{
+ repository_variables:
+ almBinding?.url && projectBinding?.repository ? (
+ <StandoutLink
+ to={`${buildBitbucketCloudLink(
+ almBinding,
+ projectBinding
+ )}/admin/addon/admin/pipelines/repository-variables`}
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ {translate('onboarding.tutorial.with.bitbucket_pipelines.variables.intro.link')}
+ </StandoutLink>
+ ) : (
+ <span className="sw-body-sm-highlight">
+ {translate('onboarding.tutorial.with.bitbucket_pipelines.variables.intro.link')}
+ </span>
+ ),
+ }}
+ />
+ <NumberedList>
+ <NumberedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.bitbucket_pipelines.variables.name"
highlightKeys={['name']}
/>
- <code className="rule little-spacer-left">SONAR_TOKEN</code>
- <ClipboardIconButton copyValue="SONAR_TOKEN" />
- </li>
- <TokenStepGenerator component={component} currentUser={currentUser} />
- <li>
+ <InlineSnippet snippet="SONAR_TOKEN" className="sw-ml-1" />
+ <ClipboardIconButton copyValue="SONAR_TOKEN" className="sw-ml-2" />
+ </NumberedListItem>
+ <NumberedListItem>
+ <TokenStepGenerator component={component} currentUser={currentUser} />
+ </NumberedListItem>
+ <NumberedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.bitbucket_pipelines.variables.secured"
highlightKeys={['secured']}
/>
- </li>
- <li>
+ </NumberedListItem>
+ <NumberedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.bitbucket_pipelines.variables.add"
highlightKeys={['add']}
/>
- </li>
- </ol>
+ </NumberedListItem>
+ </NumberedList>
- <hr className="no-horizontal-margins" />
+ <BasicSeparator className="sw-my-6" />
- <ol className="list-styled big-spacer-top big-spacer-bottom">
- <li>
+ <NumberedList>
+ <NumberedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.bitbucket_pipelines.variables.name"
highlightKeys={['name']}
/>
-
- <code className="rule little-spacer-left">SONAR_HOST_URL</code>
- <ClipboardIconButton copyValue="SONAR_HOST_URL" />
- </li>
- <li className="big-spacer-bottom">
+ <InlineSnippet snippet="SONAR_HOST_URL" className="sw-ml-1" />
+ <ClipboardIconButton copyValue="SONAR_HOST_URL" className="sw-ml-2" />
+ </NumberedListItem>
+ <NumberedListItem>
<FormattedMessage
defaultMessage={translate('onboarding.tutorial.env_variables')}
id="onboarding.tutorial.env_variables"
values={{
extra: <ClipboardIconButton copyValue={baseUrl} />,
- field: <strong>{translate('onboarding.tutorial.env_variables.field')}</strong>,
- value: <code className="rule">{baseUrl}</code>,
+ field: (
+ <span className="sw-body-sm-highlight">
+ {translate('onboarding.tutorial.env_variables.field')}
+ </span>
+ ),
+ value: <InlineSnippet snippet={baseUrl} className="sw-ml-1" />,
}}
/>
- </li>
- <li>
+ </NumberedListItem>
+ <NumberedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.bitbucket_pipelines.variables.add"
highlightKeys={['add']}
/>
- </li>
- </ol>
- <Button onClick={props.onDone}>{translate('continue')}</Button>
- </div>
+ </NumberedListItem>
+ </NumberedList>
+ </>
);
}
expect(await ui.secretsStepTitle.find()).toBeInTheDocument();
// Env variables step
- expect(getCopyToClipboardValue()).toMatchSnapshot('sonar token key');
- expect(getCopyToClipboardValue(1)).toMatchSnapshot('sonarqube host url key');
- expect(getCopyToClipboardValue(2)).toMatchSnapshot('sonarqube host url value');
- await user.click(ui.continueButton.get());
+ expect(getCopyToClipboardValue(0, 'Copy to clipboard')).toMatchSnapshot('sonar token key');
+ expect(getCopyToClipboardValue(1, 'Copy to clipboard')).toMatchSnapshot('sonarqube host url key');
+ expect(getCopyToClipboardValue(2, 'Copy to clipboard')).toMatchSnapshot(
+ 'sonarqube host url value'
+ );
// Create/update configuration file step
// Maven
expect(getCopyToClipboardValue(0, 'Copy')).toMatchSnapshot('Other: sonar-project.properties');
expect(getCopyToClipboardValue(1, 'Copy')).toMatchSnapshot('Other: .github/workflows/build.yml');
- await user.click(ui.finishTutorialButton.get());
expect(ui.allSetSentence.get()).toBeInTheDocument();
});
// Generate token
await user.click(ui.genTokenDialogButton.get());
await user.click(ui.generateTokenButton.get());
- expect(getCopyToClipboardValue(3)).toEqual('generatedtoken2');
+ expect(getCopyToClipboardValue()).toEqual('generatedtoken2');
// Revoke current token and create new one
await user.click(ui.deleteTokenButton.get());
await selectEvent.select(ui.expiresInSelect.get(), 'users.tokens.expiration.365');
await user.click(ui.generateTokenButton.get());
expect(ui.tokenValue.get()).toBeInTheDocument();
- await user.click(ui.continueButton.getAll()[1]);
+ await user.click(ui.continueButton.getAll()[0]);
expect(ui.tokenValue.query()).not.toBeInTheDocument();
});
// If project is bound, link to repo is visible
expect(await ui.linkToRepo.find()).toBeInTheDocument();
- await user.click(await ui.continueButton.find());
await user.click(ui.mavenBuildButton.get());
- await user.click(ui.finishTutorialButton.get());
expect(ui.allSetSentence.get()).toBeInTheDocument();
await user.click(ui.ymlFileStepTitle.get());
file: (
<>
<InlineSnippet snippet={yamlFileName} />
- <ClipboardIconButton copyValue={yamlFileName} />
+ <ClipboardIconButton copyValue={yamlFileName} className="sw-ml-2" />
</>
),
}}
/>
<CodeSnippet
snippet={sonarProjectSnippet(component.key)}
- className="sw-p-8 sw-overflow-auto"
+ className="sw-p-9 sw-overflow-auto"
/>
</NumberedListItem>
);
groovy: (
<>
<InlineSnippet snippet={GradleBuildDSL.Groovy} />
- <ClipboardIconButton copyValue={GradleBuildDSL.Groovy} />
+ <ClipboardIconButton copyValue={GradleBuildDSL.Groovy} className="sw-ml-2" />
</>
),
kotlin: (
<>
<InlineSnippet snippet={GradleBuildDSL.Kotlin} />
- <ClipboardIconButton copyValue={GradleBuildDSL.Kotlin} />
+ <ClipboardIconButton copyValue={GradleBuildDSL.Kotlin} className="sw-ml-2" />
</>
),
sq: <InlineSnippet snippet="org.sonarqube" />,
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
-import { ButtonSecondary, NumberedListItem } from 'design-system';
+import { ButtonSecondary } from 'design-system';
import * as React from 'react';
import { FormattedMessage } from 'react-intl';
import { translate } from '../../../helpers/l10n';
return (
<>
- <NumberedListItem>
- <FormattedMessage
- defaultMessage={translate('onboarding.tutorial.env_variables')}
- id="onboarding.tutorial.env_variables"
- values={{
- extra: (
- <ButtonSecondary className="sw-ml-2" onClick={toggleTokenModal}>
- {translate('onboarding.token.generate.long')}
- </ButtonSecondary>
- ),
- field: (
- <span className="sw-body-sm-highlight">
- {translate('onboarding.tutorial.env_variables.field')}
- </span>
- ),
- value: translate('onboarding.tutorial.env_variables.token_generator.value'),
- }}
- />
- </NumberedListItem>
+ <FormattedMessage
+ defaultMessage={translate('onboarding.tutorial.env_variables')}
+ id="onboarding.tutorial.env_variables"
+ values={{
+ extra: (
+ <ButtonSecondary className="sw-ml-2" onClick={toggleTokenModal}>
+ {translate('onboarding.token.generate.long')}
+ </ButtonSecondary>
+ ),
+ field: (
+ <span className="sw-body-sm-highlight">
+ {translate('onboarding.tutorial.env_variables.field')}
+ </span>
+ ),
+ value: translate('onboarding.tutorial.env_variables.token_generator.value'),
+ }}
+ />
{isModalVisible && (
<EditTokenModal component={component} currentUser={currentUser} onClose={closeTokenModal} />
)}
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
-import { BasicSeparator, TutorialStep, TutorialStepList } from 'design-system';
+import { BasicSeparator, Title, TutorialStep, TutorialStepList } from 'design-system';
import * as React from 'react';
import { translate } from '../../../helpers/l10n';
import {
willRefreshAutomatically,
} = props;
return (
- <TutorialStepList className="sw-mb-8">
- <TutorialStep title={translate('onboarding.tutorial.with.github_action.create_secret.title')}>
- <SecretStep
- almBinding={almBinding}
- baseUrl={baseUrl}
- component={component}
- currentUser={currentUser}
- projectBinding={projectBinding}
- />
- </TutorialStep>
- <TutorialStep title={translate('onboarding.tutorial.with.github_action.yaml.title')}>
- <YamlFileStep setDone={setDone}>
- {(buildTool) => (
- <AnalysisCommand
- buildTool={buildTool}
- mainBranchName={mainBranchName}
- component={component}
- />
- )}
- </YamlFileStep>
- </TutorialStep>
- {done && (
- <>
- <BasicSeparator className="sw-my-10" />
- <AllSet
- alm={almBinding?.alm || AlmKeys.GitHub}
- willRefreshAutomatically={willRefreshAutomatically}
+ <>
+ <Title>{translate('onboarding.tutorial.with.github_ci.title')}</Title>
+
+ <TutorialStepList className="sw-mb-8">
+ <TutorialStep
+ title={translate('onboarding.tutorial.with.github_action.create_secret.title')}
+ >
+ <SecretStep
+ almBinding={almBinding}
+ baseUrl={baseUrl}
+ component={component}
+ currentUser={currentUser}
+ projectBinding={projectBinding}
/>
- </>
- )}
- </TutorialStepList>
+ </TutorialStep>
+ <TutorialStep title={translate('onboarding.tutorial.with.github_action.yaml.title')}>
+ <YamlFileStep setDone={setDone}>
+ {(buildTool) => (
+ <AnalysisCommand
+ buildTool={buildTool}
+ mainBranchName={mainBranchName}
+ component={component}
+ />
+ )}
+ </YamlFileStep>
+ </TutorialStep>
+ {done && (
+ <>
+ <BasicSeparator className="sw-my-10" />
+ <AllSet
+ alm={almBinding?.alm || AlmKeys.GitHub}
+ willRefreshAutomatically={willRefreshAutomatically}
+ />
+ </>
+ )}
+ </TutorialStepList>
+ </>
);
}
highlightKeys={['name']}
/>
<InlineSnippet snippet="SONAR_TOKEN" className="sw-ml-1" />
- <ClipboardIconButton copyValue="SONAR_TOKEN" />
+ <ClipboardIconButton copyValue="SONAR_TOKEN" className="sw-ml-2" />
+ </NumberedListItem>
+ <NumberedListItem>
+ <TokenStepGenerator component={component} currentUser={currentUser} />
</NumberedListItem>
- <TokenStepGenerator component={component} currentUser={currentUser} />
<NumberedListItem>
<SentenceWithHighlights
translationKey="onboarding.tutorial.with.github_action.secret.add"
highlightKeys={['name']}
/>
<InlineSnippet snippet="SONAR_HOST_URL" className="sw-ml-1" />
- <ClipboardIconButton copyValue="SONAR_HOST_URL" />
+ <ClipboardIconButton copyValue="SONAR_HOST_URL" className="sw-ml-2" />
</NumberedListItem>
<NumberedListItem>
<FormattedMessage
/>
{os && (
<GithubCFamilyExampleRepositories
- className="sw-mt-4"
+ className="sw-mt-4 sw-bg-inherit sw-w-abs-600"
os={os}
ci={TutorialModes.GitHubActions}
/>
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+import {
+ BasicSeparator,
+ ClipboardIconButton,
+ NumberedList,
+ NumberedListItem,
+ TutorialStep,
+ UnorderedList,
+ UnorderedListItem,
+} from 'design-system';
import * as React from 'react';
import { FormattedMessage } from 'react-intl';
-import { Button } from '../../../components/controls/buttons';
-import { ClipboardIconButton } from '../../../components/controls/clipboard';
import { translate } from '../../../helpers/l10n';
import { Component } from '../../../types/types';
import { LoggedInUser } from '../../../types/users';
-import Step from '../components/Step';
+import { InlineSnippet } from '../components/InlineSnippet';
import TokenStepGenerator from '../components/TokenStepGenerator';
export interface EnvironmentVariablesStepProps {
baseUrl: string;
component: Component;
currentUser: LoggedInUser;
- finished: boolean;
- onDone: () => void;
- onOpen: () => void;
- open: boolean;
}
const pipelineDescriptionLinkLabel = translate(
);
export default function EnvironmentVariablesStep(props: EnvironmentVariablesStepProps) {
- const { baseUrl, component, currentUser, finished, open } = props;
+ const { baseUrl, component, currentUser } = props;
const fieldValueTranslation = translate('onboarding.tutorial.env_variables');
const renderForm = () => (
- <div className="boxed-group-inner">
- <ol className="list-styled">
- <li>
- <p className="big-spacer-bottom">
- {translate('onboarding.tutorial.with.gitlab_ci.variables.section.title')}
- </p>
+ <NumberedList>
+ <NumberedListItem>
+ {translate('onboarding.tutorial.with.gitlab_ci.variables.section.title')}
- <FormattedMessage
- defaultMessage={translate(
- 'onboarding.tutorial.with.gitlab_ci.variables.section.description'
- )}
- id="onboarding.tutorial.with.gitlab_ci.variables.section.description"
- values={{
- /* This link will be added when the backend provides the project URL */
- link: <strong>{pipelineDescriptionLinkLabel}</strong>,
- }}
- />
+ <FormattedMessage
+ defaultMessage={translate(
+ 'onboarding.tutorial.with.gitlab_ci.variables.section.description'
+ )}
+ id="onboarding.tutorial.with.gitlab_ci.variables.section.description"
+ values={{
+ /* This link will be added when the backend provides the project URL */
+ link: <span className="sw-body-sm-highlight">{pipelineDescriptionLinkLabel}</span>,
+ }}
+ />
- <ul className="list-styled list-alpha big-spacer-top">
- <li className="big-spacer-bottom">
- <FormattedMessage
- defaultMessage={fieldValueTranslation}
- id="onboarding.tutorial.with.gitlab_ci.variables.step1"
- values={{
- extra: <ClipboardIconButton copyValue="SONAR_TOKEN" />,
- field: (
- <strong>
- {translate('onboarding.tutorial.with.gitlab_ci.variables.step1')}
- </strong>
- ),
- value: <code className="rule">SONAR_TOKEN</code>,
- }}
- />
- </li>
+ <UnorderedList ticks className="sw-ml-10">
+ <UnorderedListItem>
+ <FormattedMessage
+ defaultMessage={fieldValueTranslation}
+ id="onboarding.tutorial.with.gitlab_ci.variables.step1"
+ values={{
+ extra: <ClipboardIconButton copyValue="SONAR_TOKEN" />,
+ field: (
+ <span className="sw-body-sm-highlight">
+ {translate('onboarding.tutorial.with.gitlab_ci.variables.step1')}
+ </span>
+ ),
+ value: <InlineSnippet snippet="SONAR_TOKEN" />,
+ }}
+ />
+ </UnorderedListItem>
+ <UnorderedListItem>
<TokenStepGenerator component={component} currentUser={currentUser} />
- <li className="big-spacer-bottom">
- <FormattedMessage
- defaultMessage={translate('onboarding.tutorial.with.gitlab_ci.variables.step3')}
- id="onboarding.tutorial.with.gitlab_ci.variables.step3"
- values={{
- value: (
- <strong>
- {translate('onboarding.tutorial.with.gitlab_ci.variables.step3.value')}
- </strong>
- ),
- }}
- />
- </li>
- <li className="big-spacer-bottom">
- <FormattedMessage
- defaultMessage={translate(
- 'onboarding.tutorial.with.gitlab_ci.variables.section.step4'
- )}
- id="onboarding.tutorial.with.gitlab_ci.variables.section.step4"
- values={{
- value: (
- <strong>
- {translate(
- 'onboarding.tutorial.with.gitlab_ci.variables.section.step4.value'
- )}
- </strong>
- ),
- }}
- />
- </li>
- </ul>
- <hr className="no-horizontal-margins" />
- </li>
- <li>
- <p className="big-spacer-bottom big-spacer-top">
- {translate('onboarding.tutorial.with.gitlab_ci.variables.section2.title')}
- </p>
+ </UnorderedListItem>
+ <UnorderedListItem>
+ <FormattedMessage
+ defaultMessage={translate('onboarding.tutorial.with.gitlab_ci.variables.step3')}
+ id="onboarding.tutorial.with.gitlab_ci.variables.step3"
+ values={{
+ value: (
+ <span className="sw-body-sm-highlight">
+ {translate('onboarding.tutorial.with.gitlab_ci.variables.step3.value')}
+ </span>
+ ),
+ }}
+ />
+ </UnorderedListItem>
+ <UnorderedListItem>
+ <FormattedMessage
+ defaultMessage={translate(
+ 'onboarding.tutorial.with.gitlab_ci.variables.section.step4'
+ )}
+ id="onboarding.tutorial.with.gitlab_ci.variables.section.step4"
+ values={{
+ value: (
+ <span className="sw-body-sm-highlight">
+ {translate('onboarding.tutorial.with.gitlab_ci.variables.section.step4.value')}
+ </span>
+ ),
+ }}
+ />
+ </UnorderedListItem>
+ </UnorderedList>
+ <BasicSeparator className="sw-my-6" />
+ </NumberedListItem>
+ <NumberedListItem>
+ {translate('onboarding.tutorial.with.gitlab_ci.variables.section2.title')}
- <FormattedMessage
- defaultMessage={translate(
- 'onboarding.tutorial.with.gitlab_ci.variables.section2.description'
- )}
- id="onboarding.tutorial.with.gitlab_ci.variables.section2.description"
- values={{
- /* This link will be added when the backend provides the project URL */
- link: <strong>{pipelineDescriptionLinkLabel}</strong>,
- }}
- />
+ <FormattedMessage
+ defaultMessage={translate(
+ 'onboarding.tutorial.with.gitlab_ci.variables.section2.description'
+ )}
+ id="onboarding.tutorial.with.gitlab_ci.variables.section2.description"
+ values={{
+ /* This link will be added when the backend provides the project URL */
+ link: <span className="sw-body-sm-highlight">{pipelineDescriptionLinkLabel}</span>,
+ }}
+ />
- <ul className="list-styled list-alpha big-spacer-top big-spacer-bottom">
- <li className="big-spacer-bottom">
- <FormattedMessage
- defaultMessage={fieldValueTranslation}
- id="onboarding.tutorial.with.gitlab_ci.variables.step1"
- values={{
- extra: <ClipboardIconButton copyValue="SONAR_HOST_URL" />,
- field: (
- <strong>
- {translate('onboarding.tutorial.with.gitlab_ci.variables.step1')}
- </strong>
- ),
- value: <code className="rule">SONAR_HOST_URL</code>,
- }}
- />
- </li>
- <li className="big-spacer-bottom">
- <FormattedMessage
- defaultMessage={fieldValueTranslation}
- id="onboarding.tutorial.with.gitlab_ci.variables.step2"
- values={{
- extra: <ClipboardIconButton copyValue={baseUrl} />,
- field: <strong>{translate('onboarding.tutorial.env_variables.field')}</strong>,
- value: <code className="rule">{baseUrl}</code>,
- }}
- />
- </li>
- <li className="big-spacer-bottom">
- <FormattedMessage
- defaultMessage={translate('onboarding.tutorial.with.gitlab_ci.variables.step3')}
- id="onboarding.tutorial.with.gitlab_ci.variables.step3"
- values={{
- value: (
- <strong>
- {translate('onboarding.tutorial.with.gitlab_ci.variables.step3.value')}
- </strong>
- ),
- }}
- />
- </li>
- <li className="big-spacer-bottom">
- <FormattedMessage
- defaultMessage={translate(
- 'onboarding.tutorial.with.gitlab_ci.variables.section2.step4'
- )}
- id="onboarding.tutorial.with.gitlab_ci.variables.section2.step4"
- values={{
- value: (
- <strong>
- {translate(
- 'onboarding.tutorial.with.gitlab_ci.variables.section.step4.value'
- )}
- </strong>
- ),
- }}
- />
- </li>
- </ul>
-
- <Button className="big-spacer-bottom" onClick={props.onDone}>
- {translate('continue')}
- </Button>
- </li>
- </ol>
- </div>
+ <UnorderedList ticks className="sw-ml-10">
+ <UnorderedListItem>
+ <FormattedMessage
+ defaultMessage={fieldValueTranslation}
+ id="onboarding.tutorial.with.gitlab_ci.variables.step1"
+ values={{
+ extra: <ClipboardIconButton copyValue="SONAR_HOST_URL" />,
+ field: (
+ <span className="sw-body-sm-highlight">
+ {translate('onboarding.tutorial.with.gitlab_ci.variables.step1')}
+ </span>
+ ),
+ value: <InlineSnippet snippet="SONAR_HOST_URL" />,
+ }}
+ />
+ </UnorderedListItem>
+ <UnorderedListItem>
+ <FormattedMessage
+ defaultMessage={fieldValueTranslation}
+ id="onboarding.tutorial.with.gitlab_ci.variables.step2"
+ values={{
+ extra: <ClipboardIconButton copyValue={baseUrl} />,
+ field: (
+ <span className="sw-body-sm-highlight">
+ {translate('onboarding.tutorial.env_variables.field')}
+ </span>
+ ),
+ value: <InlineSnippet snippet={baseUrl} />,
+ }}
+ />
+ </UnorderedListItem>
+ <UnorderedListItem>
+ <FormattedMessage
+ defaultMessage={translate('onboarding.tutorial.with.gitlab_ci.variables.step3')}
+ id="onboarding.tutorial.with.gitlab_ci.variables.step3"
+ values={{
+ value: (
+ <span className="sw-body-sm-highlight">
+ {translate('onboarding.tutorial.with.gitlab_ci.variables.step3.value')}
+ </span>
+ ),
+ }}
+ />
+ </UnorderedListItem>
+ <UnorderedListItem>
+ <FormattedMessage
+ defaultMessage={translate(
+ 'onboarding.tutorial.with.gitlab_ci.variables.section2.step4'
+ )}
+ id="onboarding.tutorial.with.gitlab_ci.variables.section2.step4"
+ values={{
+ value: (
+ <span className="sw-body-sm-highlight">
+ {translate('onboarding.tutorial.with.gitlab_ci.variables.section.step4.value')}
+ </span>
+ ),
+ }}
+ />
+ </UnorderedListItem>
+ </UnorderedList>
+ </NumberedListItem>
+ </NumberedList>
);
return (
- <Step
- finished={finished}
- onOpen={props.onOpen}
- open={open}
- renderForm={renderForm}
- stepNumber={1}
- stepTitle={translate('onboarding.tutorial.with.gitlab_ci.variables.title')}
- />
+ <TutorialStep title={translate('onboarding.tutorial.with.gitlab_ci.variables.title')}>
+ {renderForm()}
+ </TutorialStep>
);
}
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+import { BasicSeparator, Title, TutorialStepList } from 'design-system';
import * as React from 'react';
import { translate } from '../../../helpers/l10n';
import { AlmKeys } from '../../../types/alm-settings';
import { Component } from '../../../types/types';
import { LoggedInUser } from '../../../types/users';
-import AllSetStep from '../components/AllSetStep';
+import AllSet from '../components/AllSet';
import EnvironmentVariablesStep from './EnvironmentVariablesStep';
import YmlFileStep from './YmlFileStep';
export default function GitLabCITutorial(props: GitLabCITutorialProps) {
const { baseUrl, component, currentUser, willRefreshAutomatically } = props;
- const [step, setStep] = React.useState(Steps.ENV_VARIABLES);
-
+ const [done, setDone] = React.useState<boolean>(false);
return (
<>
- <div className="page-header big-spacer-bottom">
- <h2 className="page-title">{translate('onboarding.tutorial.with.gitlab_ci.title')}</h2>
- </div>
+ <Title>{translate('onboarding.tutorial.with.gitlab_ci.title')}</Title>
- <EnvironmentVariablesStep
- baseUrl={baseUrl}
- component={component}
- currentUser={currentUser}
- finished={step > Steps.ENV_VARIABLES}
- onDone={() => setStep(Steps.YML)}
- onOpen={() => setStep(Steps.ENV_VARIABLES)}
- open={step === Steps.ENV_VARIABLES}
- />
+ <TutorialStepList className="sw-mb-8">
+ <EnvironmentVariablesStep
+ baseUrl={baseUrl}
+ component={component}
+ currentUser={currentUser}
+ />
- <YmlFileStep
- finished={step > Steps.YML}
- component={component}
- onDone={() => setStep(Steps.ALL_SET)}
- onOpen={() => setStep(Steps.YML)}
- open={step === Steps.YML}
- />
+ <YmlFileStep component={component} setDone={setDone} />
+ </TutorialStepList>
- <AllSetStep
- alm={AlmKeys.GitLab}
- open={step === Steps.ALL_SET}
- stepNumber={3}
- willRefreshAutomatically={willRefreshAutomatically}
- />
+ {done && (
+ <>
+ <BasicSeparator className="sw-my-10" />
+ <AllSet alm={AlmKeys.GitLab} willRefreshAutomatically={willRefreshAutomatically} />
+ </>
+ )}
</>
);
}
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
-import { FlagMessage } from 'design-system';
+import {
+ ClipboardIconButton,
+ CodeSnippet,
+ FlagMessage,
+ NumberedList,
+ NumberedListItem,
+ TutorialStep,
+} from 'design-system';
import * as React from 'react';
import { FormattedMessage } from 'react-intl';
import withAvailableFeatures, {
WithAvailableFeaturesProps,
} from '../../../app/components/available-features/withAvailableFeatures';
-import { ClipboardIconButton } from '../../../components/controls/clipboard';
import { GRADLE_SCANNER_VERSION } from '../../../helpers/constants';
import { translate } from '../../../helpers/l10n';
import { Component } from '../../../types/types';
-import CodeSnippet from '../../common/CodeSnippet';
import { withCLanguageFeature } from '../../hoc/withCLanguageFeature';
-import FinishButton from '../components/FinishButton';
import GithubCFamilyExampleRepositories from '../components/GithubCFamilyExampleRepositories';
import GradleBuildSelection from '../components/GradleBuildSelection';
+import { InlineSnippet } from '../components/InlineSnippet';
import RenderOptions from '../components/RenderOptions';
-import Step from '../components/Step';
import { BuildTools, GradleBuildDSL, TutorialModes } from '../types';
import PipeCommand from './commands/PipeCommand';
export interface YmlFileStepProps extends WithAvailableFeaturesProps {
component: Component;
- finished: boolean;
hasCLanguageFeature: boolean;
- onDone: () => void;
- onOpen: () => void;
- open: boolean;
+ setDone: (doneStatus: boolean) => void;
}
const mavenSnippet = (key: string, name: string) => `<properties>
};
export function YmlFileStep(props: YmlFileStepProps) {
- const { component, hasCLanguageFeature, finished, open } = props;
+ const { component, hasCLanguageFeature } = props;
const [buildTool, setBuildTool] = React.useState<BuildTools>();
buildTools.push(BuildTools.Other);
const renderForm = () => (
- <div className="boxed-group-inner">
- <ol className="list-styled">
- <li>
- {translate('onboarding.build')}
-
- <RenderOptions
- checked={buildTool}
- label={translate('onboarding.build')}
- onCheck={setBuildTool as (key: string) => void}
- optionLabelKey="onboarding.build"
- options={buildTools}
+ <NumberedList>
+ <NumberedListItem>
+ {translate('onboarding.build')}
+
+ <RenderOptions
+ checked={buildTool}
+ label={translate('onboarding.build')}
+ onCheck={setBuildTool as (key: string) => void}
+ optionLabelKey="onboarding.build"
+ options={buildTools}
+ setDone={props.setDone}
+ />
+
+ {buildTool === BuildTools.CFamily && (
+ <GithubCFamilyExampleRepositories
+ ci={TutorialModes.GitLabCI}
+ className="sw-my-4 sw-bg-inherit sw-w-abs-600"
/>
-
- {buildTool === BuildTools.CFamily && (
- <GithubCFamilyExampleRepositories
- ci={TutorialModes.GitLabCI}
- className="sw-mb-4 sw-mt-4 sw-w-[600px]"
- />
- )}
- </li>
-
- {buildTool !== undefined &&
- buildTool !== BuildTools.CFamily &&
- buildTool !== BuildTools.DotNet && (
- <li className="sw-w-[600px]">
- <FormattedMessage
- defaultMessage={translate(
- `onboarding.tutorial.with.gitlab_ci.project_key.${buildTool}.step2`
- )}
- id={`onboarding.tutorial.with.gitlab_ci.project_key.${buildTool}.step2`}
- values={Object.assign(
- {
- file: (
- <>
- <code className="rule">{filenameForBuildTool[buildTool]}</code>
-
- <ClipboardIconButton
- className="little-spacer-left"
- copyValue={filenameForBuildTool[buildTool]}
- />
- </>
- ),
- },
- buildTool === BuildTools.Gradle
- ? {
- file2: (
- <>
- <code className="rule">{GradleBuildDSL.Kotlin}</code>
-
- <ClipboardIconButton
- className="sw-ml-1"
- copyValue={GradleBuildDSL.Kotlin}
- />
- </>
- ),
- }
- : {}
- )}
- />
-
- {buildTool === BuildTools.Gradle ? (
- <GradleBuildSelection className="sw-mb-4 sw-mt-2">
- {(build) => (
- <CodeSnippet
- snippet={snippetForBuildTool[buildTool](component.key, component.name, build)}
- />
- )}
- </GradleBuildSelection>
- ) : (
- <CodeSnippet
- snippet={snippetForBuildTool[buildTool](component.key, component.name)}
- />
+ )}
+ </NumberedListItem>
+
+ {buildTool !== undefined &&
+ buildTool !== BuildTools.CFamily &&
+ buildTool !== BuildTools.DotNet && (
+ <NumberedListItem>
+ <FormattedMessage
+ defaultMessage={translate(
+ `onboarding.tutorial.with.gitlab_ci.project_key.${buildTool}.step2`
)}
- </li>
- )}
-
- {buildTool && (
- <li className="sw-w-[600px]">
- {buildTool !== BuildTools.CFamily && (
- <>
- <div className="sw-mb-4">
- <FormattedMessage
- defaultMessage={translate(
- 'onboarding.tutorial.with.gitlab_ci.yaml.description'
- )}
- id="onboarding.tutorial.with.gitlab_ci.yaml.description"
- values={{
- filename: (
+ id={`onboarding.tutorial.with.gitlab_ci.project_key.${buildTool}.step2`}
+ values={Object.assign(
+ {
+ file: (
+ <>
+ <InlineSnippet snippet={filenameForBuildTool[buildTool]} />
+
+ <ClipboardIconButton
+ className="sw-ml-2"
+ copyValue={filenameForBuildTool[buildTool]}
+ />
+ </>
+ ),
+ },
+ buildTool === BuildTools.Gradle
+ ? {
+ file2: (
<>
- <code className="rule">
- {translate('onboarding.tutorial.with.gitlab_ci.yaml.filename')}
- </code>
+ <InlineSnippet snippet={GradleBuildDSL.Kotlin} />
<ClipboardIconButton
- className="sw-ml-1"
- copyValue={translate(
- 'onboarding.tutorial.with.gitlab_ci.yaml.filename'
- )}
+ className="sw-ml-2"
+ copyValue={GradleBuildDSL.Kotlin}
/>
</>
),
- }}
+ }
+ : {}
+ )}
+ />
+ {buildTool === BuildTools.Gradle ? (
+ <GradleBuildSelection className="sw-mb-4 sw-mt-2">
+ {(build) => (
+ <CodeSnippet
+ className="sw-p-6 sw-overflow-auto"
+ language="yml"
+ snippet={snippetForBuildTool[buildTool](component.key, component.name, build)}
/>
- </div>
+ )}
+ </GradleBuildSelection>
+ ) : (
+ <CodeSnippet
+ className="sw-p-6 sw-overflow-auto"
+ language="yml"
+ snippet={snippetForBuildTool[buildTool](component.key, component.name)}
+ />
+ )}
+ </NumberedListItem>
+ )}
- <div className="sw-mb-4 sw-w-[600px]">
- <PipeCommand buildTool={buildTool} projectKey={component.key} />
- </div>
+ {buildTool && (
+ <>
+ {buildTool !== BuildTools.CFamily && (
+ <NumberedListItem>
+ <FormattedMessage
+ defaultMessage={translate('onboarding.tutorial.with.gitlab_ci.yaml.description')}
+ id="onboarding.tutorial.with.gitlab_ci.yaml.description"
+ values={{
+ filename: (
+ <>
+ <InlineSnippet
+ snippet={translate('onboarding.tutorial.with.gitlab_ci.yaml.filename')}
+ />
+
+ <ClipboardIconButton
+ className="sw-ml-2"
+ copyValue={translate('onboarding.tutorial.with.gitlab_ci.yaml.filename')}
+ />
+ </>
+ ),
+ }}
+ />
- <FlagMessage className="sw-mb-4" variant="warning">
- {translate('onboarding.tutorial.with.gitlab_ci.yaml.premium')}
- </FlagMessage>
+ <PipeCommand buildTool={buildTool} projectKey={component.key} />
- <p className="sw-mb-1">
- {translate('onboarding.tutorial.with.gitlab_ci.yaml.baseconfig')}
- </p>
+ <FlagMessage className="sw-mb-4 sw-mt-2" variant="warning">
+ {translate('onboarding.tutorial.with.gitlab_ci.yaml.premium')}
+ </FlagMessage>
- <p>{translate('onboarding.tutorial.with.gitlab_ci.yaml.existing')}</p>
- </>
- )}
- <FinishButton onClick={props.onDone} />
- </li>
- )}
- </ol>
- </div>
+ <p className="sw-mb-1">
+ {translate('onboarding.tutorial.with.gitlab_ci.yaml.baseconfig')}
+ </p>
+
+ <p>{translate('onboarding.tutorial.with.gitlab_ci.yaml.existing')}</p>
+ </NumberedListItem>
+ )}
+ </>
+ )}
+ </NumberedList>
);
return (
- <Step
- finished={finished}
- onOpen={props.onOpen}
- open={open}
- renderForm={renderForm}
- stepNumber={2}
- stepTitle={translate('onboarding.tutorial.with.gitlab_ci.yaml.title')}
- />
+ <TutorialStep title={translate('onboarding.tutorial.with.gitlab_ci.yaml.title')}>
+ {renderForm()}
+ </TutorialStep>
);
}
expect(await ui.secretsStepTitle.find()).toBeInTheDocument();
// Env variables step
- expect(getCopyToClipboardValue()).toMatchSnapshot('sonar token key');
- expect(getCopyToClipboardValue(1)).toMatchSnapshot('sonarqube host url key');
- expect(getCopyToClipboardValue(2)).toMatchSnapshot('sonarqube host url value');
- await user.click(ui.continueButton.get());
+ expect(getCopyToClipboardValue(0, 'Copy to clipboard')).toMatchSnapshot('sonar token key');
+ expect(getCopyToClipboardValue(1, 'Copy to clipboard')).toMatchSnapshot('sonarqube host url key');
+ expect(getCopyToClipboardValue(2, 'Copy to clipboard')).toMatchSnapshot(
+ 'sonarqube host url value'
+ );
// Create/update configuration file step
// Maven
await user.click(ui.mavenBuildButton.get());
- expect(getCopyToClipboardValue(1)).toMatchSnapshot('Maven: pom.xml');
- expect(getCopyToClipboardValue(3)).toMatchSnapshot('Maven: gitlab-ci.yml');
+ expect(getCopyToClipboardValue(0, 'Copy')).toMatchSnapshot('Maven: pom.xml');
+ expect(getCopyToClipboardValue(1, 'Copy')).toMatchSnapshot('Maven: gitlab-ci.yml');
// Gradle
await user.click(ui.gradleBuildButton.get());
- expect(getCopyToClipboardValue(2)).toMatchSnapshot('Groovy: build.gradle');
+ expect(getCopyToClipboardValue(0, 'Copy')).toMatchSnapshot('Groovy: build.gradle');
await user.click(ui.gradleDSLButton(GradleBuildDSL.Kotlin).get());
- expect(getCopyToClipboardValue(2)).toMatchSnapshot('Kotlin: build.gradle.kts');
- expect(getCopyToClipboardValue(4)).toMatchSnapshot('Gradle: gitlab-ci.yml');
+ expect(getCopyToClipboardValue(0, 'Copy')).toMatchSnapshot('Kotlin: build.gradle.kts');
+ expect(getCopyToClipboardValue(1, 'Copy')).toMatchSnapshot('Gradle: gitlab-ci.yml');
// .NET
await user.click(ui.dotnetBuildButton.get());
- expect(getCopyToClipboardValue(1)).toMatchSnapshot('.NET: gitlab-ci.yml');
+ expect(getCopyToClipboardValue(0, 'Copy')).toMatchSnapshot('.NET: gitlab-ci.yml');
// Other
await user.click(ui.otherBuildButton.get());
- expect(getCopyToClipboardValue(1)).toMatchSnapshot('Other: sonar-project.properties');
- expect(getCopyToClipboardValue(3)).toMatchSnapshot('Other: gitlab-ci.yml');
+ expect(getCopyToClipboardValue(0, 'Copy')).toMatchSnapshot('Other: sonar-project.properties');
+ expect(getCopyToClipboardValue(1, 'Copy')).toMatchSnapshot('Other: gitlab-ci.yml');
- await user.click(ui.finishTutorialButton.get());
expect(ui.allSetSentence.get()).toBeInTheDocument();
});
// Generate token
await user.click(ui.genTokenDialogButton.get());
await user.click(ui.generateTokenButton.get());
- expect(getCopyToClipboardValue(3)).toEqual('generatedtoken2');
+ expect(getCopyToClipboardValue()).toEqual('generatedtoken2');
// Revoke current token and create new one
await user.click(ui.deleteTokenButton.get());
await selectEvent.select(ui.expiresInSelect.get(), 'users.tokens.expiration.365');
await user.click(ui.generateTokenButton.get());
expect(ui.tokenValue.get()).toBeInTheDocument();
- await user.click(ui.continueButton.getAll()[1]);
+ await user.click(ui.continueButton.getAll()[0]);
expect(ui.tokenValue.query()).not.toBeInTheDocument();
});
-it('navigates between steps', async () => {
- const user = userEvent.setup();
- renderGitLabTutorial();
-
- await user.click(await ui.continueButton.find());
- await user.click(ui.mavenBuildButton.get());
- await user.click(ui.finishTutorialButton.get());
- expect(ui.allSetSentence.get()).toBeInTheDocument();
-
- await user.click(ui.ymlFileStepTitle.get());
- expect(ui.finishTutorialButton.get()).toBeInTheDocument();
- await user.click(ui.secretsStepTitle.get());
- expect(ui.continueButton.get()).toBeInTheDocument();
-});
-
function renderGitLabTutorial(
overrides: Partial<GitLabCITutorialProps> = {},
{ languages = { c: mockLanguage({ key: 'c' }) } }: RenderContext = {}
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+import { CodeSnippet } from 'design-system';
import * as React from 'react';
-import CodeSnippet from '../../../common/CodeSnippet';
import { BuildTools } from '../../types';
export interface PipeCommandProps {
- sonarqube-check
`;
- return <CodeSnippet snippet={command} />;
+ return <CodeSnippet className="sw-p-6 sw-overflow-auto" snippet={command} language="yml" />;
}
onboarding.tutorial.with.yaml.gradle=Update your {groovy} or {kotlin} file with the {sq} plugin and its configuration:
-
+onboarding.tutorial.with.bitbucket_ci.title=Analyze your project with Bitbucket CI
onboarding.tutorial.with.bitbucket_pipelines.variables.title=Create repository variables
onboarding.tutorial.with.bitbucket_pipelines.yaml.title=Create your pipelines builds configuration
onboarding.tutorial.with.bitbucket_pipelines.variables.intro=In your Bitbucket repository, go to {repository_variables} and create two new variables:
onboarding.tutorial.with.bitbucket_pipelines.variables.secured.sentence=Make sure {secured} is check.
onboarding.tutorial.with.bitbucket_pipelines.variables.secured.sentence.secured=Secured
+onboarding.tutorial.with.github_ci.title=Analyze your project with GitHub CI
onboarding.tutorial.with.github_action.create_secret.title=Create GitHub Secrets
onboarding.tutorial.with.github_action.secret.intro=In your GitHub repository, go to {settings_secret} and create two new secrets:
onboarding.tutorial.with.github_action.secret.intro.link=Settings > Secrets
projects / sonarqube.git / commitdiff